Các dạng bố cục
Khi đi đến bố cục cấu trúc của trang, có nhiều dạng bố cục, từ đó bạn có thể lựa chọn. Hai dạng
phổ biến nhất là:
+ Bố cục độ rộng cố định (fixed width layout)
+ Bố cục lỏng (fluid layout)
Mỗi cái có ưu điểm và nhược điểm của bản thân chúng. Sau đây, chúng ta sẽ đi vào từng loại.
Bố cục độ rộng cố định (fixed width layout)
Đối với bố cục độ rộng cố định, bất kể độ rộng màn hình được dùng để truy cập site, bố cục này
sẽ vẫn duy trì độ rộng cố định của nó.
Bố cục cố định được tạo sử dụng đơn vị pixels, điển hình với toàn bộ nội dung bên trong một
cái chứa <div> (thường có tên là container, main hay wrapper), đặc tính width của nó được thiết
lập tới một độ rộng nào đó. Ví dụ:
HTML viết:
<body>
<div id=”container”>
<!–Content of page go here–>
</div>
</body>
CSS viết:
div#container{
width:960px;
margin-left:auto;
margin-right:auto;
background-color:tan;
}
Điển hình thì các nhà thiết kế sẽ thiết kế các sites có độ rộng cố định 960 pixels,
khi đây là độ rộng lí tưởng cho sử dụng bố cục lưới vì số này chia hết cho 3, 4.5.6
, 8, 10, 12 và 16.
Ưu điểm của bố cục này là rằng nó sẽ là dễ dàng hơn để sinh ra và có một kết quả
hình ảnh có thể dự đoán được. Nó cũng được tối ưu hóa cho các màn hình desktop
điển hình với phân giải màn hình 1024×768 pixels.
Một ví dụ hiện tại của website cố độ rộng cố định là website của hãng Samsung như
trong ảnh.
Mặc dù không mang tính phản ứng, site vẫn có thể sử dụng được trên thiết bị mobile.
Nó có thể load đầy đủ vào màn hình mobile với đầy đủ site có thể nhìn thấy được.
Sau đó, người dùng có thể tương tác với site, tận dụng tương tác người dùng tích
hợp sẵn như zoom và điều hướng nội dung.
Nhược điểm của thiết kế độ rộng cố định là có phạm vi lớn độ rộng cửa sổ trình
duyệt phải hỗ trợ. Kết quả là nếu cửa sổ trình duyệt nhỏ hơn độ rộng cố định, bạn
sẽ phải có thanh cuộn ngang hay nếu cửa sổ trình duyệt lớn hơn độ rộng cố định,
bạn sẽ có không gian thừa bên trái và bên phải cạnh site.
Bố cục lỏng (fluid layout)
Cách tiếp cận thứ hai để giải quyết vấn đề nhiều kích cỡ màn hình là sử dụng bố cục lỏng.
Trong cách tiếp cận này, độ rộng không được chỉ ra bằng pixels, mà bằng giá trị %.
Nhớ lại các phần học trước, giá trị % trong CSS là một tỉ lệ % của độ rộng của phần
tử chứa, cụ thể là cửa sổ trình duyệt hiện tại. Vì vậy, một bố cục trong đó tất cả các
độ rộng được thể hiện bằng tỷ lệ % sẽ thích nghi với bất cứ kích cỡ cửa sổ trình duyệt
nào.
Ví dụ, nếu bố cục ba cột một trang có độ rộng cố định bằng 960 pixels như ảnh sau:
Khi chuyển sang tỉ lệ % sẽ như ảnh sau:
Ưu điểm rõ ràng nhất của bố cục lỏng là rằng nó thích nghi với tất cả kích cỡ cửa sổ
trình duyệt khác nhau, vì vậy không có không gian thừa hay thanh cuộn ngang.
Tuy nhiên, cũng có một vài nhược điểm. Bố cục lỏng có thể khó hơn để tạo với một vài
loại phần tử như các ảnh có kích cỡ pixels cố định, khi tăng giảm tỉ lệ có thể làm giảm
chất lượng ảnh. Một vấn đề khác có thể dễ nhận thấy là khi màn hình tăng lên hay thu lại
đáng kể thì độ dài dòng (nhân tố quan trọng cho tính đọc được) có thể trở nên quá dài hay
quá ngắn, hay các cột text có thể quá cao hay quá thấp. Vì vậy, tạo một bố cục lỏng có
thể khó hơn tạo một bố cục độ rộng cố định.