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

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ì

Trang 1

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

10:54 am GMT +7 Hanoi

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ỹ

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

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Thiết kế giao diện với Div</title>

</head>

<body>

<h1>Header</h1>

</div>

Nội dung cột trái

</div>

Nội dung cột phải

</div>

Trang 2

Nội dung footer

</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:

CODE

*{ 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

CODE

#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: CODE

Trang 3

#header{

backg round() : 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: CODE

#left{

float: left;

width: 200px;

backg round() : #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:

CODE

#right{

float: right;

width: 700px;

padding: 10px;

backg round() : #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

Trang 4

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

CODE

.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:

CODE

#footer{

backg round() : 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

Định dạng
Số trang	4
Dung lượng	152 KB