Tiểu luận môn học thiết kế web thiết kế website game minecraft

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 GAME MINECRAFT GVHD: THS NGUYỄN HỮU VĨNH SVTH: NGUYỄN THÀNH TÍN MSSV: 1824801030213 LỚP: D18PM04 B5NH DƯƠNG – 7/2020 0 KHOA KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ tên giảng viên: Nguyễn Hữu Vĩnh Tên đề tài: THIẾT KẾ WEBSITE GAME MINECRAFT Nội dung nhận xét: Điểm: Bằng số: Bằng chữ: GIẢNG VIÊN CHẤM (Ký, ghi rõ họ tên) NGUYỄN HỮU VĨNH 0 Đồ án mơn thiết kế web LỜI NĨI ĐẦU Trong thời buổi nghành công nghiệp điện tử phát triển mạnh, nhiều tựa game lớn nhỏ không ngừng tạo ra, tạo nên nhiều cạnh tranh lẫn tựa game, MineCraft ngoại lệ, dù MineCraft tựa game phải nói vơ tiếng, biết đến đỉnh cao game giới mở dành cho game thủ Thế MineCraft mờ địa vị vốn có Đối với người trung thành với tựa game lòng cảm thấy nuối tiếc, nên tơi muốn làm điều để quảng bá rộng đến người chưa biết tựa game MineCraft Đó lý tơi thiết kế trang web MineCraft để giới thiệu cho người chưa biết MineCraft biết đến MineCraft, cịn người chơi MineCraft củng vào tìm hiểu thêm điều tuyệt vời khác mà MineCraft đem lại MineCraft không tựa game giải trí mà cịn tựa game sáng tạo đưa vào giảng dạy trường học nước nước, nhầm thúc đẩy tiềm sáng tạo học sinh lỉnh vực kiến trúc xây dựng Quay lại vấn đề việc muốn giới thiệu tựa game đến tầng lớp khác, game thủ khác chưa biết đến MineCraft nên báo cáo chọn đề tài: “Thiết kế website MineCraft” Là trang thông tin cung cấp thêm hiểu biết cho người tựa game MineCraft Đề tài tiểu luận gồm phần phân cươ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: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 i Đồ án mơn thiết kế web MỤC LỤC LỜI NĨI ĐẦU i DANH MỤC HÌNH iii 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 .1 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 .2 1.3 Định dạng HTML 2 Giới thiệu Adobe Dreamweaver .2 Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆ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 1.3 Giao diện trang DOWNLOAD 10 1.4 Giao diện trang SHADER 12 1.5 Giao diện trang đăng ký 14 1.6 Giao diện trang đăng nhập .15 1.7 Giao diện trang Terms & Privacy 16 1.8 Giao diện nhà phát hành 17 Sơ đồ web 18 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 19 Kết đạt được: 19 Việc chưa làm được: 19 Hướng phát triển đề tài .19 TÀI LIỆU KHAM KHẢO 20 SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 ii Đồ án môn thiết kế web DANH MỤC H5NH Hình 1.1 Giao diện trang chủ .5 Hình 1.2.1 Giao diện trang giới thiệu MINECRAFT Hình 1.2.1 Giao diện trang giới thiệu MineCraft Sinh Tồn Hình 1.2.1 Giao diện trang giới thiệu Một Game Xây Dựng Sáng Tạo .9 Hình 1.3.1 Giao diện trang dowload 10 Hình 1.3.2 Giao diện dowload 11 Hình 1.4.1 Giao diện trang Shader giới thiệu .12 Hình 1.4.2 Giao diện trang Shader hướng dẫn 13 Hình 1.5 Giao diện trang đăng ký 14 Hình 1.6 Giao diện trang đăng nhập 15 Hình 1.7 Giao diện Terms & Privacy 16 Hình 1.8 Giao diện nhà phát hành 17 Hình Sơ đồ web chi tiết 18 SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 iii 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 GAME MINECRAFT Mục Tiêu Đề Tài + Thiết kế Website MineCraft server Ý Nghĩa Của Đề Tài + Quảng bá tựa game Minecraft + Giúp người hiểu MineCraft Đối Tượng Của Đề Tài + Đối tượng nghiên cứu đề tài tựa game MineCraft Một Số Trang Chính Của Website + Trang chủ: Đây trang giới thiệu sơ lược game option khác game + Giới thiệu: Đây trang giúp cho người dùng xem biết thêm thông tin MineCraft + Trang đăng ký: Người dùng đăng ký tài khoản để trở thành thành viên trang + Trang đăng nhập: Người dùng đăng nhập tài khoản + Trang Terms & Private: Đây trang điều khoản bạn cần biết chơi Minecraft SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 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 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: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 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 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 SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 Tiểu luận môn thiết kế web 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 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: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 Tiểu luận môn thiết kế web CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR5NH Đặc Tả Giao Diện 1.1 Giao diện trang chủ  Mục đích: Gưởi lời chào đến truy cập vào trang,  Mô tả chức năng: Cho Người dùng thấy logo Game title ngắn miêu tả tựa game MineCraft Hình 1.1 Giao diện trang chủ Trang chủ chia làm phần: - Phần 1: phần header trang phần nằm cố định, dù bạn cuộn xuống nằm dùng position: fixed kèm theo z-index cho z-index: 50 ln, tức đè lên thằng khác miễn z-index thằng nhỏ 50 Phần gồm : Logo trang web, tìm kiếm sử dụng :hover css với thay đổi bạn tương tác với gồm màu trắng đen Và hình ảnh cụ thể : chưa có xẩy ra: bạn trỏ chuộc vào input: SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 Tiểu luận môn thiết kế web bạn trỏ chuộc vào nút tìm: input có nội dung : bạn trỏ chuộc vào input có nội dung: Cuối menu ngang bao gồm mục: giới thiệu, download, shader, đăng nhập hover trắng đen : bạn trỏ chuộc vào mục menu trắng lên chử chuyễn sang màu đen, bạn đưa chuộc khỏi xẽ trở ban đầu: SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 Tiểu luận môn thiết kế web - Phần 2: Với sử dụng “background-attachment:” khung cảnh game có tích hợp shader Nội dung gồm: lời chào cùng, logo MineCraft to phía sau logo gif đóm lửa, title ngắn gọn MineCraft, dù ngắn lại kích thích hứng thủ, tò mò chút thách thức người dùng thử trải nghiệm tựa game Gif đóm lủa làm background cho logo game SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 Tiểu luận môn thiết kế web 1.2 Giao diện trang giới thiệu Trang tọa lạc bên trang chủ, bạn cần cuộn xuống thơi, bạn củng click vào mục giới thiệu menu khách hàng chuyển đến phần giới thiệu lăn cuộn chuộc bạn bị hư, hay bạn lười Trang cho bạn biết số nét khái quát tựa game MineCraft chế độ chơi đặt trưng tựa game Nếu bạn đọc cảm thấy tựa game hay lơi bạn click bào bottom bên phần giới thiệu, đưa bạn đến phần download game, menu củng có phần download củng dẫn đến trang download Phía phần giới thiệu có slide “ MINECRAFT CREATE YOUR WORLD “ chạy từ phải sang trái dùng thẻ marquee Nội dung trang giới thiệu có ba phần: MINECRAFT: giới thiệu chung tựa game Hình 1.2.1 Giao diện trang giới thiệu MINECRAFT SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 Tiểu luận môn thiết kế web MineCraft Sinh Tồn: giới thiệu chế độ mặc định MineCraft, chế độ sinh tồn khám phá giới MineCraft Hình 1.2.1 Giao diện trang giới thiệu MineCraft Sinh Tồn Một Game Xây Dựng Sáng Tạo: nói thề thao tác tự game phá khối lập phương đặt khối lập phương, điều thú vị bạn đặt khối lập phương khác theo cách bạn tạo cơng trình riêng bạn bạn xây thứ gì, khơng có bạn khơng thể xây bạn khơng nghỉ thơi SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 Tiểu luận môn thiết kế web Hình 1.2.1 Giao diện trang giới thiệu Một Game Xây Dựng Sáng Tạo 1.3 Giao diện trang DOWNLOAD Hình 1.3.1 Giao diện trang dowload  Mục đích:Trang mục đích để người dùng tải trải nghiệm tựa game  Chức năng: Tải MineCraft Có ba Gif riều Riều dụng cụ quang trọng minecraft dùng để chặt tất block làm từ SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 10 Tiểu luận mơn thiết kế web Có ba option để bạn chọn, máy bạn Window click vào bottom giửa, MacBook click vào bottom bên trái, Linux click vào bottom bên phải Mỗi nút hover, to bạ đưa chuộc vào, chử sang màu đen Sau bạn click vào nó, tập tin tải từ trang web khác Hình 1.3.2 Giao diện dowload SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 11 Tiểu luận môn thiết kế web 1.4 Giao diện trang SHADER  Mục Đích: Giới thiệu option khác game Shader  Chức năng: Giới thiệu Shader điều shader làm được, hướng dẫn người dùng cách cài đặt sử dụng shader Trang có phần: Phần giới thiệu: giới thiệu cho người dùng hiểu Shader gì, nội dung bên phải hình ảnh minh họa bên trái Hình 1.4.1 Giao diện trang Shader giới thiệu SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 12 Tiểu luận môn thiết kế web Phần hướng dẫn: gồm năm bước cài đặt vi deo hướng dẫn dùng thẻ controls tạo điều khiển dừng, âm lượng, full hình, thời gian Hình 1.4.2 Giao diện trang Shader hướng dẫn SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 13 Tiểu luận môn thiết kế web 1.5 Giao diện trang đăng ký  Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm trang  Chức Năng : Cho phép người dùng đăng ký tài khoản để trở thành thành viên thức cộng đồng MineCrafter Không giống trang giới thiệu, download shader trang đăng ký trang Trang có logo trang bên trái bạn click vào để trở trang chủ đăng kí khơng thành cơng Phần đăng ký giửa với thông tin yêu cầu cần để đăng ký tài khoản Hình 1.5 Giao diện trang đăng ký SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 14 Tiểu luận môn thiết kế web 1.6 Giao diện trang đăng nhập  Mục Đích: người dùng đăng nhập tài khoản  Chức Năng: đăng nhập tài khoản Bạn chọn ĐĂNG NHẬP trang chủ để đến trang đăng nhập Hình 1.6 Giao diện trang đăng nhập SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 15 Tiểu luận môn thiết kế web 1.7 Giao diện trang Terms & Privacy Dùng target="blank" để nhảy sang cửa sổ Hình 1.7 Giao diện Terms & Privacy SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 16 Tiểu luận mơn thiết kế web 1.8 Giao diện nhà phát hành Hình 1.8 Giao diện nhà phát hành Trang có hai phần : Phần tương thích game, tảng game chạy Phần tương end nhà phát hành tựa game: Gồm menu đường dẫn nhà phát hành tựa game MoJang , tảng Java, Link FaceBook, Instagram, YouTobe Logo nhà phát hành, Terms &Private Menu bên trái thiết giống menu header: hover trắng đen SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 17 Tiểu luận môn thiết kế web Sơ đồ web Hình Sơ đồ web chi tiết SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 18 Tiểu luận môn thiết kế web CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Việc tìm kiếm thơng tin vô dễ dàng, trang web MineCraft cho bạn hiểu thêm tựa game Có thể giúp bạn biết thêm nhiều trải nghiệm khác MineCraft Để đáp ứng nhu cầu cho người dùng định thiết kế website MineCraft với thông tin cần thiết dành cho người bắt đầu tìm hiểu tựa game, cho họ cảm thấy hứng thú kích thích sáng tạo họ, từ mở rộng cộng đồng MineCrafter, tiếp tục phát triển MineCraft có thêm nhiều người chơi Qua 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 thông tin tựa game MineCraft đáp ứng thơng tin xác dễ hiểu cho người dùng - Tìm hiểu nắm công cụ để Thiết kế website như: Notepad web MineCraft thiết kế hồn tồn trình viết web notepad , 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, rõ ràng - Phân tích thiết kế chưa hoà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 hạn chế nên chúng em chưa tìm hiểu rõ kỹ đề tài Vì đề tài cịn có nhiều thiếu sót, mong thầy giúp đỡ chúng 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: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 19 Tiểu luận môn thiết kế web TÀI LIỆU KHAM KHẢO - Tài liệu giảng môn “Thiết kế website” thầy Nguyễn Hữu Vĩnh - Website WWW: http://www.hiepsiit.com - Website : https://coccoc.com/search#query=Webcoban.vn SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 20 ... TÍN – LỚP D18PM04 0 17 Tiểu luận môn thiết kế web Sơ đồ web Hình Sơ đồ web chi tiết SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 18 Tiểu luận môn thiết kế web CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN... Tiểu luận môn thiết kế web TÀI LIỆU KHAM KHẢO - Tài liệu giảng môn ? ?Thiết kế website? ?? thầy Nguyễn Hữu Vĩnh - Website WWW: http://www.hiepsiit.com - Website : https://coccoc.com/search#query=Webcoban.vn... đồ web chi tiết 18 SVTH: NGUYỄN THÀNH TÍN – LỚP D18PM04 0 iii 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 GAME MINECRAFT Mục Tiêu Đề Tài + Thiết