Tiểu luận môn học thiết kế web thiết kế website shop quần áo trẻ em subo

UBND TỈNH BÌNH DƯƠNG 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 QUẦN ÁO TRẺ EM SUBO GVHD: THS NGUYỄN HỮU VĨNH SVTH: PHẠM NGỌC YẾN NHI MSSV: 1824801030195 LỚP: D18PM03 BÌNH DƯƠNG, 07/2020 0 MỤC LỤC DANH SÁCH HÌNH iv GIỚI THIỆU CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 1.Tên Đề Tài 2 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 Giới thiệu HTML .3 1.1.HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML Giới thiệu Adobe Dreamweaver 3 Ngôn ngữ CSS 4 Ngôn ngữ Javascript CHƯƠNG III: GIAO DIỆN WEBSITE Đặc tả giao diện 1.1 Giao diện trang chủ 1.2 Giao diện trang giới thiệu 1.3 Giao diện trang bé gái 1.4 Giao diện trang bé trai 1.5 Giao diện trang tư vấn mặc đẹp 1.6 Giao diện trang liên hệ 1.7 Giao diện trang giỏ hàng 10 ii 0 1.8 Giao diện trang đăng ký 10 1.9 Giao diện trang đăng nhập 11 1.11 Giao diện danh mục áo bé gái 12 1.12 Giao diện danh mục quần bé gái 13 1.13 Giao diện danh mục váy đầm bé gái 14 1.14 Giao diện danh mục áo khoác bé gái 15 1.15 Giao diện danh mục đồ bé gái 15 1.16 Giao diện danh mục áo bé trai 16 1.17 Giao diện danh mục quần bé trai .17 1.18 Giao diện danh mục áo khoác bé trai 18 1.19 Giao diện danh mục đồ bé trai 18 1.20 Giao diện góc tư vấn 19 1.21 Giao diện lịch ngày tháng năm 19 1.22 Giao diện trang chi tiết sản phẩm 19 1.22.1 Chi tiết áo bé gái 20 1.22.2 Chi tiết quần bé gái .20 1.22.3 Chi tiết váy – đầm bé gái 21 1.22.4 Chi tiết áo khoác bé gái 21 1.22.5 Chi tiết đồ bé gái 22 1.22.6 Chi tiết áo bé trai 22 1.22.7 Chi tiết quần bé trai 23 1.22.8 Chi tiết áo khoác bé trai 23 1.22.9 Chi tiết đồ bé trai 24 CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 25 Kết đạt được: 25 Việc chưa làm được: 25 iii 0 Hướng phát triển đề tài 25 TÀI LIỆU KHAM KHẢO 27 iv 0 DANH SÁCH HÌNH Hình 1: Giao diện trang chủ Hình 2: Giao diện trang giới thiệu Hình 3: Giao diện trang bé gái Hình 4: Giao diện trang bé trai Hình 5: Giao diện trang tư vấn mặc đẹp Hình 6: Giao diện trang liên hệ .9 Hình 7: Giao diện trang giỏ hàng 10 Hình 8: Giao diện trang đăng ký 10 Hình 9: Giao diện trang đăng nhập .11 Hình 10: Giao diện trang danh mục sản phẩm 12 Hình 11: Giao diện danh mục áo bé gái 12 Hình 12: Giao diện danh mục quần bé gái 13 Hình 13: Giao diện danh mục váy đầm bé gái 14 Hình 14: Giao diện danh mục áo khoác bé gái 15 Hình 15: Giao diện danh mục áo khoác bé gái 15 Hình 16: Giao diện danh mục áo bé trai .16 Hình 17: Giao diện danh mục quần bé trai 17 Hình 18: Giao diện danh mục áo khốc bé trai 18 Hình 19: Giao diện danh mục đồ bé trai 18 Hình 20: Giao diện góc tư vấn 19 Hình 21: Giao diện lịch ngày tháng năm 19 Hình 22.1: Giao diện trang chi tiết áo bé gái 20 Hình 22.2: Giao diện trang chi tiết quần bé gái 20 Hình 22.3: Giao diện trang chi tiết váy – đầm bé gái 21 Hình 22.4: Giao diện trang chi tiết áo khốc bé gái .21 iv 0 Hình 22.5: Giao diện trang chi tiết đồ bé gái 22 Hình 22.6: Giao diện trang chi tiết quần bé trai 22 Hình 22.7: Giao diện trang chi tiết quần bé trai 23 Hình 22.8: Giao diện trang chi tiết áo khoác bé trai 23 Hình 22.9: Giao diện trang chi tiết đồ bé trai 24 v 0 GIỚI THIỆU Hiện với việc phát triển mạnh công nghệ thơng tin dịch vụ chăm sóc người ngày nâng cao người ta ngày mong muốn có phục vụ tốt tất mặt đời sống xã hội, nhu cầu mua sắm đặc biệt mua sắm trực tuyến toán qua mạng ngày phổ biến rộng rãi để khách hàng ln có lựa chọn tốt nhà mà tốn nhiều thời gian Để việc mua bán hàng hóa nhà cách đặt hàng toán qua Internet khách hàng thực cách dễ dàng thuận lợi phục vụ nhu cầu ngày cao khách hàng Từ nhu cầu thực tế với kiến thức em tiếp thu trường, em chọn đề tài “Thiết kế website shop quần áo trẻ em Subo” nhằm phục vụ nhu cầu kinh doanh quần áo cho cửa hàng quần áo thành phố lớn Nội dung đề tài bao gồm chương: Chương I: Tổng quan đề tài Chương II: Giới thiệu công nghệ Chương III: Giao diện website Chương IV: Kết luận hướng phát triển Qua em xin gửi lời cảm ơn chân thành bày tỏ lòng biết ơn bảo tận tình thầy ThS Nguyễn Hữu Vĩnh, người trực tiếp hướng dẫn, bảo giúp đỡ em thời gian thực tiểu luận 0 CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 1.Tên Đề Tài Thiết kế website shop quần áo trẻ em Subo Mục Tiêu Đề Tài Đáp ứng nhu cầu mua bán, xem thông tin sản phẩm cách nhanh chóng, tiện lợi, an tồn Ý Nghĩa Của Đề Tài - Giúp người tiêu dùng có thơng tin xác nhanh chóng sản phẩm mà khách hàng tốn thời gian tới tận cửa hàng - Website công cụ giới thiệu công ty tới quần chúng cách nhanh tiện lợi - Quảng bá sản phẩm lúc nơi mà chi phí lại rẻ - Quản lý sản phẩm cách dễ dàng - Khách hàng mua hàng cách nhanh chóng tiện lợi Đối Tượng Của Đề Tài Chủ yếu sản phẩm quần áo bé trai bé gái 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 bậc cha mẹ xem để biết thêm thông tin Shop + Trang Tư vấn mặc đẹp: Đây trang giúp shop tư vấn cho bậc cha mẹ cách mặc đồ phù hợp cho bé + 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 0 CHƯƠNG II: GIỚI THIỆU CÔNG NGHỆ Giới thiệu 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 để hiển 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 0 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 cách 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 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 0 1.12 Giao diện danh mục quần bé gái Hình 12: Giao diện danh mục quần bé gái 13 0 1.13 Giao diện danh mục váy đầm bé gái Hình 13: Giao diện danh mục váy đầm bé gái 14 0 1.14 Giao diện danh mục áo khốc bé gái Hình 14: Giao diện danh mục áo khoác bé gái 1.15 Giao diện danh mục đồ bé gái Hình 15: Giao diện danh mục áo khoác bé gái 15 0 1.16 Giao diện danh mục áo bé trai Hình 16: Giao diện danh mục áo bé trai 16 0 1.17 Giao diện danh mục quần bé trai Hình 17: Giao diện danh mục quần bé trai 17 0 1.18 Giao diện danh mục áo khốc bé trai Hình 18: Giao diện danh mục áo khoác bé trai 1.19 Giao diện danh mục đồ bé trai Hình 19: Giao diện danh mục đồ bé trai 18 0 1.20 Giao diện góc tư vấn Hình 20: Giao diện góc tư vấn 1.21 Giao diện lịch ngày tháng năm Hình 21: Giao diện lịch ngày tháng năm 1.22 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 19 0 1.22.1 Chi tiết áo bé gái Hình 22.1: Giao diện trang chi tiết áo bé gái 1.22.2 Chi tiết quần bé gái Hình 22.2: Giao diện trang chi tiết quần bé gái 20 0 1.22.3 Chi tiết váy – đầm bé gái Hình 22.3: Giao diện trang chi tiết váy – đầm bé gái 1.22.4 Chi tiết áo khốc bé gái Hình 22.4: Giao diện trang chi tiết áo khoác bé gái 21 0 1.22.5 Chi tiết đồ bé gái Hình 22.5: Giao diện trang chi tiết đồ bé gái 1.22.6 Chi tiết áo bé trai Hình 22.6: Giao diện trang chi tiết quần bé trai 22 0 1.22.7 Chi tiết quần bé trai Hình 22.7: Giao diện trang chi tiết quần bé trai 1.22.8 Chi tiết áo khốc bé trai Hình 22.8: Giao diện trang chi tiết áo khoác bé trai 23 0 1.22.9 Chi tiết đồ bé trai Hình 22.9: Giao diện trang chi tiết đồ bé trai 24 0 CHƯƠNG IV: 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 bn 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 quần áo trẻ em Subo” với chức cần thiết cho trang web buôn bán cần có em thấy nhu cầu mua sắm người thị trường tiềm khai thác bn bán Website “shop quần áo trẻ em Subo” 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 quần áo trẻ em Subo, đá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 Thiết kế website: 25 0 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 26 0 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 https://www.w3schools.com/ 27 0 ... 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 quần áo trẻ em Subo? ?? với chức cần thiết cho trang web buôn bán cần có em thấy nhu cầu mua sắm người... nhu cầu thực tế với kiến thức em tiếp thu trường, em chọn đề tài ? ?Thiết kế website shop quần áo trẻ em Subo? ?? nhằm phục vụ nhu cầu kinh doanh quần áo cho cửa hàng quần áo thành phố lớn Nội dung đề... đỡ 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 quần áo trẻ em Subo, đá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ư: