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

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 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 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 TOÁN 1.1 Phát biểu toán 1.2 Phân tích chức 1.2.1 Giới thiệu trang Web bán máy ảnh Kingcame 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 .3 2.1 Giới thiệu HTML 2.1.1 HTML gì? .3 2.1.2 Công dụng HTML .3 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 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 3.1 Thiết kế sơ đồ .6 3.2 Giao diện trang chủ 3.3 Giao diện menu 3.4 Giao diện trang Giới thiệu .8 3.5 Giao diện trang Liên hệ 3.6 Giao diện trang sản phẩm .9 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 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 DANH MỤC HDNH Hình 3.1: Sơ đồ website Hình 3.2: Giao diện trang chủ .6 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 Hình 3.5: Giao diện trang giới thiệu 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 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 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è ln 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à cịn 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 hoà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 CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN 1.1 Phát biểu tố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 Website cung cấp chức dễ dàng tiếp cận người dùng, bao gồm: 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 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 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 Quá 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 ...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... 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... 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