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

I.Website mẫu

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. Trong các bài viết Phần 1 và Phần 2 các bạn đã được hướng dẫn chi tiết từng bước về cách dựng layout của một trang web cụ thể. Đó là dạng website đơn giản với các khối giao diện xếp tuần tự cạnh nhau từ trên xuống dưới, từ trái sang phải. Trên cơ sở cơ bản của Phần 1, Phần 2, trong phần 3 này tôi sẽ hướng dẫn tiếp ở một trình độ cao hơn: thiết kế web với layout chứa các khối giao diện chồng nhau.

• Mẫu template ví dụ mẫu thiết kế web bằng DIV- Các khối giao diện chồng nhau
• Chạy thử ví dụ sau khi thực hiện hoàn chỉnh click vào example thiết kế web bằng DIV- Các khối giao diện chồng nhau

Lưu ý rằng mẫu thiết kế web bằng DIV- Các khối giao diện chồng nhau   được thực hiện hoàn chỉnh hơn example thiết kế web bằng DIV- Các khối giao diện chồng nhau vì example thiết kế web bằng DIV- Các khối giao diện chồng nhau chỉ là layout tĩnh, muốn hoạt động sống động hơn 1 chút như mẫu thiết kế web bằng DIV- Các khối giao diện chồng nhau thì bạn phải viết một ít jQuery mà dichvusohoa.com sẽ trình bày vào dịp khác, ở đây chỉ tập trung vào DIV và CSS

Trên thực tế, không phải bao giờ website cũng đơn thuần chỉ là các khối xếp kề nhau từ trái sang phải, từ trên xuống dưới. Trong ví dụ cụ thể trên nhìn qua giao diện ta nhận thấy có 02 khối phần tử chồng lấn đó là

• Logo công ty nằm chồng lên tất cả các phần tử khác. Ảnh giới thiệu công ty xuất hiện thành seri nối tiếp nhau nhưng vẫn bị logo "đè lên" góc cao nhất bên trái
• 02 mép của seri ảnh giới thiệu công ty có 02 khối chữ nhật bán trong suốt "đè lên" tạo cảm giác như khối ảnh bị "cài" dưới lớp kính mờ ở 2 mép

Hình 1. Layout với 02 vùng chồng lấn

II. Nguyên tắc dựng

1.Đơn giản hóa giao diện bằng cách loại bỏ các khối giao diện nằm đè lên các khối khác. Sau thao tác này ta sẽ thu được 01 lớp các phần tử cơ bản nằm kề nhau từ trên xuống dưới, từ trái qua phải, và đưa bài toán trở về dạng đơn giản như đã trình bày ở Phần 1, Phần 2.

Hình 2. Loại bỏ 02 phần tử chồng lấn, ta thu được layout dạng cơ bản

2.Dựng các phần tử gây chồng lấn bằng thuộc tính position:absolute, position:relative và z-index

Nguyên tắc này được tóm tắt như sau:

• Chọn một khối DIV nền ( được hiểu như "bệ đỡ", "nền nằm dưới" đỡ các phần tử chồng lấn "trồi lên cao"). Sau đó set thuộc tính position cho phần tử này bằng relative.
• Các phần tử chồng lấn được đặt thuộc tính position bằng absolute.
• Sử dụng thuộc tính top, left để xê dịch định vị chính xác các phần tử chồng lấn.
• Đặt giá trị z-index thật lớn cho các phần tử chồng lấn.

Giải thích: Xem lại bài viết ở Phần 1, Phần 2, các bạn có thể thấy có 1 phần tử là divOuter đóng vai trò là container chứa tất cả các phần tử giao diện khác, và ấn định độ rộng trang web là 1024 px. Trong Phần 3 này divOuter vẫn giữ nhiệm vụ cũ, đồng thời đóng thêm vai trò là: một khối DIV nền ( được hiểu như "bệ đỡ", "nền nằm dưới" đỡ các phần tử chồng lấn "trồi lên cao"). Cụ thể trong trường hợp này là ta cần dựng logo công ty  dưới dạng 1 khối DIV nổi lên cao nhất. 

Hình 3. divLogo với position: absolute và divOuter position: relative

Thông thường giá trị mặc định của position là static, khi đó các khối giao diện sẽ xếp liền kề nhau, còn để xử lý chồng đè, ta phải thiết lập position bằng relative hoặc absolute. 

Khi position của divOuter được đặt relative còn position của divLogo là absolute thì vị trí của divLogo được xác định bằng 02 giá trị top, left và theo vật qui chiếu là container của divLogo tức là divOuter. Sở dĩ ta buộc phải đặt position của divOuter = relative bởi nếu không thì tọa độ của top, left của divLogo sẽ bị một số trình duyệt tính theo phần tử BODY, như thế divLogo sẽ dạt sang trái nếu như độ phân giải màn hình > 1024px.

z-index là thuộc tính chỉ có ý nghĩa khi position = absolute hoặc relative,  z-index của phần tử càng lớn thì phần tử càng "trồi lên cao" hơn. Phần tử có z-index thấp sẽ bị phần tử z-index cao hơn che phủ.  Ở đây vì nhìn giao diện, thấy divLogo là cao nhất, che phủ mọi phần tử nên ta đặt cho nó 01 giá trị khá lớn là 999.

Như vậy tóm lại là

• Trước tiên tạm loại bỏ các phần tử chồng lấn, áp dụng lý thuyết dựng layout ở Phần 1, Phần 2, dựng tất cả các phần tử không chồng lấn nằm trong 01 thẻ divOuter. divOuter này có thêm giá trị position = relative.
• Sau đó bổ sung các phần tử chồng lấn vào divOuter, các phần tử này được đặt position = absolute, điều chỉnh tọa độ bằng (top, left), đặt z-index cho chúng để xác định trật tự che phủ.

III.Thực hành dựng ví dụ mẫu

3.1.Tổ chức thư mục

Hình 4. Cấu trúc thư mục

Rồi ta tiến hành như 02 bước của lý thuyết

3.2.Đơn giản hóa giao diện bằng cách loại bỏ các khối giao diện nằm đè lên các khối khác. Sau thao tác này ta sẽ thu được 01 lớp các phần tử cơ bản nằm kề nhau từ trên xuống dưới, từ trái qua phải, và đưa bài toán trở về dạng đơn giản như đã trình bày ở Phần 1, Phần 2.

Cụ thể ở đây ta loại bỏ logo công ty và loại bỏ 02 khối chữ nhật bán trong suốt đè lên 02 mép seri ảnh công ty. Vì đã trình bày kỹ ở Phần 1, Phần 2 nên ở đây ta không đi sâu vào việc dựng chi tiết nữa

File index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="vi" lang="vi"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="keywords" content="thiết kế web bằng thẻ DIV" /> <meta name="description" content="Hướng dẫn cách thiết kế web bằng thẻ DIV trong trường hợp có các phần tử chồng lên nhau" /> <meta name="robots" content="index,follow" /> <meta name="copyright" content="Copyright 2009. eService Central. All Rights Reserved." /> <meta name="author" content="Trung tâm Giải pháp dịch vụ số - eService, website http://www.dichvusohoa.com, email info@dichvusohoa.com" /> <meta name="designer" content="Trung tâm Giải pháp dịch vụ số - eService, website http://www.dichvusohoa.com, email info@dichvusohoa.com" /> <meta name="revisit-after" content="1" /> <title>Thiết kế web bằng thẻ DIV - Phần 3: Các khối gia diện chồng nhau</title> <link rel="stylesheet" href="styles/style.css" type="text/css" /> <link rel="stylesheet" href="styles/h_menu.css" type="text/css" /> <link rel="stylesheet" href="styles/v_menu.css" type="text/css" /> <script type="text/javascript" language="javascript" src="jScripts/jQuery-1.4.2.min.js"></script> <script type="text/javascript" language="javascript" src="jScripts/jQueryPNGFix.js"></script> <script type="text/javascript" language="javascript" src="jScripts/jIndex.js"></script> </head> <body> <div id="divOuter"> <div id="divHeader"> <div id="divHMenu"> <a href="http://www.dichvusohoa.com/dich-vu/thiet-ke-web.html"> <div class="hMenuItem" style="background-image:url('images/btn-gioi-thieu.png')" onmouseover='this.className="hMenuItemOver"' onmouseout='this.className="hMenuItem"'></div> </a> <a href="http://www.dichvusohoa.com/dich-vu/quang-ba-web.html"> <div class="hMenuItem" style="background-image:url('images/btn-tin-tuc.png')" onmouseover='this.className="hMenuItemOver"' onmouseout='this.className="hMenuItem"'></div> </a> <a href="http://www.dichvusohoa.com/dich-vu/cac-du-an-tin-hoc-khac.html"> <div class="hMenuItem" style="background-image:url('images/btn-cong-trinh.png')" onmouseover='this.className="hMenuItemOver"' onmouseout='this.className="hMenuItem"'></div> </a> <a href="http://www.dichvusohoa.com/san-pham/diet-virus-bkav/the-diet-virus-bkav-pro.html"> <div class="hMenuItem" style="background-image:url('images/btn-tu-van.png')" onmouseover='this.className="hMenuItemOver"' onmouseout='this.className="hMenuItem"'></div> </a> <a href="http://www.dichvusohoa.com/san-pham/diet-virus-kaspersky/the-diet-virus-kaspersky-internet-security.html"> <div class="hMenuItem" style="background-image:url('images/btn-lien-he.png')" onmouseover='this.className="hMenuItemOver"' onmouseout='this.className="hMenuItem"'></div> </a> </div> </div> <div id="divVMenu"> <a href="http://www.dichvusohoa.com/tin-tuc/bai-viet-chon-loc/tung-buoc-thiet-ke-web-bang-the-div-va-css-voi-do-phan-giai-1024x768%28px%29-phan-i:-nguyen-tac-dung-layout.html"> <div class="vMenuItem" style="background-image:url('images/btn-kien-truc.png');background-position:right top" onmouseover='this.className="vMenuItemOver"' onmouseout='this.className="vMenuItem"'></div> </a> <a href="http://www.dichvusohoa.com/tin-tuc/bai-viet-chon-loc/tung-buoc-thiet-ke-web-bang-the-div-va-css-voi-do-phan-giai-1024x768%28px%29-phan-ii:-vi-du-minh-hoa.html"> <div class="vMenuItem" style="background-image:url('images/btn-noi-that.png')" onmouseover='this.className="vMenuItemOver"' onmouseout='this.className="vMenuItem"'></div> </a> <a href="http://www.dichvusohoa.com/tin-tuc/tin-hoc/phan-mem-diet-virus-kaspersky-gia-re-duoc-che-tao-va-hoat-dong-nhu-the-nao.html"> <div class="vMenuItem" style="background-image:url('images/btn-phong-thuy.png')" onmouseover='this.className="vMenuItemOver"' onmouseout='this.className="vMenuItem"'></div> </a> <a href="http://www.dichvusohoa.com/tin-tuc/bai-viet-chon-loc/cac-thuong-hieu-vang-mieng-tai-viet-nam.html"> <div class="vMenuItem" style="background-image:url('images/btn-xay-dung.png')" onmouseover='this.className="vMenuItemOver"' onmouseout='this.className="vMenuItem"'></div> </a> <a href="http://www.dichvusohoa.com/tin-tuc/tin-hoc/thiet-ke-web-bang-the-div---phan-3:-cac-khoi-giao-dien-chong-lan.html"> <div class="vMenuItem" style="background-image:url('images/btn-giam-sat-thi-cong.png')" onmouseover='this.className="vMenuItemOver"' onmouseout='this.className="vMenuItem"'></div> </a> </div> <div id="divSlideShowImage"> <img src="images/H1.jpg" alt="pic1" /> </div> <div id="divLanguage" > Tiếng Việt  <img src="images/flag-vietnam.gif">  <a href='en/index.php'><img src="images/flag-english.gif"></a> </div> <div id="divFooter"> <MARQUEE scrollAmount=4 DIRECTION=LEFT VSPACE =0 height=25px onmouseover="this.stop();" onmouseout="this.start();"> <b>@2012 Bản quyền của ĐÔNG Á JSC.</b> <b> Địa chỉ</b> 212/41B Nguyễn Văn Nguyễn-Phường Tân Định-Quận 1-Tp.Hồ Chí Minh. <b>Phone </b> (84-8) 8 459 382. <b>Fax </b> (84-8) 8 459 382 <b>Chi nhánh Hà Nội:</b> Số 2/127/15/32 Đường Văn Cao - Ba Đình - Hà Nội. <b>Tel </b> (84-4) 38328540. <b>Fax</b> (84-4) 38328540. <a href='http://www.dichvusohoa.com/dich-vu/thiet-ke-web.html'>Thiết kế web</a> bởi <b>eService</b> </MARQUEE> </div> <div id="divSlideShowImageMask"> </div> <div id="divLogo"> </div> </div> </body> </html> Ở đây ta chỉ có một chút nâng cao so với phần 1, phần 2 đó là xử lý các ảnh PNG (Portable Network Graphics). Đa số trên web ta sử dụng ảnh định dạng GIF hoặc JPG, tuy nhiên  ta phải sử dụng PNG trong một số trường hợp:

• Các loại ảnh trong suốt hoặc mờ đục (bán trong suốt). Các loại ảnh bán trong suốt khi xếp chồng lên các phần tử khác sẽ tạo hiệu ứng trong mờ như có kính đè lên.
• Hình ảnh có biên cong uốn lượn phức tạp hoặc biên mờ không rõ cũng nên sử dụng định dạng PNG vì GIF hay JPG sẽ tạo ra hiệu ứng răng cưa rất xấu ở biên.
  

Tuy nhiên việc sử dụng PNG có rắc rối với IE6 vì nó không support định dạng này ( IE6 là khối ung thư của các trình duyệt  !!!). Để xử lý rắc rối này ta có thể dùng CSS filter, với hàm lọc progid:DXImageTransform.Microsoft.AlphaImageLoader, kiều như sau

img {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

May mắn là để giảm nhẹ khổ não của cái công việc ngớ ngẩn vì phải xử lý ảnh PNG này, ta có thể dùng các plugin jQuery (lại không thể tránh nói về jQuery). Có nhiều plugin jQuery cho lựa chọn này, ở đây tôi dùng  supersleight jQuery của tác giả Drew McLellan. Bạn chỉ việc include supersleight jQuery vào phần của index.php và sau đó gọi nó trong file jIndex.js như sau

$(document).ready(function() { $('body').supersleight({shim: 'transparent.gif'}); $('#divOuter').css({"visibility":"visible"}); } )

Các thành phần khác được dựng không có gì đặc biệt, chỉ lưu ý một chút ở file style.css

#divHMenu{ float: left; display: inline; margin-top: 145px; margin-left: 300px; width: 700px; height: 25px; }

ta đặt thuộc tính display:inline vì mặc định divHMenu có display:block, IE6 sẽ tạo ra các khoảng trắng bao quanh (ung thư của trình duyệt!!!).

3.3.Dựng các phần tử gây chồng lấn bằng thuộc tính position:absolute, position:relative và z-index

Trước tiên đặt thuộc tính display:relative cho divOuter trong file style.css để divOuter làm nền, làm tọa độ qui chiếu cho các phần tử chồng lấn

#divOuter{ position:relative; margin:auto; width:1002px; overflow: hidden; visibility: hidden; }

Tiếp theo dựng logo công ty, bổ sung phần tử divLogo vào style.css

#divLogo{ position: absolute; top: 135px; left: 20px; z-index: 999; width:280px; height:108px; background-image:url('../images/logo-donga.png'); background-repeat:no-repeat; }

sau khi đặt position: absolute cho divLogo, căn chỉnh vị trí của nó bằng top,left. Do logo là phần tử nổi cao nhất trong giao diện nên đặt cho nó giá trị z-index khá lớn là 999. 

Tiếp theo ta dựng tiếp 02 khối chữ nhật bán trong suốt "đè lên"seri ảnh công ty. Dùng PhotoShop dựng một ảnh mặt nạ PNG trong mờ tên là mask.png. Sau đó bổ sung divSlideShowImageMask vào style.css

#divSlideShowImageMask{ position: absolute; top:170px; left:211px; background-image:url('../images/mask.png'); background-repeat:no-repeat; width:753px; height: 358px; z-index:998; }

, các thông số CSS của divSlideShowImageMask tương tự divLogo, chỉ có z-index đặt thấp hơn bằng 998 để cho divSlideShowImageMask nổi cao hơn các phần tử khác nhưng vẫn nằm dưới divLogo.

Tài liệu tham khảo Transparent PNGs in Internet Explorer 6  

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