Tiểu luận môn học thiết kế web thiết kế website cửa hàng bán hoa online

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 BÁN HOA ONLINE GVHD: Th.S NGUYỄN HỮU VĨNH SVTH: LÊ MINH NHẬT MSSV: 1824801030263 LỚP: D18PM04 B7NH DƯƠNG – 7/2020 0 MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI Tên đề tài Mục tiêu đề tài Mục tiêu đề tài Đối tượng đề tài 5 Một số trang thức website CHƯƠNG 2: GIỚI THIỆU CÔNG NGHỆ .6 Giới thiệu HTML: .6 1.1 HTML gì? 1.2 Công dụng HTML: 1.3 Định dạng HTML: Giới thiệu Adobe Dreamweaver: Ngôn ngữ CSS: Ngôn ngữ Javascript: .8 CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR7NH .9 Đặc tả giao diện 1.1 Giao diện trang: Trang Chủ 1.2 Giao diện trang Giới Thiệu 11 1.3 Giao diện đăng kí 12 1.4 Giao diện đăng nhập .13 1.5 Giao diện phân loại .14 1.7 Giao diện chi tiết Hoa Hồng Mê Ly 15 1.8 Giao diện Hoa Cẩm Chướng 16 0 1.9 Giao diện Hoa Hồng Cam Vắt 17 1.10 Giao diện Lan Moring 18 1.11 Giao diện Giỏ Cam Hướng Dương .19 1.12 Giao diện Vịng Tím .20 1.13 Giao diện Hoa Hồng Đen .21 1.14 Giao diện Giỏ Hoa Cam .22 1.15 Giao diện Hoa Hướng Dương .23 Giao diện Hoa Mới 24 Giao diện Ưu đãi 25 Giao diện Hoa Bán Chạy 26 Giao diện Hoa chủ đề Lãng Mạng 27 Giao diện Hoa chủ đề Đám Cưới .28 Giao diện Hoa chủ đề Chúc Mừng 29 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .30 Kết đạt được: .30 Nhược điểm web: 30 Định hướng phát triển đề tài 30 0 MỤC LỤC H7NH HÌNH SƠ ĐỒ TỔNG QUÁT 10 HÌNH 1.1 GIAO DIỆN TRANG TRANG CHỦ 11 HÌNH 1.2 GIAO DIỆN TRANG GIỚI THIỆU 13 HÌNH 1.3 GIAO DIỆN ĐĂNG KÍ 14 HÌNH 1.4 GIAO DIỆN ĐĂNG NHẬP 15 HÌNH 1.5 GIAO DIỆN PHÂN LOẠI HOA 16 HÌNH 1.6 GIAO DIỆN LIÊN HỆ 16 HÌNH 1.7 GIAO DIỆN CHI TIẾT HOA HỒNG MÊ LY 17 HÌNH 1.8 GIAO DIỆN CHI TIẾT HOA CẨM CHƯỚNG .18 HÌNH 1.9 GIAO DIỆN HOA HỒNG CAM VẮT .19 HÌNH 1.10 GIAO DIỆN LAN MORING 20 HÌNH 1.11 GIAO DIỆN GIỎ CAM HƯỚNG DƯƠNG 21 HÌNH 1.12 GIAO DIỆN VỊNG TÍM .22 HÌNH 1.13 GIAO DIỆN VỊNG TÍM .23 HÌNH 1.14 GIAO DIỆN HOA 24 HÌNH 1.15 GIAO DIỆN HOA DƯỚNG DƯƠNG 25 HÌNH 1.16 GIAO DIỆN HOA MỚI 26 HÌNH 1.17 GIAO DIỆN ƯU ĐÃI .27 HÌNH 1.18 GIAO DIỆN HOA BÁN CHẠY .28 HÌNH 1.19 GIAO DIỆN CHỦ ĐỀ LÃNG MẠNG 29 HÌNH 1.20 GIAO DIỆN CHỦ ĐỀ ĐÁM CƯỚI .30 HÌNH 1.21 GIAO DIỆN CHỦ ĐỀ SỨC KHỎE 31 0 CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI Tên đề tài THIẾT KẾ WEBSITE BÁN HOA ONLINE Mục tiêu đề tài - Cung cấp dịch vụ mua hoa lúc, nơi Mục tiêu đề tài - Tạo tiện lợi cho việc mua hoa - Đẩy mạnh hoạt động mua bán hoa lúc, nơi Đối tượng đề tài - Đối tượng nghiên cứu chủ yếu shop bán hoa, cửa hang hoa Một số trang thức website - - Trang chủ: trang giới thiệu sơ lược cho khách hang nhìn tổng quan nơi cung cấp dịch vụ mua hoa Trang giới thiệu: trang cung cấp thông tin chủ sở hữu và thông tin thiết yếu lời nói đầu người đứng nói với khách hang Trang liên hệ: trang mà khách hàng liên lạc với shop Trang đăng ký: trang mà khách hàng đăng kí làm thành viên website Trang đăng nhập: trang mà khách hàng đăng nhập vào hệ thống thành viên website Trang chi tiết hoa: trang cung cấp thông tin mặt hàng hoa 0 CHƯƠNG 2: 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 để 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 0 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 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 SƠ ĐỒ TỔNG QUÁT Hình sơ đồ tổng quát 0 CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR7NH Đặc tả giao diện 1.1 Giao diện trang: Trang Chủ Mục đích: cung cấp nhìn tổng qt cho khách hàng sản phẩm Mô tả chức năng: cung cấp phương thức hoạt động websize Hình 1.1 giao diện trang trang chủ 0 1.8 Giao diện Hoa Cẩm Chướng Mục đích: đưa thơng tin chi tiết mặt hàng hoa mà khách hàng muốn mua Hình 1.8 Giao diện chi tiết Hoa Cẩm Chướng 0 1.9 Giao diện Hoa Hồng Cam Vắt Mục đích: đưa thông tin chi tiết mặt hàng hoa mà khách hàng muốn mua Hình 1.9 Giao diện Hoa Hồng Cam Vắt 0 1.10 Giao diện Lan Moring Mục Đích: đưa thơng tin chi tiết mặt hàng hoa mà khách hàng muốn mua Hình 1.10 Giao diện Lan Moring 0 1.11 Giao diện Giỏ Cam Hướng Dương Mục đích: Đưa thơng tin chi tiết mặt hàng hoa mà khách hàng muốn mua Hình 1.11 Giao diện Giỏ Cam Hướng Dương 0 1.12 Giao diện Vịng Tím Mục đích: Đưa thơng tin chi tiết mặt hàng hoa mà khách muốn mua Hình 1.12 Giao diện Vịng Tím 0 1.13 Giao diện Hoa Hồng Đen Mục đích: Đưa thơng tin chi tiết mặt hàng hoa mà khách muốn Hình 1.13 Giao diện Vịng Tím 0 1.14 Giao diện Giỏ Hoa Cam Mục đích: Cung cấp thơng tin mặt hàng hoa mà khách muốn mua Hình 1.14 Giao diện hoa 0 1.15 Giao diện Hoa Hướng Dương Mục đích: cung cấp thông tin mặt hàng hoa mà khách hàng muốn mua Hình 1.15 giao diện Hoa Dướng Dương 0 Giao diện Hoa Mới Mục đích: cung cấp, cập nhật mặt hàng hoa cho khách hàng thêm lựa chọn Hình 1.16 Giao diện hoa 0 Giao diện Ưu đãi Mục đích: cung cấp gói ưu đãi cho khách hàng Hình 1.17 Giao diện Ưu Đãi 0 Giao diện Hoa Bán Chạy Mục đích: Cung cấp cho khách hàng thơng tin mặt hang bán chạy tháng Hình 1.18 Giao diện Hoa Bán Chạy 0 Giao diện Hoa chủ đề Lãng Mạng Mục đích: Giúp khách hàng tìm hoa theo chủ đề cách nhanh Hình 1.19 Giao diện chủ đề Lãng Mạng 0 Giao diện Hoa chủ đề Đám Cưới Mục đích: Giúp Khách hàng tìm hoa theo chủ đề cách nhanh Hình 1.20 Giao diện chủ đề Đám Cưới 0 Giao diện Hoa chủ đề Chúc Mừng Mục đích: Giúp khách hàng tìm hoa theo chủ đề cách nhanh Hình 1.21 Giao diện chủ đề Sức Khỏe 0 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Hoa tươi thiếu dịp lễ, Tết, sinh nhật hay tiệc tùng… Với bùng nổ công nghệ thông tin tạo hội cho mặt hàng hoa tươi thâm nhập sâu vào thị trường bán hàng trực tuyến Với giải pháp thiết kế website bán hoa giúp bạn có shop bán hàng online sau vài phút Khi có website bán hoa tươi, việc bạn cần làm chuẩn bị hình ảnh mặt hàng hoa tươi đăng tải chúng lên website bán hàng với thơng tin cụ thể mặt hàng, giá để khách hàng truy cập vào họ dễ dàng đặt hàng online website mà không cần tới trực tiếp cửa hàng Trên website bán hoa, bên cạnh hình ảnh sản phẩm có nút với chức đặt mua hàng cho khách hàng, khách hàng đặt hàng thông tin sản phẩm, giá cả, phương thức toán chuyển đến người bán quản trị website khách hàng Sau đó, hoa tươi giao đến tận tay khách hàng cách thuận lợi nhanh chóng Kết đạt được: - Thiết kế trang web hỗ trợ shop bán hoa cung cấp cho khách hàng công cụ mua hoa lúc, nơi - Tìm hiểu học hỏi nắm kiến thức để thiết kế web như: Adobe Dreamweaver CS6, ngơn ngữ lập trình web như: CSS, HTML, Javascrip… Nhược điểm web: - Cách bố trí, trình bày chưa đẹp, chưa họp lý - Một số chức chưa ổn định cịn lỗi - Trình bày sơ sài Định hướng phát triển đề tài - Thiết kết website trở nên hoàn thiện - Bố trí, trình bày website hợp lý 0 ... pháp thiết kế website bán hoa giúp bạn có shop bán hàng online sau vài phút Khi có website bán hoa tươi, việc bạn cần làm chuẩn bị hình ảnh mặt hàng hoa tươi đăng tải chúng lên website bán hàng. .. thể mặt hàng, giá để khách hàng truy cập vào họ dễ dàng đặt hàng online website mà không cần tới trực tiếp cửa hàng Trên website bán hoa, bên cạnh hình ảnh sản phẩm có nút với chức đặt mua hàng. .. thuận lợi nhanh chóng Kết đạt được: - Thiết kế trang web hỗ trợ shop bán hoa cung cấp cho khách hàng cơng cụ mua hoa lúc, nơi - Tìm hiểu học hỏi nắm kiến thức để thiết kế web như: Adobe Dreamweaver