Tạo một CSS layout từ một bản thiết kế

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

Sau khi nhận được nhiều e-mail của một số bạn muốn tìm hiểu về CSS, yêu cầu muốn được biết về ứng dụng của CSS trong thiết kế web, một số bạn muốn được biết quy trình thiết kế một website sử dụng CSS để định dạng và style cho các thành phần trong 1 trang web.

Trong bài viết này tôi sẽ chia ra làm nhiều phần để các bạn dễ hình dung và có thể hiểu được một cách chân thực nhất về bản chất của một website và cách chúng ta style chúng theo ý muốn của designer.

Nếu trước đây các bạn chưa bao giờ sử dụng hay chưa từng biết đến CSS thì tôi nghĩ bạn nên đọc các định nghĩa về CSS tại W3C. Tôi sẽ không dịch những bài viết từ W3C ra tiếng Việt vì tôi nghĩ việc đọc và hiểu các tài nguyên kiến thức trên internet là điều bắt buộc bạn phải tự trang bị.

Bây giờ xin trở lại vấn đề chính là làm thế nào để style được một layout hoàn chỉnh. Với một số Công ty, công việc thiết kế một website được chia làm nhiều công đọan và sẽ do nhiều người hay nhiều nhóm người chia ra phụ trách từng công đọan. Tạm bỏ qua yếu tố khách hàng, ta có thể thấy yếu tố tạo nên sự thành công của của một website chính là giao diện của trang web, đó chính là bộ mặt và là nơi phô diễn tất cả những thành phần trong một trang web. Cho dù đó là một website về thương mại điện tử, một website trưng bày sản phẩm của Công ty hay một website của một cộng đồng... thì yếu tố "nhan sắc" cũng được đặt lên hàng đầu. Bạn nên nhớ răng mắt người chỉ mất 0.2 giây để có thể nhận biết được màu sắc và bố cục của một trang web có ấn tượng không? có thu hút không?.

01 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 này bạn sẽ 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í. Bản thiết kế được dựng trên Photoshop (bạn có thể tùy ý sử dụng các phần mềm như Illustrator hay Firework...)

Ngoài ra 1 điều rất quan trọng là bạn phải xác định sẽ xây dựng website dựa trên ngôn ngữ nào. Trong bài viết này chúng ta đi sâu vào khâu thiết kế nên phần lập trình web bằng các ngôn ngữ sẽ bàn tới sau. 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

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
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
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.
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.
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.

Như vậy là ta đã có được bộ khung cơ bản của một website. Công đọan này các bạn có thể phải làm lại nhiều lần để có được bố cục về tỷ lệ giữa các thành phần sao cho hợp lý nhất, phù hợp với nội dung website. Phần 2 chúng ta sẽ bắt đầu dựng 1 file Html cho layout, trong phần này bạn sẽ sử dụng một số kiến thức cơ bản về Html để có thể tạo những thành phần cấu thành 1 website hoàn chỉnh.

Set as favorite

Bookmark

Comments (4) Add Comment