-CIMD: là một trang web của hãng honda giới thiệu về các dòng sản phẩm ra mắt mới nhất cùng với những thông tin và tầm nhìn công ty trong quá trình phát triển.. Website được chia thành c
Tổng Quan
Giới thiệu
-CIMD là website giới thiêu về các loại xe của thương hiệu Honda - Chất Lượng
-CIMD: là một trang web của hãng honda giới thiệu về các dòng sản phẩm ra mắt mới nhất cùng với những thông tin và tầm nhìn công ty trong quá trình phát triển.
-CIMD là mô ƒt website mang tới thông tin cho người đọc về các dòng xe máy, xe ô tô, xe điện,… Website được chia thành các trang web gồm có:
+ Trang chủ: Hiển thị các danh mục sản phẩm.
+ Giới Thiệu : Giới thiệu tổng quan về Honda+ Sản phẩm mới : Hiển thị các dòng xe mới+ Xe máy: Hiển thị các dòng xe máy+ Xe Oto: Hiển thị các dòng xe ô tô+ Phụ Kiện: Hiển thị các phụ kiện cho các loại xe
Cơ sở lý thuyết
- HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes,…
- HTML thường được dùng để:
+Định dạng nội dung của trang web
+Thêm ảnh hoặc video vào trang web
- CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử HTML dựa trên các cặp thuộc tính : giá trị thuộc tính.
-Bootstrap là một khung công tác mặt trước miễn phí để phát triển web nhanh hơn và dễ dàng hơn.
-Bootstrap cũng cung cấp cho bạn khả năng dễ dàng tạo ra các thiết kế đáp ứng.
- JavaScript là ngôn ngữ lập trình phổ biến dùng để tạo ra các trang web tương tác Được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn JavaScript đóng vai trò như một phần của trang web, thực thi cho phép Client-Side Script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động.
Công cụ thực hiện đồ án : Visual Studio code, FastStone Editer,
Phân Tích
Sơ đồ tổ chức lưu trữ của website
-Thư Mục root: Chứa các file định dạng css, hinhanh và bootstrap cho Website
-Trong thư mục root gồm có:
+ Chứa các file định dạng css.
+ Thư mục hinhanh: Chứa các hình ảnh trang trí cho các trang web trong website(logo, banner, ….)
+ Các trang web hiển thị thông tin, sản phẩm, … của trang web.
Hình 2.1: Sơ Đồ Liên Kết Các Trang Web Trong Website
: Thể hiện của 1 Trang Web.
: Liên kết từ trang web này sang trang web khác theo hướng mũi tên.
Giới thiệu Sản phẩm mới Xe máy Xe oto Phụ kiện
Grid Layout của Các Nhóm Trang Web
Hình 2.2: Các web sử dụng layout1 - Giới thiệu
Hình 2.3: Các web sử dụng Layout2 - Trang chủ
Hình 2.4: Các trang web sử dụng Layout3 - Xe máy, Xe Oto, Phụ kiện
Thiết Kế Website
Thiết kế trang TrangChu.html (trang chủ)
-B1: Khai báo các css, bootstrap sử dụng, tạo box outer và header
Hình 3.1: Màn hình code HTML head,outer và header
-B2 : Tạo css cho box outer và header
Hình 3.2: Màn hình code CSS body,outer và header
-B3: Ở trong header tạo thêm box top_menu
Hình 3.3: Màn hình code HTML top_menu
- B4: Viết css cho top_menu
Hình 3.4: Màn hình code CSS top_menu
Hình 3.5: Giao diện phần header
Hình 3.6: Màn hình code HTML menu
-B6:Khai báo css cho box menu
Hình 3.7: Màn hình code CSS menu
Hình 3.8: Giao diện phần menu
Hình 3.9: Màn hình code HTML banner
-B8: Khai báo css cho box banner
Hình 3.10: Màn hình code CSS banner
Hình 3.11: Giao diện phần banner
Hình 3.12: Màn hình code HTML content
-B10: Khai báo css cho box content
Hình 3.13: Màn hình code CSS content
Hình 3.14: Giao diện phần content
Hình 3.15: Màn hình code HTML footer
Hình 3.16: Màn hình code CSS footer
Hình 3.17: Giao diện phần footer
Hình 3.18: Màn hình code HTML footeri
Hình 3.19: Màn hình code CSS footeri
Hình 3.20:Giao diện phần footeri
Trang GioiThieu.html (Giới Thiệu)
-Các bước tạo box hay css của Outer, header, top_menu, footer và footeri đều trình bày giống Trang Chủ Chỉ khác content nên chỉ em xin trình bày mỗi content
Hình 3.21: Màn hình code HTML content (trang Giới Thiệu)
-B2: Khai báo css cho box content
Hình 3.22: Màn hình code CSS content (trang Giới Thiệu)
Hình 3.23: Giao diện phần content (trang Giới Thiệu)
Trang XeMay.html (Xe máy)
-Các bước tạo box hay css của Outer, header, top_menu, footer và footeri đều trình bày giống Trang Chủ Chỉ khác content nên chỉ em xin trình bày mỗi content
Hình 3.24: Màn hình code HTML content (trang Xe Máy)
-B2: Khai báo css cho box content
Hình 3.25: Màn hình code CSS content (trang Xe Máy)
Hình 3.26: Giao diện phần content (trang Xe Máy)
Trang XeOto.html (Xe oto)
-Các bước tạo box hay css của Outer, header, top_menu, footer và footeri đều trình bày giống Trang Chủ Chỉ khác content nên chỉ em xin trình bày mỗi content
Hình 3.27: Màn hình code HTML content (trang Xe Oto)
-B2: Khai báo css cho box content
Hình 3.28: Màn hình code CSS content (trang Xe Oto)
Hình 3.29: Giao diện phần content (trang Xe Oto)
Trang SanPham.html (Sản phẩm mới)
-Các bước tạo box hay css của Outer, header, top_menu, footer và footeri đều trình bày giống Trang Chủ Chỉ khác content nên chỉ em xin trình bày mỗi content
Hình 3.30: Màn hình code HTML content (trang Sản Phẩm Mới)
-B2: Khai báo css cho box content
Hình 3.31: Màn hình code CSS content (trang Sản Phẩm Mới)
Hình 3.32: Giao diện phần content (trang Sản Phẩm Mới)
Trang PhuKien.html (Phụ kiện)
-Các bước tạo box hay css của Outer, header, top_menu, footer và footeri đều trình bày giống Trang Chủ Chỉ khác content nên chỉ em xin trình bày mỗi content
Hình 3.33: Màn hình code HTML content (trang Phụ Kiện)
-B2: Khai báo css cho box content
Hình 3.34: Màn hình code CSS content (trang Phụ Kiện)
Hình 3.35: Giao diện phần content (trang Phụ Kiện)