《网站设计与网页制》课程设计.docx

《网站设计与网页制》课程设计.docx

《《网站设计与网页制》课程设计.docx》由会员分享，可在线阅读，更多相关《《网站设计与网页制》课程设计.docx（27页珍藏版）》请在冰豆网上搜索。

《网站设计与网页制》课程设计

河海大学文天学院

课程设计报告

所在系：

电气工程系

专业班级：

计算机科学与技术2班

学号：

150310239

姓名：

朱家伟

指导老师：

胡娟

所在学期：

2016-2017学年第二学期

实习地点：

河海大学大学文天学院H楼401室

2017年4月

河海大学文天学院课程设计评分表

平时表现（10分）

系统功能方案的合理性、创造性以及完成程度（20分）

界面的设计感和美观性（20分）

课程设计报告填写的质量（40分）

视频录制的效果（10分）

综合评定成绩

目录

1.网站的概述---------------------------------4

2.网站的初期规划------------------------------4

2.1.网站风格-------------------------------4

2.2.网站框架和布局---------------------------4

2.3.网站总体内容模块--------------------------4

2.4.网站logo设计----------------------------5

3.工具和技术----------------------------------5

3.1.工具---------------------------------5

3.2.技术---------------------------------5

4.网站实现-----------------------------------5

4.1.导航模块------------------------------6

4.1.1.模块设计思路----------------------6

4.1.2.模块界面截图----------------------6

4.1.3.模块实现主要代码--------------------6

4.2.轮播器模块-----------------------------7

4.2.1.模块设计思路----------------------7

4.2.2.模块界面截图----------------------7

4.2.3.模块实现主要代码--------------------9

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.模块实现主要代码

html,body{height:

100%}

.div1{background-color:

#800080;width:

100%;height:

10%}

.div1

li{float:

left;color:

#FFF;margin-left:

50px;margin-right:

50px;padding-top:

2px}

.div1ul{list-style-type:

none;margin:

0px;padding:

0px;margin-top:

1px}