Hướng dẫn thiết kế giao diện HTML/CSS trang bán rau sạch

Hôm nay EDU.Com.Vn sẽ hướng dẫn các bạn thiết kế 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.
Hôm nay EDU.Com.Vn sẽ hướng dẫn các bạn thiết kế 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.

Huong dan thiet ke html trang ban rau sach

Huong dan thiet ke html trang ban rau sach

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

Huong dan thiet ke html trang ban rau sach 2

Huong dan thiet ke html trang ban rau sach 2

Website Hoàn Thành