Tiểu luận môn học thiết kế web đề tài thiết kế website shop sen đá

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 Đề tài: THIẾT KẾ WEBSITE SHOP SEN ĐÁ GV: THS_Nguyễn Hữu Vĩnh SVTH: Nguyễn Đức Thìn MSSV:1824801030211 LỚP: D18PM04 Tháng năm 202 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 Shop Sen Đá 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 MỤC LỤC 0 Danh Mục Hình: Lời Mở Đầu .5 SƠ ĐỒ THIẾT KẾ TRANG WEB CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài Mục Tiêu Đề Tài .7 Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một Số Trang Chính Của Website .7 CHƯƠNG GIỚI THIỆU CÔNG NGHỆ .8 Giới Thiệu Về HTML 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML .8 Là tập tin có phần mở rộng htm html Giới thiệu Adobe Dreamweaver Ngôn ngữ CSS Ngôn ngữ Javascript 10 CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH .11 ĐẶT TẢ GIAO DIỆN 11 2.NỘI DUNG TRANG WEB 12 1.1 CHỨC NĂNG CHÍNH CỦA WEBSITE: 12 1.2 CẤU TRÚC TRANG WEB : .12 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 28 Kết đạt được: 28 Việc chưa làm được: 28 Hướng phát triển đề tài 29 TÀI LIỆU KHAM KHẢO 30 0 Danh Mục Hình Hinh Giao diện trang chủ 13 Hinh Giao diện trang giới thiệu 15 Hinh Giao diện trang Liên hệ 16 Hinh Giao diện click vào facebook 17 Hinh Giao diện click vào instagram 18 Hinh Giao diện click vào twiter 19 Hinh Giao diện header 20 Hinh Giao diện Menu 20 Hinh Giao diện cho trái bao gồm Danh mục,Sen bán nhiều Lịch .21 Hinh 10 Hiệu ứng marque(Chạy danh sách sen bán nhiều) .22 Hinh 11 Tạo bảng lịch Javacript 23 Hinh 12 Giao diện sản phẩm cửa hàng 24 Hinh 13 Tạo giao diện Footer 25 0 Hinh 14 Giao diện Danh mục 25 Hinh 15 Tạo giao diện đăng nhập 26 Hinh 16 Giao diện Đăng ký .27 Lời Mở Đầu Bạn thích sen đá?Bạn muốn muốn mua sen đá đẹp khơng có nhiều thời gian để lựa chọn 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 mua bán sen đá mạng giúp ta làm điều 0 Bạn muốn tìm sản phẩm đáng tin cậy, bạn muốn có chậu hoa sen xinh đẹp, bạn muốn làm (đi học) ngắm chậu sen xinh đẹp Chính nhu cầu bạn Shopsen thành lập website nhằm mang lại tiện lợi bạn muốn trồng sen đá nhà Website shop có nhiều tính bạn khám phá học nhiều mẹo chăm sóc sen đá hay ,shop update ngày, ngày bạn thu thập nhiều thơng tin hữu ích 0 SƠ ĐỒ THIẾT KẾ TRANG WEB 0 CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE Shop Sen Đá Mục Tiêu Đề Tài + Thiết kế Website Shop Sen Đá Ý Nghĩa Của Đề Tài + Tối ưu tiết kiệm thời gian khách hà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 giống sen đá đẹp chất lượng Một Số Trang Chính Của Website + Trang chủ: Đâ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 đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng thân thiết Shop + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm nhận nhiều khuyến shop Sơ đồ 0 CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1HTML 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.2Cô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 0 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 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 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 0 Đồ án Môn học: Thiết kế Web Hinh Giao diện click vào facebook Landing Page Content 17 Trang  0 Đồ án Môn học: Thiết kế Web Landing Page Content 18 Trang  0 Đồ án Môn học: Thiết kế Web Hinh Giao diện click vào instagram Hinh Giao diện click vào twiter Landing Page Content 19 Trang  0 Đồ án Môn học: Thiết kế Web Hinh Giao diện header Landing Page Content 20 Trang  0 Đồ án Môn học: Thiết kế Web Hinh Giao diện Menu Landing Page Content 21 Trang  0 Đồ án Môn học: Thiết kế Web Hinh Giao diện cho trái bao gồm Danh mục,Sen bán nhiều Lịch Hinh 10 Hiệu ứng marque(Chạy danh sách sen bán nhiều) Landing Page Content 22 Trang  0 Đồ án Môn học: Thiết kế Web Hinh 11 Tạo bảng lịch Javacript Landing Page Content 23 Trang  0 Đồ án Môn học: Thiết kế Web Hinh 12 Giao diện sản phẩm cửa hàng Landing Page Content 24 Trang  0 Đồ án Môn học: Thiết kế Web Hinh 13 Tạo giao diện Footer Landing Page Content 25 Trang  0 Đồ án Môn học: Thiết kế Web Hinh 14 Giao diện Danh mục  Mục đích: Giúp khách hàng dễ dàng lựa chọn nhiều loại sản phẩm theo nhu cầu sở thích Landing Page Content 26 Trang  0 Đồ án Môn học: Thiết kế Web Hinh 15 Tạo giao diện đăng nhập  Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm trang Hinh 16 Giao diện Đăng ký Landing Page Content 27 Trang  0 Đồ án Mơn học: Thiết kế Web  Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng trang Chức năng: Cho phép khách hàng đăng ký thông tin để trở thành khách hàng CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Landing Page Content 28 Trang  0 Đồ án Môn học: Thiết kế Web Trong thời buổi cơng nghiệp hóa nay, người có thời gian dành cho thân công việc nhỏ mua sắm hay tìm khơng gian để giải tỏa stress Bạn muốn tìm lồi nhỏ trồng phịng, hay tìm sản phẩm cho chất lượng tốt bạn lại khơng có q nhiều thời gian Do Nhu cầu nên Shop Sen Đá mắt giải vấn đề cách dễ dàng cần cú click khách hàng việc giải Khách hàng giao tận nơi mà không nhiều thời gian, khách hàng tìm hiểu nhiều mẹo thơng tin web shop cung cấp, đồng thời khách hàng liên hệ đặt lịch hẹn hay tư vấn từ phía nhân viên shop Vừa tiện ích cho khách hàng mà đồng thời shop lại yêu quý Website Shop Sen Đá thứ dùng để quảng bá cho shop, thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng có nhu cầu chăm sóc thú cư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 trang web hoàn chỉnh, tương đối đầy đủ mặt nội dung Cấu trúc trang web bố trí hợp lý, phù hợp, khách hàng đến dễ dàng truy cập, tìm kiếm sản phẩm tương tác với nhóm Để hồn thành website, nhóm đử sử dụng tương đối nhiều dòng lệnh bao gồm CSS Javascript kiến thức lập trình web yếu Việc chưa làm được: - Do kiến thức lập trình web cịn hạn chế nên sản phẩm nhóm cịn nhiều thiếu sót Vì thời gian có hạn chế nênquy mơ website chưa thực ấn tượng, thêm vào đó, tài liệu tham khảo khảo Internet đa phần ngoại ngữ nên gây khơng khó khăn cho nhóm q trình phát triển sản phẩm Landing Page Content 29 Trang  0 Đồ án Môn học: Thiết kế Web - 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  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  Website ngày hoàn thiện thời gian tới hình thức lẫn nội dung Landing Page Content 30 Trang  0 Đồ án Môn học: 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 - Một số tài liệu khác Landing Page Content 31 Trang  0 ... tin hữu ích 0 SƠ ĐỒ THIẾT KẾ TRANG WEB 0 CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE Shop Sen Đá Mục Tiêu Đề Tài + Thiết kế Website Shop Sen Đá Ý Nghĩa Của Đề Tài + Tối ưu tiết kiệm... shopsen,dangnhap Dangky o File shopsen.html , file dangnhap.html Dangky Landing Page Content 11 Trang  0 Đồ án Môn học: Thiết kế Web 2.NỘI DUNG TRANG WEB 1.1 CHỨC NĂNG CHÍNH CỦA WEBSITE: - Website. .. .5 SƠ ĐỒ THIẾT KẾ TRANG WEB CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài Mục Tiêu Đề Tài .7 Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một