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ỹ.
body
{
margin: 0 auto; // canh bố cục đều 2 bên, dòng này bắt buộc phải có
}
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.COMNội dung menuNội dung chínhBản quyền thuộc về DAMMIO.COM nhé các bạn! Phần Header id="header" Bản quyền thuộc về Phần Header id="header" Bản quyền thuộc vềChủ Đề