Phần 1 Nguyên tắc dựng layout  
Phần 2: Example về dựng layout với độ phân giải 1024x768(px) bằng thẻ DIV và CSS  
Phần 3: Thiết kế web bằng thẻ DIV - Phần 3: Các khối giao diện chồng nhau

Dựng layout bằng thẻ DIV là phương pháp phổ biến trong thiết kế web hiện nay thay cho phương pháp dựng bằng TABLE trước kia. Máy tính và các thiết bị cầm tay truy cập internet cũng ngày càng có độ phân giải màn hình lớn hơn với 1024 x 768 (pixel) là độ phân giải tối thiểu hiện nay (2011 đối với máy tính). Vì vậy đa phần các website hiện được thiết kế bằng DIV với độ rộng 1024px. Bài viết này sẽ trình bày các nguyên tắc dựng layout với một ví dụ cụ thể để minh họa để các bạn mới học có thể tham khảo và thực hành.

• Chạy thử ví dụ ấn vào web layout với độ phân giải 1024x768(px) bằng thẻ DIV và CSS
  
• Ảnh mẫu của template ví dụ đặt tại ảnh mẫu div-layout-1024x768 Tôi cũng chỉ dùng 1 ảnh GIF làm mẫu vì cũng không có thời giờ vẽ Photoshop. Nói thật là ảnh này do tôi print screen ngược từ màn hình web ra. Template này cũng không phức tạp lắm nhưng cũng tạm đủ các chức năng một website đơn giản.
• Source code của dựng template đặt tại địa chỉ : example-div-layout-1024x768 Đã thử trên các trình duyệt IE8,IE6,firefox,chrome. Bạn nào test thấy có lỗi có thể post lên để cùng sửa chữa..  
  

I.DIV HAY TABLE

Dựng layout bằng thẻ DIV là phương pháp phổ biến trong thiết kế web hiện nay thay cho phương pháp dựng bằng TABLE trước kia. Có nhiều tài liệu so sánh về hai phương pháp này. Tôi chỉ tóm tắt lại đại ý:

1. Về mặt design DIV có cấu trúc sáng sủa rõ ràng hơn TABLE. Nhìn một layout dựng bằng DIV người ta dễ dàng hình dung ra được đâu là phân vùng header, footer, menu, content,…
2. Sử dụng DIV sẽ tránh được việc dùng các thẻ TD,TR của TABLE lồng vào nhau nhiều cấp rối rắm nên code dễ bảo trì hơn, sinh ra mã HTML ít hơn.
   
3.  DIV layout có tốc độ nhanh hơn TABLE layout.
4. DIV layout thân thiện với các search engine và thuận tiện hơn cho việc làm SEO.

Tuy nhiên DIV layout không phải không có nhược điểm đó là một cấu trúc mong manh dễ "đổ vỡ" so với TABLE layout, do đó cần test kỹ càng trên nhiều trình duyệt. Những mảng dữ liệu DIV với thuộc tính "trôi nổi" (CSS: float) và bám vào container chứa nó theo các cạnh left, top và dễ dàng rã đám trôi dạt tứ tung nếu như bạn tính thuộc tính width của các DIV không cẩn thận. Trong khi TABLE lại là một bộ "khung thép" gồm các CELL ken nhau vững chắc và không thể bị vỡ. Trong thực tế làm việc tôi thấy DIV có nhược điểm khi gặp mấy tình huống sau
1. Khi 2 thẻ DIV nằm cạnh nhau theo chiều ngang, thẻ DIV có thuộc tính width co dãn, trong khi thẻ DIV còn lại lại cần choán tối đa phần độ rộng còn lại.

Hình 1. DIV A có độ rộng co giãn, trong khi DIV B phải choán 100% phần độ rộng còn lại

2.Kẻ các border phân vùng giứa các DIV. Ví dụ có 2 thẻ DIV nằm cạnh nhau theo chiều ngang, độ cao của 2 DIV khác nhau và không cố định, trong khi ta lại cần vạch 1 boder thẳng đứng làm biên giới giữa 2 DIV. Khi đó border sẽ dễ dàng bị hụt độ cao.

Hình 2. DIV A, DIV B có độ cao biến đổi, trong khi cần vạch boder phân cách giữa 2 DIV thì border sẽ dễ bị hụt độ cao cần thiết.

Tôi cũng không từ bỏ hoàn toàn TABLE, nó vẫn có ưu điểm của nó, đại khái hiện nay khi dựng layout tổng thể tôi dùng DIV, nhưng khi đi sâu vào các phần nhỏ, nếu gặp các cấu trúc gồm các ô có độ rộng biến đổi nằm ken nhau tôi vẫn dùng TABLE cho an toàn.

Đặc biệt là trong giao diện quản trị hệ thống tôi sử dụng TABLE nhiều hơn nhằm tận dụng hết độ rộng của các màn hình loại mới có độ phân giải  1280, 1368, 1440 px. Hiện nay dù đa số màn hình có độ phân giải tối thiểu 1024 x768 nhưng các web layout phổ biến vẫn dựng theo độ phân giải nhỏ nhất này. Nói dựng layout với độ phân giải 1024 x768 là nói để dễ hình dung kích thước chuẩn màn hình, chính xác ra phải  là “Dựng layout bằng thẻ DIV và CSS với độ rộng phân giải 1024px”, bởi thật ra độ cao màn hình không có ý nghĩa gì trong việc thiết kế web

II.NGUYÊN TẮC DỰNG LAYOUT

1.Dựng layout bằng cách phân vùng giao diện thành các khối DIV theo chiều từ trên xuống dưới, từ trái qua phải

Hình 3. Nguyên tắc dựng layout là phân vùng giao diện thành các khối DIV theo chiều từ trên xuống dưới, từ trái qua phải

2. Cách điều khiển vị trí của các phần tử DIV

Giả thiết ta có 2 DIV là divA và divB, được chứa trong lòng  divMain

Hình 4. Điểu khiển vị trí tương đối của divA, divB trong lòng divMain dựa vào các thuộc tính float, clear và margin-left, margin-top.

2.1. Muốn divA bám dính vào cạnh trái của  divMain, còn divB bám dính cạnh phải của divMain ta sử dụng thuộc tính float (trôi nổi)  của style>.
Đặt style cho divA, divB như sau:
#divA{
float: left;
}
#divB{
float: right;
}


2.2. Còn muốn chỉnh vị trí divA dịch vào sâu trong lòng divMain với một khoảng đo chính xác, sử dụng margin-left, margin-top.
Thí dụ làm cho divA cách top của divMain 10px, cách left của divMain 10px, ta viết như sau:
#divA{
float: left;
margin-left:10px;
margin-top:10px;
}
2.3 Đẩy divB nằm xuống phía dưới  divA  thì dùng thuộc tính clear.
#divA{
float:left;
}
#divB{
clear:both;
}
Thuộc tính clear:both làm cho DIV B không chấp nhận bất cứ khối DIV nào "chẹn" hai đầu trái và phải của nó, do đó nó tụt xuống dưới DIV A để không bị DIV A "chẹn" ở đầu trái của nó.

3.Khi  hiển thị divA  và divB nằm cạnh nhau theo chiều ngang bên trong divMain như trong hình 4 thì phải đảm bảo

Độ rộng (DIV A) + Độ rộng (DIV B) <= Độ rộng (DIV Main)

4.Khi tính độ rộng của một DIV cần tính gộp cả vào đó độ rộng của margin-left,margin-right ,border-left,border-right

Ví dụ định nghĩa CSS  của  divA
#divA{
   margin-left:10px;
   width:800px;
   border-left:1px solid #c7c7c7;
   border-right:1px solid #c7c7c7
}
, như thế  độ rộng của divA = 800 + 10 +1 +1= 812(px). Cần lưu ý điều này để tránh bị vỡ DIV khi ghép các DIV theo chiều ngang.

Phần 1 Nguyên tắc dựng layout  
Phần 2: Example về dựng layout với độ phân giải 1024x768(px) bằng thẻ DIV và CSS  
Phần 3: Thiết kế web bằng thẻ DIV - Phần 3: Các khối giao diện chồng nhau

Mọi thông tin đăng lại và trích dẫn, ghi rõ xuất xứ dichvusohoa.com