一、选题的目的及意义
2016年因为阴阳师这款游戏非常的火爆，这款游戏也在I0S和安卓双平台下载量突破千万也同时游戏冲入iPad畅销榜前十。但是这款游戏的网站是少之又少的，根据这个因素，所以我想制作一款介绍它的网站让更多的人了解它，随着这款游戏的火爆所以我要做它的游戏攻略网站。
《阴阳师》手游是一款3D唯美和风手游，所以制作的网页也是一样的风格，让别人看了会有一种想玩这款游戏的冲动。
二、设计的主要内容
1.页面使用人物图片作为背景，棕为搭配。
个性繁体字网名
2首页插入了视频栏目和人物背景故事栏目可以让你更快的了解这款游戏的玩法和人物背景
3.导航栏分为主页、游戏简介、游戏攻略、精选推荐、新手帮助、鼠标经过时有较为清楚的改变。
4.攻略子页里面加入了攻略文章和式神技能介绍可以让玩家知道这款游戏的玩法
蒋勤勤个人资料目录
一、内容简介 (8)
（一）背景与意义 (8)
（二）资料收集和分析 (8)
二、操作环境与软件的选择 (8)
（一）操作系统的选择 (8)
（二）D reamweaver的优点 (8)
（三）P hotoshop应用功能 (9)
（四）苹果录屏大师 (9)
三、网站的分析与设计 (10)
（一）网站主题设计 (10)
李易峰唐嫣（二）过程分析 (10)
（三）网站布局介绍草图 (10)
四、过程图片与过程设计 (11)
（―）P hotoshop制作过程 (11)
（二）D reamweaver制作过程 (14)
五、作品图片与设计总结 (16)
（一）作品图片 (16)
（二）设计总结 (19)
六、设计仓!］意说明 (19)
（-）目的和意义 (19)
（二）学习心得 (19)
七、致谢 (19)
八、参考文献 (20)
一、内容简介
（一）背景与意义
随着社会不断地发展，经济呈现飞速增长的趋势，尤其在21世纪这个科技发达的年代，电脑和手机成为家家户户个人的必备品，而各类网站就出现在了我们的生活中。根据不同类型，功能的网站就需要不同的页面来实现网站的作用。因此更好的网页布局就能方便，快捷的完成网站所需的功能要求。这就需要网页设计来完成这一工作，因此突显了网页设计的重要性。
随着“阴阳师”这款游戏的火爆，很多小伙伴选择了玩这款游戏，这款游戏也在IOS和安卓双平台下载量突破千万，也同时游戏冲入iPad畅销榜前十。而且这款游戏在被称为游戏界奥斯卡的TGA大赏中提名，2016年11月26号揭晓最佳今年最受欢迎游戏五款当中的一款。随着这款游戏的火爆，所以我要做它的游戏攻略网站，现在中国的游戏进入了成熟期的阶段，游戏发展到目前成为中国网络经济的重要组成部分。根据不同类型，功能的网站就需要不同的页面来实现网站的作用。
郭彦甫郭彦均（二）资料收集和分析
作为一名计算机系的大专生，学习网页制作是我们必须的课程，我个人也比较喜欢网页制作，经过几
个月的集中学习，我开始对网页的设计与制作有很多的热情，并且学习了一些网页制作基础。在网页制作中，我借鉴了阴阳师游戏和许多私服网站的设计风格，着重于给浏览者以强烈的视觉冲击。上各种游戏网站搜集资料图片和我自己上游戏截取很多游戏上面的很多暖调的图片运用到photoshop强大的图像制作和处理能力里。进行了大量的图片制作，从而给人一种强烈的美感。游戏里面的视频制作都是我自学利用苹果录屏大师录制了游戏动画的制作很多游戏视频，给予浏览者震撼和动感。整个网站的架构是由Dreamwave完成的。
二、操作环境与软件的选择
（一）操作系统的选择
开发环境目前可供选择的操作系统有很多，有Windows>Linux和Unix等。Windows 具有界面图形化、多用户、多任务、网络支持良好、出的多媒体功能、硬件支持良好和众多的应用程序等特点。最后我选择使用了Windows操作系统。
（二）Dreamweaver的优点
Dreamweaver是当前最流行的网页设计软件。
Dreamweaver的优点：不生成冗余代码。可视化的网页编辑器，都要把使用者的操作转换成html代码。
一般的编辑器都会生成大量的冗余代码，给网页以后的改动带来了极大的不方便，同时还增加了网页文件的大小。更加的快速。
Dreamweaver软件中，代码窗口的代码，和CCS面板中的那些英文标签的标签，都是用以制造、管理、修改工作窗口的各个项目的。可制造、管理、修改这些项目，直接从属性面板或单击右键进行，其次,Dreamweaver能直接往页面中插入Flash>Shockwave 等插件，经过设置后还可直接调用相应的软件对这些插件进行编辑。
（三）Photoshop应用功能
1、图层功能：PS支持多图层工作方式，可以对图层进行合并、合成、翻转、复制和移动等操作，PS需要的各种特效也是可以自己添加进去的，比如描边，内发光，外发光许多强大的特效功能。
2、网页功能：我们可以使用切片工具自己进行切片，制作出简单的小图片，后续我们可以在Dreamweaver软件里面进行网页制作。
3、选取功能：矩形选区工具和椭圆选区工具可以选择一个或多个不同大小或不同形状的范围。让你选择你所需要的范围进行操作非常的简单快捷。
4、图像的旋转和变形：可以将图像进行翻转和旋转，还可以将图像斜切，透视，扭曲许多操作让图
片变成你想要的效果。
5、颜模式：PS具有多种的颜模式，包括黑白、灰度、双调、索引、HSB、Lab、RGB和CMYK等模式。其中最主要的是CMYK和RGB模式。Photoshop应用领域
6、平面印刷：Photoshop被应用到平面广告、包装、装潢、印刷、制版等领域，比如各种的宣传海报、产品包装等。
（四）苹果录屏大师
苹果录屏大师的优点：AirPlayer（itools苹果录屏大师）是一款能够让iphone 或ipad里的游戏、照片、视频等通过wif i到投射到电脑或电视屏幕上的软件。AirPlayer 能够让iPhone,iPod touch和iPad,iPad mini通过WiFi网络投射到支持AirPlay的设备上。
苹果录屏大师是非常好用的小软件，是我自己非常喜欢的一软件它能够让iPhone 或ipad里的游戏，照片，视频等通过wifi到投射到电脑或电视屏幕上的软件。它能让你躺在床上手持iPhone就能将里面的音乐用HiFi音箱播放出来还不用受音频线的羁绊。是一款让你手机数据快速链接电脑的软件，特别方便快捷。
三、网站的分析与设计
（一）网站主题设计
“阴阳师”游戏网站介绍这里主要是把游戏集合在一起为对这一领域感兴趣的用户提供一个专门性的网站。运用所学的网页设计技术对网站进行布局，划分功能模块，其中主要包括三个级别的页面，由首页开始，分成四个大模块，游戏简介，游戏攻略，精选推荐，新手帮助。两个首页模块游戏玩法视频，游戏主角介绍。更好的网罗时下热门游戏，并辅以详细图片。如下图1-1所示
苹果手机电池1-1
（二）过程分析
对于网页制作过程中，图片是很重要的一部分素材。同样图片的处理更是重要。对于玩家相册，以及游戏截图都要同样规格的图片，所以就用到了PS的选区工具填充了白，黑和黄灰作为背景。选择了hakuyoxingsh—字体给人一种古风贴合游戏'惊艳的感觉，白字体背景简洁直观，可用性强。主要运用了PS中的矩形选框工具选择，修改，收缩移动工具切片工具标尺工具辅助我们切片，由于我的导航条还做了插入经过图像，所以我切片切了字体颜的两种模板，只要改变字体颜即可产生两种不同的变化与作用，给大家一看就简单明了的感觉。
（三）网站布局介绍草图
如下图1-2所示
灭蚂蚁最有效的土方法