Tiểu luận môn học thiết kế web thiết kế website shop cat’s rebellion

Tiểu luận môn thiết kế web 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 SHOP Cat’s ReBeLlion GV: THS_Nguyễn Hữu Vĩnh SVTH: Lý Minh Tân MSSV:1824801030254 LỚP: D18PM04 B-NH DƯƠNG – 07/202 0 Tiểu luận mơn thiết kế web 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 Cat’s ReBeLlion 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 Tiểu luận môn thiết kế web LỜI MỞ ĐẦU Bạn muốn chăm sóc thú cưng bạn khơng có nhiều thời gian 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 thú cưng mạng giúp ta làm điều Bạn muốn tìm sản phẩm đáng tin cậy, bạn muốn có bé thú cưng đầy dễ thương, bạn muốn thú cưng bạn trạng thái tốt nhất… Chính nhu cầu bạn shop Cat’s ReBeLlion thành lập website nhằm mang lại tiện lợi bạn chăm sóc thú cưng Website shop có nhiều tính bạn khám phá học nhiều mẹo chăm sóc thú cưng hay dó shop update ngày, ngày bạn thu thập nhiều thơng tin hữu ích Đề 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 0 Tiểu luận môn thiết kế web MỤC LỤC SƠ ĐỒ THIẾT KẾ TRANG WEB ………………………………………………….7 1.1 Sơ đồ tổng quát trang 1.2 Sơ đồ KHTT 1.4 Sơ đồ mua sắm .6 CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 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 .7 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 .8 1.3 Định dạng HTML Giới thiệu Adobe Dreamweaver .8 Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR-NH……………………………………12 Đặc Tả Giao Diện 11 1.1 Giao diện trang chủ 11 1.2 Giao diện trang giới thiệu 12 1.3 Giao diện Trang Homepage_KHTT .13 1.4 Giao diện trang đăng ký 14 1.5 Giao diện trang đăng nhập .16 1.6 Giao diện hoạt động tháng .17 1.6.1 Giao diện danh menu 18 1.6.2 Giao diện trang mèo Anh loại mèo khác tương tự 18 0 Tiểu luận môn thiết kế web 1.6.3 Giao diện trang mèo Anh Lông Ngắn 20 1.6.4 Giao diện trang mèo Anh Lông Dài 22 1.6.5 Giao diện menu trang mua sắm 24 1.6.6 Giao diện trang mua sắm 24 1.6.7 Giao diện tìm kiếm nhanh 26 1.6.8 Giao diện sản phẩm chạy gợi ý 28 1.6.9 Giao diện tìm kiếm khuyến 29 1.6.10 Giao diện mua xem sản phẩm 30 1.6.11 Giao diện menu KHTT 30 1.6.12 Giao diện menu KHTT 31 1.6.13 Giao diện lịch .32 1.6.14 Giao diện tìm kiếm .32 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .33 Kết đạt được: 33 Việc chưa làm được: 33 Hướng phát triển đề tài .34 TÀI LIỆU KHAM KHẢO 35 0 Tiểu luận môn thiết kế web MỤC LỤC H-NH Figure 1.Giao Diện Trang Chủ 14 Figure 2.Giao Diện Giới Thiệu 15 Figure Giao Diện HomePage KHTT 16 Figure 4.Giao Diện Đăng Ký 16 Figure 5.Giao Diện Đăng Ký 18 Figure 6.Giao Diện Thanh Hoạt Động Của Tháng 19 Figure 7.Giao Diện Thanh Menu .20 Figure 8.Giao Diện Trang Mèo Anh 21 Figure 9.Giao Diện Mèo Anh Lông Ngắn 23 Figure 10.Giao Diện Mèo Anh Lông Dài 25 Figure 11.Giao Diện Menu Mua Sắm .26 Figure 12.Giao Diện Mua Sắm 27 Figure 13.Giao Diện Tìm Kiếm Nhanh .28 Figure 14.Giao Diện Tìm Kiếm Nhanh Chủng Mèo 28 Figure 15.Giao Diện Tìm Kiếm Nhanh Chi Nhánh 29 Figure 16.Giao Diện Gợi Ý Sản Phẩm 30 Figure 17.Giao Diện Tìm Kiếm Khuyến Mãi 31 Figure 17.Giao Diện Tìm Kiếm Khuyến Mãi 31 Figure 18.Giao Diện Mua Và Xem Sản Phẩm 32 Figure 19.Giao Diện Menu KHTT 32 Figure 20.Giao Diện Chạy Marquee 33 Figure 21.Giao Diện Lịch 34 Figure 22.Giao Diện Thanh Tìm Kiếm 34 0 Tiểu luận môn thiết kế web SƠ ĐỒ THIẾT KẾ TRANG WEB 1.1 Trang Web Cat's ReBeLlion Trang Chủ Giới Thiệu Chi Tiếắt Sản Chủng Mèo Mua Sắắm Phẩm KHTT Sơ đồ tổng quát trang 0 Tiểu luận mơn thiết kế web 1.2 Sơ đồ KHTT KHTT Đắng nhập Đội Ngũ Nhân Viến Đắng Ký Lý Minh Tân Nguyếễn Kim Tuyếền Nguyếễn Nhật Linh Tâắt Dục Chí Châu Trìu Phát 0 Tiểu luận môn thiết kế web 1.3 Sơ đồ chủng mèo Chủng Mèo Mèo Tây Mèo Anh Mèo Ta Turkish Angora Mèo Ba Tư Scottish fold munchkin Mèo Vàng Mèo Anh Lông Dài Mèo Xiếm Mèo Anh Lông Ngắắn Mèo Tam Thể 1.4 Sơ đồ mua sắm Mua Sắắm Tìm Kiếắm Chắm Sóc Thú Cưng Mèo Chi Tiếắt Sản Phẩm Dụng Cụ Vệ sinh Thức Ăn Giải Trí 0 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 Shop Cat’s ReBeLlion Mục Tiêu Đề Tài + Thiết kế Website Shop Cat’s ReBeLlion Ý Nghĩa Của Đề Tài + Tối ưu tiết kiệm thời gian khách hà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 dụng cụ chăm sóc mèo mèo Một Số Trang Chính Của Website + Trang chủ: Cung cấp số thông tin cần thiết cho khách hàng + Trang Giới thiệu: Đây trang giúp cho khách hàng xem biết thêm thông tin Shop + Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng thân thiết Shop + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm nhận nhiều khuyến shop + Trang mua sắm: Đây trang khách hàng xem tham khảo mặt hàng cửa hàng có sẵn để lựa chọn + Trang chi tiết sản phẩm: Đây trang khách hàng nhấn vào sản phẩm để xem chi tiết 10 0 Tiểu luận môn thiết kế web Figure 9.Giao Diện Mèo Anh Lông Ngắn 24 0 Tiểu luận môn thiết kế web 1.6.4 Giao diện trang mèo Anh Lông Dài 1.6.5 Giao diện menu trang mua sắm 25 Figure 10.Giao Diện Mèo Anh Lông Dài 0 Tiểu luận môn thiết kế web Figure 11.Giao Diện Menu Mua Sắm 1.6.6 Giao diện trang mua sắm 26 0 Tiểu luận môn thiết kế web Figure 12.Giao Diện Mua Sắm 27 0 Tiểu luận môn thiết kế web 1.6.7 Giao diện tìm kiếm nhanh Figure 13.Giao Diện Tìm Kiếm Nhanh  Tìm kiếm nhanh giúp bạn tìm thơng tin nhanh mèo hay chi nhánh shop Figure 14.Giao Diện Tìm Kiếm Nhanh Chủng Mèo  Bạn sử dụng chức chủng mèo để đưa tới trang mèo nhanh để cập nhật thơng tin mèo 28 0 Tiểu luận mơn thiết kế web Figure 15.Giao Diện Tìm Kiếm Nhanh Chi Nhánh  Tìm kiếm nhanh có chức tìm chi nhánh để bạn xác định nơi gần để tối ưu hóa thời gian chi phí bạn bỏ 29 0 Tiểu luận môn thiết kế web 1.6.8 Giao diện sản phẩm chạy gợi ý Figure 16.Giao Diện Gợi Ý Sản Phẩm  Trên giao diện có sản phẩm shop mà chạy theo cách xuống, khách hàng trỏ chuột vào bảng ngưng chạy 30 0 Tiểu luận môn thiết kế web Đồng thời khách hàng click vào sản phẩm khách hàng đưa đến trang sản phẩm 1.6.9 Giao diện tìm kiếm khuyến Figure 17.Giao Diện Tìm Kiếm Khuyến Mãi  Thanh giao diện ho phép khách hàng liên kết để chuyển qua trang mà khách hàng muốn tìm hiểu 31 0 Tiểu luận mơn thiết kế web 1.6.10 Giao diện mua xem sản phẩm Figure 19.Giao Diện Mua Và Xem Sản Phẩm  Giao diện cho phép khách hàng ấn vào để xem chi tiết sản phẩm bỏ vào tủ đồ tạm thời Khách hàng xem giá sản phẩm tên phí ship 1.6.11 Giao diện menu KHTT  Mục Đích: Cho khách hàng đăng nhập vào để mua sắm nhận khuyến mãi, đồng thời khách hàng lựa chọn nhân viên để tư vấn Figure 20.Giao Diện Menu KHTT 1.6.12 Giao diện menu KHTT  Mục đích: Khách hàng ấn vào ảnh để mua sản phẩm đồng thời load qua trang mua sắm 32 0 Tiểu luận môn thiết kế web Figure 21.Giao Diện Chạy Marquee 33 0 Tiểu luận môn thiết kế web 1.6.13 Giao diện lịch  Mục đích: Khách hàng xem ngày website, làm cho website sinh động  Lịch sử dụng JavaScript Figure 22.Giao Diện Lịch 1.6.14 Giao diện tìm kiếm Figure 23.Giao Diện Thanh Tìm Kiếm CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 34 0 Tiểu luận môn thiết kế web Trong thời buổi cơng nghiệp hóa nay, người có thời gian dành cho thân công việc nhỏ mua sắm hay tìm người bạn để giải tỏa stress Bạn muốn tìm người bạn dễ thương hoạt bác,… hay tìm sản phẩm cho thú cưng bạn bạn lại khơng có q nhiều thời gian Do Nhu cầu nên Web Cat’s ReBeLlion mắt giải vấn đề cách dễ dàng cần cú click khách hàng việc giải Khách hàng giao tận nơi mà không nhiều thời gian, khách hàng tìm hiểu nhiều mẹo thơng tin web shop cung cấp, đồng thời khách hàng liên hệ đặt lịch hẹn hay tư vấn từ phía nhân viên shop Vừa tiện ích cho khách hàng mà đồng thời shop lại yêu quý Website “Cat’s ReBeLlion” thứ dùng để quảng bá cho shop, thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng có nhu cầu chăm sóc thú cư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 mèo sho Cat’s ReBeLlion, đá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 hoàn chỉnh - Nhiều phần web thiết kế chưa đủ cần nhiều thời gian để rèn luyện thêm - Nhiều chức thiếu chưa sử dụng Hướng phát triển đề tài 35 0 Tiểu luận mơn thiết kế web 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 trình sử dụng 36 0 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 37 0 Tiểu luận môn thiết kế web 0 ... sinh Thức Ăn Giải Trí 0 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 Shop Cat’s ReBeLlion Mục Tiêu Đề Tài + Thiết kế Website Shop Cat’s ReBeLlion Ý Nghĩa Của... Dài 0 Tiểu luận môn thiết kế web Figure 11.Giao Diện Menu Mua Sắm 1.6.6 Giao diện trang mua sắm 26 0 Tiểu luận môn thiết kế web Figure 12.Giao Diện Mua Sắm 27 0 Tiểu luận môn thiết kế web 1.6.7... chủng mèo 22 0 Tiểu luận mơn thiết kế web 1.6.3 Giao diện trang mèo Anh Lông Ngắn 23 0 Tiểu luận môn thiết kế web Figure 9.Giao Diện Mèo Anh Lông Ngắn 24 0 Tiểu luận môn thiết kế web 1.6.4 Giao