Báo cáo kết thúc học phần thiết kế web tên đề tài thiết kế website shop quần áo camper store

UBND TỈNH BÌNH DƯƠNG TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KTCN BÁO CÁO KẾT THÚC HỌC PHẦN THIẾT KẾ WEB TÊN ĐỀ TÀI: THIẾT KẾ WEBSITE SHOP QUẦN ÁO CAMPER-STORE HỌ TÊN SINH VIÊN: TRẦN VĂN DƯƠNG MSSV: 1824801030178 LỚP: D18PM03 GIÁO VIÊN HƯỚNG DẪN: THS NGUYỄN HỮU VĨNH BÌNH DƯƠNG, 06/2020 0 MỤC LỤC MỤC LỤC DANH MỤC HÌNH DANH SÁCH CÁC KÝ TỰ , CHỮ VIẾT TẮT LỜI NÓI ĐẦU CHƯƠNG I: TỔNG QUAN ĐỀ TÀI TÊN ĐỀ TÀI MỤC TIÊU ĐỀ TÀI Ý NGHĨA CỦA ĐỀ TÀI MỘT SỐ TRANG CHÍNH CỦA WEBSITE .9 CHƯƠNG II GIỚI THIỆU CÔNG NGHỆ .10 GIỚI THIỆU VỀ HTML 10 1.1 HTML ? 10 1.2 Công dụng HTML 10 1.3 Định dạng HTML 10 GIỚI THIỆU VỀ CSS 10 2.1 CSS ? 10 2.2 Tại CSS ? 11 GIỚI THIỆU VỀ ADOBE DREAMWEAVER 13 NGÔN NGỮ JAVASCRIPT 14 CHƯƠNG III THIẾT KẾ GIAO DIỆN 14 PHÂN CẤP CHỨC NĂNG .14 ĐẶC TẢ GIAO DIỆN .15 2.1 Giao diện trang chủ 15 2.2 Giao diện trang giới thiệu 16 2.3 Giao diện sách bảo mặt .19 2.4 Giao diện sách đổi trả .19 2.5 Giao diện điều khoản dịch vụ .20 2.6 Giao diện đăng ký .22 2.7 Giao diện đăng nhập 23 2.8 Giao diện danh mục trang thương hiệu .25 2.9 Giao diện sản phẩm - Áo (clothes) .26 2.9.1 Giao diện sản phẩm - Áo (1) 26 2.9.2 Giao diện sản phẩm - Áo (2) 28 2.9.3 Giao diện sản phẩm - Áo (3) 30 2.10 Giao diện sản phẩm - Quần (pants) 30 0 2.10.1 Giao diện sản phẩm - Quần (1) .30 2.11 Giao diện sản phẩm - Phụ kiện (Accessories) 32 2.11.1 Giao diện sản phẩm - Phụ kiện (1) 32 2.11.2 Giao diện sản phẩm - phụ kiện (2) 33 2.11.3 Giao diện sản phẩm - phụ kiện (3) 33 2.11.4 Giao diện sản phẩm - phụ kiện (4) 34 2.11.5 Giao diện sản phẩm - phụ kiện (5) 34 2.12 Giao diện chi tiết sản phẩm 35 2.12.1 Giao diện chi tiết sản phẩm - áo 35 2.12.2 Giao diện chi tiết sản phẩm - quần 35 2.12.3 Giao diện chi tiết sản phẩm - phụ kiện (1) 36 2.12.4 Giao diện chi tiết sản phẩm - phụ kiện (2) 36 2.12.5 Giao diện chi tiết sản phẩm - phụ kiện (3) 36 CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 37 TÀI LIỆU THAM KHẢO 38 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store DANH MỤC HÌNH Image Biểu đồ phân cấp chức website 12 Image Giao diện website(phần trên) 13 Image Giao diện website(Phần dưới) 14 Image Giao diện giới thiệu website(phần trên) .14 Image Giao diện giới thiệu website(Phần dưới) 15 Image Giao diện sách bảo mặt .15 Image Giao diện sách đổi trả .16 Image Giao diện điều khoản dịch vụ .17 Image Giao diện đăng ký 18 Image 10 Giao diện chức đăng nhập .19 Image 11 Giao diện danh mục thương hiệu 20 Image 12 Giao diện sản phẩm - áo (1) .21 Image 13 Giao diện sản phẩm - áo (2) .22 Image 14 Giao diện sản phẩm - áo (3) .23 Image 15 Giao diện sản phẩm - quần (1) 23 Image 16 Giao diện sản phẩm - quần (2) 24 Image 17 Giao diện sản phẩm - quần (3) 25 Image 18 Giao diện sản phẩm - phụ kiện(1) 25 Image 19 Giao diện sản phẩm - phụ kiện (2) 26 Image 20 Giao diện sản phẩm - phụ kiện (3) 26 Image 21 Giao diện sản phẩm - phụ kiện (4) 27 Image 22 Giao diện sản phẩm - phụ kiện (5) 27 Image 23 Giao diện chi tiết sản phẩm - áo .28 Image 24 Giao diện chi tiết sản phẩm - quần 28 Image 25 Giao diện chi tiết sản phẩm - phụ kiện (1) 29 Image 26 Giao diện chi tiết sản phẩm - phụ kiện (2) 29 Image 27 Giao diện chi tiết sản phẩm - phụ kiện (3) 29 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store DANH SÁCH CÁC KÝ TỰ , CHỮ VIẾT TẮT Từ viết tắt Giải thích CSDL Cơ sở liệu ĐVT Đơn vị tính CNTT Cơng Nghệ thơng tin SP Sản phẩm 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store KHOA KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ tên giảng viên: Nguyễn Hữu Vĩnh Tên đề tài: THIẾT KẾ WEBSITE SHOP QUẦN ÁO CAMPER-STORE Nội dung nhận xét: Điểm: Bằng số: Bằng chữ: GIẢNG VIÊN CHẤM (Ký, ghi rõ họ tên) NGUYỄN HỮU VĨNH 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store LỜI NÓI ĐẦU Ngày nay, cơng nghệ thơng tin có bước phát triển mạnh mẽ theo chiều rộng sâu Máy tính điện tử khơng cịn thứ phương tiện quý mà ngày trở thành cơng cụ làm việc giải trí thơng dụng người, khơng cơng sở mà cịn gia đình Sự phát triển hệ thống website mang lại hội cho cửa hàng mở rộng thị trường bán hàng, giảm chi phí giao dịch, cải thiện hệ thống phân phối, tăng doanh số, chăm sóc khách hàng tốt hơn, Vậy làm để nắm bắt hội, vượt qua thách thức trình kinh tế Việt Nam ngày hội nhập chiều sâu chiều rộng với kinh tế giới Nâng cao lực cạnh tranh cho cửa hàng Việt Nam thời kỳ hội nhập vấn đề sống cịn Thương mại điện tử cịn giúp người tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thông tin theo nhu cầu sở thích người Giờ đây, người ngồi nhà để mua sắm thứ theo ý muốn website bán hàng mạng giúp ta làm điều Giá thành rẻ hỗ trợ nhiều mạng giúp ta nhanh chóng Thiết kế website bán hàng thân thiện dễ sử dụng với người dùng Chính báo cáo chọn đề tài : “Thiết kế website shop quần áo Camper-store” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Thiết kế ứng dụng bán hàng Internet 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store CHƯƠNG I: TỔNG QUAN ĐỀ TÀI TÊN ĐỀ TÀI “THIẾT KẾ WEBSITE SHOP QUẦN ÁO” MỤC TIÊU ĐỀ TÀI − Xây dựng website mua bán quần, áo, phụ kiện qua mạng với đầy đủ chức − Phục vụ nhu cầu khách hàng tốt có hiệu − Tiết kiệm chi phí cho cửa hàng trình phân phối sản phẩm Ý NGHĨA CỦA ĐỀ TÀI − Đưa sản phẩm cửa hàng đến gần với người mua hàng − Giới thiệu, quảng bá cửa hàng ĐỐI TƯỢNG CỦA ĐỀ TÀI − Đối tượng chủ yếu đề tài quần, áo, linh kiện thời trang MỘT SỐ TRANG CHÍNH CỦA WEBSITE − Trang chủ: Hiển thị đầy đủ chức website sản phẩm có website − Trang giới thiệu: Cung cấp giới thiệu cho khách hàng thông tin cần thiết website cửa hàng − Trang sách bảo mặt: Giới thiệu sách bảo mặt thơng tin khách hàng website − Trang sách đổi trả: Hướng dẫn cho khách hàng điều kiện bước để đổi trả sản phẩm − Trang điều khoản dịch vu: Hướng dẫn cách thức toán − Trang đăng ký: Người dùng đăng ký để trở thành khách hàng Vip để hưởng chương trình khuyến ưu đãi từ cửa hàng đặt hàng online − Trang đăng nhập: Người dùng đăng nhập tài khoản để mua hàng online tích điểm khuyến cho − Trang sản phẩm: Hiển thị tất các sản phẩm có cửa hàng Khách hàng xem chọn mua hàng 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store CHƯƠNG II GIỚI THIỆU CÔNG NGHỆ GIỚI THIỆU VỀ HTML 1.1 HTML ? − HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu chuẩn dùng soạn thảo tài liệu World Wide Web, rõ trang Web hiển thị trình duyệt − Ngôn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graphics − HTML ngôn ngữ xác định cấu trúc thông tin − HTML sử dụng loạt thẻ thuộc tính dùng để hiển thị văn thông tin khác, cung cấp siêu liên kết tới tài liệu khác 1.2 Công dụng HTML − Thiết kế nội dụng hình thức trang web − Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang web − Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lý giao dịch, … − Thêm vào đối tượng hình ảnh video, âm thanh, … 1.3 Định dạng HTML − Là tập tin có phần mở rộng html htm − Là tập tin văn túy, có chứa mã đặc biệt gọi Tag(thẻ), thường đặt xung quanh khối văn − Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, Notepad, Visual code, … sử dụng nhiều Adobe Dreamweaver GIỚI THIỆU VỀ CSS 2.1 CSS ? 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Trong lĩnh vực xây dựng, có trang trí nội thất; lĩnh vực thẩm mỹ làm đẹp, có kỹ thuật make-up; cịn lĩnh vực thiết kế web có CSS Đây định nghĩa giàu hình ảnh Pearl thơi (nhưng thực tế (smile) Còn CSS (Cascading Style Sheets mà Pearl tạm dịch tờ mẫu theo Style Sheets) ngơn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… 2.2 Tại CSS ? Nếu bạn học qua HTML biết HTML hỗ trợ số thuộc tính định dạng cho text, picture, table, … khơng thật phong phú xác hệ thống CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho đối tượng với sáng tạo cao kết hợp thuộc tính giúp mang lại hiệu Ngoài ra, CSS hỗ trợ tất trình duyệt, nên bạn hồn tồn tự tin trang web hiển thị “như nhau” dù hệ thống sử dụng Windows, Linux hay máy Mac miễn bạn sử dụng phiên trình duyệt Sử dụng mã định dạng trực tiếp HTML tốn hao nhiều thời gian thiết kế dung lượng lưu trữ đĩa cứng Trong CSS đưa phương thức “tờ mẫu ngoại” giúp áp dụng khuôn mẫu chuẩn từ file CSS ngồi Nó thật có hiệu đồng bạn tạo website có hàng trăm trang hay bạn muốn thay đổi thuộc tính trình bày Hãy thử tưởng tượng bạn có website với hàng trăm trang bạn muốn thay đổi font chữ hay màu chữ cho thành phần Đó thật cơng việc buồn chán tốn nhiều thời gian Nhưng với việc sử dụng CSS việc hồn tồn đơn giản bạn có trị ma thuật Ngồi ra, CSS cịn cho phép bạn áp đặt kiểu trình bày thích hợp cho phương tiện khác hình máy tính, máy in, điện thoại,… Trang Simple CSS Standard Edition WallPearl CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi 2.3 Học CSS cần ? 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.7 Giao diện đăng nhập  Mục đích: Khách hàng đăng nhập tài khoản đăng ký để mua sắm online website  Chức năng: Cho phép khách hàng đăng nhập tài khoản Image 10 Giao diện chức đăng nhập 22 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.8 Giao diện danh mục trang thương hiệu  Mục địch: Chức sách thương hiệu sản phẩm có cửa hàng  Chức năng: Sử dụng danh mục trang thương hiệu để lựa chọn sản phẩm mà khách hàng cần tìm Image 11 Giao diện danh mục thương hiệu 23 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.9 Giao diện sản phẩm - Áo (clothes) 2.9.1 Giao diện sản phẩm - Áo (1)  Mục đích: Lọc sản phẩm áo  Chức năng: Cho phép khách hàng đặt mua sản phẩm Image 12 Giao diện sản phẩm - áo (1) 24 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.9.2 Giao diện sản phẩm - Áo (2) Image 13 Giao diện sản phẩm - áo (2) 25 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.9.3 Giao diện sản phẩm - Áo (3) Image 14 Giao diện sản phẩm - áo (3) 2.10 Giao diện sản phẩm - Quần (pants)  Mục đích: Lọc sản phẩm quần có website, giúp khách hàng tìm kiếm sản phẩm  Chức năng: Cho phép khách hàng đặt mua sản phẩm 2.10.1 Giao diện sản phẩm - Quần (1) Image 15 Giao diện sản phẩm - quần (1) 26 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 27 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.10.2 Giao diện sản phẩm - quần (2) Image 16 Giao diện sản phẩm - quần (2) 28 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.10.3 Giao diện sản phẩm - quần (3) Image 17 Giao diện sản phẩm - quần (3) 2.11 Giao diện sản phẩm - Phụ kiện (Accessories)  Mục đích: Lọc sản phẩm phụ kiện, giúp khách hàng dễ tiềm kiếm sản phẩm  Chức năng: Khách hàng đặt mua sản phẩm 2.11.1 Giao diện sản phẩm - Phụ kiện (1) Image 18 Giao diện sản phẩm - phụ kiện(1) 29 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 30 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.11.2 Giao diện sản phẩm - phụ kiện (2) Image 19 Giao diện sản phẩm - phụ kiện (2) 2.11.3 Giao diện sản phẩm - phụ kiện (3) Image 20 Giao diện sản phẩm - phụ kiện (3) 31 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.11.4 Giao diện sản phẩm - phụ kiện (4) Image 21 Giao diện sản phẩm - phụ kiện (4) 2.11.5 Giao diện sản phẩm - phụ kiện (5) Image 22 Giao diện sản phẩm - phụ kiện (5) 32 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.12 Giao diện chi tiết sản phẩm − Mục địch: Cung cấp thông tin chi tiết sản phẩm cho khách hàng − Chức năng: Khách hàng chọn đặt mua sản phẩm 2.12.1 Giao diện chi tiết sản phẩm - áo Image 23 Giao diện chi tiết sản phẩm - áo 2.12.2 Giao diện chi tiết sản phẩm - quần Image 24 Giao diện chi tiết sản phẩm - quần 33 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store 2.12.3 Giao diện chi tiết sản phẩm - phụ kiện (1) Image 25 Giao diện chi tiết sản phẩm - phụ kiện (1) 2.12.4 Giao diện chi tiết sản phẩm - phụ kiện (2) Image 26 Giao diện chi tiết sản phẩm - phụ kiện (2) 2.12.5 Giao diện chi tiết sản phẩm - phụ kiện (3) Image 27 Giao diện chi tiết sản phẩm - phụ kiện (3) 34 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Ngày nay, việc kinh doanh cửa hàng bán nhiều mặt hàng, có nhiều khách hàng biết đến mua sản phẩm Trong năm qua, bên cạnh phát triển môi trường giao tiếp thông tin, nhu cầu sử dụng thiết bị điện tử Internet tăng cao, tạo nên thị trường mạng sôi động không thực tế Thương mại điện tử hình thức mua bán trao đổi thông tin qua Internet Các công ty, cửa hàng giới thiệu tất sản phẩm hình ảnh,video thơng tin Website để khách hàng xem, tham khao lựa chọn Đây hình thức kinh doanh tiện lợi, dễ dàng đặc biệt phát triển, có hội, thuận lợi lớn cho cửa hàng đường phát triển tạo nên thành cơng tiếng nói riêng cho Website “shop quần áo - Camper Store” Website cung cấp cho người sử dụng chức cần thiết để tiến hành mua hàng, đặt hàng với mó đồ ưng ý Đối với khách hàng, hệ thống cho phép xem thông tin sản phẩm chất lượng Qua trình nghiên cứu cố gắng thực hướng dẫn tận tình Giảng viên, giúp đỡ bạn bè khóa học đồ án nghiên cứu thể điều sau: Kết đạt được: - Thiết kế thành công website thời trang cho cửa hàng bán quần áo Camper Store, đáp ứng yêu cầu người sử dụng - Tìm hiểu nắm công cụ để Thiết kế website như: Adobe Dreamweaver CS6, ngơn ngữ lập trình Website như: HTML, Javascript, CSS - Giao diện website thiết kế đơn giản, thân thiện dễ sử dụng Việc chưa làm được: - Nhiều chức thiếu chưa sử dụng Hướng phát triển đề tài: Vì thời gian không cho phép kiến thức thiết kế web cịn hạn chế nên chúng em chưa tìm hiểu rõ kỹ đề tài Vì đề tài cịn có nhiều thiếu sót, mong thầy giúp đỡ chúng em nhiều em tiếp tục tìm hiểu sâu cơng nghệ này, nhằm mục đích Thiết kế website: − Giao diện đẹp, thân thiện với người dùng, có nhiều chức tương tác tốt với người dùng − Thiết kế, bổ sung tính cịn thiếu hay chưa thật hồn chỉnh q trình sử dụng 35 0 Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store Bao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.storeBao.cao.ket.thuc.hoc.phan.thiet.ke.web.ten.de.tai.thiet.ke.website.shop.quan.ao.camper.store