TIỂU LUẬN MÔN HỌC THIẾT KẾ WEBSITE THIẾT KẾ WEBSITE BÁN GAME CHO CÔNG TY

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
VIỆN KỸ THUẬT CÔNG NGHỆ

TIỂU LUẬN MÔN HỌC
THIẾT KẾ WEBSITE

THIẾT KẾ WEBSITE
BÁN GAME CHO CÔNG TY NDG
GVHD: THS. NGUYỄN HỮU VĨNH
SVTH: NGÔ VĂN HƯNG
MSSV: 2024801030009
LỚP: KTPM 01

NH Ư NG – 4/2021


Tiểu luận mơn thiết kế website
LỜI NĨI ĐẦU
Hiện nay, trên thế giới lượng người chơi game ngày một tăng lên theo báo cáo của
DFC Intelligence cho thấy rằng đến giữa năm 2020 đã có đến 3,1 tỉ người chơi game
trên thế giới (khoảng 40% dân số thế giới).Với sự phát triển đó, thị trường game cũng
phát triển mạnh mẽ theo cùng với các wesite mua bán game. Hơn nữa, các website này
cịn giúp con 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ủa con người. Giờ đây, con người có thể
tiếp cận nhanh chóng với các tựa game mới hay và nhanh chóng chỉ cần vài thao tác
đơn giản mua mọi game theo ý muốn và các website mua bán game trên mạng sẽ giúp
ta làm được điều đó. Chính vì vậy, các cơng nghệ mã nguồn mở trở nên được chú ý vì
các tính năng của nó. Giá thành rẻ và được hỗ trợ rất nhiều trên mạng sẽ giúp ta nhanh
chóng Thiết kế các website mua bán game thân thiện và dễ sử dụng với người dùng.
Chính vì vậy trong bài báo cáo này tôi chọn đề tài về: “Thiết kế website bán game cho
công ty NDG”. Đây là một hệ thống đơn giản nhưng đủ mạnh để cho phép nhanh

chóng Thiết kế các website mua bán trên Internet.
Đề tài tiểu luận gồm các phần được phân chương như sau:
Chương 1: Tổng quan về đề 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 và hướng phát triển

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

i


Tiểu luận mơn thiết kế website

MỤC LỤC
LỜI NĨI ĐẦU ................................................................................................................ i
MỤC LỤC HÌNH ẢNH............................................................................................... iv
DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT ..........................................................v
CHƯ NG 1. TỔNG QUAN VỀ ĐỀ TÀI ....................................................................1
1.

Tên Đề Tài. .............................................................................................................1

2.

Mục Tiêu của Đề Tài. .............................................................................................1

3.

Ý Nghĩa Của Đề Tài. ..............................................................................................1

4.

Đối Tượng Của Đề Tài. ..........................................................................................1

5.

Một Số Trang Chính Của Website..........................................................................1

6.

Sơ đồ tổng quan các trang chính .............................................................................2

CHƯ NG 2. GIỚI THIỆU CÔNG NGHỆ .................................................................3
1.

Giới Thiệu Về HTML. ............................................................................................3
1.1

HTML là gì? ................................................................................................3

1.2

Cơng dụng của HTML. ...............................................................................3

1.3

Định dạng của HTML. ................................................................................3

2.

Giới thiệu về Adobe Dreamweaver ........................................................................3

3.

Ngôn ngữ CSS. .......................................................................................................4

4.

Ngôn ngữ Javascript. ..............................................................................................4

CHƯ NG 3: GIAO IỆN CHƯ NG TR NH ..........................................................6
1.

Đặc Tả Giao Diện ...................................................................................................6

1.1 Giao diện trang chủ .................................................................................................6
1.2 Giao diện trang giới thiệu .......................................................................................7
1.3 Giao diện trang liên hệ ............................................................................................7
1.4 Giao diện trang đăng ký ..........................................................................................8
1.5 Giao diện trang đăng nhập ......................................................................................9
1.6 Giao diện trang danh mục game theo thể loại ......................................................10
1.6.1Giao diện danh mục game hành động........................................................11
1.6.2Giao diện danh mục game nhập vai...........................................................12
1.6.3Giao diện danh mục game mô phỏng.........................................................13
1.6.4Giao diện danh mục game phiêu lưu..........................................................14
1.6.5Giao diện danh mục game thể thao............................................................15
SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

ii

Tiểu luận môn thiết kế website
1.6.6 Giao diện danh mục game đố vui..............................................................16
1.6.7 Giao diện danh mục game thẻ bài............................................................17
1.7 Giao diện danh mục theo nhà sản xuất..............................................................18
1.7.1Giao diện nhà sản xuất NetEase.................................................................18
1.7.2Giao diện nhà sản xuất Electronic Arts.......................................................19
1.7.3Giao diện nhà sản xuất Ubisoft..................................................................20
1.7.4Giao diện nhà sản xuất Rockstar Games.....................................................21
1.7.5 Giao diện nhà sản xuất Epic Games ............................................................22
1.7.6 Giao diện nhà sản xuất Riot Games .......................................................23
1.8 Giao diện trang chi tiết sản phẩm game................................................................23
1.8.1 Chi tiết game Doom Eternal – Ác mộng vô tận ........................................24
1.8.2 Chi tiết game Valorant ..............................................................................25
1.8.3 Chi tiết game Indentity V ..........................................................................26
1.8.4 Chi tiết game Grand Thèt Auto V .............................................................27
1.8.5 Chi tiết game Apex Legends .....................................................................28
1.8.6 Chi tiết game Hitman 3 .............................................................................29
CHƯ NG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN..........................................30
1.

Kết quả đạt được:..........................................................................................30

2.

Việc chưa làm được: .....................................................................................30

3.

Hướng phát triển của đề tài ..........................................................................30

TÀI LIỆU KHAM KHẢO ..........................................................................................32

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

iii


Tiểu luận mơn thiết kế website

DANH MỤC HÌNH ẢNH
Hình 1.1 Giao diện trang chủ .................................................................................6
Hình 1. 2 Giao diện trang giới thiệu ......................................................................7
Hình 1. 3 Giao diện trang liên hệ ............................................................................8
Hình 1. 4 Giao diện trang đăng ký ..........................................................................9
Hình 1. 5 Giao diện trang đăng nhập ....................................................................10
Hình 1. 6 Giao diện trang danh mục game theo thể loại ......................................10
Hình 1.6. 1 Giao diện danh mục game hành động .......................................11
Hình 1.6. 2 Giao diện danh mục game nhập vai ..........................................12
Hình 1.6. 3 Giao diện danh mục game mơ phỏng .......................................13
Hình 1.6. 4 Giao diện danh mục game phiêu lưu ........................................14
Hình 1.6. 5 Giao diện danh mục game thể thao ...........................................15
Hình 1.6. 6 Giao diện danh mục game đố vui .............................................16
Hình 1.6. 7 Giao diện danh mục game thẻ bài.......................................... 17
Hình 1. 7 Giao diện thương hiệu .........................................................................18
Hình 1.7 1 Giao diện nhà sản xuất NetEase .................................................18
Hình 1.7 2 Giao diện nhà sản xuất Electronic Arts......................................19
Hình 1.7 3 Giao diện nhà sản xuất Ubisoft ..................................................20
Hình 1.7 4 Giao diện nhà sản xuất Rockstar Games....................................21

Hình 1.7 5 Giao diện nhà sản xuất Epic Games ..........................................22
Hình 1.7. 6 Giao diện nhà sản xuất Riot Games....................................... ..23
Hình 1.8. 1 Giao diện game Doom Etenal – Ác mộng vơ tận ..............................24
Hình 1.8. 2 Giao diện game Valorant ...................................................................25
Hình 1.8. 3 Giao diện game Indentity V ...............................................................26
Hình 1.8. 4 Giao diện game Grand Theft Auto V ................................................27
Hình 1.8. 5 Giao diện game Apex Legends ..........................................................28
Hình 1.8. 6 Giao diện game Hitman 3............................................................... 29

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

iv


Tiểu luận môn thiết kế website

MỤC LỤC
DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT
Từ viết tắt

Giải thích

CSDL

Cơ sở dữ liệu

ĐVT

Đơn vị tính

CNTT

Cơng Nghệ thơng tin

SP

Sản phẩm

SVTH: NGƠ VĂN HƯNG – LỚP D20KTPM01

v


Tiểu luận môn thiết kế web
CHƯ NG 1. TỔNG QUAN VỀ ĐỀ TÀI
1. Tên Đề Tài.
+ THIẾT KẾ WEBSITE BÁN GAME CHO CÔNG TY NDG
2. Mục Tiêu của Đề Tài.
+ Thiết kế Website bán game cho công ty NDG
3. Ý Nghĩa Của Đề Tài.
+ Đưa sản phẩm của công ty đến đến gần hơn với người tiêu dùng.
+ Quảng bá thương hiệu.
4. Đối Tượng Của Đề Tài.
+ Đối tượng nghiên cứu chủ yếu là các sản phẩm game
5. Một Số Trang Chính Của Website.
+ Trang chủ: Đây là trang giới thiệu sơ lược về các game mới của cửa hàng.
+ Trang Giới thiệu: Đây là trang giúp cho khách hàng xem biết thêm về thông tin
của Shop.
+ Trang liên hệ: Đây là trang mà khách hàng có thể liên hệ với shop
+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng của trang.

+ Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua các game của
trang.
+ Trang sản phẩm: Đây là trang khách hàng xem hoặc tham khảo các tựa game của
cửa hàng có sẵn để lựa chọn.
+ 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 game
để xem chi tiết.

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

1


Tiểu luận môn thiết kế web
6.Sơ đồ tổng quan các trang chính
Trang web NDG

Trang chủ

Giới thiệu

Liên hệ

Sản phẩm

Game theo nhà
sản xuất

Đăng kí
,Đăng nhập

Giỏ hàng

Game theo
thể loại

Hành động
NetEase

Mơ phỏng
Riot Game
Nhập vai

Electronic
Arts

Phiêu lưu
Ubisoft

Thể thao

Rockstar
Games

Chiến
thuật
Epic
Game

Đố vui

Khác
Thẻ bài

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

2


Tiểu luận môn thiết kế web
CHƯ NG 2. GIỚI THIỆU CƠNG NGHỆ
1. Giới Thiệu Về HTML.
1.1 HTML là gì?
HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu văn bản) là ngôn
ngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõ một trang
Web được hiển thị như thế nào trong trình duyệt.
Ngơn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trình duyệt
(Web browsers) cách hiển thị các thành phần của trang như text và graphics.
HTML là ngôn ngữ xác định cấu trúc của thông tin.
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.2 Công dụng của HTML.
Thiết kế được nội dung và hình thức của trang web.
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.
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….
Thêm vào đối tượng các hình ảnh video, âm thanh…..
1.3 Định dạng của HTML.
Là một tập tin có phần mở rộng là .htm hoặc .html
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 đó.
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.
2. Giới thiệu về Adobe reamweaver
Macromedia Dreamweaver 8 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 cùng các 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 trong môi
trường biên soạn trực quan, Dreamweaver cung cấp cho bạn những cơng cụ hữu ích để
nâng cao kinh nghiệm thiết kế web của bạn.
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
SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

3


Tiểu luận môn thiết kế web
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.
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.
Dreamweaver có thể tùy biến hồn tồ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.
3. Ngôn ngữ CSS.
CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài
liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
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.
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.
CSS đưa ra phương thức áp dụng từ một file CSS ở ngồ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 đó.
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.
4. Ngôn ngữ Javascript.
Với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Web động có khả
năng đáp ứng các sự kiện từ phía người dùng.
Hãng Netscape đã đưa ra ngơn ngữ script có tên là LiveScript để thực hiện chức
năng này. Sau đó đổi tên thành JavaScript để tận dụng tính đại chúng của ngơn ngữ lập
trình Java.

SVTH: NGƠ VĂN HƯNG – LỚP D20KTPM01

4


Tiểu luận môn thiết kế web
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.
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.

SVTH: NGƠ VĂN HƯNG – LỚP D20KTPM01

5


Tiểu luận môn thiết kế web
CHƯ NG 3: GIAO DIỆN CHƯ NG TR NH
1. Đặc Tả Giao iện
1.1 Giao diện trang chủ
 Mục đích: Chức năng này cho phép người dùng xem danh sách Game nổi bật
và mới nhất
 Trong giao diện cho người dùng, chọn kiểu hiển thị theo từng Loại Game.
 Mô tả chức năng: Trang này cho phép người dùng xem thơng tin sản phẩm
game ngồi ra cịn có thể sử các menu dọc,ngang để sang trang khác,...

Hình 1.1 Giao diện trang chủ
Trang web được chia làm 7 phần:
- Phần 1: Logo của trang web ,bên phải là phần đăng nhập, đăng kí và giỏ hàng

SVTH: NGƠ VĂN HƯNG – LỚP D20KTPM01

6


Tiểu luận môn thiết kế web
- Phần 2 - Menu ngang: Bao gồm các mục: trang chủ, giới thiệu, liên hệ. Mỗi danh
mục liên kết đến một trang với nội dung khác nhau.
- Phần 3 : Hình ảnh của các tựa game đang hot nhất hiện nay
- Phần 4: Bên trái là danh mục các sản phẩm game theo thể loại và nhà sản xuất

được liên kết với các trang khác nhau và lịch ngày tháng năm.
- Phần 5: Bên phải hiển thị sản phẩm game chơi nhiều nhất được sử dụng thẻ
Marquee để chạy và phần nạp thẻ, mua thẻ liên kết tới các trang khác.
- Phần 6: Ở giữa chứa các game nổi bật và mới nhất được liên kết với trang chi tiết
sản phẩm
- Phần 7: Footer
1.2 Giao diện trang giới thiệu
 Mục đích: Khi vào trang này, khách hàng sẽ biết được một số nét khái quát về
shop, lịch sử hình thành và phát triển, định hướng phát triển trong tương lai.

Hình 1.2 Giao diện trang giới thiệu
1.3 Giao diện trang liên hệ
 Mục đích:Trang này mục đích để khách hàng có thể liên lạc với shop.
SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

7


Tiểu luận môn thiết kế web
 Chức năng: Trong giao diện này cho phép người dùng gửi những thông tin về
sản phẩm, thái độ phục vụ, cũng như phản hồi những sai phạm của nhân viên về shop.

Hình 1.3 Giao diện trang liên hệ
1.4 Giao diện trang đăng ký
 Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng của trang.
 Chức năng: Cho phép khách hàng có thể đăng ký thơng tin để trở thành khách
hàng

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

8


Tiểu luận mơn thiết kế web

Hình 1.4 Giao diện trang đăng ký

1.5 Giao diện trang đăng nhập
 Mục Đích:Người dùng đăng nhập vào web
 Chức năng: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

9


Tiểu luận mơn thiết kế web

Hình 1. 5 Giao diện trang đăng nhập
1.6 Giao diện trang danh mục game theo thể loại
 Mục Đích: Thanh menu chứa danh sách các loại sản phẩm game của cửa hàng.
Khách hàng có thể sử dụng menu này để lựa chọn sản phẩm mà mình cần tìm.
 Sử dụng danh mục sản phẩm để chọn loại sản phẩm mà mình cần.

Hình 1.6 Giao diện trang danh mục game theo thể loại

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

10

Tiểu luận môn thiết kế web
1.6.1

Giao diện danh mục game hành động

Hình 1.6.1 Giao diện danh mục game hành động

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

11


Tiểu luận môn thiết kế web
1.6.2

Giao diện danh mục game nhập vai

Hình 1.6.2 Giao diện danh mục game nhập vai

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

12


Tiểu luận môn thiết kế web
1.6.3

Giao diện danh mục game mơ phỏng

Hình 1.6.3 Giao diện danh mục game mơ phỏng

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

13


Tiểu luận môn thiết kế web
1.6.4

Giao diện danh mục game phiêu lưu

Hình 1.6.4 Giao diện danh mục game phiêu lưu

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

14


Tiểu luận môn thiết kế web
1.6.5

Giao diện danh mục game thể thao

Hình 1.6.5 Giao diện danh mục game thể thao

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

15

Tiểu luận môn thiết kế web
1.6.6

Giao diện danh mục game đố vui

Hình 1.6.6 Giao diện danh mục game đố vui

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

16


Tiểu luận môn thiết kế web
1.6.7

Giao diện danh mục game thẻ bài

Hình 1.6.7 Giao diện danh mục game thẻ bài

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

17


Tiểu luận môn thiết kế web
1.7 Giao diện danh mục theo nhà sản xuất
 Mục Đích: Thanh menu chứa danh sách các loại sản phẩm game của cửa hàng
theo nhà sản xuất game. Khách hàng có thể sử dụng menu này để lựa chọn sản
phẩm mà mình cần tìm.

 Sử dụng danh mục sản phẩm để chọn nhà sản xuất mà mình cần.

Hình 1.7
1.7.1

Giao diện thương hiệu

Giao diện nhà sản xuất NetEase

Hình 1.7.1 Giao diện nhà sản xuất NetEase
SVTH: NGƠ VĂN HƯNG – LỚP D20KTPM01

18


Tiểu luận môn thiết kế web
1.7.2

Giao diện nhà sản xuất Electronic Arts

Hình 1.7.2 Giao diện nhà sản xuất Electronic Arts

SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01

19