Bước 1: Vào File -->New -->Chọn như hình bên dưới:
Bước 2: Lưu file
template mới với tên file-mau.dwt
Sau khi lưu trong dự án sẽ có thư mục Template, bên trong có
file-mau.dwt
Nội dung file-mau.dwt sau khi tạo:
Bước 3: Trong tệp tin file-mau.dwt tạo nội dung như
sau:
<!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- TemplateBeginEditable name="doctitle" --><title>Untitled Document</title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><link href="../myCSS.css" rel="stylesheet" type="text/css" /></head><body><div class="grid-container"><div class="item1"><h1>Chania</h1></div><div class="item2"><ul><li><a href="../Trang-chu.html">Trang chủ</a></li><li><a href="../gioi-thieu.html">Giới thiệu</a></li><li>The Island</li><li>The Food</li></ul></div><div class="item3"><!-- TemplateBeginEditable name="VungChinhSua" --><h1>Chinh sua.</h1><!-- TemplateEndEditable --></div><div class="item4"><h2>Facts:</h2><ul><li>Chania is a city on the island of Crete</li><li>Crete is a Greek island in the Mediterranean Sea</li></ul></div><div class="item5"><p>Resize the browser window to see how the content respond to the resizing.</p></div></div></body></html>
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Lucida Sans", sans-serif;
}
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'footer footer footer footer footer footer';
gap: 10px;
background-color: white;
padding: 10px;
}
.grid-container > div {
padding: 10px;
font-size: 16px;
}
.item1 {
grid-area: header;
background-color: purple;
text-align: center;
color: #ffffff;
}
.item1 > h1 {
font-size: 40px;
}
.item2 {
grid-area: menu;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
}
.item2 li:hover {
background-color: #0099cc;
}
.item3 {
grid-area: main;
}
.item3 > h1 {
font-size: 30px;
margin-bottom: 7px;
}
.item3 > p {
margin-bottom: 7px;
}
.item4 {
grid-area: right;
border: 2px solid #0099cc;
background-color: white;
padding: 15px;
color: #000000;
}
.item4 > h2 {
font-size: 20px;
padding-bottom: 10px;
}
.item4 li {
padding: 5px;
margin-bottom: 5px;
}
.item5 {
grid-area: footer;
background-color: #0099cc;
color: #ffffff;
text-align: center;
}
@media only screen and (max-width: 600px) {
.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 6;}
.item3 {grid-area: 3 / span 6;}
.item4 {grid-area: 4 / span 6;}
.item5 {grid-area: 5 / span 6;}
}
.menu-ngang{
display: block;
float: right;
}
.box-san-pham {
margin: 5px;
padding: 5px;
float: left;
height: 250px;
width: 250px;
border: thin solid #03C;
}
=============
Tham khảo Link giao diện đa nền tảng: https://www.vnkha.com/2025/02/css-responsive-responsive-web-design.html#google_vignette
Bước 4: Tạo vùng chỉnh sửa trong file-mau.dwt: Chọn vùng chỉnh sửa như hình bên dưới:
-->Chọn như hình bên dưới:
Bước 5: Tạo các
trang mới sau từ file-mau.dwt:
1. trang-chu.html
2. gioi-thieu.html
3. lien-he.html
4. tivi.html
5. tu-lanh.html
6. may-quat.html
Ví dụ: tạo trang-chu.html. Vào file àNew àChọn
như hình bên dưới:
-->Sau đó lưu lại với tên index.tml
Tiếp theo tạo siêu
liên kết đế trang chủ trong file-mau.dwt
Mở file-mau.dwt -->Chọn
chữ Trang chủ -->chọn
như hình bên dưới:
-->Sau đó chọn theo như hình bên dưới:
-->Nháy OK được
kết quả như sau:
-->Nhấn phím Ctrl+S để lưu lại và chọn như sau:
Các file còn lại: gioi-thieu.html, lien-he.html, tivi.html, tu-lanh.html, may-quat.html làm như ví dụ trên
<h1>Các mẫu Tivi mới nhất</h1>
<div>
<div class = "box-san-pham">
<div><img src="hinh/iphone-11.jpg" width="189" height="153"></div>
<div>Tên sản phẩm: Tivi Sam sung</div>
<div>Giá: 10.000.000đ</div>
<div><a href="mua-hang.html">Mua hàng</a> | <a href="tivi-samsung.html">Xem chi tiết</a></div>
</div>
<div class = "box-san-pham">
<div><img src="hinh/iphone-11.jpg" width="189" height="153"></div>
<div>Tên sản phẩm: Tivi LG</div>
<div>Giá: 10.000.000đ</div>
<div><a href="mua-hang.html">Mua hàng</a> | <a href="tivi-samsung.html">Xem chi tiết</a></div>
</div>
<div class = "box-san-pham">
<div><img src="hinh/iphone-11.jpg" width="189" height="153"></div>
<div>Tên sản phẩm: Tivi Sony</div>
<div>Giá: 10.000.000đ</div>
<div><a href="mua-hang.html">Mua hàng</a> | <a href="tivi-samsung.html">Xem chi tiết</a></div>
</div>
</div>