Hiểu rõ hơn về bố cục Blog của blogspot : Dành cho người mới bắt đầu tập chỉnh sửa CSS

[FD's BlOg] - Bài viết này dành cho những người mới bắt đầu làm quen với blogspot, và nâng cao hơn nữa là hướng dẫn cách tiếp cận bố cục của blog theo phương pháp tiếp cận từ trên xuống để đơn giản mã CSS.

►Phương pháp tiếp cận top-down (từ trên xuống)

Cách tốt nhất để thiết kế một tập tin CSS là sử dụng phương pháp tiếp cận từ trên xuống, nói cách khác là xác định các phần tử chính của blog. Vì vậy, bạn có thể tiến hành để viết mã của bạn trong một cấu trúc chặt chẽ hơn theo cách không cần thiết tránh mã. Trong thực tế, để xác định các thành phần chính trong bố cục của 1 blog cũng đơn giản. Sự xuất hiện các "mã không cần thiết" sẽ xảy ra khi bạn xác định các chi tiết của yếu tố đó. Để đơn giản hóa các mã CSS này, bạn cần tuân thủ 2 "quy tắc" sau:
1. Giảm thiểu số lượng các yếu tố CSS
2. Sử dụng các thẻ HTML chuẩn(P, H1, UL, LI ...) thay vì tạo các class mới.

- Ví dụ : trong blog của bạn, để thiết kế style cho tiêu đề bài viết, bạn có thể sử dụng thẻ <h1> thay vì dùng class mới ".post-title" .

►Bây giờ ta làm quen với các thành phần chính trong bố cục của blog:

Trước khi bắt đầu viết mã CSS của bạn, bạn phải có hình dung rõ ràng trong đầu bạn các mục chính trong bố cục của 1 blog. Lấy ví dụ 1 blog có 2 cột, bạn có thể xác định những phần chính như hình bên dưới:

Bố cục có 4 phần cơ bản như bên dưới:
1. Header (#header) 2. Main content (#main-content) 3. Sidebar (#sidebar) 4. Footer (#footer)

►Bước kế tiếp, là xác đinh các thành phần có trong từng mục chính đó.

1. Header :
- Phần Header gồm có 2 thành phần cơ bản là Logo và thanh Navbar.(xem hình bên dưới)

- Bạn có thể thay đổi lại logo theo cách bên dưới:

#header {
background:url(YOUR-LOGO.gif) no-repeat;
}

- Đối với thanh Navbar, bạn nên sử dụng các thẻ <ul> <li> để tạo .(xem hình bên dưới)

Làm thế nào ta có thể thấy chúng, bạn không nhất thiết phải tạo một class mới như là "#navigation-bar", bởi vì nó đã được xác định bằng cách sử dụng thẻ <ul> trong phần Header (#header ul, #header ul li). Bằng cách này đọan mã CSS của bạn sẽ gọn gàng hơn, đơn giản hơn, dễ quản lý hơn.

2. Main content :
- Ở trong phần main, chủ yếu là chứa nội dung bài viết, như : tựa đề, nội dung, các nhãn... , có thể xem minh họa bên dưới:

- Vì vậy cách tốt nhất để thiết kế các mã CSS là sử dụng các thẻ chuẩn (bên dưới) vào class #main-content :
+ Post section paragraph(nội dung bài viết) (<p>)
+ Post title (tựa đề bài viết) (<h1>)
+ Post date (ngày post)(<h2>)
+ Post tag (nhãn) (<small>)

Và nó trông như thế này:

3. Thanh Sidebar:
- Sẽ rất đơn giản nếu dùng các thẻ <h1> , <p> (xem hình minh họa)

- Và code CSS sẽ trông như thế này:

4. Footer:
- Tùy bạn thiết kế. hòan tòan tương tự.

Như vậy mình đã giới thiệu xong, hy vọng với bài viết này các bạn sẽ nắm rõ hơn về bố cục của 1 blog, và tự tay mình modify code CSS cho nó đơn giản hơn.

Chúc các bạn thành công.