[Bài 10] Tìm hiểu về layout (bố cục) của website

Trong bài này mình sẽ giới thiệu khái quát về phần layout (bố cục) của website. Để các bạn hình dung trên đó có những khu vực / thành phần nào, nhiệm vụ của chúng ra sao.

Bố cục (layout) của một website

Cũng tùy từng lĩnh vực, tùy loại website mà bố cục cũng sẽ khác nhau. Ở đây mình xin đưa ra một dạng bố cục phổ biến để các bạn tham khảo. Bố cục này có 4 khu vực, vị trí từng khu vực các bạn có thể xem ở hình bên dưới.

Bo cuc pho bien cua mot website blog

• HEADER – phần đầu trang, đây là khu vực người ta thường đặt logo, banner, khẩu hiệu của website/blog;
• CONTENT – phần nội dung, nó có thể là nội dung một bài viết hoặc danh sách các bài viết;
• SIDEBAR: là cột bên cạnh (bên trái – phải hoặc hai bên) của phần nội dung – content. Đây là khu vực đặt các tiện ích (widget) của website.
• FOOTER – chân trang, khu vực dưới cùng của một website. Đây là nơi dành để giới thiệu ngắn gọn về website/blog, thông tin liên hệ, bản đồ,…

Các khu vực trên layout

Trong các khu vực đã nêu ở trên sẽ bao gồm các phần nhỏ bên trong nó, mỗi phần sẽ đảm nhiệm một vai trò riêng như sau:

HEADER

Khu vực đầu trang (header) là nơi người ta thường đặt các icon mạng xã hội, hộp tìm kiếm, banner quảng cáo, logo, câu slogan, slide hình ảnh,… Dưới đây là 4 thứ mà bạn nên đặt nó trên header:

Các thành phần hay dùng trên Header (hocban.vn)

• Logo hoặc tiêu đề website, ở đây tiêu đề web của mình là Học Bạn. Vì logo của mình không được đẹp nên lấy site tittle (tiêu đề website) làm logo luôn.
• Tag line: Một dòng khẩu hiệu ngắn (slogan) mà bạn thích hoặc là câu gì đó ngắn gọn khoảng 5 – 7 từ là được, sao cho nó thể hiện được nội dung website của bạn.
• Top Navigation: Đây là menu trên cùng, dùng để điều hướng đến các trang liên hệ, giới thiệu, bản quyền, điều khoản,.. thường là như vậy.
• Main Navigation: Đây là menu chính, nó giúp người dùng điều hướng đến các chuyên mục nội dung của website.

CONTENT

Trong một trang nội dung, thì đây là khu vực dành cho nội dung bài viết, các bình luận, danh sách bài viết liên quan, tác giả bài đăng. Nếu ở ngoài trang chủ, thì đây là khu vực đặt danh sách các bài đăng trên website, thường là các bài đăng mới nhất.

Phần content – nội dung bài viết (hocban.vn)

SIDEBAR

Đây là cột chứa các tiện ích, bao gồm như: danh sách bài đăng đọc nhiều, hộp like dành cho fanpage facebook, hộp đăng ký nhận thông báo bài viết mới,… Khá nhiều, tuy nhiên ở đây mình chọn hai cái như sau:

Widget Categories và Recent Comments trên sidebar (hocban.vn)

• Categories: Chuyên mục bài viết, tại đây chuyên mục nào bạn có bài viết thì nó sẽ hiển thị như trong hình.
• Recent Comments: Danh sách các bình luận được sắp xếp theo thời gian gần nhất.

FOOTER

Nếu như sidebar là nơi người ta đặt các tiện ích (widget) theo 1 cột, thì ở footer người ta có thể đặt các widget thành 2, 3, 4 cột widget tùy vào độ rộng của trang và chủ ý của người thiết kế. Ở đây mình xin giới thiệu 3 mẫu tiện ích phổ biến như sau:

• Lời giới thiệu khái quát về website/blog – doanh nghiệp.
• Thông tin – địa chỉ liên hệ: thể để số điện thoại, địa chỉ đường hoặc một tiện ích Google Map,..
• Liên kết website: hiểu là danh sách các website của “bạn bè” hoặc có mối liên hệ gì đó với website/blog của bạn.

Một mẫu footer đơn giản (sưu tầm)

Bài này mình chỉ nêu một số thành phần cơ bản trên website/blog để các bạn hình dung. Hiểu được vai trò và tính năng của từng phần là cơ sở để sắp xếp bố cục của website/blog của bạn về sau. Trong bài tiếp theo chúng ta sẽ đi tìm hiểu về trang quản trị (dashboard) của WordPress.

Bài học trước đó và tiếp theo

• [Bài 9] Đổi theme mặc định trên WordPress
• [Bài 11] Bố cục trang quản trị (dashboard) của WordPress