Thiết kế website đa mặt hàng nqn

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT – CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THIẾT KẾ WEB THIẾT KẾ WEBSITE ĐA MẶT HÀNG NQN GVHD: THS NGUYỄN HỮU VĨNH SVTH: NGUYỄN QUỐC NHỰT MSSV: 1824801030170 LỚP: D18PM03 BNH DƯƠNG – 07/2020 0 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 ĐA MẶT HÀNG NQN 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 Đồ án mơn thiết kế web LỜI NĨI ĐẦU Hiện nay, giới công nghệ thông tin thương mại điện tử phát triển mạnh mẽ Kỹ thuật số giúp tiết kiệm đáng kể chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch đặc biệt giúp tiết kiệm thời gian để người đầu tư vào hoạt động khác Hơn nữa, thương mại điện tử 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 Chính vậy, công nghệ mã nguồn mở trở nên ý tính 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 tơi chọn đề tài về: “Thiết kế website đa mặt hàng NQN” Đâ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 Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề tài Chương 2: Giới thiệu công nghệ Chương 3: Giao diện website Chương 4:Kết luận hướng phát triển SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 i Đồ án môn thiết kế web MỤC LỤC LỜI NÓI ĐẦU i DANH MỤC HÌNH iv CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1 Tên Đề Tài Mục Tiêu Đề Tài Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một Số Trang Chính Của Website Error! Bookmark not defined CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML 2 Giới thiệu Adobe Dreamweaver Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH Đặc Tả Giao Diện 1.1 Giao diện trang chủ 1.2 Giao diện trang danh mục sản phẩm 1.2.1 Giao diện danh mục “Điện Thoại – Máy Tính Bảng” 1.2.2 Giao diện danh mục “Điện Tử - Điện Lạnh” 1.2.3 Giao diện danh mục “Phụ Kiện – Thiết Bị Số” 1.2.4 Giao diện danh mục “Laptop – Thiết Bị IT” 1.2.5 Giao diện danh mục “Máy Ả nh – Quay Phim” 10 1.2.6 Giao diện danh mục “Điện Gia Dụng” 10 1.2.7 Giao diện danh mục “Nhà Cửa Đời Sống” 11 1.2.8 Giao diện danh mục “Hàng Tiêu Dùng – Thực Phẩm” 11 1.2.9 Giao diện danh mục “Đồ Chơi, Mẹ & Bé” 12 1.2.10 Giao diện danh mục “Làm Đẹp – Sức Khỏe” 12 1.2.11 Giao diện danh mục “Thời Tra ng – Phụ Kiện” 13 SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 ii Đồ án môn thiết kế web 1.2.12 Giao diện danh mục “Thể Thao – Dã Ngoại” 13 1.2.13 Giao diện danh mục “Xe Máy, Ơ tơ, Xe Đạp” 14 1.2.14 Giao diện danh mục “Sách, VPP & Quà T ặng” 14 1.2.15 Giao diện danh mục “Voucher – Dịch Vụ - Thẻ Cào” 15 1.3 Logo thương hiệu 16 1.4 Tên thương hiệu 16 1.5 Giao diện mặt hàng sản phẩm 17 1.6 Giao diện sản phẩm quan tâm 17 1.7 Giao diện sản phẩm khuyến 18 1.8 Giao diện sản phẩm giảm giá 19 1.9 Giao diện sản phẩm đáng ý 19 1.10 Giao diện t khóa hot 20 1.11 Giao diện s ản phẩm xem 20 1.12 Giao diện s ản phẩm dành riêng cho bạn 21 1.13 Giao diện hỗ trợ khách hàng 22 1.14 Giao diện thông tin NQN 23 1.15 Giao diện hợp tác liên kết 24 1.16 Giao diện phương thức toán 25 1.17 Giao diện liên kết với 26 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 28 Kết đạt được: 28 Việc chưa làm được: 28 Hướng phát triển đề tài 28 TÀI LIỆU KHAM KHẢO 30 SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 iii Đồ án môn thiết kế web DANH MỤC HÌNH Hình 1.1 Giao diện trang chủ Hình 1.2 Giao diện trang danh mục sản phẩm Hình 1.2.1 Giao diện danh mục “Điện Thoại – Máy Tính Bảng” Hình 1.2.2 Giao diện danh mục “Điện Tử - Điện Lạnh” Hình 1.2.3 Giao diện danh mục “Phụ Kiện – Thiết Bị Số” Hình 1.2.4 Giao diện danh mục “Laptop – Thiết Bị IT” Hình 1.2.5 Giao diện danh mục “Máy Ảnh – Quay Phim” 10 Hình 1.2.6 Giao diện danh mục “Điện Gia Dụng” 10 Hình 1.2.7 Giao diện danh mục “Nhà Cửa Đời Sống” 11 Hình 1.2.8 Giao diện danh mục “Hàng Tiêu Dùng – Thực Phẩm” 11 Hình 1.2.9 Giao diện danh mục “Đồ Chơi, Mẹ & Bé” 12 Hình 1.2.10 Giao diện danh mục “Làm Đẹp – Sức Khỏe” 12 Hình 1.2.11 Giao diện danh mục “Thời Trang – Phụ Kiện” 13 Hình 1.2.12 Giao diện danh mục “Thể Thao – Dã Ngoại” 13 Hình 1.2.13 Giao diện danh mục “Xe Máy, Ơ tơ, Xe Đạp” 14 Hình 1.2.14 Giao diện danh mục “Sách, VPP & Quà Tặng” 14 Hình 1.2.15 Giao diện danh mục “Voucher – Dịch Vụ - Thẻ Cào” 15 Hình 1.3 Lgo thương hiệu 16 Hình 1.4 Tên thương hiệu 16 Hình 1.5 Giao diện mặt hàng sản phẩm 17 SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 iv Đồ án môn thiết kế web Hình 1.6 Giao diện sản phẩm quan tâm 17 Hình 1.7 Giao diện sản phẩm khuyến 18 Hình 1.8 Giao diện sản phẩm giảm giá 19 Hình 1.9 Giao diện sản phẩm đáng ý 19 Hình 1.10 Giao diện từ khóa hot 20 Hình 1.11 Giao diện s ản phẩm xem 20 Hình 1.12 Giao diện sản phẩm dành riêng cho bạn 21 Hình 1.13 Giao diện hỗ trợ khách hàng 22 Hình 1.14 Giao diện thông tin NQN 23 Hình 1.15 Giao diện hợp tác liên kết 24 Hình 1.16 Giao diện phương thức toán 25 Hình 1.17 Giao diện liên kết với 26 SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 v Đồ án môn thiết kế web 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 SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 vi Tiểu luận môn thiết k ế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE BÁN ĐA MẶT HÀNG NQN Mục Tiêu Đề Tài + Thiết kế Website đa mặt hàng cho cửa hàng NQN Ý Nghĩa Của Đề Tài + Đưa sản phẩm công ty đến gần với người tiêu dùng + Quảng bá thương hiệu Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu mặt hàng điện tử, đồ gia dụng, quần áo nam nữ, đồ dùng em bé SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 Tiểu luận môn thiết k ế web CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? 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 để 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 dung 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 htm html 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…và sử dụng nhiều adobe dreamweaver Giới thiệu Adobe Dreamweaver Macromedia Dreamweaver trình biên soạn HTML chuyên nghiệp dùng để thiết kế, viết mã phát triển website trang web ứng dụng web Cho dù bạn có thích thú với công việc viết mã HTML thủ công bạn thích làm việc mơi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn công cụ hữu ích để nâng cao kinh nghiệm thiết kế web bạn Các tính biên soạn trực quan Dreamweaver cho phép bạn tạo nhanh trang web mà không cần dịng mã Bạn xem tất thành phần SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 Tiểu luận môn thiết k ế web 1.4 Tên thương hiệu Hình 1.4 Tên thương hiệu 1.5 Giao diện mặt hàng sản phẩm ➢ Mục đích: Chức cho phép người dùng xem Tên sản phẩm, giá Hình 1.5 Giao diện mặt hàng sản phẩm SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 16 Tiểu luận môn thiết k ế web 1.6 Giao diện sản phẩm quan tâm Hình 1.6 Giao diện sản phẩm quan tâm SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 17 Tiểu luận môn thiết k ế web 1.7 Giao diện sản phẩm khuyến Hình 1.7 Giao diện sản phẩm khuyến SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 18 Tiểu luận môn thiết k ế web 1.8 Giao diện sản phẩm giảm giá Hình 1.8 Giao diện sản phẩm giảm giá 1.9 Giao diện sản phẩm đáng ý Hình 1.9 Giao diện sản phẩm đáng ý SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 19 Tiểu luận môn thiết k ế web 1.10 Giao diện từ khóa hot Hình 1.10 Giao diện từ khóa hot 1.11 Giao diện sản phẩm xem Hình 1.11 Giao diện sản phẩm xem SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 20 Tiểu luận môn thiết k ế web 1.12 Giao diện sản phẩm dành riêng cho bạn Hình 1.12 Giao diện sản phẩm dành riêng cho bạn SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 21 Tiểu luận môn thiết k ế web 1.13 Giao diện hỗ trợ khách hàng Hình 1.13 Giao diện hỗ trợ khách hàng SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 22 Tiểu luận môn thiết k ế web 1.14 Giao diện thơng tin NQN Hình 1.14 Giao diện thông tin NQN SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 23 Tiểu luận môn thiết k ế web 1.15 Giao diện hợp tác liên kết Hình 1.15 Giao diện hợp tác liên kết SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 24 Tiểu luận môn thiết k ế web 1.16 Giao diện phương thức toán Hình 1.16 Giao diện phương thức tốn SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 25 Tiểu luận môn thiết k ế web 1.17 Giao diện kết nối với chúng tơi Hình 1.16 Giao diện kết nối với SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 26 Tiểu luận môn thiết k ế web 1.18 Giao diện địa liên hệ Hình 1.16 Giao diện địa liên hệ SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 27 Tiểu luận môn thiết k ế web CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong thời buổi công nghiệp hóa nay, việc bn bán qua mạng trở nên phổ biến với hầu hết người Đây xu hướng xã hội người với cú nhấp chuột dễ dàng đặt mua sản phầm mà ưng ý cách dễ dàng thời gian đến tận nơi để mua Việc mua bán giúp tiết kiệm thời gian tiền bạc người lựa chọn sản phẩm với giá đa dạng nhu cầu cá nhân người Vì thế, sau tiến hành khảo sát em định Thiết kế trang web bán quần áo mà cụ thể “Thiết kế website shop quần áo cho công ty BiBo”với chức cần thiết cho trang web buôn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác buôn bán Website “shop quần áo Bibo” thứ dùng để quảng bá cho sân, thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng yêu thích thời trang tìm mua cho 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 BiBo, đá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: - Việc biểu diễn thông tin website chưa linh hoạt - Phân tích thiết kế chưa hồn chỉnh - 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: SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 28 Tiểu luận môn thiết k ế web ➢ 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 SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 29 Tiểu luận môn thiết k ế web TÀI LIỆU KHAM KHẢO - Tài liệu giảng môn “Thiết kế website” thầy Nguyễn Hữu Vĩnh - Website WWW: http://www.hiepsiit.com - Website https://coccoc.com/search#query=Webcoban.vn SVTH: NGUYỄN QUỐC NHỰT– LỚP D18PM03 0 30 ... D18PM03 0 vi Tiểu luận môn thiết k ế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE BÁN ĐA MẶT HÀNG NQN Mục Tiêu Đề Tài + Thiết kế Website đa mặt hàng cho cửa hàng NQN Ý Nghĩa Của Đề Tài... với người dùng Chính báo cáo chọn đề tài về: ? ?Thiết kế website đa mặt hàng NQN? ?? Đâ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 Đề tài tiểu luận gồm phần phâ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 BiBo, đá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