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, giới lượng người chơi game ngày tăng lên theo báo cáo DFC Intelligence cho thấy đến năm 2020 có đến 3,1 tỉ người chơi game giới (khoảng 40% dân số giới).Với phát triển đó, thị trường game phát triển mạnh mẽ theo với wesite mua bán game Hơn nữa, website cịn giúp người 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 sở thích người Giờ đây, người tiếp cận nhanh chóng với tựa game hay nhanh chóng cần vài thao tác đơn giản mua game theo ý muốn website mua bán game mạng giúp ta làm điều Chính vậy, 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 mua bán game thân thiện dễ sử dụng với người dùng Chính báo cáo chọn đề tài về: “Thiết kế website bán game cho công ty NDG” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Thiết kế website mua bán 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: 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 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ủa Website Sơ đồ tổng quan trang .2 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 Giới thiệu Adobe Dreamweaver 3 Ngôn ngữ CSS 4 Ngôn ngữ Javascript 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 .7 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 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ô .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ẻ 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 .29 CHƯ NG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 30 Kết đạt được: 30 Việc chưa làm được: .30 Hướng phát triển đề 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ủ Hình Giao diện trang giới thiệu Hình Giao diện trang liên hệ Hình Giao diện trang đăng ký Hình Giao diện trang đăng nhập 10 Hình Giao diện trang danh mục game theo thể loại 10 Hình 1.6 Giao diện danh mục game hành động .11 Hình 1.6 Giao diện danh mục game nhập vai 12 Hình 1.6 Giao diện danh mục game mơ .13 Hình 1.6 Giao diện danh mục game phiêu lưu 14 Hình 1.6 Giao diện danh mục game thể thao 15 Hình 1.6 Giao diện danh mục game đố vui .16 Hình 1.6 Giao diện danh mục game thẻ 17 Hình Giao diện thương hiệu 18 Hình 1.7 Giao diện nhà sản xuất NetEase 18 Hình 1.7 Giao diện nhà sản xuất Electronic Arts 19 Hình 1.7 Giao diện nhà sản xuất Ubisoft 20 Hình 1.7 Giao diện nhà sản xuất Rockstar Games 21 Hình 1.7 Giao diện nhà sản xuất Epic Games 22 Hình 1.7 Giao diện nhà sản xuất Riot Games 23 Hình 1.8 Giao diện game Doom Etenal – Ác mộng vô tận 24 Hình 1.8 Giao diện game Valorant 25 Hình 1.8 Giao diện game Indentity V .26 Hình 1.8 Giao diện game Grand Theft Auto V 27 Hình 1.8 Giao diện game Apex Legends 28 Hình 1.8 Giao diện game Hitman 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ở 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 TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE BÁN GAME CHO CÔNG TY NDG Mục Tiêu Đề Tài + Thiết kế Website bán game cho công ty NDG Ý 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 sản phẩm game Một Số Trang Chính Của Website + Trang chủ: Đây trang giới thiệu sơ lược game cửa hàng + Trang Giới thiệu: Đây trang giúp cho khách hàng xem biết thêm thông tin Shop + Trang liên hệ: Đây trang mà khách hàng 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 trang + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua game trang + Trang sản phẩm: Đây trang khách hàng xem tham khảo tựa game 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 sản phẩm game để xem chi tiết SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 Tiểu luận môn thiết kế web 6.Sơ đồ tổng quan trang 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ô 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ẻ SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 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 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 reamweaver 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: NGÔ VĂN HƯNG – LỚP D20KTPM01 Tiểu luận môn 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: NGƠ VĂN HƯNG – LỚP D20KTPM01 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 loại sản phẩm game cửa hàng theo nhà sản xuất game Khách hàng sử dụng menu để lựa chọn sản phẩm mà cần tìm  Sử dụng danh mục sản phẩm để chọn nhà sản xuất mà 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 Tiểu luận môn thiết kế web 1.7.3 Giao diện nhà sản xuất Ubisoft Hình 1.7.3 Giao diện nhà sản xuất Ubisoft SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 20 Tiểu luận môn thiết kế web 1.7.4 Giao diện nhà sản xuất Rockstar Games Hình 1.7.4 Giao diện nhà sản xuất Rockstar Games SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 21 Tiểu luận môn thiết kế web 1.7.5 Giao diện nhà sản xuất Epic Games Hình 1.7.5 Giao diện nhà sản xuất Epic Games SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 22 Tiểu luận môn thiết kế web 1.7.6 Giao diện nhà sản xuất Riot Games Hình 1.7.6 Giao diện nhà sản xuất Riot Games 1.8 Giao diện trang chi tiết sản phẩm game  Mục đích: Chức cho phép người dùng xem Tên game, giá, thông tin chi tiết game  Trong giao diện cho người dùng, chọn hiển thị theo Sản Phẩm kích chọn trang chủ SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 23 Tiểu luận môn thiết kế web 1.8.1 Chi tiết game Doom Eternal – Ác mộng vơ tận Hình 1.8.1 Giao diện game Doom Etenal – Ác mộng vô tận SVTH: NGƠ VĂN HƯNG – LỚP D20KTPM01 24 Tiểu luận mơn thiết kế web 1.8.2 Chi tiết game Valorant Hình 1.8.2 Giao diện game Valorant SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 25 Tiểu luận môn thiết kế web 1.8.3 Chi tiết game Indentity V Hình 1.8.3 Giao diện game Indentity V SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 26 Tiểu luận môn thiết kế web 1.8.4 Chi tiết game Grand Thèt Auto V Hình 1.8.4 Giao diện game Grand Theft Auto V SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 27 Tiểu luận môn thiết kế web 1.8.5 Chi tiết game Apex Legends Hình 1.8.5 Giao diện game Apex Legends SVTH: NGƠ VĂN HƯNG – LỚP D20KTPM01 28 Tiểu luận mơn thiết kế web 1.8.6 Chi tiết game Hitman Hình 1.8.6 Giao diện game Hitman SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 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 nay, đặc biệt với phát triển nhanh chóng thể thao điện tử giới việc mua game qua mạng trở nên phổ biến với hầu hết người Hiện người muốn trải nghiệm tựa game với cú nhấp chuột download máy, mua tựa game mà thich cách nhanh chóng khơng phí nhiều thời gian Việc mua bán giúp tiết kiệm thời gian tiền bạc, người lựa chọn sản phẩm game với giá đa dạng tùy vào sở thích người Vì thế, sau tiến hành khảo sát em định Thiết kế trang web bán game mà cụ thể “Thiết kế website bán game công ty NDG”với chức cần thiết cho trang web mua bán cần có, thể thao điện tử nước nhà giới phát triển thị trường game thị trường tiềm tiếp tục phát triển mạnh mẽ sau Website “bán game cho công ty NDG” thứ dùng để quảng bá cho sản phẩm công ty, thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng game thủ tìm mua game mà u thích với giá hợp lí Qua q trình nghiên cứu cố gắng thực hướng dẫn tận tình Giảng viên, 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 game cho công ty NDG, đá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 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 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ì đề tài cịn có nhiều thiếu sót, mong SVTH: NGƠ VĂN HƯNG – LỚP D20KTPM01 30 Tiểu luận mơn thiết kế web thầy giúp đỡ 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:  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: NGÔ VĂN HƯNG – LỚP D20KTPM01 31 Tiểu luận môn 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 WWW: http://www.hiepsiit.com [3] Website https://coccoc.com/search#query=Webcoban.vn SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 32 ... 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... 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ẻ Hình 1.6.7 Giao diện danh mục game thẻ SVTH: NGÔ VĂN HƯNG – LỚP D20KTPM01 17... 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