Tiểu luận môn học thiết kế web thiết kế website cửa hàng quần áo wow clothing

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 CỬA HÀNG QUẦN ÁO WOW CLOTHING GVHD: Th.S NGUYỄN HỮU VĨNH SVTH: TRƯƠNG TIẾN THỊNH MSSV: 1824801030212 LỚP: D18PM04 B9NH DƯƠNG – 4/2019 0 MỤC LỤC MỤC LỤC DANH MỤC HÌNH MỞ ĐẦU TỔNG QUAN VỀ ĐỀ TÀI Tên đề tài Mục tiêu đề tài Ý nghĩa đề tài 4 Đối tượng đề tài Một số trang website GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML .5 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML .5 Giới thiệu Adobe Dreamweaver Ngôn ngữ CSS Ngôn ngữ Javascript GIAO DIỆN CHƯƠNG TRÌNH Đặc tả giao diện 1.1 1.2 1.3 1.4 1.5 Giao diện trang chủ Giao diện đăng nhập .9 Giao diện trang đăng ký .10 Giao diện menu dropdown 11 Giao diện trang liên hệ 12 Chức năng: Cho phép người dùng gửi feedback phản hồi 12 Giao diện danh mục sản phẩm 13 Giao diện chi tiết sản phẩm 16 KẾT LUẬN 20 Kết đạt được: 20 Việc chưa làm được: 20 Hướng phát triển đề tài .21 0 TÀI LIỆU THAM KHẢO 22 DANH MỤC H9NH Hình 1: Giao diện trang chủ .8 Hình 2: Giao diện đăng nhập Hình 3: Trang đăng ký 10 Hình 4: Menu DropDown 11 Hình Giao diện trang liên hệ 12 Hình 6: Trang Hoodie .13 Hình 7: Trang T-Shirt .14 Hình 8: Trang Jacket 15 Hình 9: Trang chi tiết sản phẩm T-Shirt Grey Blue 16 Hình 10: Trang chi tiết sản phẩm T-Shirt Summer White 17 Hình 11: Trang chi tiết sản phẩm T-Shirt Summer Black 18 Hình 12: Trang chi tiết sản phẩm T-Shirt Surf White .19 0 MỞ ĐẦU WOW CLOTHING thường hiệu thời trang Việt Nam dành cho giới trẻ Streetwear giới trẻ Việt phát triển không ngừng ngày khó tính hơn, kiểu cách Giao hang tận tay nhanh chóng Những sản phẩm thiết kế thời thượng bắt trend giới cực nhanh Những sản phẩm có ý nghĩa giá trị bạn thấy Việc ăn mặc xu hướng thời trang bạn trẻ quan tâm nhiều, đến với WOW CLOTHING bạn cung cấp tất tốt thời trang khơng thua thương hiệu tiếng khác Đề 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 0 TỔNG QUAN VỀ ĐỀ TÀI Tên đề tài  Thiết kế website cửa hang quần áo WOW CLOTHING Mục tiêu đề tài  Thiết kế website bán quần áo thương hiệu WOW CLOTHING Ý nghĩa đề tài  Giúp khách hàng dễ dàng lựa chọn sản phẩm, mua sản phẩm trực tuyến giao tận nhà Đối tượng đề tài  Đối tượng chủ yếu la hướng đến xu hướng thời trang dành cho bạn trẻ Một số trang website  Trang chủ: Đây trang giới thiệu sơ lược sản phẩm mới, hot giảm giá  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 dung đăng nhập vào website đề thuận tiện việc mua bán  Trang sản phẩm: Đây trang khách hàng xem tham khảo mặt hàng cửa hàng xếp theo loại  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  Trang Liên hệ: Đây trang giúp khách hang gửi phản hồi chất lượng để giáp đáp thắc mắc 0 0 0 Chương Giới thiệu cơng nghệ 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 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 0 Chương Giới thiệu công nghệ 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 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 0 Chương Giới thiệu công nghệ 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 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 tốn học Nhưng JavaScript khơng ngơn ngữ hướng đối tượng C++/Java 0 GIAO DIỆN CHƯƠNG TR9NH Đặc tả giao diện 1.1 Giao diện trang chủ  Cho phép người dùng xem danh sách sản phẩm HOT, Sản Phẩm Giảm Giá Sản Phẩm Mới Nhất  Có menu theo danh mục sản phẩm tìm kiếm Hình 1: Giao diện trang chủ  Trang web chia làm phần: 10 0  Phần 1: Logo WOW CLOTHING ô tìm kiếm sản phẩm  Phần 2: Các sản phẩm xếp theo thứ tự  Phần 3: Các sản phẩm giảm giá  Phần 4: Cản phẩm HOT liên kết với trang chi tiết sản phẩm  Phần 5: Footer trang web 1.2 Giao diện đăng nhập  Mục đích: Người dùng đăng nhập vào trang web  Chức năng: Người dùng đăng nhập vào trang web để mua sắm tiện lợi Hình 2: Giao diện đăng nhập 11 0 1.3 Giao diện trang đăng ký  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 người dùng đăng ký thơng tin để trở thành khách hàng Hình 3: Trang đăng ký 12 0 1.4 Giao diện menu dropdown  Mục đích: Thanh menu xếp theo danh mục chứa loại sản phẩm cửa hàng Khách hàng sử dụng menu để lựa chọn loại sản phẩm mà cần tìm  Chức năng: Cho phép người dùng lựa chọn sản phẩm theo loại Hình 4: Menu DropDown 13 0 1.5 Giao diện trang liên hệ Mục đích: Giúp người dung thuận tiện việc hỏi đáp thắc mắc phản hồi Chức năng: Cho phép người dùng gửi feedback phản hồi Hình Giao diện trang liên hệ 14 0 Giao diện danh mục sản phẩm Hình 6: Trang Hoodie 15 0 Hình 7: Trang T-Shirt 16 0 Hình 8: Trang Jacket 17 0 Giao diện chi tiết sản phẩm  Mục đích: Người dùng xem Tên sản phẩm, thông tin chi tiết sản phẩm giá  Chức năng: Cho phép người dùng xem chi tiết sản phẩm Hình 9: Trang chi tiết sản phẩm T-Shirt Grey Blue 18 0 Hình 10: Trang chi tiết sản phẩm T-Shirt Summer White 19 0 Hình 11: Trang chi tiết sản phẩm T-Shirt Summer Black 20 0 Hình 12: Trang chi tiết sản phẩm T-Shirt Surf White 21 0 KẾT LUẬ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 bán quần áo WOW CLOTHING” 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 Qua trình nghiên cứu cố gắng thực hướng dẫn tận tình thầy Nguyễn Hữu Vĩnh, 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 cho cửa hàng WOW CLOTHING, đá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 Website cịn sơ sài cần phát triển Nhiều chức thiếu chưa sử dụng 22 0 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 cịn hạn chế nên 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 đỡ 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: 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 23 0 TÀI LIỆU THAM KHẢO Tài liệu giảng môn “Thiết kế website” thầy Nguyễn Hữu Vĩnh Website: http://www.hiepsiit.com Website: https:// https://slyclothing.vn/ 24 0 ... VỀ ĐỀ TÀI Tên đề tài  Thiết kế website cửa hang quần áo WOW CLOTHING Mục tiêu đề tài  Thiết kế website bán quần áo thương hiệu WOW CLOTHING Ý nghĩa đề tài  Giúp khách hàng dễ dàng lựa chọn... 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 bán quần áo WOW CLOTHING? ?? 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... 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 cho cửa hàng WOW CLOTHING, đá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ư: