ĐỀ TÀI: THIẾT KẾ WEBSITE WEBSITE BÁN TIVI

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 WEBSITE BÁN TIVI GVHD: THS NGUYỄN HỮU VĨNH SVTH: ĐOÀN HOÀI LÂM MSSV: 1824803010193 LỚP: D18PM03 NH Ư NG – 06/2020 KHOA KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ vàtên gi ảng viên: Nguyễn Hữu Vĩnh Tên đề tài: THIẾT KẾ WEBSITE BÁN TIVI 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 Đồ án mơn thi ết kế web LỜI NĨI ĐẦU Hiện nay, th ế 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ử cịn giúp người có th ể 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 vàs thích c người Giờ đây, người có th ể ngồi nhà để mua sắm thứ theo ý mu ốn vàcác website bán hàng m ạng giúp ta làm điều Các 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 Thiết kế website bán hàng thân thi ện vàd ễ sử dụng với người dùng Chính vìv ậy báo cáo ch ọn đề tài v ề: “Thiết kế website bán TIVI ” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Thiết kế ứ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 SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 i Đồ án môn thi ết kế web MỤC LỤC LỜI NÓI ĐẦU i DANH MỤC HÌNH iv 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 Website 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 .3 Ngôn ng ữ Javascript .3 CHƯ NG 3: GIAO IỆN CHƯ NG TR NH Đặ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 Đăt Hàng 1.4 Giao diện trang danh mục sản phẩm 1.4.1 Giao diện danh Sony 1.4.2 Giao diện danh SamSung 1.4.3 Giao diện danh Sharp 1.4.4 Giao diện danh mục TCL 1.4.5 Giao diện danh LG .10 1.4.6 Giao diện danh mục Asanzo 10 1.4.7 Giao diện danh mục Panasonic 11 1.4.8 Giao diện danh mục Casper 11 SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 ii Đồ án môn thi ết kế web Giao diện danh mục Toshiba 11 1.4.9 1.5 Giao diện danh mục Theo giá Ti ền 12 1.5.1 Giao diện giá Trên 40tr 12 1.5.2 Giao diện gía t 20-40tr 13 1.5.3 Giao diện 10-20tr 13 1.5.4 Giao diện 5-10tr 14 1.5.5 Giao diện 5tr 14 1.6.1 Chi tiết TCL .15 1.6.2 Chi tiết LG 27 16 1.6.3 Chi tiết Asanzo 17 1.6.4 Chi tiết LG70 18 1.6.5 Chi tiết Sharp 18 1.6.6 Chi tiết Sony .19 CHƯ NG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 20 Kết đạt được: .20 Việc chưa làm được: 20 Hướng phát tri ển đề tài 20 TÀI LIỆU KHAM KHẢO 22 SVTH: ĐOÀN HỒI LÂM – LỚP D18PM03 iii Đồ án mơn thi ết kế web DANH MỤC HÌNH Hình 1.1 Giao diện trang chủ Hình 1.2 Giao diện trang giới thiệu Hình 1.4 Giao diện trang danh mục Theo hãng Hình 1.4 Giao diện danh mục SONY Hình 1.4 Giao diện danh Sam Sung 10 Hìn h 1.4.3 Giao diện danh mục Shrap 11 Hình 1.4 Giao diện danh mục TCL 12 Hình 1.4 Giao diện danh mục LG 13 Hình 1.4 Giao diện danh mục Asanzo 14 Hình 1.4 Giao diện danh mục Panasonic 15 Hình 1.4 Giao diện danh mục Casper 16 Hình 1.4 Giao diện danh mục Toshiba 17 Hình 1.5 Giao diện thương hiệu 18 Hình 1.5 Giao diện giá 40 triệu 19 Hình 1.5 Giao diện giá từ 20-40 triệu 20 Hình 1.5 Giao diện 10-20 triệu 21 Hình 1.5 Giao diện thương hiệu lue exchange 22 Hình 1.5.5 Giao diện 5tr 23 Hình 1.6 Giao diện trang chi tiết TCL 24 Hình 1.6 Giao diện trang chi tiết LG27 25 Hình 1.6 Giao diện trang chi tiết Asanzo 26 Hình 1.6 Giao diện trang chi tiết LG70 27 Hình 1.6 Giao diện trang chi tiết Sharp 28 Hình 1.6.6 Giao diện trang chi tiết Sony 29 SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 iv Đồ á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 SVTH: ĐỒN HỒI LÂM – LỚP D18PM03 v Tiểu luận môn thi ết kế web CHƯ NG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE Bán TIVi Mục Tiêu Đề Tài + Thiết kế Website bán TiVi Bình Dương Ý Nghĩa Của Đề Tài + Đưa sản phẩm công ty đến đến gần với người tiêu dù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 làcác sản phẩm TV tốt 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 v ề thông tin Shop + Trang Đặt Hàng: Người dùng có th ể đặt hàng qua website + Trang sản phẩm: Đây trang khách hàng xem tham khảo m ặt hàng c 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 t ừng sản phẩm để xem chi tiết SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 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 làngôn ng ữ xác định cấu trúc c thông tin HTML sử dụng loạt th ẻ và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 và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àm ột tập tin có ph ần mở rộng htm html Là m ột 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 reamweaver Macromedia Dreamweaver làtrình biên so ạn HTML chuyên nghi ệp dùng để thiết kế, viết mãvàphát tri ển website trang web vàcác ứ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 ho ặc 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 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 có th ể xem tất thành ph ần SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 Tiểu luận môn thi ết kế web website bạn và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, r ồi 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à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 có th ể tùy bi ến hồn tồn B ạn có th ể tạo cho riêng nh ững đối tượng yêu c ầu, chỉnh sửa shortcut bàn phím th ậ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 vành ững báo cáo site m ới Ngôn ngữ CSS CSS (Cascading Style Sheets) m ột 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 ệ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 ứ chưa phải tr ang Web động có kh ả đáp ứng s ự 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 c ngơn ng ữ lập trình Java SVTH: ĐỒN HỒI LÂM – LỚP D18PM03 Tiểu luận mơn thi ết kế web 1.5 Giao diện danh mục Theo giá Tiền Hình 1.5 Giao diện thương hiệu SVTH: ĐỒN HỒI LÂM – LỚP D18PM03 18 Tiểu luận mơn thi ết kế web 1.5.1 Giao diện giá Trên 40 triệu Hình 1.5 Giao diện giá 40 triệu SVTH: ĐỒN HỒI LÂM – LỚP D18PM03 19 Tiểu luận mơn thi ết kế web 1.5.2 Giao diện gía từ 20-40 triệu Hình 1.5 Giao diện giá từ 20-40 triệu SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 20 Tiểu luận môn thi ết kế web 1.5.3 Giao diện 10-20 triệu Hình 1.5 Giao diện 10-20 triệu SVTH: ĐỒN HỒI LÂM – LỚP D18PM03 21 Tiểu luận môn thi ết kế web 1.5.4 Giao diện 5-10 triệu Hình 1.5 Giao diện thương hiệu lue exchange SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 22 Tiểu luận môn thi ết kế web 1.5.5 Giao diện triệu Hình 1.5.5 Giao diện 5tr SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 23 Tiểu luận môn thi ết kế web 1.6.1 Chi tiết TCL Hình 1.6 Giao diện trang chi tiết TCL SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 24 Tiểu luận môn thi ết kế web 1.6.2 Chi tiết LG 27 Hình 1.6 Giao diện trang chi tiết LG27 SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 25 Tiểu luận mơn thi ết kế web 1.6.3 Chi tiết Asanzo Hình 1.6 Giao diện trang chi tiết Asanzo SVTH: ĐOÀN HỒI LÂM – LỚP D18PM03 26 Tiểu luận mơn thi ết kế web 1.6.4 Chi tiết LG70 Hình 1.6 Giao diện trang chi tiết LG70 SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 27 Tiểu luận môn thi ết kế web 1.6.5 Chi tiết Sharp Hình 1.6 Giao diện trang chi tiết Sharp SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 28 Tiểu luận môn thi ết kế web 1.6.6 Chi tiết Sony Hình 1.6.6 Giao diện trang chi tiết Sony SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 29 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 hi ện 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àmình ưng ý cách d ễ dàng không ph ải 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 có th ể lựa chọn sản phẩm với giác ả đa dạng vànhu c ầu cánhân c người Vìth ế, sau tiến hành kh ảo sát thìem quy ết định Thiết kế trang web bán TIVI màc ụ thể với ch ức cần thiết cho trang web bn bán c ần có vìem th nhu cầu mua sắm thiết bị điện tử xu hướng người dân hi ện đại thị trường tiềm khai thác bn bán Website “Bán TIVI ” thứ dùng để quảng bá thương hiệu, thứ hai kênh thông tin cho người, thứ ba m ột địa tin cậy để khách hàng u thích mua sắm tìm mua cho nh ững sản phẩm chất lượng Qua quátrình nghiên c ứu cố gắng thực hướng dẫn tận tình c Giảng viên, s ự 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 Tivi , đá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 và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 thiếu chưa sử dụng Hướng phát tri ển đề tài Vìth ời gian không cho phép và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ìth ế đề 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: SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 30 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 SVTH: ĐỒN HỒI LÂM – LỚP D18PM03 31 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 SVTH: ĐOÀN HOÀI LÂM – LỚP D18PM03 32 ... D18PM03 v Tiểu luận môn thi ết kế web CHƯ NG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE Bán TIVi Mục Tiêu Đề Tài + Thiết kế Website bán TiVi Bình Dương Ý Nghĩa Của Đề Tài + Đưa sản phẩm công... ọn đề tài v ề: ? ?Thiết kế website bán TIVI ” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Thiết kế ứ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 đề. .. sau: Kết đạt được: - Thiết kế thành công website bán Tivi , đá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