Hướng dẫn cơ bản về cách sử dụng thẻ DIV trong thiết kế giao diện Web

Thẻ div (tiếng Anh: division) khái niệm một phân vùng hoặc vùng trong một ebook HTML. Chính vì như thế, thẻ div thường được dùng để làm vùng chứa các phần tử HTML khác hay dùng để khái niệm bố cục giao diện của 1 trang dễ dàng.

Xác nhận kích cỡ chiều rộng (width) trang web

Trong thiết kế Web, người ta chỉ cần nắm được thông số kỹ thuật chiều rộng (width) của 1 website để biết thiết kế trang Web này như nào. Do website được hiển thị trên màn hình desktop, máy tính, tablet, mobile,… có chiều rộng màn hình khác nhau. Chính vì như thế, các nhà thiết kế Web thường thiết lập chiều rộng bằng tỉ lệ % & kết phù hợp với Bootstrap (hoặc framework) để xây dựng giao diện Web thỏa mãn (responsive), tức thỏa mãn hiển thị theo kích cỡ màn hình.

Trong nội dung hướng dẫn bạn canh kích cỡ chiều rộng bằng nhà cung cấp px (pixel), nếu bạn dùng nhà cung cấp % thì cũng như với. Tất cả chúng ta sẽ lấy kích cỡ 1024px làm chuẩn do kích cỡ chiều rộng ở mức bình quân với 1 giao diện Web trên Desktop/Máy tính xách tay. Trừ đi kích cỡ của thanh kéo dọc bên phải (scrollbar) thì bạn có kích cỡ chiều rộng rơi tầm 980px là ổn. Bạn có thể khái niệm kích cỡ chiều rộng khác là tùy ý.

Nếu bạn dùng div với độ rộng bằng nhà cung cấp px để canh kích cỡ màn hình thì khi phóng to thu nhỏ giao diện sẽ bị bể. Để khắc phục thực trạng đó, bạn phải dùng phong cách (css, chẳng hạn @media screen…) theo từng màn hình, cách này có thể hơi cầu kỳ với bạn chưa hiểu gì về thiết kế giao diện. Còn nếu như không, bạn phải dùng Bootstrap hay framework tương đương để khắc phục vấn đề biến đổi kích cỡ màn hình. Tạm thời bạn cứ bám theo bài này để học cách canh div trước đã.

Khái niệm phong cách body

Trong bài này dùng thẻ style ở phần tử head, bạn có thể lưu style bằng file biệt lập nếu mong muốn, ví dụ lưu file riêng thì code thế này:

<headvàgt;
  <backlinks rel="stylesheet" type="text/css" href="tentaptincuaban.css">
</headvàgt;

Tất cả chúng ta dùng phong cách margin: 0 tự động để miêu tả bố cục auto canh giữa (canh đều hai bên). Còn nếu như không giao diện của các bạn nằm lệch hẳn bên trái, nhìn không thẩm mỹ.

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<stylevàgt;
body
{
	margin: 0 tự động; // canh bố cục đều 2 bên, dòng này bắt buộc cần có
}
</stylevàgt;
</headvàgt;

<bodyvàgt;
Bài viết...
</bodyvàgt;

</htmlvàgt;

Bố cục trang web

Tất cả chúng ta sẽ thiết kế một trang web dễ dàng có bố cục gồm:

Xem Thêm  4 Chức năng để định dạng một số thành 2 vị trí thập phân trong SQL Server - sql chuyển đổi sang thập phân với 2 chữ số thập phân

  • Phần Header: phần đầu trang chứa logo, banner,… & các thông tin khác
  • Phần Nav: phần bố cục bên trái chứa danh mục & link.
  • Phần Content: phần chứa bài viết trang web.
  • Phần Dưới cùng của trang: chứa danh mục phụ, thông tin bản quyền trang web.

Trong thẻ body, bạn phải phân tách bố cục bằng thẻ div như sau. Hãy lưu ý đọc thật kỹ & chậm rì rì dòng giải thích sau.

Trước tiên bạn dùng 1 thẻ div với class=”wrap” để bao toàn thể giao diện lại. Tính chất class sử dụng cho div để khái niệm phong cách ở phần style phía trên. Tính chất class có thể sử dụng cho nhiều div. Ngược lại, tính chất id cũng như với class, nhưng chỉ sử dụng cho 1 vùng div về mặt lý thuyết, trên thực tiễn bạn có dùng cho nhiều div nếu mong muốn.

Kế tiếp, bạn sử dụng 1 vùng div với id=”header” để tạo header. Để chắc ăn, bạn sử dụng 1 div với class=”main” để bao phần bài viết chính lại, trong đó chứa 2 div, 1 div với class=”nav” là phần danh mục, 1 div với class=”content” là phần bài viết. Cuối cùng sử dụng vùng div với id=”cuối trang” để làm phần chân trang.

...
<bodyvàgt;
<div class="wrap"> <!-- sử dụng 1 div bao hết bài viết website lại -->

	<div id="header"> <!-- phần header -->
	DAMMIO.COM
	</divvàgt;
	
	<div class="main"> <!-- bao phần bài viết chính -->
		<div class="nav">
			Bài viết danh mục
		</divvàgt;
		
		<div class="content">
			Bài viết chính
		</divvàgt;
	</divvàgt; <!-- chấm dứt bài viết chính -->
	
	<div id="footer"> <!-- phần header -->
	Bản quyền thuộc về DAMMIO.COM nhé các bạn! <3 <3 <3
	</divvàgt;
	
</divvàgt; <!-- sử dụng 1 div bao hết bài viết website lại -->

</bodyvàgt;
...

Khái niệm phong cách

Sau khoảng thời gian phân tách xong vùng div theo bố cục, giờ là lúc bạn khái niệm phong cách cho từng vùng ở thẻ style nằm đầu trang. Mỗi thẻ div bạn cần có một số thông số kỹ thuật như sau:

  • width: chiều rộng
  • float: tính chất canh div theo left, right, center, justify (canh đều). Trong bài thì dùng float:left vì các vùng div sẽ canh từ trái sang để dễ theo dõi bố cục.
  • background-color: tạo màu nền cho vùng div để theo dõi, lúc nào xong giao diện có thể xóa đi.
Xem Thêm  [Tự học Java] Tìm hiểu Input and Output trong java - đầu vào hệ thống trong java

Chẳng hạn, tạo phong cách cho vùng div header như sau:

<stylevàgt;
...
/* id="header" thì phải khái niệm bằng dấu # & tên id (header) */
#header 
{
	width: 980px; /* kích cỡ chiều rộng website */
	float: left; /* canh div từ trái sang */
	background-color: yellow; /* tạo màu để ưa nhìn */
}
...
</stylevàgt;
...

Sau đây là đầy đủ đoạn mã với màu sắc các vùng để ưa nhìn, sau khoảng thời gian thiết kế xong có thể gỡ ra.

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<stylevàgt;
body
{
	margin: 0 tự động; /* canh bố cục đều 2 bên */
	padding: 0;
	width: 980px;
}

.wrap
{
	width: 980px; /* kích cỡ chiều rộng website */
	float: left; /* canh div từ trái sang */
}

/* id="header" thì phải khái niệm bằng dấu # & tên id (header) */
#header 
{
	width: 980px; /* kích cỡ chiều rộng website */
	float: left; /* canh div từ trái sang */
	background-color: yellow; /* tạo màu để ưa nhìn */
}

.main
{
	width: 980px; /* kích cỡ chiều rộng website */
	float: left; /* canh div từ trái sang */
}

/* chiều rộng của 2 vùng div "nav" & "content" phải bằng tổng độ rộng của trang */
/* lưu ý padding, border, margin có thể tác động đến độ rộng của website */
.nav
{
	width: 280px; /* kích cỡ chiều rộng của vùng thanh bên */
	float: left; /* canh div từ trái sang */
	background-color: lightgreen; /* tạo màu để ưa nhìn */
}

.content
{
	width: 700px; /* kích cỡ chiều rộng của vùng bài viết */
	float: left; /* canh div từ trái sang */
	background-color: lightblue; /* tạo màu để ưa nhìn */
}

#cuối trang
{
	width: 980px; /* kích cỡ chiều rộng của vùng bài viết */
	float: left; /* canh div từ trái sang */
	background-color: pink; /* tạo màu để ưa nhìn */
}

</stylevàgt;

</headvàgt;

<bodyvàgt;

<div class="wrap"> <!-- sử dụng 1 div bao hết bài viết website lại -->

	<div id="header"> <!-- phần header -->
	<α href="https://www.dammio.com">DAMMIO.COM</a> <br/></brvàgt;</brvàgt; <!-- dùng thẻ br để xuống dòng làm vùng to ra ưa nhìn -->
	Phần Header id="header"
	</divvàgt;
	
	<div class="main"> <!-- bao phần bài viết chính -->
		<div class="nav">
			Bài viết danh mục <br/></brvàgt;</brvàgt; Phần thanh bên trái class="nav"
		</divvàgt;
		
		<div class="content">
			Bài viết chính <br/></brvàgt;</brvàgt; Phần bài viết class="content"
		</divvàgt;
	</divvàgt; <!-- chấm dứt bài viết chính -->
	
	<div id="footer"> <!-- phần header -->
		Bản quyền thuộc về <α href="https://www.dammio.com">DAMMIO.COM</a> nhé các bạn! <br/></brvàgt;</brvàgt;
		Phần chân trang id="footer"
	</divvàgt;
	
</divvàgt; <!-- sử dụng 1 div bao hết bài viết website lại -->

</bodyvàgt;

</htmlvàgt;

Sau đây là giao diện website chỉ tô điểm bằng đường viền border & bỏ nền màu sắc.

Xem Thêm  Chương trình Java để nhận đầu vào từ người dùng - chương trình java lấy đầu vào từ người dùng

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<stylevàgt;
body
{
	margin: 0 tự động; /* canh bố cục đều 2 bên */
	padding: 0;
	width: 982px;
}

.wrap
{
	width: 982px; /* kích cỡ chiều rộng website */
	float: left; /* canh div từ trái sang */
	border:1px solid #AAA;
	
}

/* id="header" thì phải khái niệm bằng dấu # & tên id (header) */
#header 
{
	width: 980px; /* kích cỡ chiều rộng website */
	float: left; /* canh div từ trái sang */
	border-bottom:1px dashed #AAA;
}

.main
{
	width: 980px; /* kích cỡ chiều rộng website */
	float: left; /* canh div từ trái sang */
}

/* chiều rộng của 2 vùng div "nav" & "content" phải bằng tổng độ rộng của trang */
/* lưu ý padding, border, margin có thể tác động đến độ rộng của website */
.nav
{
	width: 279px; /* kích cỡ chiều rộng của vùng thanh bên */
	float: left; /* canh div từ trái sang */
	border-right:1px solid #999; /* tạo viền bên phải */
}

.content
{
	width: 700px; /* kích cỡ chiều rộng của vùng bài viết */
	float: left; /* canh div từ trái sang */
}

#cuối trang
{
	width: 980px; /* kích cỡ chiều rộng của vùng bài viết */
	float: left; /* canh div từ trái sang */
	border-top:1px dashed #AAA;
}

</stylevàgt;

</headvàgt;

<bodyvàgt;

<div class="wrap"> <!-- sử dụng 1 div bao hết bài viết website lại -->

	<div id="header"> <!-- phần header -->
	<α href="https://www.dammio.com">DAMMIO.COM</a> <br/></brvàgt;</brvàgt; <!-- dùng thẻ br để xuống dòng làm vùng to ra ưa nhìn -->
	Phần Header id="header"
	</divvàgt;
	
	<div class="main"> <!-- bao phần bài viết chính -->
		<div class="nav">
			Bài viết danh mục <br/></brvàgt;</brvàgt;<br/></brvàgt;</brvàgt;<br/></brvàgt;</brvàgt;<br/></brvàgt;</brvàgt; Phần thanh bên trái class="nav"
		</divvàgt;
		
		<div class="content">
			Bài viết chính <br/></brvàgt;</brvàgt;<br/></brvàgt;</brvàgt;<br/></brvàgt;</brvàgt;<br/></brvàgt;</brvàgt; Phần bài viết class="content"
		</divvàgt;
	</divvàgt; <!-- chấm dứt bài viết chính -->
	
	<div id="footer"> <!-- phần header -->
		Bản quyền thuộc về <α href="https://www.dammio.com">DAMMIO.COM</a> nhé các bạn! <br/></brvàgt;</brvàgt;
		Phần chân trang id="footer"
	</divvàgt;
	
</divvàgt; <!-- sử dụng 1 div bao hết bài viết website lại -->

</bodyvàgt;

</htmlvàgt;

Tổng kết

Nội dung giúp bạn đã hiểu & làm sao mà sử dụng div để phân tách bố cục & xây dựng giao diện trang web. Ngoài ra, với bài viết 1 bài như vậy này thì khó có thể giúp các bạn hiểu hết về mọi trường hợp trong thiết kế giao diện website. Thành ra, nếu bạn có khúc mắc xin để lại comment. Xin cảm ơn!

Viết một bình luận