Tiểu lu n c hành website ậ thự thiết kế thiết kế website bán sách cho trung tâm h ọc liệu tdmu

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆNKỸ THUẬT CÔNG NGHỆ TIỂU LUẬN THỰC HÀNH MÔN HỌC THIẾT KẾ WEBSITE THỰC HÀNH THIẾT KẾ WEBSITE BÁN SÁCH CHO TRUNG TÂM HỌC LIỆU TDMU GVHD: THS NGUYỄN HỮU VĨNH SVTH: NGÔ TRƯỜNG VŨ VÀ NGƠ HỒNG ANH MSSV: 2024801030014 & 2024801030067 LỚP: D20KTPM02 BNH DƯƠNG – 4/2021 0 Tiểu luận thực hành thiết kế website LỜI NÓI ĐẦU Với sức mạnh công nghệ đại ngày nay, thật dễ dàng mua sắm online Tất bạn cần thiết bị điện tử máy tính để bàn, laptop, smartphone, có kết nối internet bạn tiến hành mua sắm mà không cần nhấc chân khỏi nhà Với s ự thuận tiện mặt công nghệ vậy, trang web bán hàng online mọc lên nấm với đầy đủ mặt hàng t phân khúc xa xỉ bình dân, gần tất thứ bạn mua theo cách truyền thống có sẵn trang web thương mại điện tử Trung tâm học liệu trung tâm chuyên bán sách phục vụ cho giảng dạy học tập Trung tâm học liệu mang khát vọng trở thành trung tâm có thị phần nhiều Việt Nam trung tâm hàng đầu giới loại sách hay với sách từ bình dân đến cao cấp Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề tài tiểu luận 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: Trường Vũ & Hoàng Anh– D20KTPM02 0 i Tiểu luận thực hành thiết kế website 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ụcTiêucủaĐềTài Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một Số Trang Chính Của 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 Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH Đặc Điểm 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 liên hệ 1.4 Giao diện trang đăng ký 1.5 Giao diện trang đăng nhập 1.6 Giao diện trang danh mục sản phẩm 10 1.7 Giao diện trang Giỏ hàng 10 1.8 Giao diện trang Footer 10 1.9 Giao diện trang sách bán nhiều 10 1.10 Giao diện trang sách 10 1.6.1 Giao diện danh mục sách Tâm lý học 13 1.6.2 Giao diện danh mục sách Ngoại ngữ .166 1.6.3 Giao diện danh mục sách Công nghệ thông tin .177 1.6.4 Giao diện danh mục sách Luật 188 1.6.5 Giao diện danh mục sách Văn học 199 SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 ii Tiểu luận thực hành thiết kế website 1.7 Giao diện trang chi tiết sản phẩm Error! Bookmark not defined 1.7.1 Chi tiết sách Tâm lý học dành cho lãnh đạo 20 1.7.2 Chi tiết sách Code dạo kí 21 1.7.3 Chi tiết sách Dế Mèn Phiêu Lưu Ký 22 1.7.4 Chi tiết sách Luyện Kỹ Năng Đọc Kỹ Năng Error! Bookmark not defined 1.7.5 Chi tiếtsách The GodFather Error! Bookmark not defined 1.7.6 Chi tiết sách Hùng Biện kiểu Ted Error! Bookmark not defined CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 26 Kết đạt được: 26 Việc chưa làm được: Error! Bookmark not defined Hướng phát triển đề tài 26 TÀI LIỆU KHAM KHẢO 27 SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 iii Tiểu luận thực hành thiết kế website 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.3 Giao diện trang liên hệ Hình 1.4 Giao diện trang đăng ký Hình 1.5 Giao diện trang đăng nhập Hình 1.6 Giao diện trang danh mục sản phẩm 10 Hình 1.7 Giao diện trang Giỏ hàng 11 Hình 1.8 Giao diện trang Footer 12 Hình 1.9 Giao diện trang Sách bán nhiều 13 Hình 1.10 Giao diện trang Sách 14 Hình 1.6.1 Giao diện sách Tâm lý học 15 Hình 1.6.2 Giao diện sách Ngoại ngữ 16 Hình 1.6.3 Giao diện sách Công nghệ thông tin 17 Hình 1.6.4 Giao diện sách Luật 19 Hình 1.6.5 Giao diện danh sách Văn học Error! Bookmark not defined Hình 1.7.1 Giao diện trang chi tiết sách Tâm lý học dành cho lãnh đạo 20 Hình 1.7.2 Giao diện trang chi tiết sách Code dạo kí .21 Hình 1.7.3 Giao diện trang chi tiết sách Dế Mèn Phiêu Lưu Ký 22 Hình 1.7.4 Giao diện trang chi tiết sách Luyện kỹ đọc tiếng Anh 24 Hình 1.7.5 Giao diện trang chi tiết sách The GodFather .25 Hình 1.7.6 Giao diện trang chi tiết sách Hùng Biện kiểu Ted Error! Bookmark not defined SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 iv Tiểu luận thực hành thiết kế website 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: Trường Vũ & Hoàng Anh– D20KTPM02 0 v Bài tiểu luận thực hành thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE BÁN SÁCH CHO TRUNG TÂM HỌC LIỆU TDMU MụcTiêucủaĐềTài + Thiết kế Website bán sách cho trung tâm học liệu TDMU Ý Nghĩa Của Đề Tài + Đưa sách trung tâm đế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 sách cho giới trẻ người có nhu cầu học tập Một Số Trang Chính Của Website + Trang chủ: Đây trang giới thiệu sơ lược mẫu sách trung tâm + Trang Giới thiệu: Đây trang giúp cho khách hàng xem biết thêm thông tin trung tâm + Trang liên hệ: Đây trang mà khách hàng liên hệ với trung tâm + 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 sách trung tâm 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 mẫu sách để xem chi tiết + Trang giỏ hàng: Đây trang để khách hàng quản lý danh sách hàng hóa mà người dùng muốn mua SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 Bài tiểu luận thực hành thiết kế web CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? ngữđánhdấusiêuvăn HTML(HypertextMarkupLanguage-Ngơn bản)làngơnngữđánhdấuchuẩndùngsoạnthảocáctàiliệu World WideWeb,chỉrõmột trangWebđược hiểnthịnhưthếnàotrong trìnhduyệt Ngơnngữ HTML cáctaghoặccácđoạnmãlệnhđểchỉcho dùng cáctrìnhduyệt(Webbrowsers) cáchhiểnthịcácthànhphầncủa trangnhư textvà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 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 SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 Bài tiểu luận thực hành thiết kế web 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 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 SVTH: Trường Vũ & Hồng Anh– D20KTPM02 0 Bài tiểu luận thực hành thiết kế web 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 toán học Nhưng JavaScript không ngôn ngữ hướng đối tượng C++/Java SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 Bài tiểu luận thực hành thiết kế web 1.9 Giao diện trang Sách bán nhiều Hình 1.9 Giao diện trang Sách bán nhiều SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 13 Bài tiểu luận thực hành thiết kế web 1.10 Giao diện trang Sách Hình 1.10 Giao diện trang Sách SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 14 Bài tiểu luận thực hành thiết kế web 1.6.1 Giao diện danh mục sách Tâm lý học Hình 1.6.1 Giao diện danh mục sách Tâm lý học SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 15 Bài tiểu luận thực hành thiết kế web 1.6.2 Giao diện danh mục sách Ngoại ngữ Hình 1.6.2 Giao diện danh mục sách Ngoại ngữ SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 16 Bài tiểu luận thực hành thiết kế web 1.6.3 Giao diện danh mục sách Cơng nghệ thơng tin Hình 1.6.3 Giao diện danh mục sách Công nghệ thông tin SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 17 Bài tiểu luận thực hành thiết kế web 1.6.4 Giao diện danh mục sách Luật Hình 1.6.4 Giao diện danh mục sách Luật SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 18 Bài tiểu luận thực hành thiết kế web 1.6.5 Giao diện danh mục sách Văn học Hình 1.6.5 Giao diện danh mục sách văn học SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 19 Bài tiểu luận thực hành thiết kế web 1.7 Chi tiết sản phẩm 1.7.1 Chi tiết sách Tâm lý học dành cho lãnh đạo Hình 1.7.1 Giao diện trang chi tiết sách Tâm lý học dành cho lãnh đạo SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 20 Bài tiểu luận thực hành thiết kế web 1.7.2 Chi tiết sách Code dạo kí Hình 1.7.2 Giao diện trang chi tiết sách Code dạo kí SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 21 Bài tiểu luận thực hành thiết kế web 1.7.3 Chi tiết sách Dế Mèn Phiêu Lưu Ký Hình 1.7.3 Giao diện trang chi tiết sách Dế Mèn Phiêu Lưu Ký SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 22 Bài tiểu luận thực hành thiết kế web 1.7.4 Chi tiết sách Luyện kỹ đọc tiếng Anh Hình 1.7.4 Giao diện trang chi tiết sách Luyện kỹ đọc tiếng Anh SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 23 Bài tiểu luận thực hành thiết kế web 1.7.5 Chi tiết sách The GodFather Hình 1.7.5 Giao diện trang sách The GodFather SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 24 Bài tiểu luận thực hành thiết kế web 1.7.6 Chi tiết sách Hùng Biện Ted Hình 1.7.6 Giao diện trang sách Hùng Biện kiểu Ted SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 25 Bài tiểu luận thực hành 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 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 Website “Bán sách cho trung tâm học liệu TDMU ” website chuyên bán mẫu sách hayvới tiêu chí “chất lượng phải đầu” dần trở thành s ự lựa chọn mặc định trung tâm lớn lĩnh vực hợp tác phát triển mẫu sách ngày gần gũi đến với bạn đọc Kết đạt được: - Thiết kế thành công website bán sách cho trung tâm học liệu TDMU đáp ứng yêu cầu khách hàng - Tìm hiểu vàcơ sử dụng công cụ để Thiết kế website như: Adobe Dreamweaver CS6, ngôn ngữ 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 - Nhiều chức thiếu chưa sử dụng - Website chưa tối ưu hóa cách hoàn thiện Hướng phát triển đề tài ➢ Trau chuốt giaodiệnđẹp hơn,thânthiệnvớingườidùng vàcónhiềuchứcnăng,tươngtác tốt với ngườidù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 ➢ Tối ưu hóa trang web cho việc thương mại dễ dàng nhanh chóng SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 26 Bài tiểu luận thực hành thiết kế web TÀI LIỆU KHAM KHẢO [1] Tài liệu giảng môn “Thiết kế website” thầy Nguyễn Hữu Vĩnh [2] Website http://www.hiepsiit.com [3] Website https://www.fahasa.com [4] Website https://sachvui.com SVTH: Trường Vũ & Hoàng Anh– D20KTPM02 0 27 ... Bài tiểu lu? ? ?n th? ?c h? ?nh thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI T? ?n Đề Tài + THIẾT KẾ WEBSITE B? ?N SÁCH CHO TRUNG TÂM H? ? ?C LIỆU TDMU MụcTiêucủaĐềTài + Thiết kế Website b? ?n sách cho trung tâm h? ? ?c liệu. .. thứ b? ?n mua theo c? ?ch truy? ?n thống c? ? s? ?n trang web thương mại đi? ?n tử Trung tâm h? ? ?c liệu trung tâm chuy? ?n b? ?n sách ph? ?c vụ cho giảng dạy h? ? ?c tập Trung tâm h? ? ?c liệu mang khát vọng trở thành trung. .. trìnhduyệt Ngơnngữ HTML c? ?ctaghoặcc? ?c? ?oạnmãlệnhđểch? ?cho dùng c? ?ctrìnhduyệt(Webbrowsers) c? ?chhiểnth? ?c? ?cthànhphầncủa trangnhư textvàgraphics HTML ng? ?n ngữ x? ?c định c? ??u tr? ?c thông tin HTML sử dụng loạt thẻ