cách thiết kế bố cục cho trang web trong HTML
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (48.23 KB, 4 trang )
Layout - Cách thiết kế bố cục cho trang web trong HTML
webcoban.vn/html/layout-cach-thiet-ke-bo-cuc-cho-trang-web-trong-html.html
Bài 01: Một số kiến thức cơ bản về HTML
Layout là gì?
Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang
web.
Một trang web thường gồm các thành phần chính như:
Header: Giới thiệu logo, một vài câu khẩu hiệu của trang web
Footer: Thông tin bản quyền của trang web
Menu: Thanh chức năng
Nội dung
....
Ví dụ, dưới đây là một mẫu Layout cơ bản gồm 4 thành phần: Header, Footer, Menu, Nội
dung.
WEB CƠ BẢN .VN
Hướng dẫn học lập trình web từ cơ bản đến nâng cao
- Bài 01: Tên bài học
- Bài 02: Tên bài học
- Bài 03: Tên bài học
- Bài 04: Tên bài học
- Bài 05: Tên bài học
- Bài 06: Tên bài học
- Bài 07: Tên bài học
- Bài 08: Tên bài học
- Bài 09: Tên bài học
- Bài 10: Tên bài học
- Bài 11: Tên bài học
- Bài 12: Tên bài học
Layout là gì?
Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang
web.
Một trang web thường gồm các thành phần chính như:
Header: Giới thiệu logo, một vài khẩu hiệu của trang web
1/4
Footer: Thông tin bản quyền của trang web
Menu: Thanh chức năng
Nội dung
....
©2016 Web cơ bản All Rights Reserved
Cách thiết kế Layout
Trong việc thiết kế Layout, thẻ <div> thường được dùng để phân chia các thành phần
chính của trang web.
Trong mỗi thành phần chính, ta có thể thêm các thẻ <div> khác cho thành phần nhỏ hơn.
Kết hợp với thuộc tính định dạng CSS, ta có thể thiết kế được Layout như ý.
Ở bài này, tôi sẽ hướng dẫn bạn cách thiết kế một Layout đơn giản như sau: (Hoặc xem
Layout cụ thể tại đây)
WEB CƠ BẢN .VN
Hướng dẫn học lập trình web từ cơ bản đến nâng cao
Layout là gì?
Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang
web.
Một trang web thường gồm các thành phần chính như:
Header: Giới thiệu logo, một vài khẩu hiệu của trang web
Footer: Thông tin bản quyền của trang web
Menu: Thanh chức năng
Nội dung
....
©2016 Web cơ bản All Rights Reserved
Code Layout
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin:0px;
}
#container{
2/4
width:800px;
border:1px solid gray;
margin-left:auto;
margin-right:auto;
}
#header{
background-color:#73ad21;
color:white;
}
#content{
margin:15px;
}
#footer{
background-color:#ddd;
font-size:18px;
text-align:center;
padding:15px;
}
.title1{
font-size:30px;
text-align:center;
padding-top:15px;
}
.title2{
text-align:center;
font-size:18px;
padding-top:5px;
padding-bottom:15px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="title1">WEB CƠ BẢN .VN</div>
<div class="title2">Hướng dẫn học lập trình web từ cơ bản đến nâng cao</div>
</div>
<div id="content">
Layout là gì?
Một trang web thường gồm các thành phần chính như:
<ul type="circle">
<li>Header: Giới thiệu logo, một vài khẩu hiệu của trang web</li>
<li>Footer: Thông tin bản quyền của trang web</li>
<li>Menu: Thanh chức năng</li>
<li>Nội dung</li>
<li>....</li>
</ul>
</div>
<div id="footer">©2016 Web cơ bản All Rights Reserved</div>
</div>
</body>
</html>
Xem ví dụ
3/4
Giải thích đoạn mã
Layout gồm 3 thành phần chính: header, content, footer.
Thêm một thành phần container dùng để làm thùng chứa cho header, content, footer.
header
content
footer
Trong CSS, ta thiết lập chiều rộng cho khối container là 800px. Dùng thuộc tính marginleft và margin-right để canh cho khối container nằm ở giữa màn hình.
Bài 01: Một số kiến thức cơ bản về HTML
4/4
