Tài liệu trình bày về các kiểu bố cục trang web, bao gồm các loại bố cục như bố cục tuyệt đối, tương đối, cố định, đàn hồi và lỏng. Nó cũng đề cập đến tầm quan trọng của việc thiết kế bố cục bằng HTML và CSS, cùng với các ví dụ minh họa. Việc sử dụng các thành phần như <div> và <table> để tạo bố cục cũng được nhấn mạnh.

1. Bài 7
BỐ CỤC TRANG WEB

2. NHẮC LẠI BÀI TRƯỚC
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
Bài 7 - Bố cục trang web

3. MỤC TIÊU BÀI HỌC
Web layout:
Khái niệm
Một số layout thông dụng
HTML layout
Web layout:
Khái niệm
Một số layout thông dụng
HTML layout
Bài 7 - Bố cục trang web

4. WEB LAYOUT

5. WEB LAYOUT
Bố cục web là cách trình bày các thành phần con
trên trang web
Nội dung của web được trình bày thông qua các cột
trên trang
Vấn đề khi thiết kế web: Sử dụng kích thước đo
lường về chiều rộng và chiều cao của web
Bố cục web là cách trình bày các thành phần con
trên trang web
Nội dung của web được trình bày thông qua các cột
trên trang
Vấn đề khi thiết kế web: Sử dụng kích thước đo
lường về chiều rộng và chiều cao của web
Bài 7 - Bố cục trang web

6. WEB LAYOUT
10 kiểu bố cục web:
Bài 7 - Bố cục trang web

7. WEB LAYOUT
Absolute Layouts (bố cục tuyệt đối):
Được sử dụng ít nhất
Sử dụng các đơn vị đo tuyệt đối: i.e. inches, cm, mm
và picas, pt
Định vị chính xác được các box con trên web
Bố cục này hạn chế trong việc thiết kế web
Absolute Layouts (bố cục tuyệt đối):
Được sử dụng ít nhất
Sử dụng các đơn vị đo tuyệt đối: i.e. inches, cm, mm
và picas, pt
Định vị chính xác được các box con trên web
Bố cục này hạn chế trong việc thiết kế web
Bài 7 - Bố cục trang web

8. WEB LAYOUT
Relative Layout (bố cục tương đối):
Vị trí và kích thước của các box con trên trang tuỳ
thuộc vào khung hình trình duyệt của người dùng
Thông thường đặt chiều rộng (width): 100%
Sử dụng đơn vị đo lường tương đối: %
Relative Layout (bố cục tương đối):
Vị trí và kích thước của các box con trên trang tuỳ
thuộc vào khung hình trình duyệt của người dùng
Thông thường đặt chiều rộng (width): 100%
Sử dụng đơn vị đo lường tương đối: %
Bài 7 - Bố cục trang web

9. WEB LAYOUT
Fixed Layout (bố cục cố định):
Là phương pháp linh hoạt nhất để thiết kế bố cục
web
Xây dựng dựa trên đơn vị đo lường điểm ảnh (pixel –
px)
Fixed Layout (bố cục cố định):
Là phương pháp linh hoạt nhất để thiết kế bố cục
web
Xây dựng dựa trên đơn vị đo lường điểm ảnh (pixel –
px)
Bài 7 - Bố cục trang web

10. WEB LAYOUT
Elastic Layout (bố cục đàn hồi):
Bố cục được đánh giá cao trong thiết kế web do khả
năng mở rộng nội dung, kích thước chữ
Sử dụng đơn vị đo lường em
Elastic Layout (bố cục đàn hồi):
Bố cục được đánh giá cao trong thiết kế web do khả
năng mở rộng nội dung, kích thước chữ
Sử dụng đơn vị đo lường em
Bài 7 - Bố cục trang web

11. WEB LAYOUT
Scaled Layout (bố cục đàn hồi):
Là phương pháp mới nhất trong CSS3 cho phép các
thao tác của các khung nhìn có sẵn xung quanh định
hướng thiết bị nào đó
Thường được sử dụng trên các thiết bị di động thông
minh
Scaled Layout (bố cục đàn hồi):
Là phương pháp mới nhất trong CSS3 cho phép các
thao tác của các khung nhìn có sẵn xung quanh định
hướng thiết bị nào đó
Thường được sử dụng trên các thiết bị di động thông
minh
Bài 7 - Bố cục trang web

12. WEB LAYOUT
Liquid (Fluid) Layout:
Đây là kiểu bố cục phổ biến
Sử dụng tỷ lệ phần trăm để thiết kế
Độ rộng (width) sẽ tự động điều chỉnh tuỳ thuộc vào
kích thước khung hình trình duyệt của người dùng
Liquid (Fluid) Layout:
Đây là kiểu bố cục phổ biến
Sử dụng tỷ lệ phần trăm để thiết kế
Độ rộng (width) sẽ tự động điều chỉnh tuỳ thuộc vào
kích thước khung hình trình duyệt của người dùng
Bài 7 - Bố cục trang web

13. WEB LAYOUT
Fluid-Min/Max Layout:
Sử dụng phương thức giới hạn min-width, max-width
Fluid-Min/Max Layout:
Sử dụng phương thức giới hạn min-width, max-width
Bài 7 - Bố cục trang web

14. WEB LAYOUT
Conditional Layout:
Bố cục này linh hoạt hơn và thân thiện để đại diện
cho nội dung trang web
Conditional Layout:
Bố cục này linh hoạt hơn và thân thiện để đại diện
cho nội dung trang web
Bài 7 - Bố cục trang web

15. HTML LAYOUT

16. HTML LAYOUT
Bố cục trang web là yếu tố quan trọng để thiết kế
website đẹp:
Bố cục web được chia thành nhiều cột
Nội dung của web sẽ được đặt trong các cột này
Thành phần cột trong bố cục web được tạo thành từ
các thành phần:
• <div>
• <table> (hiện tại thành phần này thường được sử dụng
để trình bày dữ liệu dạng bảng)
Bố cục trang web là yếu tố quan trọng để thiết kế
website đẹp:
Bố cục web được chia thành nhiều cột
Nội dung của web sẽ được đặt trong các cột này
Thành phần cột trong bố cục web được tạo thành từ
các thành phần:
• <div>
• <table> (hiện tại thành phần này thường được sử dụng
để trình bày dữ liệu dạng bảng)
Bài 7 - Bố cục trang web

17. HTML LAYOUT
Ví dụ về tạo bố cục web với HTML, sử dụng <div>:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px”>
<div id="header" style="background-color:#FFA500;”><h1 style="margin-
bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;”><b>Menu</b><br>HTML<br>CS
S<br>JavaScript</div>
<div id="content" style="background-
color:#EEEEEE;height:200px;width:400px;float:left;”>Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-
align:center;”>Copyright © W3Schools.com</div>
</div>
</body>
</html>
Bài 7 - Bố cục trang web
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px”>
<div id="header" style="background-color:#FFA500;”><h1 style="margin-
bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;”><b>Menu</b><br>HTML<br>CS
S<br>JavaScript</div>
<div id="content" style="background-
color:#EEEEEE;height:200px;width:400px;float:left;”>Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-
align:center;”>Copyright © W3Schools.com</div>
</div>
</body>
</html>

18. HTML LAYOUT
Kết quả:
Bài 7 - Bố cục trang web

19. HTML LAYOUT
Ví dụ về tạo bố cục web với HTML, sử dụng <table>:
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr><td colspan="2" style="background-color:#FFA500;”><h1>Main Title of Web
Page</h1></td></tr>
<tr><td style="background-
color:#FFD700;width:100px;”><b>Menu</b><br>HTML<br>CSS<br>JavaScript</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;”>Content goes
here</td></tr>
<tr><td colspan="2" style="background-color:#FFA500;text-align:center;”>Copyright
© W3Schools.com</td></tr>
</table>
</body>
</html>
Bài 7 - Bố cục trang web
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr><td colspan="2" style="background-color:#FFA500;”><h1>Main Title of Web
Page</h1></td></tr>
<tr><td style="background-
color:#FFD700;width:100px;”><b>Menu</b><br>HTML<br>CSS<br>JavaScript</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;”>Content goes
here</td></tr>
<tr><td colspan="2" style="background-color:#FFA500;text-align:center;”>Copyright
© W3Schools.com</td></tr>
</table>
</body>
</html>

20. HTML LAYOUT
Kết quả:
Bài 7 - Bố cục trang web

21. HTML LAYOUT
Chú ý khi thực hiện thiết kế bố cục web:
Sử dụng CSS để thực hiện định dạng các thành phần
cột (box) trên trang
Nên sử dụng cách thức thiết kế trang template để
giảm thời gian thiết kế bố cục web
Thẻ sử dụng trong việc thiết kế bố cục web
Chú ý khi thực hiện thiết kế bố cục web:
Sử dụng CSS để thực hiện định dạng các thành phần
cột (box) trên trang
Nên sử dụng cách thức thiết kế trang template để
giảm thời gian thiết kế bố cục web
Thẻ sử dụng trong việc thiết kế bố cục web
Bài 7 - Bố cục trang web
<div> Sử dụng để định nghĩa một khối trong tài liệu
<span> Sử dụng để định nghĩa một phần trong tài liệu (viết dưới
dạng inline)

22. HTML LAYOUT
Bố cục với <div>:
<!DOCTYPE html>
<html>
<body>
<div id="container”>
<div id="header”>…</div>
<div id="menu”>…</div>
<div id="content”>…</div>
<div id="footer”>…</div>
</div>
</body>
</html>
Bố cục với <div>:
Bài 7 - Bố cục trang web
<!DOCTYPE html>
<html>
<body>
<div id="container”>
<div id="header”>…</div>
<div id="menu”>…</div>
<div id="content”>…</div>
<div id="footer”>…</div>
</div>
</body>
</html>

23. HTML LAYOUT
Sử dụng với <span>:
Được sử dụng để đặt style cho các yếu tố nội tuyến
trong tài liệu (văn bản)
Trình duyệt hỗ trợ:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Sử dụng với <span>:
Được sử dụng để đặt style cho các yếu tố nội tuyến
trong tài liệu (văn bản)
Trình duyệt hỗ trợ:
Bài 7 - Bố cục trang web

24. TỔNG KẾT
Một số bố cục thường sử dụng khi thiết kế web:
Absolute Layouts (bố cục tuyệt đối)
Relative Layout (bố cục tương đối)
Fixed Layout (bố cục cố định)
Liquid (Fluid) Layout
Nên sử dụng <div> để thực hiện thiết kế bố cục cho
web. Thực hiện thiết kế bố cục theo từng bước từ bố
cục tổng thể tới bố cục các box con trên trang
Một số bố cục thường sử dụng khi thiết kế web:
Absolute Layouts (bố cục tuyệt đối)
Relative Layout (bố cục tương đối)
Fixed Layout (bố cục cố định)
Liquid (Fluid) Layout
Nên sử dụng <div> để thực hiện thiết kế bố cục cho
web. Thực hiện thiết kế bố cục theo từng bước từ bố
cục tổng thể tới bố cục các box con trên trang
Bài 7 - Bố cục trang web