Tiểu Luận Môn Học Thiết Kế Web Thiết Kế Website Bán Máy Ảnh Cho Cửa Hàng Kingcame.pdf

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THIẾT KẾ WEB THIẾT KẾ WEBSITE BÁN MÁY ẢNH CHO CỬA HÀNG KINGCAME GV: ThS Võ Quốc Lương SVTH: Nguyễn Hoàng Hiệp MSSV: 2024802010235 LỚP: D20CNTT04 BDNH DƯƠNG - 04/2021 0 TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THIẾT KẾ WEB THIẾT KẾ WEBSITE BÁN MÁY ẢNH CHO CỬA HÀNG KINGCAME GV: ThS Võ Quốc Lương SVTH: Nguyễn Hoàng Hiệp MSSV: 2024802010235 LỚP: D20CNTT04 BDNH DƯƠNG - 04/2021 i 0 MỤC LỤC MỤC LỤC ii DANH MỤC HDNH iv MỞ ĐẦU CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN .2 1.1 Phát biểu toán 1.2 Phân tích chức .2 1.2.1 Giới thiệu trang Web bán máy ảnh Kingcame .2 1.2.2 Danh mục sản phẩm 1.2.3 Liên hệ 1.2.4 Đăng ký, đăng nhập 1.2.5 Xem thông tin sản phẩm CHƯƠNG GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG 2.1 Giới thiệu HTML 2.1.1 HTML gì? .3 2.1.2 Công dụng HTML 2.1.3 Định dạng HTML 2.1.4 Một số ưu điểm bật HTML .3 2.1.5 Nhược điểm HTML .4 2.2 Giới thiệu adobe Dreamweaver 2.3 Ngôn ngữ CSS 2.4 Ngôn ngữ Javacript CHƯƠNG THIẾT KẾ GIAO DIỆN .6 3.1 Thiết kế sơ đồ 3.2 Giao diện trang chủ 3.3 Giao diện menu 3.4 Giao diện trang Giới thiệu 3.5 Giao diện trang Liên hệ .9 3.6 Giao diện trang sản phẩm 3.7 Giao diện trang Chi tiết sản phẩm 11 3.8 Giao diện trang quản lý tài khoản 12 ii 0 3.9 Giao diện phần footer 12 CHƯƠNG THIẾT KẾ CHƯƠNG TRDNH 14 4.1 Code trang chủ 14 4.1.1 Source code HTML 14 4.1.2 Định dạng CSS 16 19 4.2 Code Trang giới thiệu 26 4.2.1 Source code HTML 26 4.2.2 Định dạng CSS 27 4.3 Code trang Liên hệ 27 4.3.1 Source Code HTML 27 4.3.2 Định dạng CSS 27 4.4 Code trang hiển thị sản phẩm 29 4.4.1 Source Code HTML 29 4.4.2 Định dạng CSS 29 4.5 Code trang Chi tiết sản phẩm 32 4.5.1 Source Code HTML 32 4.5.2 Định dạng CSS 32 4.6 Code trang Quản lý tài khoản 35 4.6.1 Source code HTML 35 4.7 Code trang phân mục sản phẩm theo hãng .36 4.7.1 Source code HTML 36 4.7.2 Định dạng CSS 36 KẾT LUẬN 37 3.Hướng phát triển 37 TÀI LIỆU THAM KHẢO .38 iii 0 DANH MỤC HDNH Hình 3.1: Sơ đồ website Hình 3.2: Giao diện trang chủ Hình 3.3: Giao diện menu máy tính .7 Hình 3.4: Giao diện menu điện thoại .7 Hình 3.5: Giao diện trang giới thiệu .8 Hình 3.6: Giao diện trang liên hệ Hình 3.7: Giao diện trang sản phẩm Hình 3.8: Giao diện trang sản phẩm 10 Hình 3.9: Giao diện trang hiển thị sản phẩm 11 Hình 3.10: Giao diện trang chi tiết sản phẩm 11 Hình 3.11: Giao diện trang quản lý tài khoản .12 Hình 3.12: Giao diện phần chân Footer máy tính 12 Hình 3.13: Giao diện phần footer điện thoại 13 Hình 4.1: Code HTML trang chủ .14 Hình 4.2: Code HTML trang chủ .14 Hình 4.3: Code HTML Trang chủ 15 Hình 4.4: Coder HTML Trang chủ 15 Hình 4.5: Code HTML Trang chủ 15 Hình 4.6: Code HTML Htrang chủ 16 Hình 4.7: Code CSS Trang chủ 16 Hình 4.8: Code CSS Trang chủ 17 Hình 4.9: Code CSS Trang chủ 18 Hình 4.10: Code CSS Trang chủ 19 Hình 4.11: Code CSS Trang chủ 20 Hình 4.12: Code CSS Trang chủ 20 Hình 4.13: Code CSS Trang chủ 21 Hình 4.14: Code CSS Trang chủ 21 Hình 4.15: Code CSS Trang chủ 22 Hình 4.16: Code CSS Trang chủ 10 22 Hình 4.17: Code CSS Trang chủ 11 23 Hình 4.18: Code CSS Trang chủ 12 23 iv 0 Hình 4.19: Code CSS Trang chủ 13 24 Hình 4.20: Code CSS Trang chủ 14 24 Hình 4.21: Code CSS Trang chủ 15 25 Hình 4.22: Code CSS Trang chủ 16 25 Hình 4.23: Code CSS Trang chủ 17 26 Hình 4.24: Code CSS Trang chủ 18 26 Hình 4.25: Code HTML trang Giới thiệu .27 Hình 4.26: Code CSS trang Giới thiệu 27 Hình 4.27: Code HTML trang Liên hệ 27 Hình 4.28: code CSS trang Liên hệ 28 Hình 4.29: Code CSS trang liên hệ 28 Hình 4.30: Code HTML trang hiển thị sản phẩm 29 Hình 4.31: Code CSS trang hiển thị sản phẩm 29 Hình 4.32: Code CSS trang hiển thị sản phẩm 30 Hình 4.33: Code CSS trang hiển thị sản phẩm 30 Hình 4.34: Code CSS trang hiển thị sản phẩm 31 Hình 4.35: Code CSS trang hiển thị sản phẩm 31 Hình 4.36: Code HTML trang chi tiết sản phẩm 32 Hình 4.37: Code CSS trang chi tiết sản phẩm 33 Hình 4.38: code CSS trang chi tiết sản phẩm .33 Hình 4.39: Code CSS trang chi tiết sản phẩm 33 Hình 4.40: Code CSS trang chi tiết sản phẩm 34 Hình 4.41: Code CSS trang chi tiết sản phẩm 34 Hình 4.42: Code HTML trang quản lý tài khoản 35 Hình 4.43: Code HTML trang quản lý tài khoản .35 Hình 4.44: Code HTML trang quản lý tài khoản .36 Hình 4.45: Code HTML trang phân mục sản phẩm theo hăng 36 Hình 4.46: Code CSS trang phân loại sản phẩm theo hãng .36 Hình 4.47: Code CSS trang phân loại sản phẩm theo hãng 36 v 0 MỞ ĐẦU Ngày nay, chất lượng sống ngày cải thiện người ta quan tâm nhiều đến giá trị tinh thần Vì khoảnh khắc vui tươi, hạnh phúc bên gia đình, người thân, bạn bè mong muốn giữ lại Bên cạnh đó, phát triển Internet trang mạng xẫ hội Facebook, Twitter, Instagram, Zalo, nơi để người trao đổi, chia sẻ suy nghĩ điều học cảm nhận qua sống hàng ngày hình ảnh trở thành cơng cụ đắt lực cho việc Những điều làm cho máy ảnh dần trở thành thiết bị quen thuộc quan trọng sống ngày Các bạn trẻ ngày quan tâm nhiều máy ảnh nghệ thuật nhiếp ảnh, họ xem cách hiệu để thể góc nhìn riêng thân kiện, hoạt động đời thường diễn trước mắt Chụp ảnh khơng cịn đơn giản cằm máy lên bấm nút chụp, họ đòi hỏi nhiều ảnh chụp, phải thật đẹp Vì thế, máy ảnh cơng cụ quan trọng khơng giúp lưu giữ khoảnh khắc trôi qua mà phương tiện giúp thể cá tính riêng, thể nhìn thân giới xung quanh Hiện mạng có nhiều website bán máy ảnh, kể đến số website thịnh hành binhminhdigital.com, Zshop.vn, Mayanh24h.com, Điều lần chứng minh cho tầm quan trọng mức độ quan tâm người dùng máy ảnh Tuy nhiên, đại đa số website sử dụng thuật ngữ lĩnh vực nhiếp ảnh, điều dẫn đến việc khó tiếp cận thơng tin người dùng phổ thông, không “sành” nhiếp ảnh, lần đầu đến với nhiếp ảnh Vì vậy, việc xây dựng website bán máy ảnh với giao diện đẹp, đầy đủ chức thân thiện, dễ sử dụng người dùng điều cần thiết Để giải vấn đề đó, đồng thời hồn thành học phần Thiết kế web, hiểu sâu sử dụng thành thạo ngôn ngữ HTML, CSS, JAVACRIPT Nay em làm tiểu luận báo cáo cuối kỳ đề tài “Thiết kế Website bán máy ảnh cho cửa hàng Kingcame” với đầy đủ chức trang web, có tính ứng dụng, thân thiện dễ tiếp cận người dùng 0 CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN 1.1 Phát biểu toán CHƯƠNG Website cung cấp chức website bán hàng, người dùng đăng ký tạo tài khoản thực việc quản lý tài khoản cá nhân đăng nhập, đổi mật khẩu, Sau khách hàng mua hàng trực tuyến cách thuận tiện Hoặc xem thông tin máy ảnh giá, thông số kỹ thuật, đánh giá, liên hệ với cửa hàng mà không cần đăng nhập 2.1 Phân tích chức CHƯƠNG dùng, bao gồm: Website cung cấp chức dễ dàng tiếp cận người 3.1.1 Giới thiệu trang Web bán máy ảnh Kingcame CHƯƠNG Giới thiệu cho khách hàng biết cửa hàng, tiêu chí cửa hàng, thái độ phục vụ tầm nhìn cửa hàng nhằm tăng uy tín, quảng bá thương hiệu giúp khách hàng tin tưởng mua hàng 4.1.1 Danh mục sản phẩm CHƯƠNG Phân loại sản phẩm theo thiết bị theo hãng sản xuất nhằm giúp người dùng tìm kiếm mua hàng cách thuận tiện dễ dàng 5.1.1 Liên hệ CHƯƠNG Đây phần giúp người dùng biết thông tin cửa hàng địa chỉ, số điện thoại, email Nhằm phục vụ cho việc liên hệ khách hàng, tư vấn khách hàng trực tuyến, Đặc biệt giúp khách hàng tìm đến cửa hàng để trải nghiệm, xem xét, nghe tư vấn định mua sản phẩm chỗ 6.1.1 Đăng ký, đăng nhập CHƯƠNG Đây chức thiếu trang web bán hàng, khách hàng đăng ký tài khoản, thơng qua tài khoản quản lý giỏ hàng, lịch sử mua hàng thân 7.1.1 Xem thông tin sản phẩm CHƯƠNG Trang nhằm giúp cho khách hàng tìm hiểu thơng số kỹ thuật, đặc điểm bật máy ảnh, xem hình ảnh cách chi tiết để xem xét đưa định đặt mua hay không CHƯƠNG CHƯƠNG 10 0 CHƯƠNG 11 CHƯƠNG 12 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG 12.1 Giới thiệu HTML 12.1.1 HTML gì? CHƯƠNG 13 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 CHƯƠNG 14 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 CHƯƠNG 15 HTML ngôn ngữ xác định cấu trúc thông tin CHƯƠNG 16 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 CHƯƠNG 17 17.1.1 Công dụng HTML CHƯƠNG 18 Thiết kế nội dung hình thức trang web CHƯƠNG 19 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 CHƯƠNG 20 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… CHƯƠNG 21 Thêm vào đối tượng hình ảnh video, âm thanh… 21.1.1 Định dạng HTML CHƯƠNG 22 Là tập tin có phần mở rộng htm html CHƯƠNG 23 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 CHƯƠNG 24 Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad… sử dụng nhiều adobe dreamweaver 24.1.1 Một số ưu điểm bật HTML CHƯƠNG 25 Nguồn tài nguyên hỗ trợ lớn Ngày cộng đồng HTML phát triển ngày lớn giới 0 CHƯƠNG 26 HTML chạy tương đối mượt mà hầu hết trình duyệt phổ biến như: Cốc Cốc, Chrome, FireFox, IE, CHƯƠNG 27 Mã nguồn mà HTML sử dụng mã nguồn mở sử dụng cách miễn phí CHƯƠNG 28 Q trình học HTML tương đối đơn giản, dễ hiểu nên người học dễ dàng nắm bắt kiến thức nhanh chóng Q trình xây dụng cho website thực qua vài tuần học CHƯƠNG 29 HTML quy định theo tiêu chuẩn định nên việc markup trở nên đồng nhất, gọn gàng nhiều CHƯƠNG 30 Quá trình thực dễ dàng tích hợp với nhiều loại ngôn ngữ backend như: PHP, NodeJs, Ruby, Java, để tạo thành website hồn chỉnh với đầy đủ tính 30.1.1 Nhược điểm HTML CHƯƠNG 31 HTML khơng có khả tạo riêng biệt mẻ cho người dùng thường thực thi thứ logic có cấu trúc định CHƯƠNG 32 Hiện nay, số trình duyệt cịn chậm việc hỗ trợ cho tính HTML đặc biệt với HTML5 32.1 Giới thiệu adobe Dreamweaver CHƯƠNG 33 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 CHƯƠNG 34 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 website bạn kéo chúng trực tiếp từ panel dễ sử dụng vào văn Bạn nâng cao sản phẩm bạn cách tạo sửa ảnh Macromedia Fireworks ứng dụng ảnh khác, sau chèn trực tiếp vào Dreamweaver Dreamweaver cung cấp công cụ giúp đơn giản hóa việc chèn Flash vào trang web CHƯƠNG 35 Dreamweaver cho phép bạn Thiết kế ứng dụng web động dựa theo liệu sử dụng công nghệ máy chủ CFML, ASP.NET, ASP, JSP, PHP Nếu sở thích bạn làm việc với liệu XML, Dreamweaver cung cấp 0 Chương 3: Thiết Kế chương trình Hình 105.1.1.13: Code CSS Trang chủ 15 Hình 105.1.1.14: Code CSS Trang chủ 16 28 0 Chương 3: Thiết Kế chương trình Hình 105.1.1.15: Code CSS Trang chủ 17 Hình 105.1.1.16: Code CSS Trang chủ 18 105.2 Code Trang giới thiệu 105.2.1 Source code HTML 29 0 Chương 3: Thiết Kế chương trình Hình 105.2.1.1: Code HTML trang Giới thiệu 105.2.2 Định dạng CSS Hình 105.2.2.1: Code CSS trang Giới thiệu 105.3 Code trang Liên hệ 105.3.1 Source Code HTML Hình 105.3.1.1: Code HTML trang Liên hệ 30 0 Chương 3: Thiết Kế chương trình 105.3.2 Định dạng CSS Hình 105.3.2.1: code CSS trang Liên hệ Hình 105.3.2.2: Code CSS trang liên hệ 31 0 Chương 3: Thiết Kế chương trình 105.4 Code trang hiển thị sản phẩm 105.4.1 Source Code HTML Hình 105.4.1.1: Code HTML trang hiển thị sản phẩm 105.4.2 Định dạng CSS Hình 105.4.2.1: Code CSS trang hiển thị sản phẩm 32 0 Chương 3: Thiết Kế chương trình Hình 105.4.2.2: Code CSS trang hiển thị sản phẩm 0 Chương 3: Thiết Kế chương trình Hình 105.4.2.3: Code CSS trang hiển thị sản phẩm Hình 105.4.2.4: Code CSS trang hiển thị sản phẩm 34 0 Chương 3: Thiết Kế chương trình Hình 105.4.2.5: Code CSS trang hiển thị sản phẩm 105.5 Code trang Chi tiết sản phẩm 105.5.1 Source Code HTML Hình 105.5.1.1: Code HTML trang chi tiết sản phẩm 105.5.2 Định dạng CSS 0 Chương 3: Thiết Kế chương trình Hình 105.5.2.1: Code CSS trang chi tiết sản phẩm Hình 105.5.2.2: code CSS trang chi tiết sản phẩm Hình 105.5.2.3: Code CSS trang chi tiết sản phẩm 36 0 Chương 3: Thiết Kế chương trình Hình 105.5.2.4: Code CSS trang chi tiết sản phẩm Hình 105.5.2.5: Code CSS trang chi tiết sản phẩm 37 0 Chương 3: Thiết Kế chương trình 105.6 Code trang Quản lý tài khoản 105.6.1 Source code HTML Hình 105.6.1.1: Code HTML trang quản lý tài khoản Hình 105.6.1.2: Code HTML trang quản lý tài khoản 38 0 Chương 3: Thiết Kế chương trình Hình 105.6.1.3: Code HTML trang quản lý tài khoản 105.7 Code trang phân mục sản phẩm theo hãng 105.7.1 Source code HTML Hình 105.7.1.1: Code HTML trang phân mục sản phẩm theo hăng 105.7.2 Định dạng CSS Hình 105.7.2.1: Code CSS trang phân loại sản phẩm theo hãng 39 0 Chương 3: Thiết Kế chương trình Hình 105.7.2.2: Code CSS trang phân loại sản phẩm theo hãng 40 0 Chương 3: Thiết Kế chương trình KẾẾT LUẬN Kết đạt -Thiết kế thành cơng website có giao diện thân thiện, dễ sử dụng -Xây dựng trang quản lý tài khoản, giới thiệu, liên hệ, sản phẩm, chi tiết sản phẩm -Nắm cách sử dụng Adobe Dreameweaver CS6 ngôn ngữ lập trình như: HTML, CSS, Javacript Hạn chế -Chưa xây dựng sở liệu bên nên trang đăng ký, đăng nhập, mua hàng, thêm vào giỏ, giỏ hàng chưa thể sử dụng -Dữ liệu cịn đơn giản -Chưa tối ưu hoá đoạn code -Chưa tối ưu hố hồn tồn giao diện để thành website reponsive 3.Hướng phát triển -Học tập, tìm hiểu thêm ngơn ngữ lập trình khác để tạo trang web hoàn chỉnh -Thêm vào website nội dung hấp dẫn -Tối ưu hoá đoạn code -Xây dựng sở liệu hồn chỉnh -Tối ưu hố giao diện tất dòng điện thoại máy tính 41 0 Chương 3: Thiết Kế chương trình TÀI LIỆU THAM KHẢO Tiếng Việt Nguyễn Hữu Vĩnh, Võ Quốc Lương (2017), Tài liệu hướng dẫn thực hành THIẾT KẾ VÀ LẬP TRÌNH WEB Website Website Hiệp sĩ IT, http://hiepsiit.com/ (truy cập ngày 30/03/2021) Website w3school, https://www.w3schools.com/ (truy cập ngày 30/03/2021) Website Binhminhdigital, https://binhminhdigital.com/ (truy cập ngày 05/04/2021) Website Completes Javacript, https://completejavascript.com/thiet-ke-websiteresponsive-voi-css-menu (truy cập ngày 06/04/2021) 42 0 ...TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THIẾT KẾ WEB THIẾT KẾ WEBSITE BÁN MÁY ẢNH CHO CỬA HÀNG KINGCAME GV: ThS Võ Quốc Lương SVTH:... thời hồn thành học phần Thiết kế web, hiểu sâu sử dụng thành thạo ngôn ngữ HTML, CSS, JAVACRIPT Nay em làm tiểu luận báo cáo cuối kỳ đề tài ? ?Thiết kế Website bán máy ảnh cho cửa hàng Kingcame”... thiệu trang Web bán máy ảnh Kingcame CHƯƠNG Giới thiệu cho khách hàng biết cửa hàng, tiêu chí cửa hàng, thái độ phục vụ tầm nhìn cửa hàng nhằm tăng uy tín, quảng bá thương hiệu giúp khách hàng tin