Thiết kế giao diện website từ tag Div và CSS

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Khanh Hoang
Tue, 19/02/2013, 15:08 (GMT+7)
0 Bình luận

Thiết kế giao diện website từ tag Div và CSS

Trước đây những người thiết kế hay sử dụng bảng (table) trong việc thiết kế giao diện cho website. Nhưng để đúng với chuẩn web standard (theo chuẩn) thì kỹ thuật thiết kế giao diện với thẻ div kết hợp với CSS đã dần thay thế bới những ưu việt và hiểu quả do nó mang lại.

Bài viết này mình sẽ hướng dẫn các bạn cách thiết kế một giao diện với thẻ div kết hợp với 2 thuộc tính Float và Clear trong CSS. Cấu trúc giao diện chúng ta sẽ thiết kế gồm có header, footer và 2 cột có kích thước cố định (fixed column) như hình bên dưới, bài viết hơi dài vì một số phần mình phải giải thích kỹ.

Thiết kế giao diện với Div và CSS

Demo div 2 cột Demo div 3 cột

Đầu tiên chúng ta sẽ dựng mã HTML như sau:

    <!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="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Thiết kế giao diện với Div</title>
        <link href="style.css" media="screen" rel="stylesheet" />
    </head>
    <body>
        <div id="mainWap">
              <div id="header">
            <h1>Header</h1>
         </div>
         <div id="left">
            Nội dung cột trái...
         </div>
         <div id="right">
            Nội dung cột phải...
         </div>
         <div class="clr"></div>
         <div id="footer">
           Nội dung footer...
         </div>
       </div>
    </body>
    </html>

Lưu lại với tên div.html vào một thư mục nào đó trên máy tính của bạn.

Trước tiên chúng ta sẽ tạo ra một thẻ div lớn bao quanh toàn bộ trang web với id=”mainWap”. Bên nên thực hiện việc này trong các thiết kế tiếp theo của mình. Ví dụ bây giờ bạn muốn toàn bộ trang web của bạn được canh bên phải màn hình, thay vì phải đi căn chỉnh từng thành phần sang phải thì bạn chỉ cần canh thẻ div này sang phải, toàn bộ các thành phần khác trong nó sẽ được canh phải theo thẻ div lớn. (Bạn cứ tưởng tượng rằng chúng ta có một cái hộp lớn và bỏ tất cả các hộp nhỏ vào bên trong và khi muốn thì chỉ cần di chuyển cái hộp lớn đi thôi). Đây cũng là cách để bạn quản lý độ lớn của Box tốt hơn.

Tiếp theo ta sẽ tạo các thành phần header, left, right, footer bên trong thẻ div lớn này với các id tương ứng.

Ta thêm vào thành phần <div class=”clr”></div> trước footer, ta sẽ xem phần này sau khi viết CSS.

Tạo một file style.css và lưu vào cùng thư mục chứa file div.html. chúng ta sẽ viết mã CSS trong file này.

Trong bài viết này có sử dụng đến Margin và Padding, tuy nhiên mỗi trình duyệt lại hiểu các giá trị này theo một kiểu, cho nên để tránh phiền toái việc đầu tiên chúng ta nên làm là reset 2 giá trị này về 0 với lệnh sau:

*{ margin: 0; padding: 0 }

Tiếp theo chúng ta sẽ quy định cho độ rộng của toàn bộ trang là 950px và canh giữa màn hình bằng các viết mã cho thẻ div lớn bao quanh mà chúng ta đã tạo ra ban đầu.

#mainWap{        
       width: 950px;
    margin: 0 auto;
}

Khi ta sử dụng

margin: 0 auto;

thì thẻ div lớn sẽ được canh giữa màn hình. Bạn có thể tìm hiểu thêm vấn đề này trong bài Margin và Padding trong CSS.

Theo hình trên ta thấy, thành phần header cách thành phần left và right 1 khoảng 10px, đó chính là margin-bottom của header đối left và right. Và ta sẽ viết mã cho header như sau:

#header{
        background: green;
        margin-bottom: 10px;
        padding: 10px;
    }

Tiếp theo để left và right tạo thành 2 cột nằm song song ta cần sử dụng đển thuộc tính Float để cố định 2 thành phần này, đồng thời gán cho chúng một kích thước (width) nào đó. Đầu tiên ta có cố định thành phần left về bên trái và gán thuộc tính width = 200px. Mã CSS như sau:

#left{
         float: left;
         width:  200px;
         background: #f98000;
         padding: 10px;
         min-height: 450px;
    }

Lúc này thành phần left sẽ được di chuyển về tận cùng bên trái của thẻ div mẹ (id=”mainWap”) và có độ lớn là:

200px + 10px left padding + 10px right padding = 220px; (1)

Tiếp theo ta viết mã CSS cho thành phần right như sau:

#right{
        float: right;
        width: 700px;
        padding: 10px;
        background: #e4e4e4;
        min-height: 450px;
    }

Lúc này thành phần right sẽ được di chuyển về tận cùng bên phải của thẻ div mẹ (id=”mainWap”) và có độ lớn là:

700px + 10px left padding + 10px right padding = 720px; (2)

Như ta đã biết khi thuộc tính float được khai báo cho một thành phần nào đó thì thành phần đó sẽ bị dịch chuyển tận cùng về phía bên trái nếu được float:left và bên phải nếu được float:right so với thành phần mẹ và tạo khoảng trống cho các thành phần khác di chuyển lên lấp đầy khoảng trống nếu còn.

Kết hợp (1) và (2) ta thấy rằng: Thành phần left được float left và có độ rộng 220px, như vậy nó được cố định về bên trái và tạo ra khoảng trống còn lại trong thẻ div mẹ là:

950 (độ rộng thẻ div bao quanh) – 220 (left) = 730px;

Như vậy đủ độ lớn để thành phần right (720px) di chuyển lên nằm song song với thành phần left và tạo thành 2 cột. Đương nhiên nó được cố định về bên phải vì có float:right.

Độ lớn của left và right = 220 + 720 = 940px, như vậy ta thấy còn dư 10px trong thẻ div bao quanh. Đó chính là khoảng cách 10px giữa left và right (như trên hình).

Khi sử dụng float, các thành phần bên dưới luôn luốn có xu hướng di chuyển lên trên. Và ở đây thì thành phần footer cũng vậy, nó tràn lên phía trên, và đó không phải là điều mà chúng ta mong muốn.

Do đó đây là lúc chúng ta cần sử dụng đến thuộc tính clear cho thành phần <div class=”clr”> nằm trước footer để ngăn cho footer không tràn lên trên.

.clr{clear: both;}

Và cuối cùng là CSS cho thành phần footer có khoảng cách 10px so với left và right, đó chính là margin-top của footer:

#footer{
        background: green;
        margin-top: 10px;
        padding: 10px;
    }

Thuộc tính min-height

Ở trên các bạn thấy mình có sử dụng thuộc tính min-height trong 2 thành phần left và right. Mục đích của việc này là để quy định chiều cao tối thiểu của một thành phần nào đó khi độ lớn về chiều cao của các thành phần bên trong nó chưa thực sự đủ lớn như mong muốn của ta. Nói đơn giản hơn, bây giờ trong các thành phần left và right chưa có nội dung gì cả, nhưng mình vẫn muốn nó có độ cao là 450px, lúc đó mình sẽ thêm thuộc tính min-height:450px. Khi độ cao của các thành phần bên trong nó vượt quá giá trị min-height, thì độ cao của một thành phần nào đó sẽ bằng tổng độ cao của các thành phần bên trong nó.

Chú ý: thuộc tính này không hoạt động trong trình duyệt Internet Explorer.

KẾT LUẬN

Như vậy là ta đã dựng được một khung giao diện với thẻ div kết hợp với CSS, đây chỉ là một khung giao diện đơn giản để các bạn có được những khái niệm về cách thiết kế giao diện với div. Qua bài học này chúng ta đã biết được:

Hiểu về cách thiết kế 1 giao diện với div
Hiểu thêm về Margin và Padding.
Cách tính toán độ lớn của Box.
Biết cách sử dụng Float và Clear, min-heịght.
Dựng được giao diện đơn giản với div.

Tags:

best practices

Bạn thấy bài viết này như thế nào?:

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

More about Khanh Hoang

Quảng Cáo Bài Viết

Download sách Drupal: Master Drupal in 7 hours

Một quyển sách hay, dành cho người mới bắt đầu, dài chưa đến 100 trang. Sách có cách diễn giải sống động, dễ hiểu, và không đề cập đến một dòng lệnh nào. Theo lời tác giả thì "Tôi không phải là nhà phát triển Drupal, tôi không biết code." Tuy nhiên, trong 7 tiếng, bạn sẽ học được cách xây dựng và tối ưu một website Drupal hoàn chỉnh.

Vô hiệu hoá tính năng bảo vệ mật khẩu trong window 7

Trong phần cuối của loạt bài “17 cách để tăng tốc Windows 7″, CafeF1.com sẽ giới thiệu với độc giả những cách thức còn lại để tăng tốc Windows 7 toàn diện.