Làm thế nào để xây dựng một trang web từ Scratch với Dreamweaver

Trong một thế giới của các nhà xây dựng trang web kéo và thả, Adobe Dreamweaver đã làm rất tốt để giữ được sự phù hợp trong bối cảnh cạnh tranh. Được đóng gói với các tính năng tuyệt vời và vô số công cụ giúp cuộc sống của bạn trở nên dễ dàng, phần mềm này là một lựa chọn tuyệt vời cho các nhà thiết kế và phát triển web.

Nhưng làm thế nào để bạn xây dựng trang web đầu tiên của mình bằng Dreamweaver?

Bắt đầu với Dreamweaver

Bạn cần có một bản sao của Adobe Dreamweaver trước khi có thể bắt đầu làm việc với nó, nhưng bản dùng thử miễn phí hiện có sẵn.

Truy cập trang web của Adobe, đăng nhập hoặc đăng ký tài khoản và tải xuống công cụ Adobe Creative Cloud để bắt đầu. Từ đây, bạn có thể tải xuống Adobe Dreamweaver và bắt đầu với hướng dẫn đầy đủ.

Hướng dẫn này sẽ chỉ cho bạn cách tạo một trang web cơ bản bằng cách sử dụng các tệp mẫu Dreamweaver làm cơ sở của nó. Bạn có thể tìm thấy các tệp dự án đầy đủ trên kho lưu trữ GitHub này.

Bước 1: Tạo trang web Dreamweaver

Mở Adobe Dreamweaver và đi tới Địa điểm ở đầu trang. Lựa chọn Trang web mớisau đó chọn tên cho trang web của bạn và chọn vị trí tệp cho nó.

Bước 2: Tạo tệp mẫu

Tiếp theo, đã đến lúc tạo tệp mẫu cho trang web mới của bạn. Các tệp mẫu hoạt động tương tự như các chủ đề được sử dụng bởi các hệ thống CMS như WordPress và Shopify, chỉ có bạn tự tạo chúng.

Bấm vào Tạo mới hoặc đi đến Tập tin > Mới và lựa chọn Mẫu HTML từ loại tài liệu danh sách.

Điều này sẽ tạo ra một mẫu cơ bản với một số HTML đã có sẵn. Bạn sẽ sử dụng HTML này cho dự án của mình, vì vậy bạn nên giữ nó tại chỗ cho các bước tiếp theo.

​​​​​​

Bây giờ đã đến lúc xây dựng phần menu / tiêu đề trên trang web trong mẫu bạn vừa tạo. Đi đến Chèn ở đầu màn hình và chọn Tiêu đề từ danh sách.

Một hộp thoại sẽ mở ra tại thời điểm này. Thêm tên cho lớp tiêu đề mới của bạn và nhấp vào ĐƯỢC RỒI để thêm mã vào HTML của bạn. Nó sẽ tự động đặt mã mới trong nhưng bạn có thể di chuyển nó nếu cần.

Sau đó, bạn cũng nên thêm phần tử div cho biểu trưng của trang web và phần tử điều hướng cho menu của trang web. Đi đến Chèn menu và chọn Divsau đó quay lại Chèn menu và chọn Điều hướng. Cả hai phần tử này đều cần có tên lớp riêng của chúng.

Là giai đoạn cuối cùng trong quá trình này, chúng tôi đã thêm một số tùy chọn menu vào phần tử điều hướng của chúng tôi. Để làm điều này, hãy truy cập Chèn và chọn Siêu liên kết. Chúng tôi đã thêm năm siêu liên kết vào tiêu đề trang web của mình: Home, Lion, Tiger, Jaguar và House Cat.

Các trang sẽ có liên kết trong tiêu đề chưa tồn tại, vì vậy hãy để href thuộc tính trống cho đến khi bạn tạo chúng.

Bước 4: Thêm Biểu định kiểu cho CSS

Như bạn có thể thấy, trang web này trông không đẹp lắm. Một chút CSS sẽ giải quyết được vấn đề này và bạn có thể thêm một biểu định kiểu một cách dễ dàng trong Dreamweaver. Đi đến Trình thiết kế CSS ở bên phải của màn hình và nhấp vào Thêm bên cạnh Nguồn. Bạn chỉ cần chọn tên cho biểu định kiểu của mình và có thể để nguyên các cài đặt còn lại.

Điều đầu tiên cần làm là biến tiêu đề thành một hộp linh hoạt. Flexbox chỉ là một cách tạo ra một trang web bằng CSS. Bên cạnh đó, phông chữ của trang web được đặt, nền đen được đặt và một số thay đổi khác được thực hiện để làm cho trang web trông đẹp hơn. Bạn có thể xem toàn bộ mã CSS ở cuối bài viết.

Bước 5: Thêm các vùng có thể chỉnh sửa vào mẫu

Các vùng có thể chỉnh sửa tạo ra các phần HTML có thể chỉnh sửa được khi bạn sử dụng mẫu để tạo các trang khác. Nội dung trang chính của chúng tôi hoàn toàn phù hợp với một khu vực như thế này. Đi đến Chèn > Mẫu > Vùng có thể chỉnh sửa để thêm một khu vực có thể chỉnh sửa vào trang của bạn.

Bước 6: Thêm Nội dung Hình ảnh / Văn bản vào Mẫu

Vùng có thể chỉnh sửa mà bạn vừa thêm có thể sử dụng được mà không cần thêm HTML nào, nhưng bạn vẫn có thể thêm một số vùng để chỉnh sửa khi tạo các trang riêng lẻ. Để bắt đầu, hãy truy cập Chèn và chọn Div để thêm một phần tử div mới vào trang web của bạn.

Điều này sẽ vừa là nơi chứa nội dung văn bản trên trang, vừa là nơi để thêm hình nền. Phần tử này có một lớp và một ID để các trang khác nhau có các thuộc tính CSS khác nhau. Những mẫu nền CSS độc đáo này rất tuyệt nếu bạn muốn đưa trang web Dreamweaver của mình lên một tầm cao mới.

Tiếp theo, đi tới Chèn > Đề mục > H1 để thêm tiêu đề bên trong phần tử div mà bạn vừa thêm. Cả hai yếu tố này đều cần một số CSS để hoạt động bình thường. Div có các giá trị hình nền, kích thước nền và chiều cao. Đi đến Tập tin > Lưu tất cả để đảm bảo rằng mẫu của bạn cập nhật.

​​​​​​

Bạn có thể thêm hình ảnh từ bất kỳ đâu trên mạng cục bộ hoặc internet của mình, nhưng tốt nhất bạn nên lưu hình ảnh trong tệp riêng của trang web để dễ dàng truy cập.

Bước 7: Thêm trang bằng mẫu

Bây giờ bạn đã có mẫu, bạn có thể bắt đầu thêm một số trang. Đi đến Tập tin > Mới và chọn HTML Dưới loại tài liệu. Thêm một Tiêu đề cho mỗi trang mà bạn thêm trước khi nhấn Tạo ra.

Trang mới màu trắng và chưa có mẫu của chúng tôi. Sau khi trang mới của bạn được mở trong Dreamweaver, hãy truy cập Công cụ > Mẫu và nhấp vào Áp dụng Mẫu cho Trang. Chọn mẫu của bạn từ danh sách và nhấp vào Lựa chọn để tải mẫu của bạn. Cuối cùng, đi đến Tập tin > Lưu thành và chọn tên cho trang mới của bạn trước khi lưu nó.

Lặp lại quá trình này cho đến khi bạn có đủ trang đáp ứng nhu cầu của mình. Bạn không cần phải dính vào một mẫu duy nhất cho việc này; bạn có thể thêm những cái mới cho các bố cục trang khác nhau.

Bước 8: Thêm liên kết trang vào mẫu

Với các trang của bạn được thêm vào, bạn có thể thay đổi các liên kết điều hướng trong mẫu của mình để chúng liên kết đến các trang phù hợp. Quay lại mẫu của bạn và tìm các thẻ A mà bạn đã thêm trước đó. Xóa liên kết giữ chỗ và nhấp vào dấu ngoặc kép để mở Duyệt qua thực đơn. Từ đây, bạn có thể chọn trang chính xác cho mỗi liên kết của mình.

Bước 9: Sửa CSS / HTML trên các trang mới

Mỗi trang sẽ trông giống nhau tại thời điểm này. Có một số bước cần thực hiện để đảm bảo rằng chúng có nội dung riêng; làm theo các bước bên dưới để hoàn tất trang web mới của bạn.

• Thay đổi ID phần tử div nội dung trên mỗi trang để phản ánh tiêu đề trang
• Thêm mã CSS cho ID phần tử mới với hình nền khác
• Thay đổi tiêu đề trên mỗi trang

Bước 10: Kiểm tra trang web trong trình duyệt của bạn

Bạn có thể kiểm tra trang web mới của mình trong trình duyệt web bạn chọn trực tiếp từ Adobe Dreamweaver. Đi đến Tập tin > Xem trước thời gian thực và chọn trình duyệt bạn chọn để xem trang web của bạn. Điều này rất tốt để kiểm tra CSS hoặc mã khác không tương thích với mọi trình duyệt.

Bây giờ bạn chỉ cần một nơi nào đó để lưu trữ trang web của bạn. Lưu trữ một trang web tĩnh với AWS S3 là một nơi tuyệt vời để bắt đầu.

Mã HTML và CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="main-header">
<div class="site-logo">smartreviewaz Example Site</div>
<nav class="main-menu">
<a href="../Home.html">Home</a><a href="../Lion.html">Lion</a><a href="../Tiger.html">Tiger</a><a href="../Jaguar.html">Jaguar</a><a href="../House Cat.html">House Cat</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div class="main-content" id="lion">
<h1>This is a lion!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>

HTML này xây dựng trang web hoàn chỉnh cho dự án của chúng tôi. Bạn có thể tách nó ra để xem nó hoạt động như thế nào, nhưng chúng tôi khuyến khích bạn tạo HTML của riêng mình cho trang web của bạn.

@charset "utf-8";
body {
margin: 0;
background: black;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.main-header {
display: flex;
background: black;
padding: 20px;
}
.site-logo {
width: 30%;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.main-menu {
width: 70%;
text-align: right;
}
.main-menu a {
padding: 10px;
text-decoration: none;
color: white;
}
.main-content {
height: 100vh;
padding: 20px;
background-size: cover;
}
.main-content h1 {
color: white;
font-size: 10rem;
text-transform: uppercase; 
}
background-image: url("Images/largelion.png");
}
background-image: url("Images/tiger.png");
}
background-image: url("Images/jaguar.png");
}
background-image: url("Images/housecat.png");
}
background-image: url("Images/loadsofcats.png");
}

CSS này cũng là một phần của dự án đã hoàn thành. Giống như HTML mà chúng tôi đã đề cập, bạn có thể sử dụng mã này để biến trang web này thành của riêng bạn.

Xây dựng trang web với Adobe Dreamweaver

Dreamweaver có vẻ không dễ sử dụng như các công cụ như WordPress hoặc Squarespace, nhưng nó cung cấp cho bạn nhiều sức mạnh hơn. Hướng dẫn này là một điểm khởi đầu tuyệt vời, nhưng còn rất nhiều điều phải học và rất đáng để bạn tự khám phá Dreamweaver.