Tiểu luận môn học thiết kế web thiết kế website thế giới laptop limupa

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 THẾ GIỚI LAPTOP LIMUPA GVHD: THS NGUYỄN HỮU VĨNH SVTH: PHAN VĂN TUẤN MSSV: 1824801030200 LỚP: D18PM03 B4NH DƯƠNG – 7/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 THẾ GIỚI LAPTOP LIMUPA 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ử 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 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 chọn đề tài về: “Thiết kế website giới laptop Limupa” Đâ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: PHAN VĂN TUẤN – 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 H4NH 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 .2 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 Cách hoạt động HTML 1.4 Định dạng HTML 1.5 Các phần mềm lập trình HTML Giới thiệu chi tiết 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 .8 1.1 Giao diện trang chủ 1.2 Giao diện trang giới thiệu 10 1.3 Giao diện trang liên hệ 11 1.4 Giao diện trang đăng ký 12 1.5 Giao diện trang đăng nhập .13 1.6 Giao diện danh mục sản phẩm .14 1.6.1 Giao diện danh mục laptop bán nhiều liên kết 15 1.6.2 Giao diện danh sách laptop Dell 16 1.6.3 Giao diện danh sách laptop HP 17 SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 ii Đồ án môn thiết kế web 1.6.4 Giao diện danh sách laptop Acer 18 1.6.5 Giao diện danh sách laptop triệu 18 1.6.6 Giao diện danh sách laptop 10 triệu .19 1.6.7 Giao diện danh sách laptop 10 triệu 20 1.7 Giao diện trang chi tiết sản phẩm 20 1.7.1 Chi tiết laptop Dell .21 1.7.2 Chi tiết laptop HP 22 1.7.3 Chi tiết laptop Acer 23 1.7.4 Chi tiết laptop triệu 24 1.7.5 Chi tiết laptop 10 triệu 25 1.7.6 Chi tiết laptop 10 triệu 26 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 27 Kết đạt được: 27 Việc chưa làm được: 27 Hướng phát triển đề tài 27 TÀI LIỆU KHAM KHẢO .29 SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 iii Đồ án môn thiết kế web DANH MỤC H4NH hinh Giao diện trang chủ hinh Giao diện trang giới thiệu - 10 hinh Giao diện trang liên hệ 11 Hinh Giao diện trang đăng ký - 12 Hinh Giao diện trang đăng nhâp - 13 Hinh Giao diệ n danh mục sản phẩm 13 Hinh Giao diệ n dang mục laptop bán nhiêều 14 Hình Giao diện danh sách laptop Dell 15 Hinh Giao diện danh sách laptop HP 16 Hinh Giao diện danh sách laptop Acer -17 Hình 10 Giao diệ n danh sách laptop triệu 17 Hình 11 Giao diệ n danh sách laptop 10 triệu 18 Hình 12 Giao diệ n danh sách laptop 10 triệu -19 Hình 13 Giao diệ n chi têết laptop Dell 20 Hình 14 Giao diệ n trang chi têết laptop HP 21 Hình 14.1 Giao diệ n trang chi têết laptop Acer 22 Hình 15 Giao diệ n trang chi têết laptop triệu 23 Hình 16 Giao diệ n trang chi têết laptop 10 triệu -24 Hình 17 Giao diệ n trang chi têết laptop 10 triệu 25 SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 iv Đồ á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: PHAN VĂN TUẤN – LỚP D18PM03 0 v Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + Thế giới laptop Limupa Mục tiêu đề tài “Thế giới laptop” website quảng bá hình ảnh cửa hàng thể việc chăm sóc khách hàng lúc, nơi Với website khách hàng không cần đến cửa hàng hay nhà phân phối mà tham khảo cấu hình, giá thơng tin sản phẩm laptop đảm bảo từ phía nhà cung cấp Tạo thuận tiện, thoải mái cho khách hàng mua sản phẩm Ý Nghĩa Của Đề Tài Website bán hàng showroom ảo mở 24/24h đón khách hàng vào lúc Dựa vào website, khách hàng biết doanh nghiệp bạn kinh doanh mặt hàng gì? Giá bao nhiêu? câu hỏi mà khách hàng muốn biết doanh nghiệp sản phẩm doanh nghiệp Bên cạnh website bán hàng cịn giúp doanh nghiệp nhận phản hồi khách hàng cách nhanh chóng hiệu Doanh nghiệp cần cập nhật thông tin sản phẩm phần việc lại quảng bá website đến tất đối tác Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu máy tính laptop SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 Tiểu luận môn thiết kế web Một Số Trang Chính Của Website + Trang chủ: Đây trang giới thiệu sơ lược sản phẩm cửa 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 liên hệ: Đây trang mà khách hàng liên hệ với shop + Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng trang + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm trang + Trang sản phẩ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 SVTH: PHAN VĂN TUẤN – 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 (tiếng Anh, viết tắt cho HyperText Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản") ngôn ngữ đánh dấu thiết kế để tạo nên trang web với mẩu thơng tin trình bày World Wide Web Cùng với CSS JavaScript, HTML tạo ba tảng kỹ thuật cho World Wide Web HTML định nghĩa ứng dụng đơn giản SGML sử dụng tổ chức cần đến yêu cầu xuất phức tạp HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML 4.01 (1999) Sau đó, nhà phát triển thay XHTML Hiện nay, HTML phát triển tiếp với phiên HTML5 hứa hẹn mang lại diện mạo cho Web Bằng cách dùng HTML động Ajax, lập trình viên tạo xử lý số lượng lớn cơng cụ, từ chương trình soạn thảo văn đơn giản – gõ vào từ dòng – công cụ xuất WYSIWYG phức tạp.Hypertext cách mà trang Web (các tài liệu HTML) kết nối với Và thế, đường link có trang Web gọi Hypertext.Như tên gọi gợi ý, HTML ngôn ngữ đánh dấu thẻ (Markup Language), nghĩa bạn sử dụng HTML để đánh dấu tài liệu text thẻ (tag) để nói cho trình duyệt Web cách để cấu trúc để hiển thị hình Khi tập tin HTML hình thành, việc xử lý trình duyệt web đảm nhận Trình duyệt đóng vai trị đọc hiểu nội dung HTML từ thẻ bên chuyển sang dạng văn đánh dấu để đọc, nghe hiểu (do bot máy tính hiểu) 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 SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 Tiểu luận môn thiết kế web Hình Giao diện danh sách laptop Dell 1.6.3 Giao diện danh sách laptop HP SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 16 Tiểu luận môn thiết kế web Hinh Giao diện danh sách laptop HP SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 17 Tiểu luận môn thiết kế web 1.6.4 Giao diện danh sách laptop Acer Hinh Giao diện danh sách laptop Acer 1.6.5 Giao diện danh sách laptop triệu SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 18 Tiểu luận mơn thiết kế web Hình 10 Giao diện danh sách laptop triệu 1.6.6 Giao diện danh sách laptop 10 triệu SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 19 Tiểu luận môn thiết kế web Hình 11 Giao diện danh sách laptop 10 triệu 1.6.7 Giao diện danh sách laptop 10 triệu SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 20 Tiểu luận mơn thiết kế web Hình 12 Giao diện danh sách laptop 10 triệu 1.7 Giao diện trang chi tiết sản phẩm  Mục đích: Chức cho phép người dùng xem Tên sản phẩm, giá, thông tin chi tiết sản phẩm  Trong giao diện cho người dùng, chọn hiển thị theo Sản Phẩm kích chọn trang chủ SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 21 Tiểu luận môn thiết kế web 1.7.1 Chi tiết laptop Dell Hình 13 Giao diện chi tiết laptop Dell SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 22 Tiểu luận môn thiết kế web 1.7.2 Chi tiết laptop HP Hình 14 Giao diện trang chi tiết laptop HP SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 23 Tiểu luận môn thiết kế web 1.7.3 Chi tiết laptop Acer Hình 14.1 Giao diện trang chi tiết laptop Acer SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 24 Tiểu luận môn thiết kế web 1.7.4 Chi tiết laptop triệu Hình 15 Giao diện trang chi tiết laptop triệu SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 25 Tiểu luận môn thiết kế web 1.7.5 Chi tiết laptop 10 triệu Hình 16 Giao diện trang chi tiết laptop 10 triệu SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 26 Tiểu luận môn thiết kế web 1.7.6 Chi tiết laptop 10 triệu Hình 17 Giao diện trang chi tiết laptop 10 triệu SVTH: PHAN VĂN TUẤN – 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 buôn 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 giới laptop Limupa” với chức cần thiết cho trang web bn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác bn bán Website “thế giới laptop Limupa” 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 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 giới laptop Limupa, đá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 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: PHAN VĂN TUẤN – 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 Sau cùng, chúng em xin kính chúc thầy cô Khoa Công Nghệ Thông Tin dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau SVTH: PHAN VĂN TUẤN – 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: PHAN VĂN TUẤN – LỚP D18PM03 0 30 ... 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: PHAN VĂN TUẤN – LỚP D18PM03 0 v Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + Thế giới laptop Limupa Mục tiêu đề tài ? ?Thế giới laptop? ?? website quảng bá hình ảnh cửa hàng... D18PM03 0 21 Tiểu luận mơn thiết kế web 1.7.1 Chi tiết laptop Dell Hình 13 Giao diện chi tiết laptop Dell SVTH: PHAN VĂN TUẤN – LỚP D18PM03 0 22 Tiểu luận môn thiết kế web 1.7.2 Chi tiết laptop HP