Tiểu luận môn học thiết kế web xây dựng website shop mỹ phẩm sink care

Đồ á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 XÂY DỰNG WEBSITE SHOP MỸ PHẨM SINK CARE GVHD: THS NGUYỄN HỮU VĨNH SVTH:NGUYỄN THỊ HẠNH DUNG MSSV: 1824801040020 LỚP: D18HT01 B6NH DƯƠNG 07-2020 pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Đồ á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 xây dựng 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ề: “Xây dựng website shop mỹ phẩm SINK CARE” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Xây dựng ứ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 pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Đồ án môn thiết kế web MỤC LỤC LỜI NÓI ĐẦU i DANH MỤC HÌNH xii 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 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 .5 1.1 Giao diện trang chủ 1.2 Giao diện trang giới thiệu 1.3 Giao diện trang liên hệ .8 1.4 Giao diện trang đăng ký 1.5 Giao diện trang đăng nhập .9 1.6 Giao diện trang danh mục sản phẩm 10 1.6.1 Giao diện danh mục son 11 1.6.2 Giao diện danh mục mặt nạ 11 1.6.3 Giao diện danh mục nước tẩy trang .12 1.6.4 Giao diện danh mục toner 12 1.6.5 Giao diện danh mục kem chống nắng 12 1.6.6 Giao diện danh mục kem dưỡng ẩm 13 1.6.7 Giao diện danh mục sữa rửa mặt 13 pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Đồ án môn thiết kế web 1.7 Giao diện danh mục thương hiệu 14 1.7.1 Giao diện hãng mỹ phẩm 3CE .14 1.7.2 Giao diện hãng mỹ phẩm MAC .15 1.7.3 Giao diện thương hiệu Black Rouge 15 1.7.4 Giao diện thương hiệu Innisfree 16 1.7.5 Giao diện Miung Lab .16 1.7.6 Giao diện Simple 17 1.7.7 Giao diện La Roche-Posay .17 1.7.8 Giao diện Senka .18 1.7.9 Giao diện Hada Labo .18 1.8 Giao diện trang chi tiết sản phẩm 19 1.8.1 Chi tiết son 3CE 20 1.8.2 Chi tiết son Black Rouge .20 1.8.3 Chi tiết kem chống nắng Cell Pusion 20 1.8.4 Chi tiết Black Rouge 21 1.8.5 Chi tiết kem chống nắng La Roche-Posay 21 1.8.6 Chi tiết kem chống nắng Anessa 23 1.8.7 Chi tiết kem dưỡng ẩm Cetaphil 23 1.8.8 Chi tiết kem dưỡng ẩm Laneige 23 1.8.9 Chi tiết kem dưỡng ẩm Innisfree 24 1.8.10 Chi tiết sữa rửa mặt tạo bọt Senka 24 1.8.11 Chi tiết sữa rửa mặt dạng gel Simple 25 1.8.12 Chi tiết mặt nạ học sinh MiungLab 25 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 pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Đồ á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 pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + XÂY DỰNG WEBSITE SHOP MỸ PHẨM SINK CARE Mục Tiêu Đề Tài + Xây dựng Website bán mỹ phẩm Ý Nghĩa Của Đề Tài + Giúp người mua hàng có nơi mua mỹ phẩm hãng mà tiện lợi, nhanh gọn + Shop bán hàng thuận lợi hơn, đến với nhiều khách hàng Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu mặt hàng mỹ phẩm nhiều người tin dùng 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 pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 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 Xây dựng 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 pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận mơn thiết kế web 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 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 công cụ cho phép bạn dễ dàng tạo trang XSLT, chèn file XML hiển thị liệu XML trang web bạn Dreamweaver tùy biến hồn tồn Bạn tạo cho riêng đối tượng yêu cầu, chỉnh sửa shortcut bàn phím chí viết mã JavaScript để mở rộng khả Dreamweaver với hành vi mới, chuyên gia giám định Property báo cáo site Ngôn ngữ CSS CSS (Cascading Style Sheets) ngôn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… CSS cung cấp nhiều thuộc tính trình bày dành cho đối tượng với sáng tạo việc kết hợp thuộc tính giúp mang lại hiệu cao CSS hỗ trợ tất trình duyệt hiển thị “như nhau” hệ điều hành CSS đưa phương thức áp dụng từ file CSS ngồi Có hiệu đồng tạo website có hàng trăm trang hay muốn thay đổi thuộc tính trình bày CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi Ngôn ngữ Javascript Với HTML biểu diễn thông tin chưa phải trang Web động có khả đáp ứng kiện từ phía người dùng pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web Hãng Netscape đưa ngơn ngữ script có tên LiveScript để thực chức Sau đổi tên thành JavaScript để tận dụng tính đại chúng ngơn ngữ lập trình Java JavaScript ngơn ngữ dạng script gắn với file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dạng mã nguồn JavaScript ngôn ngữ dựa đối tượng, nghĩa bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất chức toán học Nhưng JavaScript không ngôn ngữ hướng đối tượng C++/Java pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR6NH Đặc Tả Giao Diện 1.1 Giao diện trang chủ  Mục đích: Chức cho phép người dùng xem danh sách Sản Phẩm bật  Trong giao diện cho người dùng, chọn kiểu hiển thị theo Loại Sản Phẩm  Mô tả chức năng: Trang cho phép người dùng xem thơng tin sản phẩm ngồi cịn sử menu dọc,ngang để sang trang khác, Hình 1.1 Giao diện trang chủ Trang web chia làm phần: - Phần 1: Logo trang web - Phần - Menu ngang: Bao gồm mục: trang chủ, giới thiệu, liên hệ, đăng ký, đăng nhập Mỗi danh mục liên kết đến trang với nội dung khác - Phần : Chạy chữ ngang Marquee - Phần 4: Bên trái danh mục sản phẩm, thương hiệu liên kết với trang khác lịch ngày tháng năm pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web Hình 1.5 Giao diện trang đăng nhập 1.6 Giao diện trang danh mục sản phẩm  Mục Đích: Thanh menu chứa danh sách loại sản phẩm cửa hàng Khách hàng sử dụng menu để lựa chọn sản phẩm mà cần tìm  Sử dụng danh mục sản phẩm để chọn loại sản phẩm mà cần Hình 1.6 Giao diện trang danh mục sản phẩm pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web 1.6.1 Giao diện danh mục son Hình 1.6.1 Giao diện danh mục son 1.6.2 Giao diện danh mục mặt nạ Hình 1.6.2 Giao diện danh mục mặt nạ pg SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web 1.6.3 Giao diện danh mục nước tẩy trang Hình 1.6.3 Giao diện danh mục nước tẩy trang 1.6.4 Giao diện danh mục toner Hình 1.6.4 Giao diện danh mục toner 1.6.5 Giao diện danh mục kem chống nắng pg 10 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận mơn thiết kế web Hình 1.6.5 Giao diện danh kem chống nắng 1.6.6 Giao diện danh mục kem dưỡng ẩm Hình 1.6.6 Giao diện danh mục kem dưỡng ẩm 1.6.7 Giao diện danh mục sữa rửa mặt pg 11 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận mơn thiết kế web Hình 1.6.7 Giao diện danh mục sữa rửa mặt 1.7 Giao diện danh mục thương hiệu Hình 1.7 Giao diện thương hiệu 1.7.1 Giao diện hãng mỹ phẩm 3CE Hình 1.7.1 Giao diện hãng mỹ phẩm 3CE 1.7.2 Giao diện hãng mỹ phẩm MAC pg 12 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận mơn thiết kế web Hình 1.7.2 Giao diện thương hiệu MAC 1.7.3 Giao diện thương hiệu Black Rouge Hình 1.7.3 Giao diện thương hiệu Black Rouge 1.7.4 Giao diện thương hiệu Innisfree pg 13 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web Hình 1.7.4 Giao diện thương hiệu Innisfree 1.7.5 Giao diện Miung Lab Hình 1.7.4 Giao diện thương hiệu Miung Lab 1.7.6 Giao diện Simple Hình 1.7.4 Giao diện thương hiệu Simple 1.7.7 Giao diện La Roche-Posay Hình 1.7.4 Giao diện thương hiệu La Roche-Posay 1.7.8 Giao diện Senka pg 14 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận mơn thiết kế web Hình 1.7.4 Giao diện thương hiệu Senka 1.7.9 Giao diện Hada Labo Hình 1.7.4 Giao diện thương hiệu Hada Labo 1.8 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ủ pg 15 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web 1.8.1 Chi tiết son 3CE Hình 1.8.1 Giao diện trang chi tiết son 3CE 1.8.2 Chi tiết son Black Rouge Hình 1.8.2 Giao diện trang chi tiết son Black Rouge 1.8.3 Chi tiết kem chống nắng Cell Pusion pg 16 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận mơn thiết kế web Hình 1.8.3 Giao diện trang chi tiết kem chống nắng Cell Pusion 1.8.4 Chi tiết Black Rouge Hình 1.8.4 Giao diện trang chi tiết Black Rouge 1.8.5 Chi tiết kem chống nắng La Roche-Posay pg 17 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận mơn thiết kế web Hình 1.8.5 Giao diện trang chi tiết kem chống nắng La Roche-Posay Chi tiết kem chống nắng Anessa Hình 1.8.6 Giao diện trang chi tiết kem chống nắng Anessa 1.8.6 Chi tiết kem dưỡng ẩm Cetaphil Hình 1.8.7 Giao diện trang chi tiết kem dưỡng ẩm Cetaphil 1.8.7 Chi tiết kem dưỡng ẩm Laneige Hình 1.8.8 Giao diện trang chi ttieetskem dưỡng ẩm Laneige 1.8.8 Chi tiết kem dưỡng ẩm Innisfree pg 18 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web Hình 1.8.9 Giao diện trang chi tiết kem dưỡng ẩm Innesfree 1.8.9 Chi tiết sữa rửa mặt tạo bọt Senka Hình 1.8.10 Giao diện trang chi tiết sữa rữa mặt tạo bọt Senka 1.8.10 Chi tiết sữa rửa mặt dạng gel Simple Hình 1.8.11 Giao diện trang chi tiết sữa rửa mặt dạng gel Simple 1.8.11 Chi tiết mặt nạ học sinh MiungLab Hình 1.8.12 Giao diện trang chi tiết mặt nạ học sinh Miung Lab pg 19 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 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 shop mỹ phẩm Sink Care”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ỹ phẩm Sink Care” 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 bán mỹ phẩm cho cửa hàng Sink Care, đá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 cịn 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 Xây dựng website: pg 20 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 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 pg 21 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 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 - Bài thực hành xây dựng website bán sách Nhà Sách ABC pg 22 SV: NGUYỄN THỊ HẠNH DUNG – LỚP: D18HT01 ... DUNG – LỚP: D18HT01 Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + XÂY DỰNG WEBSITE SHOP MỸ PHẨM SINK CARE Mục Tiêu Đề Tài + Xây dựng Website bán mỹ phẩm Ý Nghĩa Của Đề Tài... D18HT01 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... 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 shop mỹ phẩm Sink Care? ??với chức cần thiết cho