Học làm web (47) - CSS căn bản (23): Bố cục trang web

Tiếp theo của: Học làm web (46) - CSS căn bản (22)
----

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-widthmin-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: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (48) - CSS căn bản (24)