----
2.6 Tạo bố cục trang web bằng CSS
Phần này sẽ tìm hiểu cách sử dụng kĩ thuật float, position, flexbox và grids để tạo ra các bố cục trang web khác nhau. Tạo bố cục cho trang web bằng CSS có
tên gọi tiếng Anh là CSS driven web design. Phần này sẽ tìm hiểu cách tạo ra
các bố cục trang web gồm hai và ba cột.
2.6.1 Các loại bố cục
Vì trang web sẽ được hiển thị trên các màn hình có kích thước
khác nhau, từ màn hình rất nhỏ của điện thoại thông minh, đến các màn hình máy tính,
thậm chí là màn chiếu rất lớn. Ngoài ra, việc thay đổi kích thước của phông chữ
cũng làm ảnh hưởng rất nhiều đến bố cục chung của trang web. Hiện nay, có rất
nhiều loại bố cục cho một trang web. Mỗi loại bố cục có những
ưu và nhược điểm riêng.
Dưới đây là một số loại bố cục phổ biến,
– Fixed layout: bố cục có kích thước cố định, cho dù kích
thước màn hình hoặc kích thước văn bản có thay đổi
– Fluid (liquid) layout: bố cục thay đổi theo kích thước của
màn hình
– Elastic layout: bố cục thay đổi theo kích thước của văn bản
– Hybrid layout: gồm những vùng thay đổi và những vùng cố định
Bố cục kiểu cố định
Bố cục kiểu cố định (fixed layout), như tên gọi của nó, là bố
cục mà các thành phần có chiều rộng được người thiết kế xác định cụ thể, luôn cố
định, đơn vị tính là px. Với kiểu bố cục này, người thiết kế sẽ áp đặt luôn: mối
liên hệ giữa các thành phần của trang, việc căn lề, độ dài của một hàng (line
length).
[Độ dài của một hàng được đo bằng số từ (word) hoặc số kí tự
(character) trên một hàng văn bản. Độ dài của một hàng ảnh hưởng rất nhiều đến
tốc độ đọc và trải nghiệm của người dùng. Hàng dài quá hoặc ngắn quá cũng không
tốt. Độ dài được nhiều người sử dụng nằm trong khoản 10 đến 12 từ, tương đương
60 đến 75 kí tự.]
Kiểu bố cục cố định đã từng được sử dụng rộng rãi, khi kích
thước màn hình tương đối đồng nhất, khi mà mọi người đều sử dụng máy tính
(desktop) để duyệt web. Tuy nhiên, hiện nay, phương tiện dùng để duyệt web rất
đa dạng, với nhiều kích thước màn hình khác nhau, vì vậy, kiểu bố cục cố định
cũng không còn được sử dụng nhiều.
Để tạo bố cục cố định, việc đầu tiên cần làm là xác định độ
rộng của trang web. Độ rộng của trang web được xác định dựa trên độ phân giải của
màn hình. Ví dụ, độ rộng phổ biến của trang web thường được chọn là 960px, hoặc
có thể tăng hoặc giảm một chút. Việc thứ hai cần làm là trang web sẽ căn trái
hay căn giữa so với màn hình? Nếu căn trái, phần không gian trống (extra space)
sẽ nằm ở phía phải, nếu căn giữa, phần không gian trống sẽ được chia đều sang
hai bên.
Ví dụ sau là một trang web có bố cục cố định, gồm vùng
#wrapper để chứa toàn bộ nội dung trang web, trong vùng #wrapper gồm hai cột, cột
chính có tên là #main, cột phụ có tên là #extras.
[CSS]
#wrapper {width: 750px;
position: absolute;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
padding: 0px;}
#extras {position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: orange; }
#main {margin-left: 225px;
background-color: yellow;}
Xem hình minh họa,
Ưu điểm của bố cục cố định
– Dễ làm
– Kiểm soát tốt được các thành phần trên một trang
Nhược điểm của bố cục cố định
– Nội dung sẽ bị tràn, bị che mất, khi sử dụng màn hình nhỏ
hơn so với kích thước của bố cục, xuất hiện thanh trượt ngang trên cửa sổ trình
duyệt
– Nếu người dùng tăng kích thước của phông chữ, giao diện sẽ
không đẹp, vì trên một hàng sẽ có ít chữ hơn
– Giao diện cũng không đẹp, và không cân đối khi người dùng
sử dụng màn hình có độ phân giải lớn hơn so với khi thiết kế
Để giúp việc thiết kế bố cục kiểu
cố định được thuận lợi và chính xác hơn, có thể sử dụng hệ thống lưới (grid
system). Hệ thống lưới sẽ chia sẵn màn hình thành các cột bằng nhau (ví dụ 12 cột),
tất nhiên các cột không được hiển thị, các thành phần của trang web sẽ được bố
trí dựa trên các cột này. Framework Bootstrap của Twitter là một framework khá
phổ biến sử dụng hệ thống lưới như vậy.
Bố cục kiểu fluid
Kiểu fluid còn có tên khác là
liquid, chữ fluid hay liquid đều có nghĩa là chất lỏng. Vì là chất lỏng nên nó dễ
dàng thay đổi hình dạng theo “bình chứa”.
Trong bố cục kiểu fluid, vùng nội
dung và các cột bên trong có thể thay đổi kích thước (rộng hơn hoặc hẹp hơn) để
chiếm hết không gian hữu dụng (available) của màn hình. Nội dung được hiển thị
một cách tự nhiên, không quy định “cứng” độ rộng hoặc ngắt hàng. Khi kích thước
của phần tử thay đổi, văn bản bên trong sẽ được động sắp xếp lại tùy theo kích
thước của đối tượng chứa nó. Ví dụ, trang web của W3C (www.w3.org) có bố cục kiểu
fluid; thử thay đổi kích thước của cửa sổ trình duyệt để quan sát sự thay đổi của
vùng nội dung và các cột giao diện.
Kiểu bố cục fluid là nền tảng của
kĩ thuật thiết kế giao diện tùy biến theo kích thước màn hình (responsive web
design). Hiện nay, người dùng sử dụng rất nhiều thiết bị với kích thước màn
hình đa dạng để duyệt web. Vì vậy, mọi người đang hướng đến các thiết kế có độ
tùy chỉnh cao, và kiểu bố cục fluid đang được quan tâm nhiều.
Ưu điểm của bố cục fluid
– Giao diện có khả năng thích ứng với nhiều loại kích thước
màn hình
– Giao diện cân đối, dễ nhìn, do trang web sẽ phủ khắp màn
hình
– Không xuất hiện thanh trượt ngang trên cửa sổ trình duyệt
– Với trình duyệt trên máy tính, người dùng có thể kiểm soát
độ rộng của cửa sổ và nội dung
Nhược điểm của bố cục fluid
– Trên màn hình lớn, các hàng văn bản sẽ bị kéo dài, gây khó
đọc
– Khó dự đoán được giao diện kết quả, các vùng nội dung có
thể bị trải ra quá rộng hoặc bị thu lại quá hẹp trên các màn hình kích thước
khác nhau
– Khó kiểm soát các vùng trống
(whitespace)
– Việc tính toán kích thước cho
các phần tử khá phức tạp
Cách tạo bố cục kiểu fluid
Để tạo bố cục kiểu fluid, sử dụng đơn vị % để xác định độ rộng
(thuộc tính width) của các thành phần.
Trong một số trường hợp có thể không cần thiết lập giá trị cho thuộc tính width, khi đó giá trị mặc định sẽ được sử
dụng là auto, và trình duyệt sẽ tự động
hiển thị các phần tử sao cho hợp lý trong cửa sổ trình duyệt hoặc trong phần tử
chứa.
Ví dụ, để tạo bố cục gồm hai cột, cột đầu tiên là cột chính
(main column), nằm bên trái, đặt trong một div,
với kích thước bằng 70% chiều rộng cửa sổ trình duyệt (không quan tâm độ rộng cụ
thể của cửa sổ trình duyệt là bao nhiêu). Cột thứ hai là cột mở rộng (extras
column) nằm bên phải, đặt trong một div
khác với kích thước bằng 25% chiều rộng cửa sổ trình duyệt. Còn lại 5% dùng làm
margin giữa hai cột. Sử dụng kĩ thuật float để đặt hai cột cạnh nhau.
[CSS]
div#main {
width: 70%;
margin-right: 5%;
float: left;
background: yellow;
}
div#extras {
width: 25%;
float: left;
background: orange;
}
Xem hình minh họa,
Như đã nói ở trên, một trong những nhược điểm của bố cục kiểu
fluid là khó đọc văn bản nếu màn hình quá rộng hoặc quá hẹp. Để khắc phục điều
này, sử dụng hai thuộc tính max-width
và min-width để khống chế độ rộng và
độ hẹp tối đa cho các vùng.
Bố cục kiểu elastic
Từ elastic có nghĩa là đàn hồi, co giãn. Trong bố cục này, cỡ
chữ và phần tử chứa nó sẽ được co giãn cùng nhau. Nếu chữ lớn hơn, phần tử chứa
nó sẽ rộng ra; nếu chữ nhỏ hơn, phần tử chứa nó sẽ co lại, kết quả là số chữ
trên một hàng (line length) sẽ không bị thay đổi.
Kiểu bố cục elastic khắc phục được hai vấn đề, một là tình
trạng hàng quá dài (nhiều chữ), khó đọc của kiểu bố cục fluid; hai là tình trạng
quá ít chữ trên một hàng (khi phóng to chữ) của kiểu bố cục cố định (fixed).
Xem hình minh họa,
Ưu điểm của bố cục elastic
– Giữ nguyên các thành phần (các cột) của trang web dù kích
thước phông chữ có thay đổi
– Duy trì số chữ trên một hàng (line length) ổn định hơn so
với bố cục fluid và fixed
Nhược điểm của bố cục elastic
– Phần tử ảnh và video không tự động thay đổi kích thước
theo phông chữ
– Khi kích thước phông chữ quá lớn, độ rộng của trang có thể
vượt quá kích thước cửa sổ trình duyệt
– So với kiểu fixed, tạo bố cục kiểu
fluid khó khăn và phức tạp hơn
Cách tạo bố cục kiểu elastic
Để tạo bố cục kiểu elastic, cái quan trọng nhất chính là đơn
vị đo. Bố cục elastic sử dụng đơn vị đo là em,
đây là đơn vị đo tính theo kích thước phông chữ. Ví dụ, phần tử có kích thước
phông là 16px thì 1em tương đương với 16px, vậy 2em sẽ là 32px, 1.5em sẽ là
24px. Như hình phía trên, cả hai trang web (bên trái, bên phải) đều có kích thước
là 48em, tuy nhiên độ lớn của giao diện lại khác nhau, lý do là phông chữ của
hai trang có kích thước khác nhau.
Vì kích thước của các phần tử được tính theo em, nên khi thay đổi kích thước phông chữ,
thì kích thước các phần tử cũng thay đổi theo với tỉ lệ tương ứng. Ví dụ, nếu
kích thước phông chữ của body là 16px, và kích thước của trang là 40em, vậy
kích thước trang sẽ tương đương 640px. Nếu người dùng tăng kích thước phông chữ
lên 20px, thì kích thước trang sẽ tăng tương ứng là 800px.
[CSS]
#extras {
width:
20em;
background: orange;
border:
1px solid black;
float:
right;
}
#main {
width:
40em;
margin-right: 1em;
background-color: yellow;
border:
1px solid black;
float:
left;
}
// thử dùng Inspect của trình duyệt, điều chỉnh kích thước
của font để quan sát số chữ trên một hàng không đổi và sự thay đổi của kích thước
các cột.
Bố cục kiểu hybrid
Tới phần này, nếu để ý sẽ thấy ba kiểu tạo bố cục thực ra là
ba kiểu dùng đơn vị đo cho các phần tử. Kiểu fixed dùng đơn vị đo px, kiểu
fluid dùng đơn vị đo % và kiểu elastic dùng đơn vị đo là em.
Vậy nếu kiểu bố cục nào mà kết hợp các kiểu đơn vị đo trên
thì được gọi là bố cục kiểu hybrid. Chữ hybrid có nghĩa là hỗn hợp, kết hợp.
Trong nhiều trường hợp, việc kết hợp những vùng nội dung cố
định và những vùng nội dung co dãn trong một trang web là rất quan trọng.
Ví dụ, ở hình sau là một trang web gồm hai cột, cột bên trái
(extras) sẽ có kích thước cố định, cột bên phải là cột chứa nội dung chính của
trang web, có kiểu fluid.
Xem hình minh họa,
Lưu ý: việc sử dụng kết hợp nhiều đơn vị đo trong một trang
sẽ làm cho việc tính toán kích thước của các vùng và các phần tử trở nên rất phức
tạp. Tuy nhiên, để có được một bố cục đáp ứng được yêu cầu sử dụng thì vẫn có
thể làm được.
Nên chọn kiểu bố cục
nào?
Như đã đề cập trong mỗi loại bố cục, mỗi cái có ưu, nhược điểm
riêng. Tùy theo mục đích, yêu cầu, và nội dung, để lựa chọn loại bố cục cho phù
hợp. Điều quan trọng là phải nắm được các kiểu bố cục để sử dụng trong những
tình huống cụ thể.
Ví dụ, đang có xu hướng chuyển từ loại bố cục cố định
(fixed), chỉ thích hợp cho trình duyệt trên màn hình máy tính (desktop), sang
loại bố cục linh hoạt (fluid) thích hợp cho nhiều thiết bị khác nhau. Bố cục kiểu
fluid thích hợp cho các màn hình nhỏ với giao diện tùy chỉnh (responsive), tuy
nhiên, bố cục kiểu fixed lại thích hợp cho các màn hình có kích thước rất lớn.
-----------
Cập nhật [28/11/2019]
-----------
Xem thêm: Học làm web (48) - CSS căn bản (24)