第一章 需求分析
王者营地网站是为那些喜爱玩《王者荣耀》群众而设计的，可以满足人们的大部分需求。热爱玩《王者荣耀》的人们，想必都会喜欢去了解一些官方赛事，热点资讯，英雄技能，尤其是一些精彩的短视频。如果你也是这样的人，那么王者营地网站绝对不会让你失望的。
1.1 课程设计题目
王者营地的设计与实现。
1.2 题材背景
伴随着《王者荣耀》这款游戏的不断火热，人们对《王者荣耀》的了解需求不断增大。而王者营地的设计与实现既可以符合当下新时代互联网的发展还可以满足人们日益增长的需求，从而使人们更加的了解《王者荣耀》这款游戏，拥有更好的游戏体验。
1.3 系统开发技术和环境
硬件：装有windows操作系统的计算机。
软件：Adobe Photoshop、DreamWeaver。
1.3.1 Adobe Photoshop简介
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。2003年，Adobe Photoshop 8被更名为Adobe Photoshop CS。2013年7月，Adobe公司推出了新版本的Photoshop CC，自此，Photoshop CS6作为Adobe CS系列的最后一个版本被新的CC系列取代。截止2019年1月Adobe Photoshop CC 2019为市场最新版本。Adobe支持Windos操作系统、Android与Mac OS但Linux操作系统用户可以通过使用Wine来运行Photoshop。
1.3.2 DreamWeaver简介
Adobe Dreamweaver，简称“DW”，中文名称“梦想编织者”，最初为美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解HTML、CSS和其他Web标准。使用视觉辅助功能减少错误并提高网站开发速度。
1.3.3 性能需求
该系统在性能功能上达到如下需求：
操作方便、界面简单大方：完全控件式的页面布局，对于新手来说简单明了，可以快速的了解到你所想要了解的内容。里面包含了官方推荐、赛事热点、英雄介绍、精彩短视频、最新活动、皮肤爆料，并且还可以观看最新的赛程回放。
第二章 网站总体设计
2.1 网站功能分析
网站根据需求，总体由七个部分组成，图2-1显示了网站整体功能模块。
图2-1 网站整体功能模块
2.2 网站采用的主要技术
2.2.1 HTML5语言
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
2.2.2 CSS语言
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2.2.3 Photoshop
从功能上看，该软件可分为图像编辑、图像合成、校色调色及功能色效制作部分等。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合。校色调色可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。
2.2.5 响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
第三章 网站详细设计与制作
3.1实施过程
首先百度寻找素材，然后用Photoshop对所找的图片进行编辑设置出自己所需要的大小，然后用Adobe Dreamweaver CS6制作出页面以及首页效果，在依次将各个子页面所对应的二级网页制作出来，例如主页面中导航的“官网”，“赛事”等。
3.2 王者营地的首页
打开网页用户首先进入王者营地的首页。首先进入用户眼前的是《王者荣耀》的近期英雄调整。
页面如图3-1所示：
图3-1 王者营地的首页
3.3 官方推荐资讯
用户可以点击首页面导航条中的官方然后以进入查看官方推荐的热点资讯和最新消息。
页面如图3-2所示：
图3-2 官方推荐资讯
3.4 英雄介绍
点击导航条中的英雄可以查看热门英雄技能介绍。如图3-3所示：
图3-3 英雄介绍
3.5 赛事热点和赛程回放
点击导航条中的赛事，用户可以查看赛事热点和赛程回放，如图3-4，3-5所示：
图3-4 赛事热点和赛程回放
图3-5 赛事热点和赛程回放
3.6王者荣耀精彩短视频
点击导航条的短视频可以查看王者荣耀精彩短视频，如图3-6所示：
图3-6 王者荣耀精彩短视频
第四章 课程设计总结与体会
为了更好的完善每个网页的功能，我在每个页面完成之后都会采用对应的办法进行测试。
4.1 总结
纸上谈兵，犹如空谈。通过这次课程设计，让我更加深刻了解课本知识。经过课程设计，培养了我的耐心、细心、谨慎的工作态度。这次课程设计的素材大多数是用“PS”进行修剪得到的。在制作素材的过程中，比例的选定以及合理的布局都要有细致的规划，这是最考验一个人的耐心与严谨态度的过程，仅有这样才能使网页制作的效果更准确、更美观。
与其临渊羡鱼，不如退而结网。这次网页设计与实现给我最大的印象就是如果自我有了兴趣，就动手去做，困难在你的勇气和毅力下是抬不起头的。从做这个网页设计与实现开始无论遇到什么困难，我都没有一丝发下的念头。出于对知识的渴望，出于对新知识的好奇，出于对一切未知的求知，我完成了这次网页的课程设计。此次设计也让我明白了思路即出路，只要认真钻研，动脑思考，动手实践，就没有弄不懂的知识，收获颇丰。
4.2 体会
在这次课程设计中，我经过动手实践操作，进一步学习和掌握了有关网页设计原理的有关知识。特别是我动手设计时，进一步巩固了一些自己学习上的知识。在制作的过程中，我不仅复习了相关知识，还查阅了相当多的资料，这在很大程度上拓展我的视野，丰富了我的知识。以后我会继续努力，大胆创新，争取能编写出有着自我思想的网页。这次课程设计让我充分认识到了自我的不足，认识到了动手本身的重要性。我会在以后的学习中更加努力锻炼自我，提高自我。
第五章 资源详情（资源下载可见主页）
5.1 资源文件
5.2 源代码文件
5.3 答辩ppt
