----
2.6.7 Thiết lập màu nền cho các cột
Việc tô màu nền cho các cột sẽ tạo ra một giao diện đẹp và
đem lại trải nghiệm tốt cho người dùng. Tuy nhiên, để ý trong hai kĩ thuật chia
cột bằng float và position, các cột thường có chiều dài không bằng độ dài của
trang. Nếu định dạng màu cho các cột sẽ xuất hiện các cột cao thấp khác nhau.
Phần này sẽ tìm hiểu cách sử dụng CSS để khắc phục hạn chế này.
CSS không hỗ trợ việc thiết lập thuộc tính height của cột bằng
100% chiều cao của trang, để làm được việc này cần sử dụng JavaScript hoặc các
kĩ thuật tạo bố cục flexbox hoặc grid. Tuy nhiên, vẫn có thể thiết lập màu nền
cho các cột đều nhau bằng cách sử dụng ảnh nền cho background, như phần trình
bày dưới đây.
Bố cục 2 cột, kích
thước cố định
Đối với bố cục 2 cột, kích thước cố định (fixed-width), sử dụng
ảnh nền gồm hai màu cho hai cột, chiều rộng của mỗi dải màu bằng với chiều rộng
của mỗi cột, lặp lại ảnh nền và xếp lớp (tile) theo chiều dọc.
Ví dụ,
Chuẩn bị ảnh nền: mở phần mềm mspaint có sẵn trên các máy chạy
Windows, vào trình đơn File, chọn Properties, thiết lập width là 960px, height
20px. Chèn hai hình chữ nhật, một cái rộng 680px, một cái rộng 280px (xem hình
minh họa bên dưới). Đổ hai màu khác nhau cho hai hình chữ nhật. Lưu lại với tên
bg.png.
[HTML]
<div
id="wrapper">
<div
id="header">Phần đầu trang (menu, logo, quảng cáo, tiêu
đề)</div>
<div id="content">
<div
id="main">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div
id="extras">Các liên kết, các mục tin</div>
</div>
<div
id="footer">Thông tin bản quyền</div>
</div>
[CSS]
#wrapper
{
width: 960px;
margin: 0 auto;
}
#content
{
overflow: hidden; /* khắc phục hiện
tượng
không hiển thị nền
của #content do float */
background-image: url(bg.png);
background-repeat: repeat-y;
}
#header
{
background: #ccc;
}
#main
{
width: 650px;
margin: 0 20px;
float: left;
}
#extras
{
width: 250px;
margin: 0 20px 0 0;
float: left;
}
#footer
{
background: #ccc;
clear: left;
}
Xem hình minh họa,
Bố cục 2 cột, kiểu
fluid
Trong cố cục kiểu fluid, không thể biết chính xác được độ rộng
của các cột. Vì vậy, để thiết lập màu nền, cần sử dụng một ảnh nền có chiều rộng
rất lớn và thuộc tính background-position.
Mặc dù không thể biết chính xác độ rộng của mỗi cột, nhưng
có thể biết được vị trí chia đôi của hai cột. Ví dụ, xét trường hợp cụ thể sau,
[HTML]
<div id="header">Phần đầu trang (menu, logo,
quảng cáo, tiêu đề)</div>
<div id="main">Phần nội dung chính của
trang</div>
<div id="extras">Các liên kết, các mục
tin</div>
<div id="footer">Thông tin bản quyền</div>
[CSS]
#main {
width: 60%;
margin: 0 5%;
float: left;
}
#extras {
width: 25%;
margin: 0 5% 0
0;
float: left;
}
#footer {
clear: left;
}
Từ mã HTML và CSS ở trên, sẽ biết được vị trí chia đôi của cột
#main và #extras là 67.5% độ rộng của trang web, tính từ bên trái. Cụ thể: 60%
độ rộng của #main + 5% margin left + 2.5% margin-right (chỉ lấy một nửa margin
bên phải) = 67.5%.
Tạo ảnh nền gồm hai màu, có chiều rộng rất lớn, ví dụ
3000px, vì ảnh này có chiều cao rất nhỏ (vài px) nên kích thước ảnh không lớn. Độ
rộng phần màu cho cột đầu tiên sẽ là 3000 x 67.5% = 2025 px
Sử dụng CSS để thiết lập ảnh nền cho phần tử body và sử dụng
background-position để thiết lập vị trí cho ảnh nền, sao cho vị trí của đường
chia luôn nằm giữa hai cột.
body {
background-image: url(two_cols_3000px.png);
background-repeat: repeat-y;
background-position: 67.5%;
}
Xem hình minh họa,
Bố cục 3 cột
Với bố cục ba cột, cách làm gần giống với trường hợp hai cột.
Tuy nhiên, cần sử dụng hai ảnh nền. Ảnh nền đầu tiên thiết lập màu nền cho cột
bên trái, phần còn lại bên phía phải của ảnh nền sẽ trong suốt (transparent). Ảnh
nền thứ hai thiết lập màu nền cho cột bên phải, phần còn lại bên phía trái sẽ
trong suốt. Màu nền của toàn trang sẽ xuyên qua vùng trong suốt của hai ảnh nền
để thiết lập màu nền cho cột ở giữa.
Mã HTML sẽ gồm hai div, ví dụ #wrapper và #inner,
<div id="wrapper">
<div id="inner">
<div
id="main"></div>
<div
id="news"></div>
<div
id="links"></div>
</div> <!-- end inner div
-->
</div> <!-- end wrapper div -->
Khi đó, ảnh nền đầu tiên sẽ thiết lập cho #wrapper, giả sử đường
chia giữa cột trái và cột giữa nằm tại vị trí 26.25%. Ảnh nền thứ hai sẽ thiết
lập cho #inner, giả sử đường chia giữa cột phải và cột giữa nằm tại vị trí 73.75%.
Xem hình minh họa,
2.6.8 Câu hỏi & bài tập
1. Ứng với mỗi kiểu bố cục (cột trái), yếu tố nào (cột phải)
quyết định đến kích thước của các vùng trên trang web? Lựa từng cặp cho phù hợp.
Bố cục kiểu fixed-width
|
a. Cửa sổ trình duyệt
|
Bố cục kiểu fluid
|
b. Kích thước font
|
Bố cục kiểu elastic
|
c. Người thiết kế
|
2. Lựa chọn đơn vị đo được sử dụng cho mỗi loại bố cục sau?
Bố cục kiểu fixed-width
|
a. em
|
Bố cục kiểu fluid
|
b. px
|
Bố cục kiểu elastic
|
c. % hoặc auto
|
3. Ưu điểm nổi bật của mỗi loại bố cục?
Bố cục kiểu fixed-width
|
a. Luôn biết trước độ dài của một hàng (line length)
|
Bố cục kiểu fluid
|
b. Giao diện không tồn tại các khoảng trắng “dư thừa”
|
Bố cục kiểu elastic
|
c. Bố cục có hàng/cột gọn gàng dựa trên px
|
4. Nhược điểm nổi bật của mỗi loại bố cục?
Bố cục kiểu fixed-width
|
a. Khi tăng kích thước cửa sổ trình duyệt, rất khó đọc nội
dung, do hàng quá dài
|
Bố cục kiểu fluid
|
b. Kích thước hình ảnh không thể thay đổi theo kích thước
trang
|
Bố cục kiểu elastic
|
c. Nội dung trang bị cắt mất phía phải, khi thu hẹp màn
hình giao diện
|
Cập nhật [2/8/2018]
-----------
Xem thêm: Học làm web (52) - CSS căn bản (28)