DEMO WEB XEHOI ver 1 0

 Phần Footer chứa đựng nhiều thành phần bao gồm bảng, form,… Hướng dẫn thực hiện: 1 Phần Header: Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết.. Tiếp theo ta dùng

WEB XE HƠI ĐƠN GIẢN

Mục tiêu: DEMO nhằm củng cố kiến thức về thiết kế web bao gồm HTML

(bố cục) + CSS (trình bày) trang web về xe hơi

Yêu cầu:

 Phần Header bao gồm hình logo và text slogan

 Phần Menu bao gồm các link để dẫn tới các trang tương ứng

 Phần Banner bao gồm một tấm hình Sau này có thể nâng cao nó thành phần trượt hình cho việc quảng cáo xe

 Phần Menu chứa các link để đưa đến các trang tương ứng

 Phần thân chứa các loại xe hiện có

 Phần dịch vụ và dịch vụ gia tăng Thể hiện tóm tắt các dịch vụ hiện có

 Phần trao đổi với chúng tôi và đại lý của bạn Dùng để gửi những câu hỏi từ khách hàng và tìm đại lý gần khu vực bạn ở nhất

 Phần Footer chứa đựng nhiều thành phần bao gồm bảng, form,…

Hướng dẫn thực hiện:

1) Phần Header:

Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết

 Để bố cục vùng ta có thể sử dụng thẻ <header> hoặc thẻ <div>

 Dùng thẻ <img> để chèn hình

 Phần text ta có thể dùng các thẻ heading (<h1>, <h2>,…) hoặc thẻ <p> đều được

Tiếp theo ta dùng CSS để định dạng như trên

2) Phần Menu:

Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết

 Để bố cục vùng ta có thể sử dụng thẻ <section> hoặc thẻ <div>

 Dùng thẻ <ul> và <li> để tạo danh sách Dùng thêm thẻ <a> để tạo các liên kết cho các Menu

 Sử dụng fontawesome để tạo các hình user và hình cái chuông

Tiếp theo ta dùng CSS để định dạng như trên

3) Phần Banner:

Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết

 Để bố cục vùng ta có thể sử dụng thẻ <section> hoặc thẻ <div>

 Dùng thẻ <img> để chèn hình

Sau khi tạo xong 3 phần trên ta sẽ có được hình ảnh như bên dưới

4) Phần Menu:

Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết

 Để bố cục vùng ta có thể sử dụng thẻ <section> hoặc thẻ <div>

 Dùng thẻ <ul> và <li> để tạo danh sách Dùng thẻ <a> để tạo liên kết và dùng fontawesome để tạo các Menu

Tiếp theo ta dùng CSS để định dạng như trên

5) Phần thân:

Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết.

 Để bố cục vùng ta có thể sử dụng thẻ <section> hoặc thẻ <div>

 Sử dụng thẻ <div> để bao lại phần nội dung cho từng loại xe

 Sử dụng thẻ <img> để chèn hình, thẻ heading (<h1>, <h2>, <h3>,…) và thẻ

<p> để tạo phần nội dung

Tiếp theo ta dùng CSS để định dạng như trên

Sau khi tạo xong 2 phần Menu và phần thân ta sẽ có được hình ảnh như bên dưới

6) Phần dịch vụ và dịch vụ gia tăng:

Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết

 Để bố cục vùng ta có thể sử dụng thẻ <section> hoặc thẻ <div>

 Sử dụng thẻ heading (<h1>, <h2>,….) để tạo chữ “Dịch vụ” hoặc “Dịch vụ gia tăng”

 Sử dụng thẻ <hr> để tạo kẻ ngang phân cách

 Sử dụng thẻ <div> để bao lại phần nội dung cho từng loại dịch vụ Tương tự như trên

Tiếp theo ta dùng CSS để định dạng như trên

7) Phần trao đổi với chúng tôi và đại lý của bạn:

Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết.

 Để bố cục vùng ta có thể sử dụng thẻ <section> hoặc thẻ <div>

 Sử dụng thẻ <div> để bao bọc riêng 2 phần “Trao đổi với chúng tôi” và “Đại

lý của bạn”

 Trong thẻ <div> thứ 2 (cấp con) sử dụng thẻ heading (<h1>, <h2>,….) để tạo chữ “Trao đổi với chúng tôi” hoặc “Đại lý của bạn”

 Sử dụng thẻ <hr> để tạo kẻ ngang phân cách

 Sử dụng thẻ <form> để bao phần nội dung gồm các thẻ <input>, thẻ

<textarea>,…

Tiếp theo ta dùng CSS để định dạng như trên

8) Phần Footer:

Để tạo phần này trước tiên ta bố cục trong HTML những thẻ cần thiết

 Để bố cục vùng ta có thể sử dụng thẻ <footer> hoặc thẻ <div>

 Sử dụng thẻ bảng <table> hoặc <div> để chia từng phần DỊCH VỤ, DỊCH

VỤ GIA TĂNG, CÔNG CỤ HỖ TRỢ, … cho phù hợp như trên

 Sử dụng thẻ bảng <table> hoặc <div> để chia từng phần CÔNG TY Ô TÔ, ĐĂNG KÝ NHẬN TIN, ĐƯỜNG DÂY NÓNG cho phù hợp như trên

 Sử dụng thẻ bảng <table> hoặc thẻ <div> để phân cho phần SƠ ĐỒ

TRANG, CHÍNH SÁCH…

Tiếp theo ta dùng CSS để định dạng như trên