Bài 5 Bố cục trang cơ bản - Giáo trình FPT

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Ố 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…
layout 3 cột
4 cột
…
6

BỐ CỤC 2 CỘT
http://blog.jingproject.com/

BỐ CỤC 3 CỘT
http://www.amazon.com

BỐ CỤC 4 CỘT
http://www.alistapart.com/

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Ố 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">
<div id="header">
<div id="header_inner">…</div>
</div>
<div id="nav">
<div id="footer_inner“>…</div>
</div>
</div>
</body>
max-width:…;
min-width:…;
11
<body>
</div>
<div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>--
>
</div>
<div id="content">
</div>
</div>
</div>
</body>

TỔ CHỨC BOX
main_wrapper
nav
header
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;
}
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
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
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
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;
}
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 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.

max-width:…;
min-width:…;
<body>
</div>
<div id="nav">
</div>
<div id="content">
</div>
<div id=“promo"> 
<div id=“promo_inner“>…</div>
</div>
</div>
</div>
</body>
max-width:…;
min-width:…;
18
<body>
</div>
<div id="nav">
</div>
<div id="content">
</div>
<div id=“promo"> 
<div id=“promo_inner“>…</div>
</div>
</div>
</div>
</body>

promo

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;
}
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;
}

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.
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.

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Ố 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

overflow
auto
hidden
inherit
overflow inherit
scroll
visible
26

#nav { width:22%; ﬂoat:left; }
#content { width:78%; ﬂoat:left; top:0px; }
#footer { clear:both; }

BỐ CỤC TUYỆT ĐỐI (ABSOLUTE LAYOUT)
Các cột được quy định vị trí chính xác trong mọi
trường hợp (web browser, độ phân giải …)
Các cột hoàn toàn độc lập, không tương tác với
nhau  các cột phía dưới không được đẩy xuống
Khắc phục vấn đề này bằng Javascript

NGĂN TRÀN BỐ CỤC
Thuộc tính overﬂow của CSS điều khiển cách các thẻ
làm việc với nội dung bên trong chúng.
Giá trị:
visible: làm cho thẻ mở rộng để bao bọc nội dung
bên trong
hidden: cột sẽ giữ nguyên chiều rộng của nó và hiển
thị phần ảnh vừa trong nó - không thay đổi kích
thước.
Thuộc tính overﬂow của CSS điều khiển cách các thẻ
làm việc với nội dung bên trong chúng.
Giá trị:
visible: làm cho thẻ mở rộng để bao bọc nội dung
bên trong
hidden: cột sẽ giữ nguyên chiều rộng của nó và hiển
thị phần ảnh vừa trong nó - không thay đổi kích
thước.

CĂN CHỈNH LAYOUT
Không giống như layout xây dựng trên nền bảng
(table), layout xây dựng trên nền tảng div không
làm cho các cột có cùng độ dài.
Có thể sửa chiều cao của div, nhưng không nên
Chiều cao của div (cả trang web) phụ thuộc vào nội
dung được đưa ra
Chúng ta cần chỉnh để có ảo giác rằng tất cả các cột
có cùng chiều cao, bằng cách
Đặt kiểu cột Faux
Lập trình mở rộng div
Không giống như layout xây dựng trên nền bảng
(table), layout xây dựng trên nền tảng div không
làm cho các cột có cùng độ dài.
Có thể sửa chiều cao của div, nhưng không nên
Chiều cao của div (cả trang web) phụ thuộc vào nội
dung được đưa ra
Chúng ta cần chỉnh để có ảo giác rằng tất cả các cột
có cùng chiều cao, bằng cách
Đặt kiểu cột Faux
Lập trình mở rộng div

CỘT FAUX
Phương thức này liên quan tới việc thêm hình nền
cho thẻ div wrapper của trang
Lặp lại hình nền để lấp đầy không gian trống

CỘT FAUX
#main_wrapper { max-width:960px; min-width:720px; margin-
left:auto; margin-right:auto; text-align:left;
background:url(../../../chapter_5/code/images/2_col_faux_art.gif)
repeat-y;}
#main_wrapper { max-width:960px; min-width:720px; margin-
left:auto; margin-right:auto; text-align:left;
background:url(../../../chapter_5/code/images/2_col_faux_art.gif)
repeat-y;}

LẬP TRÌNH MỞ RỘNG DIV
Sử dụng Javascript để xác định cột dài nhất và điều
chỉnh cho phù hợp với những cột khác
CSS sử dụng DOM để thiết lập thuộc tính thẻ.
JavaScript là một ngôn ngữ kịch bản mạnh mẽ cũng
có thể lấy (và thiết lập) tất cả thuộc tính của mọi
thẻ trong DOM (ví dụ như chiều cao của div) và
thực hiện mọi loại xử lý trên chúng
Sử dụng Javascript để xác định cột dài nhất và điều
chỉnh cho phù hợp với những cột khác
CSS sử dụng DOM để thiết lập thuộc tính thẻ.
JavaScript là một ngôn ngữ kịch bản mạnh mẽ cũng
có thể lấy (và thiết lập) tất cả thuộc tính của mọi
thẻ trong DOM (ví dụ như chiều cao của div) và
thực hiện mọi loại xử lý trên chúng

LẬP TRÌNH MỞ RỘNG DIV
<script type="text/javascript"> window.onload=function(){
Nifty("div#nav,div#content,div#promo","medium same-height");
Nifty("div#header,div#footer","medium");
AddCss ("../../lib/nifty_corners/css/niftyCorners.css");
} </script>
<script type="text/javascript"> window.onload=function(){
Nifty("div#nav,div#content,div#promo","medium same-height");
Nifty("div#header,div#footer","medium");
AddCss ("../../lib/nifty_corners/css/niftyCorners.css");
} </script>

TỔNG KẾT
Sử dụng loại bố cục layout tùy thuộc vào từng dự
án, khối lượng nội dung đưa ra của dự án
Sử dụng bố cục nổi có ưu điểm:
Dễ căn chỉnh
Hạn chế được hiện tượng xô lệch layout
Ngăn tràn bố cục bằng cách sử dụng thuộc tính
overflow
Không nên đặt chiều cao cho div trong CSS
Căn chỉnh chiều cao cột: thường sử dụng phương
pháp cột Faux
Sử dụng loại bố cục layout tùy thuộc vào từng dự
án, khối lượng nội dung đưa ra của dự án
Sử dụng bố cục nổi có ưu điểm:
Dễ căn chỉnh
Hạn chế được hiện tượng xô lệch layout
Ngăn tràn bố cục bằng cách sử dụng thuộc tính
overflow
Không nên đặt chiều cao cho div trong CSS
Căn chỉnh chiều cao cột: thường sử dụng phương
pháp cột Faux

Bài 5 Bố cục trang cơ bản - Giáo trình FPT

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (16)

Similar a Bài 5 Bố cục trang cơ bản - Giáo trình FPT

Similar a Bài 5 Bố cục trang cơ bản - Giáo trình FPT (20)

Más de MasterCode.vn

Más de MasterCode.vn (20)

Bài 5 Bố cục trang cơ bản - Giáo trình FPT