作者:尹恒

介绍：退伍军人，为了就业选择IT行业；

班级:A01

本项目所采用技术及框架:

页面技术:H5+CSS3

前端框架:Bootstrap,jQuery

交互技术:JSP+Servlet,AJAX

版本管理器:SVN

设计模式:MVC

本网站是参照守望先锋官方网站排版模式,设计风格的网站,主要提供了玩家对该游戏的了解和认识,网站总共分为三个部分,顶部实机演示部分,中部游戏背景和游戏角色介绍,底部游戏下载以及网站信息等内容,本网站主要采用了HTML+CSS进行网站布局,加入JS以及Servlet进行的交互来提升访客体验,具体实现功能如下:

1. 顶部实机演示部分为滚动播放的游戏视频为背景,顶部有各类功能按钮,点击能打开各种菜单,鼠标指上各个小菜单又能滑动出现下级菜单.

2. 顶部菜单右部有玩家登录选项,点击能跳转到登录和注册页面,采用Servlet技术为访客提供用户登录及注册等功能.

3. 视频中间有游戏LOGO和游戏购买和游戏介绍按钮,原网站为固定DIV,打开网站直接显示,本网站修改了LOGO和按钮的出现方式,LOGO配合视频由上往下出现,而后按钮渐显,能稍微提升视觉效果.

4. 中部游戏介绍部分为图片+文字的游戏背景介绍.

5. 游戏角色介绍采用了JS做了角色切换的功能,鼠标指上游戏角色头像,上方显示该游戏角色的信息以及图片,并且游戏角色头像放大并且改变头像背景颜色.

6. 底部游戏下载区域采用了区别于原网站的镂空效果,人物依然突破背景图片做出3D效果.后方的背景图片做成了固定,滑动鼠标背景图片不动,形成一个空窗口的效果.

7. 最下方网站信息部分为一切简单的a标签排版,相对来说较简单.

最后,个人觉得本网站还有诸多改进的地方,所有采用的技术也较为简单,小部分功能存在瑕疵,但是在创意方面在原网站的基础上有所提升,这也是一个优秀网站最重要的东西,经过此次练习项目,对前端以及后端代码的熟悉程度都有更深的认识,希望下一次的项目能够做到更好.