大观园：尼尔机械纪元篇
摘  要
大观园系列是游民星空出品的向广大用户提供了解新上市游戏的方便途径，上玩家直观的看到游戏界面，内容，人物设定，剧情等重要信息，促使玩家购买。提供方便的同时，也增加了网站浏览量。大观园：尼尔机械纪元篇是为了2017-03-17上市的游戏《尼尔机械纪元》制作的网页，以文字及视频的方式介绍了游戏的背景故事，主角资料。同时提供了正版游戏购买链接。美观的界面设计是本次设计的重点，为了让玩家有良好的用户体验，对网页排版，UI交互，做了精心的设计。尽量达到模仿游戏内交互界面的样式。
关键词：尼尔：机械纪元 游戏介绍类网页 UI设计 视觉效果
目   录
摘  要 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