1、河海大学文天学院课程设计报告所 在 系： 电气工程系 专业班级： 计算机科学与技术 2班 学 号： 150310239 姓 名： 朱家伟 指导老师： 胡娟 所在学期： 2016-2017 学年第二学期 实习地点： 河海大学大学文天学院 H 楼 401室 2017年 4月河海大学文天学院课程设计评分表平时表现（10 分）系统功能方案的合理性、创造性以及完成程度（20 分）界面的设计感和美观性（20 分）课程设计报告填写的质量（40 分）视频录制的效果（10 分）综合评定成绩目录1.网站的概述-42.网站的初期规划-42.1.网站风格-42.2.网站框架和布局-42.3.网站总体内容模块-42.4
2、.网站 logo设计-53.工具和技术-53.1.工具-53.2.技术-54.网站实现-54.1.导航模块-6 4.1.1.模块设计思路-64.1.2.模块界面截图-64.1.3.模块实现主要代码-64.2.轮播器模块-74.2.1.模块设计思路-74.2.2.模块界面截图-74.2.3.模块实现主要代码-94.3.内容模块-134.3.1.模块设计思路- 134.3.2.模块界面截图- 134.3.3.模块实现主要代码- 165.网站测试与发布-255.1.网站的测试-255.2.网站的发布-266.网站的不足及后续改进-267.心得体会-268.参考文献-281.网站的概述本网站为游戏网站
3、，主要以介绍游戏为主。本网站多介绍的游戏为日本型月公司发行的人气手游 Fate/Grand Order，中文名为“命运冠位指定” ，目前所拥有服务器日服，国服，台服及美服，国服由哔哩哔哩代理，本网站主要以国服为主。虽是日本开发的游戏，但国服玩家意外的所占比重最多。而本网站主要是以介绍这个游戏为主，提供游戏的玩法、攻略以及游戏下载。网站的形式类似一些游戏的官网，全网页均使用 css+div构成，一些特效也是利用 css+div完成，并未使用 javasprict，由于知识有限，网页制作偏于简便。网站主要由六个 html文件组成，这六个版面分别为首页、玩法介绍、fgo世界、英灵信息、迦勒底映像以及
4、关注我们。2.网站的初期规划2.1 网站风格网站以介绍游戏的官网类型为主，通过图片，文字，视频以及一些特效体现网站内容。网站主要由三大部分构成，网页头部，网页主体以及网页尾部。网页头部主要是导航链接，网页尾部是一些网页制作信息和 logo，网页主体则是网页的主要内容部分。2.2.网站框架和布局本网页的框架主要是网页首部，网页主体，网页尾部的三大块框架，分别存放导航栏，网页内容和制作信息。网页的布局采用图片和文字并用的方式，基本只采用从上而下的一个个大板块，左右的这种布局本网页只在网页尾部使用了，其他部分基本未涉及。2.3.网站总体内容模块网站主要由六个内容模块组成，分别为 Fate/Grand
5、 order、玩法介绍、fgo世界、英灵信息、迦勒底映像、关注我们。对应的主要内容分别为首页、游戏的玩法介绍、游戏的世界观、游戏人设、游戏影音以及我们制作组的信息。2.4.网站 logo 设计网站 logo主要在网页底部体现，主要利用 ps软件设计而成，然后插入到网页代码中。图片中间的文字代表我们所在的河海大学文天学院，环形边框内的文字为“604制作单位”代表我们小组成员。3.工具和技术3.1.工具主要工具为 Deamweaver，photoshop，爱剪辑，美图秀秀，狸窝视频转换器，web 服务器，游览器。主要作用分别是代码编译，图片设计，视频处理，视频格式转换，网页发布及网页测试。3.2.
6、技术主要技术为 css+div布局方式，html 网页代码编写，图片处理技术，视频处理技术。4.网站实现我在我们小组中有明确的分工，主要是网页风格设计和网页布局，除此之外，基于效率和质量的提升，我还被分配要求制作导航栏和轮播器以及部分网页内容，下面主要介绍一下设计思路、过程及结果。4.1.导航模块4.1.1.模块设计思路任何一个网站都有一个叫导航栏的功能模块，我们设计的导航栏也不例外。导航栏的主要作用是让浏览网站者能够方便掌握网站的主要内容，以及快速找到自己需要的内容。我所设计的导航栏点开后就可以转到另一个 html文件，并且顶替掉之前的 html文件，因为转换速度快，这就给人一种导航栏并未变
7、化的错觉，让人感觉只有网页主体部分的内容变化了，这也是所有导航栏的特点。此导航栏并不是用文字构成的，而是使用了六个小图片构成，这样会使得整个导航栏更加美观。4.1.2.模块界面截图4.1.3.模块实现主要代码html,bodyheight:100%.div1background-color:#800080;width:100%;height:10%.div1lifloat:left;color:#FFF;margin-left:50px;margin-right:50px;padding-top:2px.div1 ullist-style-type:none;margin:0px;paddin
8、g:0px;margin-top:1px4.2.轮播器模块4.2.1.模块设计思路轮播器的主要功能是让多张图片能够按照一定的时间间隔进行轮播展示，此功能可以使网页空间得以节省，并且使网页看起来更加美观。轮播器主要运用 css代码来实现的，大致思路是让想要轮播的几张图片排成一列，创建一个图框，只有这个图框中可以显示图片，其他区域图片将会隐藏，之后只要将图片设计成自动左右移动便能达到想要的效果。4.2.2.模块界面截图此为开始的样子，它每隔一段时间便会切换到下一张，右上的九个数字对应九个图片，点击可以直接跳到对应图片。将鼠标放于数字上不动，数字会呈现红色，此时图片不再轮播，将会静止在此页，这是为了
9、方便浏览者阅读观看。切换后的图片：4.2.3.模块实现主要代码html,bodyheight:100%#frame position: absolute;margin-top:80px;margin-left:380px;width: 500px;height: 500px;overflow: hidden;border-radius:5px;#photos img float: left;width:500px;height:500px;#photos position: absolute;z-index:9px;width: calc(500px * 9);.playanimation:
10、ma 25s ease-out infinite alternate;keyframes ma 0%,15% margin-left: 0px; 25%,20% margin-left: -500px; 35%,40% margin-left: -1000px; 45%,50% margin-left: -1500px; 55%,60% margin-left: -2000px; 65%,70% margin-left: -2500px; 75%,80% margin-left: -3000px; 85%,90% margin-left: -3500px; 95%,100% margin-le
11、ft: -4000px; .numposition:absolute;z-index:20;display:inline-block;right:0px;top:0px;border-radius:100%;background:#00F;width:25px;height:25px;line-height:25px;cursor:pointer;color:#FFF;text-align:center;opacity:0.8;.num:hoverbackground:#F00;.num:hover,#photos:hoveranimation-play-state:paused;.num:n
12、th-child(2)margin-right:30px.num:nth-child(3)margin-right:60px.num:nth-child(4)margin-right:90px.num:nth-child(5)margin-right:120px.num:nth-child(6)margin-right:150px.num:nth-child(7)margin-right:180px.num:nth-child(8)margin-right:210px.num:nth-child(9)margin-right:240px#a1:hover #photosanimation: m
13、a1 .5s ease-out forwards;#a2:hover #photosanimation: ma2 .5s ease-out forwards;#a3:hover #photosanimation: ma3 .5s ease-out forwards;#a4:hover #photosanimation: ma4 .5s ease-out forwards;#a5:hover #photos animation: ma5 .5s ease-out forwards;#a6:hover #photos animation: ma6 .5s ease-out forwards;#a7
14、:hover #photos animation: ma7 .5s ease-out forwards;#a8:hover #photos animation: ma8 .5s ease-out forwards;#a9:hover #photos animation: ma9 .5s ease-out forwards;keyframes ma1 0%margin-left:-2000px;100%margin-left:-0px; keyframes ma2 0%margin-left:-2000px;100%margin-left:-500px; keyframes ma3 100%ma
15、rgin-left:-1000px; keyframes ma4 100%margin-left:-1500px; keyframes ma5 100%margin-left:-2000px; keyframes ma6 100%margin-left:-2500px; keyframes ma7 100%margin-left:-3000px; keyframes ma8 100%margin-left:-3500px; keyframes ma9 100%margin-left:-4000px; 1234567894.3.内容模块4.3.1.模块设计思路内容模块我负责其中两个的代码编写，主
16、要是首页和英灵信息两栏。首页为了简洁做了很多修改，大体保留一张全屏高清大图，即游戏宣传海报。下面是一个视频，即游戏宣传 pv，在下面则是页面尾部；英灵信息一栏则是一张图片其中有人物信息的链接，之下是对英灵的解析，再之下是轮播器，最后是网页尾部。4.3.2.模块界面截图首页：图中的二维码为游戏下载地址：游戏宣传视频：英灵信息板块：上图文字部分为人物信息链接：点开后：英灵这一名词在游戏中的含义：轮播器：另外网页尾部附有一个哔哩哔哩的链接点开后：4.3.3.模块实现主要代码首页一栏的所有代码：欢迎来到 FGO的世界！html,bodyheight:100%.div1background-color:
17、#800080;width:100%;height:10%.div2background-color:#FFF;width:100%;height:105%.div1 lifloat:left;color:#FFF;margin-left:50px;margin-right:50px;padding-top:2px.div1 ullist-style-type:none;margin:0px;padding:0px;margin-top:1px.div2 imgwidth:100%;height:105%.div3background-color:#000040;width:100%;heig
18、ht:78%;margin:25px.div4background-color:#000040;width:100%;height:15%;margin-top:0px.div5background-color:#000040;width:10%;height:25%.div6background-color:#000040;float:left;width:90%;height:25%.div7background-color:#000040;float:left;width:50%;height:25%.div8background-color:#000040;float:left;wid
19、th:50%;height:25%.div8 pfont-family:“楷体“;font-size:20px;.photomargin-top:-45px;margin-left:100px#b1font-size:40px;font-family:“华文琥珀“;color:#01139b#b2font-size:15px;color:#FFF;margin-top:-25pxa:visitedtext-decoration:none;color:#c1b477a:linktext-decoration:none;color:#c1b477a:activetext-decoration:no
20、ne;color:#000040a:hovertext-decoration:none;color:#800080604 本游戏由哔哩哔哩代理 | bilibli官网本网络游戏适合年满 18岁（含）以上的玩家使用抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活网页制作|10#604英灵信息一栏的所有代码：从者介绍html,bodyheight:100%.div1background-color:#800080;width:100%;height:10%.div2background-color:#000040;width:100%;
21、height:120%.div3background-image:url(ylzuo.jpg);width:100%;height:65%;margin-top:10px.div4background-image:url(yl1.jpg);width:100%;height:120%;margin-top:-30px.div1 lifloat:left;color:#FFF;margin-left:50px;margin-right:50px;padding-top:2px.div1 ullist-style-type:none;margin:0px;padding:0px;margin-to
22、p:1px.div4 h1font-family:“楷体“;font-size:50px;font-color:back;line-height:35px.div4 h4margin-top:-25px.div5background-color:#000040;width:100%;height:15%;margin-top:0px.div6background-color:#000040;width:10%;height:25%.div7background-color:#000040;float:left;width:90%;height:25%.div8background-color:
23、#000040;float:left;width:50%;height:25%.div9background-color:#000040;float:left;width:50%;height:25%.div9 pfont-family:“楷体“;font-size:20px;.photomargin-top:-45px;margin-left:100px#b1font-size:40px;font-family:“华文琥珀“;color:#01139b#b2font-size:15px;color:#FFF;margin-top:-25pxa:visitedtext-decoration:n
24、one;color:#c1b477a:linktext-decoration:none;color:#c1b477a:activetext-decoration:none;color:#000040a:hovertext-decoration:none;color:#800080#frame position: absolute;margin-top:80px;margin-left:380px;width: 500px;height: 500px;overflow: hidden;border-radius:5px;#photos img float: left;width:500px;he
25、ight:500px;#photos position: absolute;z-index:9px;width: calc(500px * 9);.playanimation: ma 25s ease-out infinite alternate;keyframes ma 0%,15% margin-left: 0px; 25%,20% margin-left: -500px; 35%,40% margin-left: -1000px; 45%,50% margin-left: -1500px; 55%,60% margin-left: -2000px; 65%,70% margin-left
26、: -2500px; 75%,80% margin-left: -3000px; 85%,90% margin-left: -3500px; 95%,100% margin-left: -4000px; .numposition:absolute;z-index:20;display:inline-block;right:0px;top:0px;border-radius:100%;background:#00F;width:25px;height:25px;line-height:25px;cursor:pointer;color:#FFF;text-align:center;opacity
27、:0.8;.num:hoverbackground:#F00;.num:hover,#photos:hoveranimation-play-state:paused;.num:nth-child(2)margin-right:30px.num:nth-child(3)margin-right:60px.num:nth-child(4)margin-right:90px.num:nth-child(5)margin-right:120px.num:nth-child(6)margin-right:150px.num:nth-child(7)margin-right:180px.num:nth-c
28、hild(8)margin-right:210px.num:nth-child(9)margin-right:240px#a1:hover #photosanimation: ma1 .5s ease-out forwards;#a2:hover #photosanimation: ma2 .5s ease-out forwards;#a3:hover #photosanimation: ma3 .5s ease-out forwards;#a4:hover #photosanimation: ma4 .5s ease-out forwards;#a5:hover #photos animat
29、ion: ma5 .5s ease-out forwards;#a6:hover #photos animation: ma6 .5s ease-out forwards;#a7:hover #photos animation: ma7 .5s ease-out forwards;#a8:hover #photos animation: ma8 .5s ease-out forwards;#a9:hover #photos animation: ma9 .5s ease-out forwards;keyframes ma1 0%margin-left:-2000px;100%margin-le
30、ft:-0px; keyframes ma2 0%margin-left:-2000px;100%margin-left:-500px; keyframes ma3 100%margin-left:-1000px; keyframes ma4 100%margin-left:-1500px; keyframes ma5 100%margin-left:-2000px; keyframes ma6 100%margin-left:-2500px; keyframes ma7 100%margin-left:-3000px; keyframes ma8 100%margin-left:-3500p
31、x; keyframes ma9 100%margin-left:-4000px; 英灵的狂欢盛典跨越时空的屏障，超越神话的对决！英灵们的盛宴将世界点燃！123456789604 本游戏由哔哩哔哩代理 | bilibli官网本网络游戏适合年满 18岁（含）以上的玩家使用抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活网页制作|10#6045.网站测试与发布5.1.网站的测试对六个板块分别进行了测试，结果全部符合预期效果，轮播器可以正常运行，图片可以正常显示，视频可以正常播放，各个链接也可以正常打开，整个网站都可以正常运作。5.2.网
32、站的发布打开服务器管理器添加角色服务，之后打开 internet信息服务可以看到网站字样，然后右键添加网站。在弹出来的对话框中随意起一个网站名称，物理路径是网站源代码所在路径，端口自行设定，改端口用于路由的端口映射功能，一般默认端口是 80，主机名可以填写外网 IP映射的域名网站，然后用服务器本地测试网站是否部署成功。经过验证，网站的部署是成功的，即网站发布成功。6.网站的不足及后续改进网页制作本身就是一个技术活，一个好的网站要设计很久，也要不断维护改进，即使是老手都不能说自己制作的网页是完美无缺的。作为一个接触网页设计课程没多久的初学者来说，网页制作上的不足那自然是更多。就此次课程设计要求的
33、网页制作，我们仍然有许多不足之处。在制作过程中就遇到过网页对于分辨率不同的电脑的不适应，换言之，在不同的电脑设备上打开网页，可能会出现布局改变的情况，因为技术不足，因此没能解决此问题。在设计时设想的下拉式导航菜单也没能体现出来，查阅众多资料此特效需要用到 javasprict及一些没有接触到的知识，尝试多次无果后，我们团队放弃了这一个特效的制作。网页完成之后小组成员又分工对每个版块进行细节处理，以及一些改进，例如链接的打开方式，轮播器的轮播时间间隔等等。7.心得体会此次能够按时完成网页的设计，和小组成员的团结合作脱不了关系，这也让我更加明白组织团结的重要性。一个大的网页在短时间内独自完成是非常
34、困难的，特别是对于我们这些初学者来说，而团队合作则降低了我们的困难，既然有团队那就要有分工，正确的分工对提升网页制作的效率和质量都有重要意义。毕竟不同的人有不同的擅长领域，让擅长这个领域的人去做那个，那么这个人的效率和制作质量都会下降，对于不擅长的领域每个人的积极性都或多或少会被消磨掉，何况我们这些初学者。本次的网页制作也有我独自完成的地方，也就是我被分配的工作，我的主要任务是设计网页风格以及网页布局。在这个过程中我学到了网页设计中的美感问题，一个漂亮的网页和网页的风格设计和布局脱不了关系，风格不够好或是布局不协调，则会使整个网页看起来都怪怪的，不美观，一个不美观的网页如何吸引到浏览者，换言之，这个网页就算失败的，毕竟网页设计出来就是给别人看的，由此可见网页风格和布局的重要性。另外，此次的网页制作让我明白，不管面对什么样的工作都要积极的去对待，尽自己的努力去完成去做到最好，随意敷衍的态度终究不可取，事实证明，努力就会有收获。作为一个大学生，面对自己当下的任务，也就是学习，更是要努力认真的对待，如此，毕业之后我们一定不会后悔，一定会有收获。8.参考文献1Fate/Grand order 官网. http:/ .2王者荣耀官网. http:/ http:/ http:/ 游戏官网 . http:/ http:/ 北京：人民邮电出版社，2016.710百度百科 .
