bài 5 bố cục trang cơ bản
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 (8.04 MB, 36 trang )
Bài 5
Bố cục trang cơ bản
NHẮC LẠI BÀI TRƯỚC
Tìm hiểu về box (hộp), cấu trúc box trên một trang
của trang website:
Tầm quan trọng
Kích thước
Vị trí
Thuộc tính của box:
Thuộc tính về nội dung
Thuộc tính về vị trí
Thuộc tính về hiển thị
Tìm hiểu về box (hộp), cấu trúc box trên một trang
của trang website:
Tầm quan trọng
Kích thước
Vị trí
Thuộc tính của box:
Thuộc tính về nội dung
Thuộc tính về vị trí
Thuộc tính về hiển thị
Bài 5 - Bố cục trang cơ bản 2
MỤC TIÊU BÀI HỌ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 5 - Bố cục trang cơ bản 3
MỘT SỐ BỐ CỤC
BỐ CỤC TRANG (LAYOUT)
Layout thường được chia thành nhiều cột
Rõ ràng trong việc thiết kế CSS
Áp dụng được tính kế thừa
Đảm bảo nội dung được lấp đầy
Không bị xô lệch giữa các box trong layout
Bài 5 - Bố cục trang cơ bản
Layout thường được chia thành nhiều cột
Rõ ràng trong việc thiết kế CSS
Áp dụng được tính kế thừa
Đảm bảo nội dung được lấp đầy
Không bị xô lệch giữa các box trong layout
5
MỘT SỐ DẠNG BỐ CỤC
layout
2 cột
3 cột…
Bài 5 - Bố cục trang cơ bản
layout 3 cột
4 cột
…
6
BỐ CỤC 2 CỘT
/>Bài 5 - Bố cục trang cơ bản 7
BỐ CỤC 3 CỘT
Bài 5 - Bố cục trang cơ bản 8
BỐ CỤC 4 CỘT
/>Bài 5 - Bố cục trang cơ bản 9
BỐ CỤC 2 CỘT CHIỀU RỘNG CỐ ĐỊNH
Demo ví dụ trong các file:
2_col.html -> cấu trúc và nội dung trang
2_col.css -> đặt css để tạo layout
text_n_colors.css -> định style và màu cho text
Demo ví dụ trong các file:
2_col.html -> cấu trúc và nội dung trang
2_col.css -> đặt css để tạo layout
text_n_colors.css -> định style và màu cho text
Bài 5 - Bố cục trang cơ bản 10
BỐ CỤC 3 CỘT THƯỜNG
Không khai báo giá trị width
Sử dụng ràng buộc:
max-width:…;
min-width:…;
<body>
<div id="main_wrapper"><! <địnhnghĩa div chứa toàn bộ nội dung web> >
<div id="header"><! <địnhnghĩa phần header của trang web> >
<div id="header_inner">…</div>
</div>
<div id="nav"><! <địnhnghĩa vùng chứa navigator (điều hướng) của trang web>
>
<div id="nav_inner">…</div>
</div>
<div id="content">
<div id=“content_inner“>…</div>
</div>
<div id="footer"><! <địnhnghĩa vùng chân (footer) của trang web> >
<div id="footer_inner“>…</div>
</div>
</div>
</body>
Bài 5 - Bố cục trang cơ bản
Không khai báo giá trị width
Sử dụng ràng buộc:
max-width:…;
min-width:…;
11
<body>
<div id="main_wrapper"><! <địnhnghĩa div chứa toàn bộ nội dung web> >
<div id="header"><! <địnhnghĩa phần header của trang web> >
<div id="header_inner">…</div>
</div>
<div id="nav"><! <địnhnghĩa vùng chứa navigator (điều hướng) của trang web>
>
<div id="nav_inner">…</div>
</div>
<div id="content">
<div id=“content_inner“>…</div>
</div>
<div id="footer"><! <địnhnghĩa vùng chân (footer) của trang web> >
<div id="footer_inner“>…</div>
</div>
</div>
</body>
TỔ CHỨC BOX
main_wrapper
nav
header
Bài 5 - Bố cục trang cơ bản 12
nav
footer
content
CSS THIẾT LẬP BỐ CỤC 2 CỘT
body {
text-align:center;
}
#main_wrapper {
width:840px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header {
}
#nav {
width:22%;
float:left;
}
#content {
width:78%;
float:left;
top:0px;
}
#footer {
clear:both;
}
Bài 5 - Bố cục trang cơ bản 13
body {
text-align:center;
}
#main_wrapper {
width:840px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header {
}
#nav {
width:22%;
float:left;
}
#content {
width:78%;
float:left;
top:0px;
}
#footer {
clear:both;
}
BỐ CỤC 2 CỘT LINH HOẠT
Không khai báo giá trị width
Sử dụng ràng buộc thiết lập giới hạn kích thước thay
đổi của thẻ:
max-width: thiết lập kích thước lớn nhất
min-width: thiết lập kích thước nhỏ nhất
Bài 5 - Bố cục trang cơ bản
Không khai báo giá trị width
Sử dụng ràng buộc thiết lập giới hạn kích thước thay
đổi của thẻ:
max-width: thiết lập kích thước lớn nhất
min-width: thiết lập kích thước nhỏ nhất
14
BỐ CỤC LINH HOẠT 2 CỘT
Bài 5 - Bố cục trang cơ bản 15
Nội dung co giãn
theo chiều rộng
THIẾT LẬP BỐ CỤC 2 CỘT LINH HOẠT
body {
text-align:center;
}
#main_wrapper {
width:840px;
max-width:960px;
min-width:720px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header {
}
#nav {
width:22%;
width:140px;
float:left;
}
#content {
width:78%;
float:left;
margin-left:140px;
top:0px;
}
#footer {
clear:both;
}
Bài 5 - Bố cục trang cơ bản 16
body {
text-align:center;
}
#main_wrapper {
width:840px;
max-width:960px;
min-width:720px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header {
}
#nav {
width:22%;
width:140px;
float:left;
}
#content {
width:78%;
float:left;
margin-left:140px;
top:0px;
}
#footer {
clear:both;
}
BỐ CỤC 3 CỘT THƯỜNG
Bố cục ba cột có chiều rộng cố định làm việc giống
như phiên bản có hai cột.
Chia 100% chiều rộng cho ba cột theo tỷ lệ mong
muốn.
Bài 5 - Bố cục trang cơ bản 17
BỐ CỤC 3 CỘT THƯỜNG
Không khai báo giá trị width
Sử dụng ràng buộc:
max-width:…;
min-width:…;
<body>
<div id="main_wrapper"><! <địnhnghĩa div chứa toàn bộ nội dung web> >
<div id="header"><! <địnhnghĩa phần header của trang web> >
<div id="header_inner">…</div>
</div>
<div id="nav"><! <địnhnghĩa vùng chứa navigator (điều hướng) của trang web> >
<div id="nav_inner">…</div>
</div>
<div id="content">
<div id=“content_inner“>…</div>
</div>
<div id=“promo"> <! <địnhnghĩa vùng quảng cáo của trang web> >
<div id=“promo_inner“>…</div>
</div>
<div id="footer"><! <địnhnghĩa vùng chân (footer) của trang web> >
<div id="footer_inner“>…</div>
</div>
</div>
</body>
Bài 5 - Bố cục trang cơ bản
Không khai báo giá trị width
Sử dụng ràng buộc:
max-width:…;
min-width:…;
18
<body>
<div id="main_wrapper"><! <địnhnghĩa div chứa toàn bộ nội dung web> >
<div id="header"><! <địnhnghĩa phần header của trang web> >
<div id="header_inner">…</div>
</div>
<div id="nav"><! <địnhnghĩa vùng chứa navigator (điều hướng) của trang web> >
<div id="nav_inner">…</div>
</div>
<div id="content">
<div id=“content_inner“>…</div>
</div>
<div id=“promo"> <! <địnhnghĩa vùng quảng cáo của trang web> >
<div id=“promo_inner“>…</div>
</div>
<div id="footer"><! <địnhnghĩa vùng chân (footer) của trang web> >
<div id="footer_inner“>…</div>
</div>
</div>
</body>
BỐ CỤC 3 CỘT THƯỜNG
promo
Bài 5 - Bố cục trang cơ bản 19
CSS THIẾT LẬP BỐ CỤC 3 CỘT
body {
text-align:center;
}
#main_wrapper {
width:840px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header {
}
#nav {
width:18%;
float:left;
}
#content {
width:60%;
float:left;
}
#promo {
width:22%;
float:left;
}
#footer {
clear:both;
}
Bài 5 - Bố cục trang cơ bản 20
body {
text-align:center;
}
#main_wrapper {
width:840px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header {
}
#nav {
width:18%;
float:left;
}
#content {
width:60%;
float:left;
}
#promo {
width:22%;
float:left;
}
#footer {
clear:both;
}
BỐ CỤC 3 CỘT LINH HOẠT
Mọi thứ trở nên phức tạp hơn nếu ta muốn thêm
tính linh hoạt và căn giữa cho bố cục ba cột, trong
đó vùng nội dung thay đổi chiều rộng khi cửa sổ
trình duyệt thay đổi kích thước, nhưng các cột hai
bên vẫn giữ nguyên kích thước cũ
Chuyên gia CSS Ryan Brill nhanh chóng tìm ra câu
trả lời - sử dụng lề âm - và giải pháp của ông trở
thành giải pháp CSS cổ điển, hiện được dùng trong
vô số trang web có bố cục linh hoạt.
Bài 5 - Bố cục trang cơ bản 21
Mọi thứ trở nên phức tạp hơn nếu ta muốn thêm
tính linh hoạt và căn giữa cho bố cục ba cột, trong
đó vùng nội dung thay đổi chiều rộng khi cửa sổ
trình duyệt thay đổi kích thước, nhưng các cột hai
bên vẫn giữ nguyên kích thước cũ
Chuyên gia CSS Ryan Brill nhanh chóng tìm ra câu
trả lời - sử dụng lề âm - và giải pháp của ông trở
thành giải pháp CSS cổ điển, hiện được dùng trong
vô số trang web có bố cục linh hoạt.
BỐ CỤC 3 CỘT LINH HOẠT
Bài 5 - Bố cục trang cơ bản 22
CHIỀU NGANG CỦA TRANG
Điều khiển được chiều ngang của những bố cục này
là chìa khóa xử lý cách chúng hoạt động.
Người dùng rất ghét phải cuộn trang sang ngang
Bạn muốn tạo bố cục mở rộng theo chiều dọc để có
đủ không gian chứa nội dung mà không cần thay
đổi chiều ngang
Tổng kích thước chiều ngang của tất cả các box
trong trang web không nên vượt quá kích thước
chiều ngang của toàn trang
Điều khiển được chiều ngang của những bố cục này
là chìa khóa xử lý cách chúng hoạt động.
Người dùng rất ghét phải cuộn trang sang ngang
Bạn muốn tạo bố cục mở rộng theo chiều dọc để có
đủ không gian chứa nội dung mà không cần thay
đổi chiều ngang
Tổng kích thước chiều ngang của tất cả các box
trong trang web không nên vượt quá kích thước
chiều ngang của toàn trang
Bài 5 - Bố cục trang cơ bản 23
BỐ CỤC NỔI & BỐ CỤC TUYỆT ĐỐI
BỐ CỤC NỔI (FLOAT LAYOUT)
Dễ dàng trong việc căn chỉnh
Tránh được hiện tượng xô lệch cột
Sử dụng thẻ overflow để tránh hiện tượng xô lệch
các cột
Overflow: điều khiển cách tác động của thẻ lên nội
dung bên trong
Sử dụng kèm clear
Dễ dàng trong việc căn chỉnh
Tránh được hiện tượng xô lệch cột
Sử dụng thẻ overflow để tránh hiện tượng xô lệch
các cột
Overflow: điều khiển cách tác động của thẻ lên nội
dung bên trong
Sử dụng kèm clear
Bài 5 - Bố cục trang cơ bản 25
