基于HTML的《尼尔机械纪元》游戏专题网页设计

Myth丶恋晨 2024-04-06 13:53 117阅读 0赞

目 录  
摘 要 I  
第一章 网站开发的背景知识与相关技术 1  
1.1 相关产业背景知识 1  
1.2 前端开发环境的技术介绍 2  
Visual Studios Code 2  
Photoshop 4  
1.3 前端开发的技术介绍 5  
HTML5 5  
DIV+CSS 6  
JavaScript 7  
第二章 总体设计 9  
2.1 模块化设计总方案 9  
2.2 网站功能结构 9  
2.2.1主页面结构 9  
2.2.2主页面结构 9  
2.3 模块功能设计 10  
2.3.1 主页模块化设计 10  
2.3.2 导航菜单模块化设计 11  
第三章 详细设计 13  
3.1主页面详细设计 13  
3.1.1 HTML设计 13  
3.1.2 JS设计 14  
3.1.3 CSS设计 15  
3.2导航界面详细设计 18  
3.2.1 HTML设计 18  
3.2.2 JS设计 22  
3.1.3 CSS设计 25  
第四章 调试与测试 38  
4.1 调试过程中的主要问题 38  
4.2 测试过程与结果 39  
4.2.1主页面 39  
4.2.2加载页面 40  
4.2.3主菜单页面 41  
4.2.3主角资料页面 41  
4.2.4故事背景页面 41  
参考文献 43  
心得体会 44  
页面的设计方面 44  
网页视觉效果 44  
网页的整体布局和导航 44

大观园系列是游民星空出品的向广大用户提供了解新上市游戏的方便途径，上玩家直观的看到游戏界面，内容，人物设定，剧情等重要信息，促使玩家购买。提供方便的同时，也增加了网站浏览量。大观园：尼尔机械纪元篇是为了2017-03-17上市的游戏《尼尔机械纪元》制作的网页，以文字及视频的方式介绍了游戏的背景故事，主角资料。同时提供了正版游戏购买链接。美观的界面设计是本次设计的重点，本文转载自http://www.biyezuopin.vip/onews.asp?id=14804为了让玩家有良好的用户体验，对网页排版，UI交互，做了精心的设计。尽量达到模仿游戏内交互界面的样式。  
2.1 模块化设计总方案  
为了实现网站功能，本网站主要分为两个网页，进入网站的主题网页index.html。之后的导航网页demo.html。主页包括着游戏简介，游戏CG预告视频。导航网页包括着转场动画，标题Logo，导航菜单，导航菜单子菜单中的具体界面。  
第三章 详细设计  
3.1主页面详细设计  
3.1.1 HTML设计  
主页面的html结构：包括着的视频背景和

等标签组成的简介信息。代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link href="css/index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <video id="bgvid" playsinline autoplay loop>
        
        <source src="./video/NieR_1.mp4" type="video/webm">
        <img src="./image/NieR_2.jpg">
        </video>
        <div id="NieR">
        <h1>NieR</h1> 
        <p>《尼尔：机械纪元(NieR：Automata)》</p>
        <p>Square Enix发行的一款动作RPG游戏，
            讲述了在被摧毁的地球上由人类的敌人外星人派来的机械生命体与人类方派出的人造人“尤尔哈(YoRHa)”部队进行战斗的故事。
            游戏背景设定在和《尼尔》相同的世界，并将有一个全新的故事剧情，但和前作几乎没有关联。</p>
        <p>
            游戏讲述在被摧毁的地球上由人类的敌人外星人派来的机械生命体与人类方派出的人造人“尤尔哈（YoRHa）”部队进行战斗的故事。
            主角叫做“尤尔哈2号B型”人造人，擅长使用刀和长剑，在战斗过程中可以随时切换。而游戏中还有被称为“POD”的机器人进行远距离支援攻击。
            游戏里面充斥着各种暴力元素，这非常符合日系游戏的特点。
            女主角孤身一人，蒙着眼睛，与各种各样的机器人搏斗。
        </p>
        <button id="btn">Link</button>
        </div>
    </body>
    </html>

![在这里插入图片描述][b736e8b6fe8244e5ac2c477cca5c091d.png_pic_center]  
![在这里插入图片描述][3f15b81edc124772953e9c521b85d783.png_pic_center]  
![在这里插入图片描述][eaf5cb0939a7418c81c4985547bf069b.png_pic_center]  
![在这里插入图片描述][144b4007737a4c28a31bf1d5e0268683.png_pic_center]  
![在这里插入图片描述][93b539f601f245f3b89787732dede10f.png_pic_center]  
![在这里插入图片描述][a41fe6f75ac74d0aafafa7961f3d6b58.png_pic_center]  
![在这里插入图片描述][67062c37a60d4fda82045e4da17c789e.png_pic_center]  
![在这里插入图片描述][e4cbe4d817664d83b2a9296ec47c034c.png_pic_center]  
![在这里插入图片描述][ed457684604648908307569db4ca393e.png_pic_center]  
![在这里插入图片描述][669c272751bb4c29a2bc1c6eaecc4e87.png_pic_center]  
![在这里插入图片描述][3081bd400a27404f865c58b62cd312c3.png_pic_center]  
![在这里插入图片描述][1cd0f962299541dfa23879def2ebf4e2.png_pic_center]

[b736e8b6fe8244e5ac2c477cca5c091d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a297c8c77f8641d8973f73444a008523.png
[3f15b81edc124772953e9c521b85d783.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/805f5e2102ae42858a37be9b58410ae6.png
[eaf5cb0939a7418c81c4985547bf069b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0455aab570a944de9982a2b31549e008.png
[144b4007737a4c28a31bf1d5e0268683.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a95d8a88ace043648c87292498bcab8d.png
[93b539f601f245f3b89787732dede10f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e7adfa6c83c64d32a3750991eecba851.png
[a41fe6f75ac74d0aafafa7961f3d6b58.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/30ad357d8f5b430aa0fdc013fb23e072.png
[67062c37a60d4fda82045e4da17c789e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/05bbcf7b1a7c40f69e857461ae5f9f73.png
[e4cbe4d817664d83b2a9296ec47c034c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/53712135610d49658e7adebdb4283c7c.png
[ed457684604648908307569db4ca393e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5059fbe6fe7647ce87bfeb9cac9279cc.png
[669c272751bb4c29a2bc1c6eaecc4e87.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e47f80a6422447d0af7f55d80c42de4e.png
[3081bd400a27404f865c58b62cd312c3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2118692760ad44c28b634464e48e7bd6.png
[1cd0f962299541dfa23879def2ebf4e2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a21e7affab214d2085c0378995e6ea68.png