layout

Tạo Layout đơn giản với DIV và CSS

Việc sử dụng DIV kết hợp với CSS để làm layout (bố cục) cho một trang web đã trở lên phổ biến và đạt hiệu quả cao. Chẳng hạn bạn cần thiết kế một trang có giao diện được thiết kế với layout như sau:

Với layout như trên bạn hoàn toàn bạn có thể sử dụng table (bảng) cho việc thiết kế, tuy nhiên table lại bộc lộ khá nhiều nhược điểm khi sử dụng làm layout cho một trang web có cấu trúc như trên. Các nhược điểm có thể gặp phải với table với những dạng layout này là chậm, khó tùy chỉnh và khó kết hợp với CSSJavascript để tạo lên sự linh hoạt cho trang web.

Sau đây tôi sẽ hướng dẫn các bạn các bước căn bản nhất để có thể tạo được các layout với DIV và CSS. Trước hết bạn cần tạo mới một trang HTML với cấu trúc chuẩn (gồm đầy đủ các phần html, head, title, body). Tiếp theo bạn code đoạn mã HTML sau vào phần body của trang.

<div id="main">
	<div id="head">
	</div>
	<div id="head-link">
	</div>
	<div id="left">
	</div>
	<div id="content">
	</div>
	<div id="right">
	</div>
	<div id="footer">
	</div>
</div>

Các cặp thẻ trong đoạn mã trên giúp bạn tạo ra các phân vùng khác nhau trên trang HTML của mình, mỗi phân vùng được đánh ID riêng biệt (các ID này sẽ  dùng để định nghĩa CSS), chi tiết như sau:

  1. main: Phân vùng chứa toàn bộ nội dung của trang.
  2. head: Phân vùng chứa nội dung đầu tiên của trang (theo VD trên đó là  phần logo + banner)
  3. head-link: Phân vùng chứa các liên kết đầu trang (ở VD trên: Home, Students, Course, v.v.)
  4. left: Phân vùng chứa các nội dung bên trái (ở VD trên là các liên kết trái)
  5. content: Phân vùng chứa các nội dung chính của trang (ở VD trên là các phân vùng thông tin như: Hot news, Photo Slide, News 1, v.v.)
  6. right: Phân vùng chứa các thông tin bên phải trang (ở VD trên là lịch, biểu đồ, bản đồ)
  7. footer: Phân vùng chứa các thông tin cuối trang (ở VD trên là thông tin về chủ sở hữu và các liên kết)

Chạy thử trang trên trình duyệt kết quả sẽ như sau:

Bây giờ là đến công đoạn code các bộ chọn CSS (selector) để phân vùng rõ ràng cho các DIV đã tạo ở trên:

1. Tạo bộ chọn body để cố định phông chữ cho cả trang và bộ chọn #main để cố định độ rộng vùng thông tin và trang sẽ chiếm và căn chỉnh vùng này nằm giữa màn hình.

body{
	font-family: Arial, Tahoma;
	font-size: 12px;
}

#main{
	width: 1000px;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}

2. Tạo bộ chọn #head xác định chiều cao, màu nền, đường viền và khoảng cách so với các vùng khác (khoảng cách so với vùng bên dưới – margin-bottom).

#head{
	height: 100px;
	background-color: #F5F5F5;
	border: 1px solid #CDCDCD;
	margin-bottom:5px;
}

3. Kiểm tra lại trang trên trình duyệt bạn sẽ có kết quả sau (phần div với id là head đã được xác định):

4. Tiếp tục với định nghĩa bộ chọn #head-link, để xác định vùng đặt các liên kế đầu trang:

#head-link{
     height: 30px;
     line-height: 30px;
     padding-left: 10px;
     padding-right: 10px;
     border: 1px solid #CDCDCD;
     background-color: #F5F5F5;
     margin-bottom:5px;
     clear: both;
}

5. Quan sát lại trang trên trình duyệt, bạn sẽ thấy vùng liên kết đầu trang hiển thị ngay dưới phần head.
6. Định nghĩa tiếp bộ chọn #left để xác định vùng cho nội dung bên trái, với độ rộng là 200px, chiều cao tối thiểu là 400px và đặc biệt chú ý tới mô tả float: left; mô tả này làm cho vùng bên trái (DIV với ID là left) sẽ dạt sang bên trái nhường chỗ cho các phân vùng khác: content và right).

#left{
     width: 150px;
     min-height: 400px;
     border: 1px solid #CDCDCD;
     float:left;
     background-color: #004C00;
     margin-bottom: 5px;
}

7. Quan sát lại sự thay đổi về các vùng của trang trên trình duyệt:

8. Bổ sung tiếp các selector cho vùng giữa và vùng phải lần lượt là #content#right:

#content{
     width: 600px;
     min-height: 400px;
     border: 1px solid #CDCDCD;
     float:left;
     margin-left: 5px;
     margin-right: 5px;
     margin-bottom: 5px;
}
#right{
     width: 234px;
     min-height: 400px;
     border: 1px solid #CDCDCD;
     float:right;
     margin-bottom: 5px;
}

9. Quan sát lại trang


10. Cuối cùng, bạn định nghĩa bộ chọn cho phân vùng cuối trang với id là #footer

#footer{
     height: 50px;
     clear: both;
     border: 1px solid #CDCDCD;
     background-color: #F8F8FF;
}

11. Quan sát lại trang trên trình duyệt bạn sẽ thấy các phân vùng cần thiết đã vào đúng vị trí cần đặt:

Như vậy qua các bước ở trên chúng ta đã thử nghiệm với các phương pháp cơ bản để dàn trang sử dụng thẻ Div có sự kết hợp với CSS. Điều quan trọng nhất là bạn biết cách áp dụng những kỹ thuật cơ bản này để tạo ra các trang web có layout mà bạnkhách hàng của bạn mong muốn. Bây giờ bạn tiếp tục bổ sung thông tin vào các phân vùng và định nghĩa thêm các bộ chọn cần thiết để có thể có một trang HTML giống như mẫu thiết kế ở đầu bài viết.

Chúc bạn thành thạo DIV và CSS để có được những trang web vừa mắt người dùng!

Nguyễn Việt Khoa
_________________________________________________________

Mời bạn đọc thêm bài viết sau “RWD đơn giản với CSS và DIV“.

53 comments on “Tạo Layout đơn giản với DIV và CSS

  1. Đôi khi mình muốn canh chỉnh văn bản (hoặc một div khác) nằm giữa div mẹ thì phải làm sao? Trên mang họ khuyên là display hộp div thành dạng block rồi dùng lệnh trong CSS canh chỉnh… Nhưng như thế thì một số tính chất của div sẽ bị mất. Có cách nào khác hiệu quả hơn không?

    Cám ơn TTLP, bài viết dễ hiểu lắm :)

    • Mình chưa rõ là những tính chất gì bị mất? Mình cũng cần biết rõ giữa theo câu hỏi của bạn là theo chiều ngang hay chiều dọc?
      Thông thường nếu căn văn bản chính giữa theo chiều ngang thì mình hay dùng text-align trong CSS, còn căn chỉnh box nào đó nằm giữa trong 1 box khác thì mình hay dùng margin-left và margin-right với giá trị auto.

  2. Pingback: RWD đơn giản với CSS và DIV | Tạp chí Lập trình

  3. thầy ơi cho e hỏi sao mình làm cái này trên Macromedia Dreamweaver 8 nó nhìn các khung nó bé xíu ý thầy ơi còn chạy nó thỳ lại đẹp vậy thầy cho e hỏi tại sao lại vậy ạ

  4. Pingback: Tạo Layout đơn giản với DIV và CSS | Lưu lại những kinh nghiệm lập trình web

  5. Ơ sao width tổng = 1000px mà cộng left+content+right= 984 va các margin =5px vay co thua hay thieu khong ma tai sao lai nhu vay.

    • Ở đây chủ yếu mình hướng dẫn một cách căn bản nhất để có thể tạo ra layout cho trang web, việc tổng kích thước nhỏ hơn, hay lớn hơn thì bạn có thể xem xét và điều chỉnh cho phù hợp, ngoài độ rộng, margin, thì border và padding cũng ảnh hưởng tới độ rộng của toàn trang.

    • bạn chưa cộng mấy cái linh tinh khác kìa. còn border, padding, margin nữa kìa bạn tấp cả cộng lại là vừa đủ. nếu không đủ thì cũng không sao mà.
      tổng lớn hơn thì một thẻ sẽ tự động xuống dòng. nếu nhỏ hơn thì nhìn không được đẹp thôi

  6. Cám ơn Bạn Rất Nhiều!…Bài rất hay và dễ hiểu.
    Nếu có thể thì bạn hướng dẫn cách tạo file CSS để gán trực tiếp cho html thì tốt cho mấy bạn newbie hơn.
    Thanks Nhiều ^^!

    • Mình chưa hiểu ý “nó không hiển thị” của bạn? Theo mình thì mấy thứ này không phụ thuộc vào Eclipse và Tomcat.

  7. Làm thế nào để tạo đường liên kết với file css riêng trên html.
    Làm sao để canh form đăng nhập đc cân đối khi bên là họ và tên còn bên là tuổi thì đoạn text đăng nhập sẽ bị mất tính cân đối .

  8. Bài viết hay quá, nhưng mình chưa biết tạo phần content chia tiếp làm 3 phần new1 new2 new3 thế nào. Bạn chỉ tiếp cho mình được không. Thanks

    • Bạn có thể sử dụng tiếp DIV để phân chia các vùng đó, nhớ định nghĩa CSS cho nó để có kích thước\không gian phù hợp là được

    • Để một khối căn giữa bạn có thể sử dụng thuộc tính canh lề trái, phải của CSS, VD: margin-left: auto; margin-right: auto;

  9. Cám ơn tác giả rất nhiều. Mình đang cần giúp đỡ: sau khi đã tạo các layouts, làm cách nào để mình hiển thị các files html vào các layouts? Nếu được, mong tác giả bài viết hướng dẫn giúp. Xin cám ơn.

    • Các vị trí trong layout bạn có thể bổ sung mã HTML\CSS để tạo thành nội dung hoàn chỉnh, còn nếu muốn đưa hẳn nội dung một trang HTML vào đó bạn cần tìm hiểu thêm về AJAX hoặc đơn giản là dùng Iframe :)

  10. Pingback: Tạo layout web đơn giản với DIV và CSS – DaiLuu's Blog

  11. Mình đang học thiết kế web cơ bản, html và css may đã tìm được tài liệu có ích với việc học.cảm ơn bạn

  12. Cảm ơn bạn về bài đăng. Nhưng mình gặp chút trục trặc là khi phần nội dung của phần content nhiều thì phần khung nó sẽ dài ra xuống dưới, nhưng phần left và right thì không dài theo phần content. vậy có cách nào khắc phục lỗi này? Cảm ơn bạn nhiều… :)

  13. Cảm ơn bạn,bài viết rất hữu ích,dễ hiểu.Mong được đọc nhiều bài hữu ích hơn từ bạn

Leave a Reply

Your email address will not be published. Required fields are marked *