Hướng dẫn fdiv php

Thẻ div (tiếng Anh: division) định nghĩa một phân vùng hoặc vùng trong một tài liệu HTML. Vì vậy, thẻ div thường được dùng để làm vùng chứa các phần tử HTML khác hay dùng để định nghĩa bố cục giao diện của 1 trang đơn giản.

Xác định kích thước chiều rộng (width) website

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

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

Nếu bạn dùng div với độ rộng bằng đơn vị px để canh kích thước màn hình thì khi phóng to thu nhỏ giao diện sẽ bị bể. Để giải quyết tình trạng đó, bạn phải dùng phong cách (css, ví dụ @media screen…) theo từng màn hình, cách này có thể hơi phức tạp với bạn chưa hiểu gì về thiết kế giao diện. Nếu không, bạn phải dùng Bootstrap hay framework tương tự để giải quyết vấn đề thay đổi kích thướ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 đã.

Định nghĩa 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 riêng biệt nếu muốn, chẳng hạn lưu file riêng thì code thế này:

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

Nội dung...

Bố cục website

Chúng ta sẽ thiết kế một website đơn giản có bố cục gồm:

• Phần Header: phần đầu trang chứa logo, banner,… và các thông tin khác
• Phần Nav: phần bố cục bên trái chứa menu và liên kết.
• Phần Content: phần chứa nội dung website.
• Phần Footer: chứa menu phụ, thông tin bản quyền website.

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

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

Tiếp theo, 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 nội dung chính lại, trong đó chứa 2 div, 1 div với class=”nav” là phần menu, 1 div với class=”content” là phần nội dung. Cuối cùng sử dụng vùng div với id=”footer” để làm phần chân trang.

...

 

	
 
	DAMMIO.COM
	
	
	
 
		

			Nội dung menu
		
		
		

			Nội dung chính
		
	
 
	
	
 
	Bản quyền thuộc về DAMMIO.COM nhé các bạn! <3 <3 <3
	
	
 


...

Định nghĩa phong cách

Sau khi phân chia xong vùng div theo bố cục, giờ là lúc bạn định nghĩa phong cách cho từng vùng ở thẻ style nằm đầu trang. Mỗi thẻ div bạn cần phải có một số thông số như sau:

• width: chiều rộng
• float: thuộc tính 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, khi nào xong giao diện có thể xóa đi.

Ví dụ, tạo phong cách cho vùng div header như sau:

...

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

 

	
 
	DAMMIO.COM 


 
	Phần Header id="header"
	
	
	
 
		

			Nội dung menu 


 Phần thanh bên trái class="nav"
		
		
		

			Nội dung chính 


 Phần nội dung class="content"
		
	
 
	
	
 
		Bản quyền thuộc về DAMMIO.COM nhé các bạn! 



		Phần chân trang id="footer"
	
	
 

Sau đây là giao diện trang web chỉ trang trí bằng đường viền border và bỏ nền màu sắc.

 

	
 
	DAMMIO.COM 


 
	Phần Header id="header"
	
	
	
 
		

			Nội dung menu 











 Phần thanh bên trái class="nav"
		
		
		

			Nội dung chính 











 Phần nội dung class="content"
		
	
 
	
	
 
		Bản quyền thuộc về DAMMIO.COM nhé các bạn! 



		Phần chân trang id="footer"
	
	
 

Kết luận

Bài viết giúp bạn đã hiểu và làm thế nào để sử dụng div để phân chia bố cục và xây dựng giao diện website. Tuy nhiên, với nội dung 1 bài như thế 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 web. Do đó, nếu bạn có thắc mắc xin để lại bình luận. Xin cảm ơn!