(Tiểu luận) tiểu luận môn học thiết kế web thiết kế website shop máy ảnh hoàng long

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 MÁY ẢNH HOÀNG LONG GVHD: THS NGUYỄN HỮU VĨNH SVTH: NGUYỄN MINH HÙNG MSSV: 1824801030141 LỚP: D18PM03 B6NH DƯƠNG – 7-2020 0 Tieu luan 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 MÁY ẢNH HOÀNG LONG 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 Tieu luan Đồ á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 shop máy ảnh Hoàng Long” Đâ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 MINH HÙNG – LỚP D18PM03 0 Tieu luan 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 .1 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 .2 1.3 Định dạng HTML 2 Giới thiệu Adobe Dreamweaver .2 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ủ .5 1.2 Giao diện trang giới thiệu 1.3 Giao diện trang liên hệ 10 1.4 Giao diện trang đăng ký .11 1.5 Giao diện trang đăng nhập 12 1.6 Giao diện trang danh mục phụ kiện .13 1.6.1 Giao diện danh mục ống kính 14 1.6.2 Giao diện danh mục dây sạc .15 1.6.3 Giao diện danh mục thẻ nhớ .16 1.6.4 Giao diện danh mục tay cầm 17 1.6.5 Giao diện danh mục đèn Flash 18 1.6.6 Giao diện danh mục Pin 19 1.6.7 Giao diện danh mục máy ảnh 20 SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan ii Đồ án môn thiết kế web 1.6.8 Giao diện danh mục tripod .21 1.6.9 Giao diện danh mục trang trí 22 1.6.10 Giao diện danh mục túi, balo 23 1.7 Giao diện danh mục thương hiệu 24 1.7.1 Giao diện thương hiệu Canon 25 1.7.2 Giao diện thương hiệu Sony .26 1.7.3 Giao diện thương hiệu Fujifilm 27 1.7.4 Giao diện thương hiệu Nikon 28 1.7.5 Giao diện thương hiệu Pentax 29 1.7.6 Giao diện thương hiệu Panasonic .30 1.7.7 Giao diện thương hiệu Olympus .31 1.7.8 Giao diện thương hiệu Sumsung .32 1.7.9 Giao diện thương hiệu Leica .33 1.7.10 Giao diện thương hiệu Ricoh 34 1.7.11 Giao diện thương hiệu Lomography .35 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 36 Kết đạt được: 36 Việc chưa làm được: 36 Hướng phát triển đề tài .36 TÀI LIỆU KHAM KHẢO 38 SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan iii Đồ án môn thiết kế web DANH MỤC H6NH Hình 1.1 Giao diện trang chủ Hình 1.2.3 Giao diện trang giới thiệu .9 Hình 1.3 Giao diện trang liên hệ 10 Hình 1.4 Giao diện trang đăng ký 11 Hình 1.5 Giao diện trang đăng nhập .12 Hình 1.6 Giao diện trang danh mục phụ kiện 13 Hình 1.6.1 Giao diện danh mục ống kính .14 Hình 1.6.3 Giao diện danh mục thẻ nhớ 16 Hình 1.6.4 Giao diện danh mục tay cầm 17 Hình 1.6.5 Giao diện danh mục đèn Flash 18 Hình 1.6.6 Giao diện danh mục Pin 19 Hình 1.6.7 Giao diện danh mục máy ảnh .20 Hình 1.6.9 Giao diện danh mục trang trí 22 Hình 1.6.10 Giao diện danh mục túi, balo 23 Hình 1.7.1 Giao diện thương hiệu Canon .25 Hình 1.7.2 Giao diện thương hiệu Sony 26 Hình 1.7.3 Giao diện thương hiệu Fujifilm 27 Hình 1.7.4 Giao diện thương hiệu Nikon .28 Hình 1.7.5 Giao diện thương hiệu Pentax 29 Hình 1.7.6 Giao diện thương hiệu Panasonic 30 Hình 1.7.7 Giao diện thương hiệu Olympus 31 Hình 1.7.8 Giao diện thương hiệu samsung 32 Hình 1.7.9 Giao diện thương hiệu Leica 33 Hình 1.7.10 Giao diện thương hiệu Ricoh 34 Hình 1.7.11 Giao diện thương hiệu Lomography 35 SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan iv Đồ án môn thiết kế web SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 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 MINH HÙNG – LỚP D18PM03 0 Tieu luan 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 SHOP MÁY ẢNH HOÀNG LONG Mục Tiêu Đề Tài + Thiết kế Website shop bán máy ảnh cho cơng ty Hồng Long Ý Nghĩa Của Đề Tài + Đưa sản phẩm công ty đến đế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áy ảnh phụ kiện 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: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 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 MINH HÙNG – LỚP D18PM03 0 Tieu luan Tiểu luận môn thiết kế web 1.7 Giao diện danh mục thương hiệu Hình 1.7 Giao diện thương hiệu SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 22 Tiểu luận môn thiết kế web 1.7.1 Giao diện thương hiệu Canon Hình 1.7.1 Giao diện thương hiệu Canon SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 23 Tiểu luận môn thiết kế web 1.7.2 Giao diện thương hiệu Sony Hình 1.7.2 Giao diện thương hiệu Sony SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 24 Tiểu luận môn thiết kế web 1.7.3 Giao diện thương hiệu Fujifilm Hình 1.7.3 Giao diện thương hiệu Fujifilm SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 25 Tiểu luận môn thiết kế web 1.7.4 Giao diện thương hiệu Nikon Hình 1.7.4 Giao diện thương hiệu Nikon SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 26 Tiểu luận môn thiết kế web 1.7.5 Giao diện thương hiệu Pentax Hình 1.7.5 Giao thương hiệu Pentax SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 27 Tiểu luận môn thiết kế web 1.7.6 Giao diện thương hiệu Panasonic Hình 1.7.6 Giao diện thương hiệu Panasonic SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 28 Tiểu luận môn thiết kế web 1.7.7 Giao diện thương hiệu Olympus Hình 1.7.7 Giao diện thương hiệu Olympus SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 29 Tiểu luận môn thiết kế web 1.7.8 Giao diện thương hiệu Sumsung Hình 1.7.8 Giao diện thương hiệu samsung SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 30 Tiểu luận môn thiết kế web 1.7.9 Giao diện thương hiệu Leica Hình 1.7.9 Giao diện thương hiệu Leica SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 31 Tiểu luận môn thiết kế web 1.7.10 Giao diện thương hiệu Ricoh Hình 1.7.10 Giao diện thương hiệu Ricoh SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 32 Tiểu luận môn thiết kế web 1.7.11 Giao diện thương hiệu Lomography Hình 1.7.11 Giao diện thương hiệu Lomography SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 33 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 máy ảnh mà cụ thể “Thiết kế website shop máy ảnh Hoàng Long”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 “shop máy ảnh Hoàng Long” thứ dùng để quảng bá cho công ty, 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 bán hàng cho cửa hàng bán máy ảnh Hoàng Long, đá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 MINH HÙNG – LỚP D18PM03 0 Tieu luan 34 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 trình sử dụng SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 35 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 MINH HÙNG – LỚP D18PM03 0 Tieu luan 36 ... luan 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 SHOP MÁY ẢNH HOÀNG LONG Mục Tiêu Đề Tài + Thiết kế Website shop bán máy ảnh cho cơng ty Hồng Long Ý... định Thiết kế trang web bán máy ảnh mà cụ thể ? ?Thiết kế website shop máy ảnh Hoàng Long? ??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. .. Tieu luan 17 Tiểu luận môn thiết kế web 1.6.7 Giao diện danh mục máy ảnh Hình 1.6.7 Giao diện danh mục máy ảnh SVTH: NGUYỄN MINH HÙNG – LỚP D18PM03 0 Tieu luan 18 Tiểu luận môn thiết kế web 1.6.8