网页制作实验报告范例.docVIP

PAGE

第PAGE6页

xxxx学院计算机学院综合性实验

实验报告

课程名称xxxxxxxxxxxx

实验学期2012至2013学年第一学期

学生所在系部计算机学院

年级10级专业班级计科B103班

学生姓名xxxxxxxxxx学号xxxxxxxxxxxxx

任课教师xxxxxxxxxx

实验成绩

计算机学院制

《网页制作A》课程综合性实验报告

开课实验室：信息楼基础六实验室2012年11

实验题目

综合网站的规划、设计与制作

实验目的

DNF强强攻略站网站的规划、设计与制作

二、设备与环境

1、硬件：计算机

2、软件：Dreamweaver、Flash、Fireworks

三、实验内容

1、网站规划

《地下城与勇士》是一款韩国网络游戏公司NEOPLE开发的免费角色扮演2D游戏，由三星电子发行，并于2005年8月在韩国正式发布。该游戏是一款2D卷轴式横版格斗过关网络游戏(MMOACT)，大量继承了众多家用机、街机2D格斗游戏的特色。以任务引导角色成长为中心，结合副本、PVP、PVE为辅，与其他网络游戏同样具有装备与等级的改变，并拥有共上千多种装备道具。每个人物有最多12个道具装备位置，在游戏中可以允许最多4个玩家进行组队挑战关卡，同样也可以进行4对4的PK。

腾讯在2008年取得中国大陆运营权。至今，已经近4年了。

近4年的成长，DNF在我国大陆已拥有众多玩家，各种玩法、角色、职业、副本地图、技能也层出不穷。

所以，我就做一个简单的DNF攻略网站，向大家介绍一下此游戏的游戏特色、故事背景和地图副本，并着重介绍各角色和职业的特色。

2、设计

根目录下有主页index.html,image,css,wangye几个文件夹，二级页面放在wangye文件夹的目录下，三级页面放在wagnye文件夹里的juese和zhiye两个文件夹中，如下图所示：

网站Logo借助久游网DNF攻略站的Logo制作，

如右图所示：

3、制作

在制作这个网站之前，我观看了DNF官方资料站，久游攻略站等几个DNF玩家经常光顾的网站，看他们的结构、层次的设计，图文的排版，还有资料的介绍重点等。

最后，我决定了主要对九大角色和各职业介绍。

对于主页，我决定做得很简洁，只有一段文字，和几项主要内容的连接；导航条有主页、地图、角色和职业四项；背景以黑色为主调，附加一张DNF的游戏图片作背景。

主页效果如下：

二级页面有三个，有游戏背景、游戏特色和地图副本三大块，下附有地图副本的效果图：

三级页面主要有两种：角色简介和职业详解。

角色介绍有九大角色的炫图、导师和传说，共分九个页面。效果如下：

职业详解依据九大角色，每个角色都有自己独特的2到4个职业，写在一个页面上，共九个页面，效果如下：

在每个页面上统一都有导航条，可以链接到主页、地图副本、角色简介和职业详解。如下：

还有如上图的角色介绍链接可以分别链接到九大角色，左图的职业详解可以链接到九大角色所对应的职业：

还有如上图的角色介绍链接可以分别链接到九大角色，左图的职业详解可以链接到九大角色所对应的职业：

另外，三个二级页面的最后都有“返回”可以返回主页面从而进入其它页面，这里就不再附图了。

4、测试

在设计过程中进行了无数次的页面中锚点链接和页面间链接，基本上都是一次性完成的。但是，当我做了好几个网页之后，发现所有网页都放在站点根目录下显得杂乱而且不方便管理，于是决定再建一个“wangye”的文件夹来存放网页，只把index.html放在根目录下。结果……

结果二级、三级页面的图片链接、背景全部失效了。思考之后，发现问题是image文件夹在根目录下，将网页放入“wagnye”后，链接路径需要改为上一目录的image，代码区别如下：

原代码：imgsrc=image/daohangtiao.png

改后，二级页面：imgsrc=../image/daohangtiao.png

改后，三级页面：imgsrc=../../image/daohangtiao.png

这样就解决了这个问题。

网页工作全部完工后，我再次思索这个问题，思考良久，我发现在“wangye”“juese”“zhiye”

的文件夹下可以都建一个“image”的文件夹，放入各自所需要的图片等资源，那么那些路径