Hướng dẫn xây dựng trang HTML/CSS Bán rau

Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn xây dựng HTML/CSS trang Bán rau. Các bạn có thể download source của trang tại đây để có các hình ảnh sử dụng. Các hình ảnh đã được chuẩn bị sẵn, các bạn có thể xem lại các bài viết trước để biết cách cắt ảnh bằng photoshop. 

Yêu cầu

– Căn bản HTML/CSS
– Thời gian thực hiện: 1h~2h

XÂY DỰNG CẤU TRÚC HTML

Cấu trúc chung của trang HTML rauxanh

Đây là phần chúng ta sẽ xây dựng một cách tổng quát bố cục của trang web như header, body, banner, ads, footer v.v.

 Chúng ta sẽ cùng đi từ trên xuống, từ phần top header đến footer.

PHẦN TOP

Layout của phần top

 Top bar: chúng ta thay thế <!– Hotline and cart button –> 

 Phần Logo, User và Search Form: chúng ta thay thế <!– logo , user area and search form –>

 Phần Menu: chúng ta thay thế  <!– menu area –>

 Hoàn thành phần Top

PHẦN BODY

Layout của phần body

 Layout của body gồm nhiều phần: banner, support, ads, sản phẩm mới, sản phẩm hot v.v.

Phần slide: chúng ta thay thế <!– slides area –>. Ở đây chúng ta sẽ sử dụng jQuery Plugin: Slidesjs

 Chúng ta sẽ viết code JavaScript ở phần sau.

Phần Support: chúng ta thay thế <!– support area –>

 Phần Sale Off: chúng ta thay thế <!– sale off area –>

 Phần Sản Phẩm Mới: chúng ta thay thế <!– new products area –>

 Phần Hot Products: chúng ta thay thế <!– hot products erea –>

 Như vậy chúng ta đã hoàn thành phần thân chính của trang web. Chúng ta tiếp tục với phần Footer

PHẦN FOOTER

 Chúng ta đã hoàn thành xong cấu trúc HTML cho trang web bán rau.

HocWeb | Photoshop To HTML/CSS

Sau khi hoàn thành HTML

ĐỊNH DẠNG CSS CHO TRANG

RESET CSS

 PHẦN CHUNG

 PHẦN TOP

 PHẦN TOP BAR VÀ CART

 PHẦN LOGO, USER VÀ SEARCH

 PHẦN MENU

 PHẦN BODY

SLIDE

 PHẦN SUPPORT VÀ SALE OFF

 PHẦN SẢN PHẨM MỚI

 SẢN PHẨM HOT

 PHẦN FOOTER

JAVASCRIPT 

Hoàn thành website

HocWeb | Photoshop To HTML/CSS

Website Hoàn Thành

One Response

  1. phuoc nguyen 30/04/2015 Reply

Leave a Reply


*