《网站设计与网页制》课程设计Word文件下载.docx
《《网站设计与网页制》课程设计Word文件下载.docx》由会员分享，可在线阅读，更多相关《《网站设计与网页制》课程设计Word文件下载.docx（27页珍藏版）》请在冰点文库上搜索。
4.3.内容模块-----------------------------13
4.3.1.模块设计思路---------------------13
4.3.2.模块界面截图---------------------13
4.3.3.模块实现主要代码-------------------16
5.网站测试与发布------------------------------25
5.1.网站的测试--------------------------25
5.2.网站的发布--------------------------26
6.网站的不足及后续改进-------------------------26
7.心得体会----------------------------------26
8.参考文献----------------------------------28
1.网站的概述
本网站为游戏网站，主要以介绍游戏为主。
本网站多介绍的游戏为日本型月公司发行的人气手游Fate/GrandOrder，中文名为“命运冠位指定”，目前所拥有服务器日服，国服，台服及美服，国服由哔哩哔哩代理，本网站主要以国服为主。
虽是日本开发的游戏，但国服玩家意外的所占比重最多。
而本网站主要是以介绍这个游戏为主，提供游戏的玩法、攻略以及游戏下载。
网站的形式类似一些游戏的官网，全网页均使用css+div构成，一些特效也是利用css+div完成，并未使用javasprict，由于知识有限，网页制作偏于简便。
网站主要由六个html文件组成，这六个版面分别为首页、玩法介绍、fgo世界、英灵信息、迦勒底映像以及关注我们。
2.网站的初期规划
2.1网站风格
网站以介绍游戏的官网类型为主，通过图片，文字，视频以及一些特效体现网站内容。
网站主要由三大部分构成，网页头部，网页主体以及网页尾部。
网页头部主要是导航链接，网页尾部是一些网页制作信息和logo，网页主体则是网页的主要内容部分。
2.2.网站框架和布局
本网页的框架主要是网页首部，网页主体，网页尾部的三大块框架，分别存放导航栏，网页内容和制作信息。
网页的布局采用图片和文字并用的方式，基本只采用从上而下的一个个大板块，左右的这种布局本网页只在网页尾部使用了，其他部分基本未涉及。
2.3.网站总体内容模块
网站主要由六个内容模块组成，分别为Fate/Grandorder、玩法介绍、fgo世界、英灵信息、迦勒底映像、关注我们。
对应的主要内容分别为首页、游戏的玩法介绍、游戏的世界观、游戏人设、游戏影音以及我们制作组的信息。
2.4.网站logo设计
网站logo主要在网页底部体现，主要利用ps软件设计而成，然后插入到网页代码中。
图片中间的文字代表我们所在的河海大学文天学院，环形边框内的文字为“604制作单位”代表我们小组成员。
3.工具和技术
3.1.工具
主要工具为Deamweaver，photoshop，爱剪辑，美图秀秀，狸窝视频转换器，web服务器，游览器。
主要作用分别是代码编译，图片设计，视频处理，视频格式转换，网页发布及网页测试。
3.2.技术
主要技术为css+div布局方式，html网页代码编写，图片处理技术，视频处理技术。
4.网站实现
我在我们小组中有明确的分工，主要是网页风格设计和网页布局，除此之外，基于效率和质量的提升，我还被分配要求制作导航栏和轮播器以及部分网页内容，下面主要介绍一下设计思路、过程及结果。
4.1.导航模块
4.1.1.模块设计思路
任何一个网站都有一个叫导航栏的功能模块，我们设计的导航栏也不例外。
导航栏的主要作用是让浏览网站者能够方便掌握网站的主要内容，以及快速找到自己需要的内容。
我所设计的导航栏点开后就可以转到另一个html文件，并且顶替掉之前的html文件，因为转换速度快，这就给人一种导航栏并未变化的错觉，让人感觉只有网页主体部分的内容变化了，这也是所有导航栏的特点。
此导航栏并不是用文字构成的，而是使用了六个小图片构成，这样会使得整个导航栏更加美观。
4.1.2.模块界面截图
4.1.3.模块实现主要代码
<
styletype="
text/css"
>
html,body{height:
100%}
.div1{background-color:
#800080;
width:
100%;
height:
10%}
.div1
li{float:
left;
color:
#FFF;
margin-left:
50px;
margin-right:
padding-top:
2px}
.div1ul{list-style-type:
none;
margin:
0px;
padding:
margin-top:
1px}
bodybgcolor="
#000040"
divclass="
div1"
<
ul>
li>
ahref="
fgo.html"
imgsrc="
shouye.png"
/a>
/li>
fgo1.html"
wanfa.png"
fgo2.html"
img-nav-word.png"
fgo3.html"
img-nav-servant.png"
fgo4.html"
img-nav-gallery.png"
fgo5.html"
>
qq.jpg"
usemap="
#Map"
border="
0"
mapname="
Map"
id="
areashape="
rect"
coords="
110,1,143,38"
href="
/>
/map>
/ul>
/div>
/body>
4.2.轮播器模块
4.2.1.模块设计思路
轮播器的主要功能是让多张图片能够按照一定的时间间隔进行轮播展示，此功能可以使网页空间得以节省，并且使网页看起来更加美观。
轮播器主要运用css代码来实现的，大致思路是让想要轮播的几张图片排成一列，创建一个图框，只有这个图框中可以显示图片，其他区域图片将会隐藏，之后只要将图片设计成自动左右移动便能达到想要的效果。
4.2.2.模块界面截图
此为开始的样子，它每隔一段时间便会切换到下一张，右上的九个数字对应九个图片，点击可以直接跳到对应图片。
将鼠标放于数字上不动，数字会呈现红色，此时图片不再轮播，将会静止在此页，这是为了方便浏览者阅读观看。
切换后的图片：
4.2.3.模块实现主要代码
#frame{
position:
absolute;
margin-top:
80px;
margin-left:
380px;
width:
500px;
height:
overflow:
hidden;
border-radius:
5px;
}
#photosimg{
float:
left;
500px;
#photos{
z-index:
9px;
calc（500px*9）;
.play{
animation:
ma25sease-outinfinitealternate;
@keyframesma{
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-left:
-4000px;
.num{
absolute;
20;
display:
inline-block;
right:
top:
background:
#00F;
25px;
line-height:
cursor:
pointer;
color:
text-align:
center;
opacity:
0.8;
.num:
hover{background:
#F00;
}
hover,#photos:
hover{animation-play-state:
paused;
nth-child
（2）{margin-right:
30px}
nth-child（3）{margin-right:
60px}
nth-child（4）{margin-right:
90px}
nth-child（5）{margin-right:
120px}
nth-child（6）{margin-right:
150px}
nth-child（7）{margin-right:
180px}
nth-child（8）{margin-right:
210px}
nth-child（9）{margin-right:
240px}
#a1:
hover~#photos{animation:
ma1.5sease-outforwards;
#a2:
ma2.5sease-outforwards;
#a3:
ma3.5sease-outforwards;
#a4:
ma4.5sease-outforwards;
#a5:
hover~#photos{animation:
ma5.5sease-outforwards;
#a6:
ma6.5sease-outforwards;
#a7:
ma7.5sease-outforwards;
#a8:
ma8.5sease-outforwards;
#a9:
ma9.5sease-outforwards;
@keyframesma1{0%{margin-left:
-2000px;
}100%{margin-left:
-0px;
}}
@keyframesma2{0%{margin-left:
-500px;
@keyframesma3{100%{margin-left:
-1000px;
@keyframesma4{100%{margin-left:
-1500px;
@keyframesma5{100%{margin-left:
@keyframesma6{100%{margin-left:
-2500px;
@keyframesma7{100%{margin-left:
-3000px;
@keyframesma8{100%{margin-left:
-3500px;
@keyframesma9{100%{margin-left:
-4000px;
/style>
divid="
frame"
<
aid="
a1"
class="
num"
1<
a2"
2<
a3"
3<
a4"
4<
a5"
5<
a6"
6<
a7"
7<
a8"
8<
a9"
9<
photos"
play"
<
yase.jpg"
shanshan.jpg"
sikaha.jpg"
chuanzhang.jpg"
jieke.jpg"
kongming.jpg"
landing.jpg"
zhende.jpg"
bojue.jpg"
4.3.内容模块
4.3.1.模块设计思路
内容模块我负责其中两个的代码编写，主要是首页和英灵信息两栏。
首页为了简洁做了很多修改，大体保留一张全屏高清大图，即游戏宣传海报。
下面是一个视频，即游戏宣传pv，在下面则是页面尾部；
英灵信息一栏则是一张图片其中有人物信息的链接，之下是对英灵的解析，再之下是轮播器，最后是网页尾部。
4.3.2.模块界面截图
首页：
图中的二维码为游戏下载地址：
游戏宣传视频：
英灵信息板块：
上图文字部分为人物信息链接：
点开后：
英灵这一名词在游戏中的含义：
轮播器：
另外网页尾部附有一个哔哩哔哩的链接
4.3.3.模块实现主要代码
首页一栏的所有代码：
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
title>
欢迎来到FGO的世界！
/title>
.div2{background-color:
105%}
.div1li{float:
.div2img{width:
.div3{background-color:
#000040;
78%;
25px}
.div4{background-color:
15%;
0px}
.div5{background-color:
10%;
25%}
.div6{background-color:
float:
90%;
.div7{background-color:
50%;
.div8{background-color:
.div8p{font-family:
"
楷体"
;
font-size:
20px;
.photo{margin-top:
-45px;
100px}
#b1{font-size:
40px;
font-family:
华文琥珀"
#01139b}
#b2{font-size:
15px;
-25px}
a:
visited{text-decoration:
#c1b477}
link{text-decoration:
active{text-decoration:
#000040}
hover{text-decoration:
#800080}
/head>
div2"
fate-go.jpg"
div3"
style="
-2px;
width=600px;
520px;
background:
URL（sptp1.jpg）"
center>
embedsrc="
2.mp4"
width="
580"
height="
453"
autostart="
false"
/embed>
/center>
div4"
div5"
pid="
b1"
604▏<
/p>
div6"
div7"
604logo.jpg"
photo"
div8"
b2"
本游戏由哔哩哔哩代理|<
atarget="
_blank"
升级会员 