DEMO WEB XEHOI ver 1 0
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.08 MB, 6 trang )
Page |1
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 (
, ,…) hoặc thẻ
đề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>
Page |2
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 chng.
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.
Page |3
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:
Page |4
Để 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 (
, , ,…) và thẻ
,…) và thẻ
để 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.
Page |5
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 (
, ,….) để 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:
Page |6
Để 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 (, ,….) để
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.
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:
Page |6
Để 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 (
, ,….) để
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.
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.
