DEMO WEB XEHOI ver 1 0

Page |1 WEB XE HƠI ĐƠN GIẢN Mục tiêu: DEMO nhằm củng cố kiến thức thiết kế web bao gồm HTML (bố cục) + CSS (trình bày) trang web xe Yêu cầu:  Phần Header bao gồm hình logo text slogan  Phần Menu bao gồm link để dẫn tới trang tương ứng  Phần Banner bao gồm hình Sau nâng cao thành phần trượt hình cho việc quảng cáo xe  Phần Menu chứa link để đưa đến trang tương ứng  Phần thân chứa loại xe có  Phần dịch vụ dịch vụ gia tăng Thể tóm tắt dịch vụ có  Phần trao đổi với chúng tơi đại lý bạn Dùng để gửi câu hỏi từ khách hàng tìm đại lý gần khu vực bạn  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 trước tiên ta bố cục HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ  Dùng thẻ để chèn hình  Phần text ta dùng thẻ heading (, ,…) thẻ

Tiếp theo ta dùng CSS để định dạng 2) Phần Menu: Để tạo phần trước tiên ta bố cục HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ Page |2  Dùng thẻ

• để tạo danh sách Dùng thêm thẻ để tạo liên kết cho Menu  Sử dụng fontawesome để tạo hình user hình chng Tiếp theo ta dùng CSS để định dạng 3) Phần Banner: Để tạo phần trước tiên ta bố cục HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ  Dùng thẻ để chèn hình Sau tạo xong phần ta có hình ảnh bên Page |3 4) Phần Menu: Để tạo phần trước tiên ta bố cục HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ  Dùng thẻ
  • để tạo danh sách Dùng thẻ để tạo liên kết dùng fontawesome để tạo Menu Tiếp theo ta dùng CSS để định dạng 5) Phần thân: Page |4 Để tạo phần trước tiên ta bố cục HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ  Sử dụng thẻ để bao lại phần nội dung cho loại xe  Sử dụng thẻ để chèn hình, thẻ heading (, , ,…) thẻ

    để tạo phần nội dung Tiếp theo ta dùng CSS để định dạng Sau tạo xong phần Menu phần thân ta có hình ảnh bên Page |5 6) Phần dịch vụ dịch vụ gia tăng: Để tạo phần trước tiên ta bố cục HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ  Sử dụng thẻ heading (, ,….) để tạo chữ “Dịch vụ” “Dịch vụ gia tăng”  Sử dụng thẻ để tạo kẻ ngang phân cách  Sử dụng thẻ để bao lại phần nội dung cho loại dịch vụ Tương tự Tiếp theo ta dùng CSS để định dạng 7) Phần trao đổi với đại lý bạn: Page |6 Để tạo phần trước tiên ta bố cục HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ  Sử dụng thẻ để bao bọc riêng phần “Trao đổi với chúng tôi” “Đại lý bạn”  Trong thẻ thứ (cấp con) sử dụng thẻ heading (, ,….) để tạo chữ “Trao đổi với chúng tôi” “Đại lý bạn”  Sử dụng thẻ để tạo kẻ ngang phân cách  Sử dụng thẻ để bao phần nội dung gồm thẻ , thẻ ,… Tiếp theo ta dùng CSS để định dạng 8) Phần Footer: Để tạo phần trước tiên ta bố cục HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ  Sử dụng thẻ bảng để chia phần DỊCH VỤ, DỊCH VỤ GIA TĂNG, CÔNG CỤ HỖ TRỢ, … cho phù hợp  Sử dụng thẻ bảng để chia phần CÔNG TY Ô TÔ, ĐĂNG KÝ NHẬN TIN, ĐƯỜNG DÂY NÓNG cho phù hợp  Sử dụng thẻ bảng thẻ để phân cho phần SƠ ĐỒ TRANG, CHÍNH SÁCH… Tiếp theo ta dùng CSS để định dạng  ... thẻ để bao lại phần nội dung cho loại xe  Sử dụng thẻ để chèn hình, thẻ heading (, , ,…) thẻ

    để tạo phần nội dung Tiếp theo ta dùng CSS để định dạng Sau tạo xong phần... HTML thẻ cần thiết  Để bố cục vùng ta sử dụng thẻ thẻ  Sử dụng thẻ heading (, ,….) để tạo chữ “Dịch vụ” “Dịch vụ gia tăng”  Sử dụng thẻ để tạo kẻ ngang phân cách... phần “Trao đổi với chúng tôi” “Đại lý bạn”  Trong thẻ thứ (cấp con) sử dụng thẻ heading (, ,….) để tạo chữ “Trao đổi với chúng tôi” “Đại lý bạn”  Sử dụng thẻ để tạo kẻ ngang