Tiểu luận môn học thiết kế web thiết kế website bán tiểu thuyết mạng ttm

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 BÁN TIỂU THUYẾT MẠNG TTM GVHD: NGUYỄN HỮU VĨNH SVTH: PHẠM ÂN MSSV: 1824801030265 LỚP: D18PM04 B5NH DƯƠNG – 6/2020 0 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 BÁN TIỂU THUYẾT MẠNG TTM GVHD: NGUYỄN HỮU VĨNH SVTH: PHẠM ÂN MSSV: 1824801030265 LỚP: D18PM04 B5NH DƯƠNG – 6/2020 i 0 MỤC LỤC MỤC LỤC i DANH MỤC H5NH i MỞ ĐẦU CHƯƠNG TỔNG QUAN ĐỀ TÀI WEBSITE 1 Tên đề tài thực Mục tiêu Ý nghĩa Đối tượng đề tài thực Sơ lượt trang website thiết kế .1 CHƯƠNG GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG 1 Giới thiệu HTML .1 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML 1.4 Một số ưu điểm bật HTML .1 1.5 Một số hạn chế HTML Giới thiệu ngôn ngữ CSS 2.1 CSS gì? 2.2 Công dụng CSS Giới thiệu ngôn ngữ Javascript 3.1 Ngơn ngữ Javascript gì? 3.2 Cách nhúng Javascript Giới thiệu Adobe Dreamweaver CHƯƠNG GIAO DIỆN WEBSITE .1 Bảng tổng quát trang thiết kế .1 Đặc tả giao diện 2.1 Giao diện trang chủ .1 2.2 Giao diện đăng ký .1 2.3 Giao diện đăng nhập 2.4 Giao diện trang giới thiệu 2.5 Giao diện truyện yêu thích 2.6 Giao diện danh mục tiểu thuyết theo thể loại ii 0 2.7 Danh mục sản tiểu thuyết nguồn truyện 2.8 Giao diện ngày tháng năm 2.9 Giao diện tiểu thuyết hot .1 2.10 Giao diện liên kết website Giao diện chi tiết số sản phẩm 3.1 Giao diện chi tiết tiểu thuyết đồ nhi, vi sư không hạ sơn 3.2 Giao diện chi tiết tiểu thuyết nguyên lai ta cao nhân tuyệt 3.3 Giao diện chi tiết tiểu thuyết ta! Thiên mệnh trùm phản diện .1 3.4 Giao diện chi tiết Van Cầu Ngươi, Làm Một Người Yêu Hoàng A .1 3.5 Chi tiết tiểu thuyết Năm Tuổi Ngự Sử, Bắt Đầu Tức Điên Lý Nhị 3.6 Chi tiết tiểu thuyết Từ đại thụ bắt đầu tiến hóa CHƯƠNG KẾT LUẬN 1 Thành đạt Các công việc chưa làm chưa hoàn thành CHƯƠNG PHƯƠNG HƯỚNG PHÁT TRIỂN CỦA WEBSITE .1 TÀI LIỆU THAM KHẢO iii 0 DANH MỤC H5NH Hình 1: Trang chủ Hình 2: Giao diện đăng ký Hình 3: Giao diện đăng nhập .1 Hình 4: Giao diện giới thiệu Hình 5: Giao diện truyện yêu thích Hình : Giao diện danh mục tiểu thuyết theo thể loại Hình 7: Giao diện tiểu thuyết theo thể loại huyền huyễn .1 Hình Giao diện tiểu thuyết theo thể loại tiên hiệp .1 Hình 9: Giao diện tiểu thuyết theo thể loại kiếm hiệp Hình 10: Giao diện tiểu thuyết theo thể loại đồng nhân .1 Hình 11: Giao diện tiểu thuyết theo thể loại ngơn tình Hình 12: Giao diện tiểu thuyết theo thể loại lịch sử .1 Hình 13: Giao diện tiểu thuyết theo thể loại võng du Hình 14: Danh mục tiểu thuyết theo nguồn truyện Hình 15: Tiểu thuyết theo nguồn truyện Faloo .1 Hình 16: Giao diện tiểu thuyết theo nguồn truyện truyencv Hình 17: Giao diện tiểu thuyết theo nguồn truyện truyenfull .1 Hình 18: Giao diện tiểu thuyết theo nguồn truyện YY Hình 19: Giao diện lịch ngày tháng năm Hình 20: Giao diện tiểu thuyết hot .1 Hình 21: Giao diện liên kết website .1 Hình 22 Giao diện chi tiết đồ nhi, vi sư không hạ sơn Hình 23: Giao diện chi tiết tiểu thuyết nguyên lai ta cao nhan tuyệt Hình 24: Giao diện chi tiết tiểu thuyết ta! Thiên mệnh trùm phản diện .1 Hình 25: Giao diện chi tiết van cầu ngươi, làm người yêu hoàng a .1 Hình 26 Giao diện chi tiết tiểu thuyết năm tuổi ngự sử, bắt đầu tức điên Lý Nhị Hình 27 Giao diện chi tiết tiểu thuyết Từ đại thụ bắt đầu tiến hóa .1 iv 0 MỞ ĐẦU CHƯƠNG Ngày nay, công nghệ thông tin thương mại điện tử phát triển mạnh mẽ vượt bật nhiều lĩnh vực có thương mại điện tử Thương mại điện tử giúp cho người tiết kiệp nhiều thời gian chi phí hoạt động mua sắm nhiều hoạt động khác Thương mại điện tử giúp người tìm kiếm mua sắm thứ theo ý muốn Dịch vụ thương mại điện tử thể dạng website bán hàng internet Do mã ngồn mở nhiều người sử dụng tính mà chúng cung cấp, với giá thành rẻ, nhiều tính hổ trợ nhiều phương diện Việc có hổ trợ nhìu phương diện nhiều tính thiết kế website cách nhanh chóng với giao diện đẹp thân thiện với người dùng Với yếu tố em mạnh dạng thiết kế website thương mại điện tử có nội dung là: “Website bán tiểu thuyết mạng TTM” để thử sức Đây đề tài em chọn tiểu luận kết thúc học phần môn thiết kế web Website đáp ứng nhu cầu mua tiểu thuyết người dùng thương mại điện tử CHƯƠNG Tiểu luận bao gồm chương: CHƯƠNG Chương 1: Tổng quan đề tài website CHƯƠNG Chương 2: Giới thiệu công nghệ sử dụng CHƯƠNG Chương 3: Giao diện website CHƯƠNG Chương 4: Kết luận CHƯƠNG Chương 5: Phương hướng phát triển website CHƯƠNG CHƯƠNG 0 CHƯƠNG 10 TỔNG QUAN ĐỀ TÀI WEBSITE Tên đề tài thực CHƯƠNG 11 THIẾT KẾ WEBSITE BÁN TIỂU THUYẾT MẠNG TTM Mục tiêu CHƯƠNG 12 Thiết kế thành công website Ý nghĩa CHƯƠNG 13 Giúp đọc giả đọc tác chưa dịch xuất đại trà phẩm mà mua nhà sách CHƯƠNG 14 Thuận tiện việc tìm kiếm tiểu thuyết theo nguồn trang, thể loại tên tiểu thuyết Đối tượng đề tài thực CHƯƠNG 15 Đối tượng quyễn tiểu thuyết dịch từ b.faloo.com, số ngồn khác nước Sơ lượt trang website thiết kế CHƯƠNG 16 Trang chủ: Đây trang giới thiệu sản phẩm vừa cập nhật CHƯƠNG 17 Trang Truyện yêu thích nhất: Đây trang cung cấp cho khách hàng thông tin sản phẩm yêu thích CHƯƠNG 18 Trang đăng ký: Khách hàng đăng ký tài khoản để trở thành khách hàng trang CHƯƠNG 19 Trang đăng nhập: Khách hàng đăng nhập tài khoản vào web để đặt mua sản phẩm trang CHƯƠNG 20 Trang Giới thiệu: Đây trang giúp cho khách hàng xem thông tin chung của cửa hàng CHƯƠNG 21 Trang liên hệ: Đây trang mà khách hàng lấy thông tin liên hệ với chủ cửa hàng CHƯƠNG 22 Trang sản phẩm: Đây trang cho khách hàng xem sản phẩm theo thể loại theo nguồn CHƯƠNG 23 Trang chi tiết sản phẩm: Đây trang khách hàng nhấn vào sản phẩm để xem thông tin chi tiết sản phẩm CHƯƠNG 24 CHƯƠNG 25 0 CHƯƠNG 26 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG Giới thiệu HTML 1.1 HTML gì? CHƯƠNG 27 HTML chữ viết tắt Hypertext Markup Language Nó giúp người dùng tạo cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, links, blockquotes, vâng CHƯƠNG 28 HTML khơng phải ngơn ngữ lập trình, đồng nghĩa với việc khơng thể tạo chức “động” Nó giống Microsoft Word, dùng để bố cục định dạng trang web CHƯƠNG 29 HTML ngôn ngữ để xuất siêu văn World Wide Web Nó cho biết trang web hiển thị trình duyệt CHƯƠNG 30 HTML ngơn ngữ xác định cấu trúc thông tin CHƯƠNG 31 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.1 Công dụng HTML CHƯƠNG 32 Thiết kế nội dung hình thức trang web CHƯƠNG 33 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 CHƯƠNG 34 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… CHƯƠNG 35 Thêm vào đối tượng hình ảnh video, âm thanh, … 1.1 Định dạng HTML CHƯƠNG 36 Là tập tin có phần mở rộng htm html CHƯƠNG 37 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 CHƯƠNG 38 Thơng thường, website có nhiều HTML document (ví dụ: trang chủ, trang blog, trang liên hệ, …) trang có tệp HTML riêng Mỗi tài liệu HTML bao gồm tag (hay cịn gọi element) Nó tạo cấu trúc tương tự thư mục với heading, section, paragraph, … số khối nội dung khác Hầu hết tất HTML element có tag mở tag đóng với cấu trúc CHƯƠNG 39 Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad… sử dụng nhiều adobe dreamweaver CHƯƠNG 40 Bạn xem chúng trình duyệt web hành Google Chrome, Firefox, Safari, … Nhiệm vụ trình duyệt đọc file HTML 0 “biến đổi” chúng thành dạng nội dung visual Internet cho người dùng xem hiểu chúng 1.1 Một số ưu điểm bật HTML CHƯƠNG 41 Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô lớn CHƯƠNG 42 Có thể hoạt động mượt mà hầu hết trình duyệt CHƯƠNG 43 Học HTML đơn giản CHƯƠNG 44 Các markup sử dụng HTML thường ngắn gọn, có độ đồng cao CHƯƠNG 45 Sử dụng mã nguồn mở, hồn tồn miễn phí CHƯƠNG 46 HTML chuẩn web vận hành W3C CHƯƠNG 47 Dễ dàng để tích hợp với loại ngơn ngữ backend (ví dụ như: PHP, Node.js, …) 1.1 Một số hạn chế HTML CHƯƠNG 48 Tuy HTML có nhìu ưu điểm bên cạnh số hạn chế CHƯƠNG 49 Chỉ áp dụng chủ yếu cho web tĩnh Nếu muốn tạo tính động, lập trình viên phải dùng thêm JavaScript ngơn ngữ backend bên thứ (ví dụ như: PHP) CHƯƠNG 50 Mỗi trang HTML cần tạo riêng biệt, có có nhiều yếu tố trùng lặp header, footer CHƯƠNG 51 Khó để kiểm sốt cách đọc hiển thị file HTML trình duyệt (ví dụ, số trình duyệt cũ khơng render tag Do đó, dù HTML document có sử dụng tag trình duyệt khơng đọc được) CHƯƠNG 52 Một vài trình duyệt cịn chậm cập nhật để hỗ trợ tính HTML Giới thiệu ngơn ngữ CSS 2.1 CSS gì? CHƯƠNG 53 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, … CHƯƠNG 54 Nó điều khiển định dạng nhiều trang web lúc để tiết kiệm công sức cho người viết web Nó phân biệt cách hiển thị trang web với nội dung trang cách điều khiển bố cục, màu sắc, font chữ 2.2 Công dụng CSS 0 CHƯƠNG 55 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 CHƯƠNG 56 CSS hỗ trợ tất trình duyệt hiển thị “như nhau” hệ điều hành CHƯƠNG 57 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 CHƯƠNG 58 CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi Giới thiệu ngôn ngữ Javascript 3.1 Ngôn ngữ Javascript gì? CHƯƠNG 59 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 CHƯƠNG 60 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 CHƯƠNG 61 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 CHƯƠNG 62 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 3.2 Cách nhúng Javascript CHƯƠNG 63 Sử dụng câu lệnh hàm cặp thẻ CHƯƠNG 64 Sử dụng File nguồn Javascript CHƯƠNG 65 Sử dụng biểu thức làm giá trị thuộc tính HTML CHƯƠNG 66 Sử dụng thẻ kiện (event handlers) thẻ HTML Giới thiệu Adobe Dreamweaver CHƯƠNG 67 Web tiểu luận thiết kế Adobe Dreamweaver CS6 CHƯƠNG 68 Adobe Dreamweaver công cụ xử lý mạnh mẽ dành cho người thiết kế web, người dùng tự lập trình phát triển ứng dụng web nhiều cấp độ Nếu dừng mức độ hiểu biết chưa nhiều ngơn ngữ lập trình web Dreamweaver đáp ứng nhu cầu thiết kế Website chuyên nghiệp CHƯƠNG 69 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 0 2.6.5 Giao diện tiểu thuyết theo thể loại ngơn tình Hình 11: Giao diện tiểu thuyết theo thể loại ngơn tình 18 0 2.6.6 Giao diện tiểu thuyết theo thể loại lịch sử Hình 12: Giao diện tiểu thuyết theo thể loại lịch sử 19 0 2.6.7 Giao diện tiểu thuyết theo thể loại võng du Hình 13: Giao diện tiểu thuyết theo thể loại võng du 2.7 Danh mục sản tiểu thuyết nguồn truyện 20 0 Hình 14: Danh mục tiểu thuyết theo nguồn truyện Menu chứa loại tiểu thuyết xếp vào nguồn truyện giúp khách hàng lựa chọn cách dễ dàng nguồn truyện mà muốn Hiện wed cung cấp cho khách hàng nguồn truyện Faloo, truyencv, truyenfull truyện YY 2.7.1 Tiểu thuyết theo nguồn truyện Faloo Hình 15: Tiểu thuyết theo nguồn truyện Faloo 21 0 2.7.2 Giao diện tiểu thuyết theo nguồn truyện truyencv Hình 16: Giao diện tiểu thuyết theo nguồn truyện truyencv 22 0 2.7.3 Giao diện tiểu thuyết theo nguồn truyện truyenfull Hình 17: Giao diện tiểu thuyết theo nguồn truyện truyenfull 23 0 2.7.4 Giao diện tiểu thuyết theo nguồn truyện YY Hình 18: Giao diện tiểu thuyết theo nguồn truyện YY 2.8 Giao diện ngày tháng năm 0 Hình 19: Giao diện lịch ngày tháng năm Hiển thị ngày tháng năm wed 2.9 Giao diện tiểu thuyết hot Hình 20: Giao diện tiểu thuyết hot Với giao diện người dùng theo dỗi tiểu thuyết đăng đánh giá cao 2.10 Giao diện liên kết website Hình 21: Giao diện liên kết website Giao diện có tác dụng liên kết với website nguồn truyện khách hàng muốn Giao diện chi tiết số sản phẩm Các sản phẩm có giao diện chi tiết sản phẩm cập nhập trang chủ website Trong giao diện chi tiết sản phẩm khách xem số thông tin chi tiết tiểu thuyết tác giả, nguồn, thể loại tốm tắc quyễn tiểu thuyết 3.1 Giao diện chi tiết tiểu thuyết đồ nhi, vi sư không hạ sơn 25 0 Hình 22 Giao diện chi tiết đồ nhi, vi sư không hạ sơn 3.2 Giao diện chi tiết tiểu thuyết nguyên lai ta cao nhân tuyệt 26 0 Hình 23: Giao diện chi tiết tiểu thuyết nguyên lai ta cao nhan tuyệt 3.3 Giao diện chi tiết tiểu thuyết ta! Thiên mệnh trùm phản diện Hình 24: Giao diện chi tiết tiểu thuyết ta! Thiên mệnh trùm phản diện 3.4 Giao diện chi tiết Van Cầu Ngươi, Làm Một Người Yêu Hoàng A 27 0 Hình 25: Giao diện chi tiết van cầu ngươi, làm người yêu hoàng a 3.5 Chi tiết tiểu thuyết Năm Tuổi Ngự Sử, Bắt Đầu Tức Điên Lý Nhị Hình 26 Giao diện chi tiết tiểu thuyết năm tuổi ngự sử, bắt đầu tức điên Lý Nhị 3.6 Chi tiết tiểu thuyết Từ đại thụ bắt đầu tiến hóa 28 0 Hình 27 Giao diện chi tiết tiểu thuyết Từ đại thụ bắt đầu tiến hóa 29 0 CHƯƠNG 172 KẾT LUẬN Ngày thương mại điện tử phổ biến với hầu hết người Đây xu hướng phát triển mạnh mẽ tại, nơi mà người mua tất thứ mà không cần phải đến tận cửa hàng mà cần cú click chuột có nhân viên giao hàng giao đến tận nhà cho bạn bạn tốn trực tuyến ln, thật thuận tiện không Viêc mua hàng online giúp tiết kiệm nhiều thời gian công sức thân Chúng ta chọn thứ muốn với giá đa dạng nhu cầu cá nhân người Chính xu hướng em định Thiết kế trang web bán tiểu thuyết onine với tên “Thiết kế website bán tiểu thuyết mạng TTM” với chức cần thiết cho trang web buôn bán cần có Website mà website ngồi việc cung cấp sản phẩm tiểu thuyết cịn nơi liên kết người có sở thích đọc tiểu thuyết mạng Đây địa tin cậy để người có quyễn tiểu thuyết mong muốn nơi gắn kết tâm hồn muốn hòa vào giới riêng thân Cho bay cao với ước mơ có quyễn sách Qua trình học hướng dẫn giảng viên với bạn bè, sau thiết kế trang web Em thấy đạt điều sau Thành đạt Thiết kế thành cơng website bán tiểu thuyết 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ế cách đơn giản hài hòa màu sắt, thân thiện với người dùng với trang đăng ký, đăng nhập thao tác dễ dàng Các công việc chưa làm chưa hoàn thành Nhiều chức chưa sử dụng Giao diện chưa đẹp Phân tích thiết kế chưa tồn vẹn Việc biểu diễn thông tin chưa linh hoạt Vẫn chưa áp dụng sâu nhiều CSS Javascrip 30 0 CHƯƠNG 173 PHƯƠNG HƯỚNG PHÁT TRIỂN CỦA WEBSITE Kiến thức thiết kế web hạn chế nên chúng em chưa thể hoàn thiện trang web cách tốt giao diện chức mang web Do wedsite cịn nhiều thiếu sót mong thầy xem xét giúp đỡ nhiều để hoàn thiện trang web tốt sau Các mục tiêu phát triển web sau này: Hoàn thiện phần giao diện, nân giao diện lên tầm cao mới, có thêm nhìu chức để tương tác với người dùng tốt Thêm trang để trao đổi thông tin đọc giả với diễn đàn chung Thiết kế bổ xung nâng cấp chức chưa hồn chỉnh q trình sử dụng web 31 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 https://hiepsiit.com/ https://wiki.matbao.net/html-la-gi-nen-tang-lap-trinh-web-cho-nguoi-moi-bat-dau/ https://www.hostinger.vn/huong-dan/css-la-gi/ 32 0 ... định Thiết kế trang web bán tiểu thuyết onine với tên ? ?Thiết kế website bán tiểu thuyết mạng TTM? ?? với chức cần thiết cho trang web bn bán cần có Website mà website việc cung cấp sản phẩm tiểu thuyết. .. thiết kế website thương mại điện tử có nội dung là: ? ?Website bán tiểu thuyết mạng TTM? ?? để thử sức Đây đề tài em chọn tiểu luận kết thúc học phần môn thiết kế web Website đáp ứng nhu cầu mua tiểu. ..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 BÁN TIỂU THUYẾT MẠNG TTM GVHD: NGUYỄN HỮU VĨNH SVTH: PHẠM ÂN