Tạo một CSS layout từ một bản thiết kế - phần 1

Để style được một layout hoàn chỉnh. 

1. Dựng bố cục, phác họa ý tưởng ban đầu bằng những mảng hình khối, xác định tông màu chủ đạo và các màu link, hilite ... 

 

bố cục các thành phần của site màu sắc sử dụng và ảnh minh họa hay họa tiết trang trí.
Theo xu hướng hiện nay thế giới websie chuyên nghiệp đang dần đi theo hướng có tổ chức và quy chuẩn nhất định, việc sử dụng Div để thay thế cho Table hiện nay gần như là điều bắt buộc bởi những lợi thế của Div & CSS đã khắc phục được những hạn chế của Table trong việc xây dựng website.

 

Các thành phần chính của một website

1. Main Navigation - Menu chủ đạo Tùy từng bố cục ta có thể đặt menu này dạng nằm ngang hoặc nằm dọc. Trong thiết kế này ta chọn kiểu nằm ngang với kích thước: Width: 760px Height: 50px 
2. Header Nơi đặt những thành tố quan trọng như banner, tên Công ty, Logo ... Trong thiết kế này ta chọn kiểu nằm ngang với kích thước: Width: 760px Height: 150px
3. Content - Nội dung Nội dung chính của website được trình bày tại đây. Kích thước: Width: 480px Height: Tùy ý, tự co dãn theo phần nội dung.
4. Right Col - Cột bên phải Tùy từng bố cục của bạn là 3 cột hay 2 cột. Phần này chứ những thông tin mang tính chất nổi bật, hiển thị ở dạng tin ngắn. Kích thước: Width: 280px Height: Tùy ý, tự co dãn theo phần nội dung.
5. Footer Nơi chứa đựng những thông tin về Copyright, các điều khoản sử dụng hay một menu nhỏ gọn. Kích thước: Width: 760px Height: 66px