Hướng dẫn thiết kế layout web với HTML & CSS

Để chuẩn bị cho phần thực hành này bạn phải chuẩn bị folder site_shop_hoatuoi và tạo site trong dreamweaver.

Bước 1:
Tạo site Shop_hoatuoi
Trước hết bạn khởi động Adobe Dreamweaver > chọn site / new site > đặt tên cho site như hình > click next.

Check chọn No, … như hình > next

Ở bảng này bạn chọn Edit local copies… và chọn folder site_shop_hoatuoi > next

Tiếp theo bạn chọn None / next > nhấn Done để tạo Site.
[img]http://3.bp.blogspot.com/-tmcbab6R8wg/TwFu_5gX_FI/AAAAAAAABMM/McpnIatkSp4/s400/layout_shop_hoatuoi_bang_html_css_clip_image008.jpg[/img
Trong site bạn tạo 2 file: index.html và myCSS.css để định dạng tài liệu.

Bước 2:
Trình bày layout chính cho trang index
Để xây dựng trang web, trước tiên ở trang index bạn cần tạo ra các khung div để chứa các thành phần của trang. Với layout như phần thiết kế trên PSD, tôi sẽ tạo các khung div chính như sau:
Index.html

Trong đó:
# main - giữ tất cả các nội dung của trang
.top - chứa logo, ngôn ngữ
.menu – chứa menu top
.left – giữ menu left
.right – chứa sản phẩm, banner quảng cáo
.footer – lưu nội dung footer
myCSS.css

Kết quả layout trang index.html như hình

Bước 3:
Trình bày phần header (top)

Html phần top

Css phần top
[img]http://4.bp.blogspot.com/-HX2Q0DsPrOs/TwFwmbfPyCI/AAAAAAAABNg/_xUVZkTjb2E/s400/layout_shop_hoatuoi_bang_html_css_clip_image016.gif[/ing]

Phần menu top