Giao diện Blogger - Cấu trúc cơ bản

Mỗi giao diện (template) có cấu trúc không giống nhau, tuy nhiên nếu hiểu được cấu trúc  cơ bản sẽ giúp người thiết kế dễ dàng chỉnh sửa, thiết kế mới hoặc thay đổi cấu trúc giao diện của blogger.
Một số thành phần bạn có thể thấy rõ ràng khi xem blog bao gồm: header, footer và post. Tuy nhiên có một số thành phần chúng ta không thấy trên màn hình, nhưng có vai trò quan trọng trong việc định cấu trúc của blog, những thành phần này được gọi là block hoặc container.

Cấu trúc cơ bản của một blogger như sau:

Trong đó:

1. Body: là phần thân của trang web
2. Outer-wrapper: là khung ngoài cùng, chứa toàn bộ giao diện. Ta thường dùng khung này để định kích thước (chiều rộng) của blog. Trong khung này sẽ có một số khung nhỏ khác như: header, content và footer.
3. Header: là phần tiêu đề phía trên của giao diện, trong phần header thường có header title chứa tiêu đề của trang blog, header description chứa phần mô tả và một số khung khác như khung dành cho quảng cáo...vv. Người thiết kế thường đặt toàn bộ phần header trong khung tên là header-wrapper.
4. Content: là phần nội dung của trang blog, chứa đa số các thành phần quan trọng của blog như các khung điều hướng/quảng cáo hai bên sidebar1, sidebar2; phần nội dung chính main. Tất cả đều được đặt trong khung có tên làm content-wrapper.
5. Footer: là phần chân của blog, có thể chứa nhiều các khung con, chính vì vậy có nhiều blog đặt quảng cáo hoặc chia cột ở phần này. Tất cả được đặt trong khung footer-wrapper.
6. Sidebar: thanh đứng hai bên của trang blog, thường dùng để đặt menu dọc, about me (phần giới thiêu tác giả), label (các nhãn có trên blog), archive (xem bài viết theo thời gian), HTML (các khung HTML và javascript người dùng tự chèn vào, Adsense (quảng cáo của google)...vv
7. Blog post: là nơi chứa nội dung bài viết, nếu là trang chủ sẽ liệt kê các bài viết, ngược lại sẽ hiện nội dung chi tiết của bài viết. Mỗi bài viết có một số thông tin cơ bản như author (tác giả), date (ngày đăng), title (tiêu đề), content (nội dung), và quảng cáo của google nếu cho hiện...

Để rõ ràng hơn, hãy xem cấu trúc phân cấp sau:

Bài viết tiếp theo sẽ trình bày về cấu trúc code của tập tin giao diện. Nắm rõ cấu trúc cơ bản giúp người thiết kế dễ tiếp cận  với code hơn.

Nguồn: tổng hợp từ ourblogtemplates.com