Trang chủ: Đây là trang giới thiệu các sản phẩm vừa được cập nhật CHƯƠNG 17.. Trang Truyện yêu thích nhất: Đây là trang cung cấp cho khách hàng thông tin các sản phẩm đang được yêu thíc
Trang 1TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
KHOA KỸ THUẬT – CÔNG NGHỆ
TIỂU LUẬN MÔN HỌCTHIẾ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
Trang 2TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
KHOA KỸ THUẬT – CÔNG NGHỆ
TIỂU LUẬN MÔN HỌCTHIẾ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
Trang 3MỤC LỤC
MỤC LỤC i
DANH MỤC H5NH i
MỞ ĐẦU 1
CHƯƠNG 1 TỔNG QUAN ĐỀ TÀI WEBSITE 1
1 Tên đề tài thực hiện 1
2 Mục tiêu 1
3 Ý nghĩa 1
4 Đối tượng của đề tài thực hiện 1
5 Sơ lượt các trang chính của website sẽ thiết kế 1
CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG 1
1 Giới thiệu về HTML 1
1.1 HTML là gì? 1
1.2 Công dụng của HTML 1
1.3 Định dạng của HTML 1
1.4 Một số ưu điểm nổi bật của HTML 1
1.5 Một số hạn chế của HTML 1
2 Giới thiệu về ngôn ngữ CSS 1
2.1 CSS là gì? 1
2.2 Công dụng của CSS 1
3 Giới thiệu về ngôn ngữ Javascript 1
3.1 Ngôn ngữ Javascript là gì? 1
3.2 Cách nhúng Javascript 1
4 Giới thiệu về Adobe Dreamweaver 1
CHƯƠNG 3 GIAO DIỆN WEBSITE 1
1 Bảng tổng quát các trang đã thiết kế 1
2 Đặc tả các giao diện 1
2.1 Giao diện trang chủ 1
2.2 Giao diện đăng ký 1
2.3 Giao diện đăng nhập 1
2.4 Giao diện trang giới thiệu 1
2.5 Giao diện truyện yêu thích nhất 1
2.6 Giao diện các danh mục tiểu thuyết theo thể loại 1
Trang 42.7 Danh mục sản tiểu thuyết nguồn truyện 1
2.8 Giao diện ngày tháng năm 1
2.9 Giao diện tiểu thuyết hot 1
2.10 Giao diện liên kết website 1
3 Giao diện chi tiết một số sản phẩm 1
3.1 Giao diện chi tiết tiểu thuyết đồ nhi, vi sư không hạ sơn 1
3.2 Giao diện chi tiết tiểu thuyết nguyên lai ta là cao nhân tuyệt thế 1
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ị 1
3.6 Chi tiết tiểu thuyết Từ đại thụ bắt đầu tiến hóa 1
CHƯƠNG 4 KẾT LUẬN 1
1 Thành quả đạt được 1
2 Các công việc chưa làm được và chưa hoàn thành 1
CHƯƠNG 5 PHƯƠNG HƯỚNG PHÁT TRIỂN CỦA WEBSITE 1
TÀI LIỆU THAM KHẢO 1
Trang 5DANH MỤC H5NH
Hình 1: Trang chủ 1
Hình 2: Giao diện đăng ký 1
Hình 3: Giao diện đăng nhập 1
Hình 4: Giao diện giới thiệu 1
Hình 5: Giao diện truyện yêu thích nhất 1
Hình 6 : Giao diện danh mục tiểu thuyết theo thể loại 1
Hình 7: Giao diện tiểu thuyết theo thể loại huyền huyễn 1
Hình 8 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 1
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 1
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 1
Hình 14: Danh mục tiểu thuyết theo nguồn truyện 1
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 1
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 1
Hình 19: Giao diện lịch ngày tháng năm 1
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 1
Hình 23: Giao diện chi tiết tiểu thuyết nguyên lai ta là cao nhan tuyệt thế 1
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 một 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ị 1
Hình 27 Giao diện chi tiết tiểu thuyết Từ đại thụ bắt đầu tiến hóa 1
Trang 6hổ trợ trên nhìu phương diện và nhiều tính năng đó chúng ta có thể thiết kế các websitemột cách nhanh chóng với giao diện đẹp và thân thiện với người dùng Với các yếu tốtrên em cũng mạnh dạng thiết kế một website về 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 mình Đây cũng là đề tài em chọntrong bài tiểu luận kết thúc học phần môn thiết kế web Website này sẽ đáp ứng nhucầu mua tiểu thuyết của người dùng bằng thương mại điện tử
CHƯƠNG 2 Tiểu luận này bao gồm các chương:
CHƯƠNG 3 Chương 1: Tổng quan đề tài website
CHƯƠNG 4 Chương 2: Giới thiệu công nghệ sử dụng
CHƯƠNG 5 Chương 3: Giao diện website
CHƯƠNG 6 Chương 4: Kết luận
CHƯƠNG 7 Chương 5: Phương hướng phát triển của website
CHƯƠNG 8
CHƯƠNG 9
Trang 7CHƯƠNG 10 TỔNG QUAN ĐỀ TÀI WEBSITE
1 Tên đề tài thực hiện
CHƯƠNG 11 THIẾT KẾ WEBSITE BÁN TIỂU THUYẾT MẠNG TTM
1 Đối tượng của đề tài thực hiện
CHƯƠNG 15 Đối tượng chính là các quyễn tiểu thuyết đã được dịch từ b.faloo.com,
và một số ngồn khác trong nước
1 Sơ lượt các trang chính của website sẽ thiết kế
CHƯƠNG 16 Trang chủ: Đây là trang giới thiệu các sản phẩm vừa được cập nhật CHƯƠNG 17 Trang Truyện yêu thích nhất: Đây là trang cung cấp cho khách hàng
thông tin các sản phẩm đang được yêu thích nhất
CHƯƠNG 18 Trang đăng ký :Khách hàng có thể đăng ký tài khoản để trở thành
khách hàng của 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 của trang
CHƯƠNG 20 Trang Giới thiệu: Đây là trang giúp cho khách hàng xem được thông
tin chung của của cửa hàng
CHƯƠNG 21 Trang liên hệ: Đây là trang mà khách hàng có thể lấy thông tin liên hệ
với chủ cửa hàng
CHƯƠNG 22 Trang sản phẩm: Đây là trang cho khách hàng xem các sản phẩm theo
thể loại hoặc theo nguồn
CHƯƠNG 23 Trang chi tiết sản phẩm: Đây là trang khách hàng nhấn vào từng sản
phẩm để xem thông tin chi tiết của sản phẩm đó
CHƯƠNG 24
CHƯƠNG 25
Trang 8CHƯƠNG 26 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG
1 Giới thiệu về HTML.
1.1 HTML là gì?
CHƯƠNG 27 HTML là chữ viết tắt của Hypertext Markup Language Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng
CHƯƠNG 28 HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó khôngthể tạo ra các chức năng “động” được Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web
CHƯƠNG 29 HTML là ngôn ngữ để xuất bản siêu văn bản trên World Wide Web Nó
sẽ cho chúng ta biết được một trang web sẽ được hiển thị như thế nào trên trình duyệt.CHƯƠNG 30 HTML là ngôn ngữ xác định cấu trúc của thông tin
CHƯƠNG 31 HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiện thị văn bản và các thông tin khác, cung cấp siêu liên kết tới các tài liệu khác
1.1 Công dụng của HTML.
CHƯƠNG 32 Thiết kế được nội dung và hình thức của trang web
CHƯƠNG 33 Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trực tuyến bằng cách dùng các liên kết được chèn vào trang web
CHƯƠNG 34 Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người dùng, quản lý giao dịch…
CHƯƠNG 35 Thêm vào đối tượng các hình ảnh video, âm thanh, …
1.1 Định dạng của HTML.
CHƯƠNG 36 Là một tập tin có phần mở rộng là htm hoặc html
CHƯƠNG 37 Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi là
Tag(thẻ), thường được đặt xung quanh một khối văn bản nào đó
CHƯƠNG 38 Thông thường, một website sẽ có nhiều HTML document (ví dụ: trang chủ, trang blog, trang liên hệ, …) và mỗi trang con như vậy sẽ có một tệp HTML riêng Mỗi tài liệu HTML bao gồm 1 bộ tag (hay còn gọi là element) Nó tạo ra một cấu trúc tương tự như cây thư mục với các heading, section, paragraph, … và một số khối nội dung khác Hầu hết tất cả các HTML element đều có một tag mở và một tag đóng với cấu trúc <tag></tag>
CHƯƠNG 39 Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…
và được sử dụng nhiều nhất đó là adobe dreamweaver
CHƯƠNG 40 Bạn có thể xem chúng bằng các trình duyệt web hiện hành như Google Chrome, Firefox, Safari, … Nhiệm vụ của trình duyệt là đọc những file HTML này và
Trang 9“biến đổi” chúng thành một dạng nội dung visual trên Internet sao cho người dùng có thể xem và hiểu được chúng.
1.1 Một số ưu điểm nổi bật của HTML.
CHƯƠNG 41 Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớnCHƯƠNG 42 Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay
CHƯƠNG 43 Học HTML khá đơn giản
CHƯƠNG 44 Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao
CHƯƠNG 45 Sử dụng mã nguồn mở, hoàn toàn miễn phí
CHƯƠNG 46 HTML là chuẩn web được vận hành bởi W3C
CHƯƠNG 47 Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.js, …)
CHƯƠNG 50 Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer
CHƯƠNG 51 Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví
dụ, một số trình duyệt cũ không render được tag mới Do đó, dù trong HTML
document có sử dụng các tag này thì trình duyệt cũng 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 năng mới của HTML
1 Giới thiệu về ngôn ngữ CSS.
2.2 Công dụng của CSS.
Trang 10CHƯƠNG 55 CSS cung cấp nhiều thuộc tính trình bày dành cho các đối tượng với sự sáng tạo trong việc kết hợp các thuộc tính giúp mang lại hiệu quả cao.
CHƯƠNG 56 CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên mọi hệ điều hành
CHƯƠNG 57 CSS đưa ra phương thức áp dụng từ một file CSS ở ngoài Có hiệu quả đồng bộ khi tạo một website có hàng trăm trang hay khi muốn thay đổi một thuộc tính trình bày nào đó
CHƯƠNG 58 CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn
1 Giới thiệu về ngôn ngữ Javascript.
CHƯƠNG 61 JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn
CHƯƠNG 62 JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểuđối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học Nhưng JavaScript không là ngôn ngữ hướng đối tượng như C++/Java
3.2 Cách nhúng Javascript.
CHƯƠNG 63 Sử dụng câu lệnh và hàm trong cặp thẻ <script>
CHƯƠNG 64 Sử dụng các File nguồn Javascript
CHƯƠNG 65 Sử dụng một biểu thức làm giá trị của một thuộc tính HTML
CHƯƠNG 66 Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó
1 Giới thiệu về Adobe Dreamweaver
CHƯƠNG 67 Web trong tiểu luận này được thiết kế bằng Adobe Dreamweaver CS6CHƯƠNG 68 Adobe Dreamweaver là một công cụ xử lý mạnh mẽ dành cho những người thiết kế web, người dùng có thể tự mình lập trình và phát triển ứng dụng web ở nhiều cấp độ Nếu chỉ dừng ở mức độ hiểu biết chưa nhiều về các ngôn ngữ lập trình web thì Dreamweaver vẫn đáp ứng được nhu cầu thiết kế Website chuyên nghiệp.CHƯƠNG 69 Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạo nhanh các trang web mà không cần các dòng mã Bạn có thể xem tất cả các thành phần trong website của bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 văn
Trang 11bản Bạn có thể nâng cao sản phẩm của bạn bằng cách tạo và sửa các ảnh trong
Macromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vào Dreamweaver Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa việc chèn Flash vào trang web Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạo nhanh các trang web mà không cần các dòng mã Bạn có thể xem tất cả các thành phần trong website của bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 văn bản Bạn có thể nâng cao sản phẩm của bạn bằng cách tạo và sửa các ảnh trong Macromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vào Dreamweaver Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa việc chèn Flash vào trang web
CHƯƠNG 70 Dreamweaver cũng cho phép bạn Thiết kế các ứng dụng web động dựa theo dữ liệu sử dụng công nghệ máy chủ như CFML, ASP.NET, ASP, JSP, và PHP Nếu sở thích của bạn là làm việc với dữ liệu XML, Dreamweaver cung cấp những công cụ cho phép bạn dễ dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệu XML trên trang web của bạn
CHƯƠNG 71 Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mình những đối tượng và yêu cầu, chỉnh sửa shortcut bàn phím và thậm chí viết mã
JavaScript để mở rộng những khả năng của Dreamweaver với những hành vi mới, những chuyên gia giám định Property mới và những báo cáo site mới
Trang 12CHƯƠNG 87
CHƯƠNG 88
CHƯƠNG 89
CHƯƠNG 90
CHƯƠNG 91 GIAO DIỆN WEBSITE
1 Bảng tổng quát các trang đã thiết kế
CHƯƠNG 92 Tên trang CHƯƠNG 93 Mô tả nội dung chính
CHƯƠNG 94 Tieuthuyetmang.html CHƯƠNG 95 Trang chủ
CHƯƠNG 96 Trangdangky.html CHƯƠNG 97 Trang đăng ký
CHƯƠNG 98 Trangdangnhap.html CHƯƠNG 99 Trang đăng nhập
CHƯƠNG 100 Tranggioithieu.html CHƯƠNG 101 Trang giới thiệu về webCHƯƠNG 102 Tranglienhe.html CHƯƠNG 103 Trang lấy thông tin liên
hệCHƯƠNG 104 Truyenyeuthichnhat.htm
Trang 13CHƯƠNG 124 Tieuthuyettheonguon2.h
tml
CHƯƠNG 126 Tieuthuyettheonguon3.h
tml
CHƯƠNG 128 Trangsanpham.html CHƯƠNG 129 Các trang thông tin chi
tiết của tiểu thuyết(tiểu thuyết mới cập nhật ở trang chủ)
Trang 141 Đặc tả các giao diện
2.1 Giao diện trang chủ
CHƯƠNG 141 Trang này cho phép người dùng xem thông tin sản phẩm mới nhất, ngoài ra còn có thể sử các menu dọc, ngang để sang trang khác,
CHƯƠNG 142
CHƯƠNG 143 Hình 1: Trang chủCHƯƠNG 144 Trang web được chia thành các phần như sau:
CHƯƠNG 145 Phần 1: Logo của trang web, nút đăng nhập, đăng ký, giỏ hàng.CHƯƠNG 146 Phần 2: Menu Ngang
Trang 15CHƯƠNG 147 Bao gồm các mục sau: Trang chủ, giới thiệu, truyện yêu thích nhất, liên hệ mỗi mục liên kết với một trang có thông tin như tên mục đó.
CHƯƠNG 148 Phần 3: Chạy hình ngang Một số sản phẩm tiêu biểu
CHƯƠNG 149 Phần 4: Phần bên trái là danh mục tiểu thuyết theo thể loại, tiểu thuyếttheo nguồn truyện, được liên kết với các trang có tên mục đó, lịch ngày tháng năm.CHƯƠNG 150 Phần 5: Phần giữa là các sản phẩm được cập nhập mới nhất, liên kết với chi tiết của các sản phẩm đó
CHƯƠNG 151 Phần 6: Phần bên phải là tiểu thuyết hot nhất được bán nhìu nhất, mụcliên kết website và mục thống kê truy cập
CHƯƠNG 152 Phần 7: Footer
2.2 Giao diện đăng ký
CHƯƠNG 153 Trang này cho phép người dùng tạo một tài khoảng riêng cho bản thânmình và trở thành một khách hàng của cửa hàng
CHƯƠNG 154
CHƯƠNG 155 Hình 2: Giao diện đăng kýCHƯƠNG 156
Trang 162.3 Giao diện đăng nhập.
CHƯƠNG 162 Trang này cho phép người dùng đăng nhập vào hệ trang web để có thểmua được sản phẩm của trang
CHƯƠNG 163
CHƯƠNG 164 Hình 3: Giao diện đăng nhập
2.4 Giao diện trang giới thiệu.
CHƯƠNG 165 Trang này cung cấp cho khách hàng cái nhìn khái quát về trang web,
về nguyên tắc hoạt động cũng như phương hướng kinh doanh của web
Trang 17CHƯƠNG 166
CHƯƠNG 167 Hình 4: Giao diện giới thiệu
2.5 Giao diện truyện yêu thích nhất.
CHƯƠNG 168 Trang này cho khách hàng xem được các sản phẩm được yêu thích củawed
Trang 18CHƯƠNG 169
CHƯƠNG 170 Hình 5: Giao diện truyện yêu thích nhất
2.6 Giao diện các danh mục tiểu thuyết theo thể loại.
CHƯƠNG 171 Hình 6 : Giao diện danh mục tiểu thuyết theo thể loại
Trang 19Menu chứa các loại tiểu thuyết theo thể loại khách hàng có thể chọn thể loại sản phẩm mình thích để đến trang chỉ có một loại tiểu thuyết thể loại đó.
2.6.1 Giao diện tiểu thuyết theo thể loại huyền huyễn
Hình 7: Giao diện tiểu thuyết theo thể loại huyền huyễn