xxxx学院计算机学院综合性实验
实 验 报 告
课程名称          xxxxxxxxxxxx               
实验学期    2012  至  2013    学年 第  一  学期
学生所在系部          计算机学院             
年级    10级    专业班级    计科B103班   
学生姓名  xxxxxxxxxx  学号    xxxxxxxxxxxxx 
任课教师              xxxxxxxxxx               
实验成绩                                       
计算机学院制
《网页制作A》课程综合性实验报告
开课实验室：信息楼基础六实验室                      2012年 11月20日
实验题目
综合网站的规划、设计与制作
一、实验目的
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，代码区别如下：
原代码：img src="image/daohangtiao.png"
改后，二级页面：img src="../image/daohangtiao.png"
改后，三级页面：img src="../../image/daohangtiao.png"
这样就解决了这个问题。
网页工作全部完工后，我再次思索这个问题，思考良久，我发现在“wangye”“juese”“zhiye”
的文件夹下可以都建一个“image”的文件夹，放入各自所需要的图片等资源，那么那些路径就不需要改了，问题同样可以解决。
四、实验结果及分析
经过数天的努力，DNF强强攻略站最终完美问世。
起先我比较中意框架集，想用三级框架来设计整个网页的布局，但最终因为背景图片在几个框架中不容易契合，进而放弃了框架集。最终我选择了绘制Div来进行布局，事实上，这次网页制作我用了很多的Div网页布局。在三级页面中每个页面都用了不少于20个的Div来布局。事实证明，绘制Div布局还是很方便快捷的。
在做主页时我设计了一个外部通用的CSS样式来编辑字体的排版和颜、大小等。但是后来发现只能用于主页，用到其他页面时会“失效”。不得已之下，我只能给每个页面都内嵌一个CSS样式来编辑标题、段落的字体大小、颜和排版等问题。
这个小网站的制作结果我还是挺满意的，毕竟是第一次独立制作，遇到的各种问题还可以更同学讨论，查阅书籍，向老师请教，收益颇丰。
我想，如果在网站上再多加一些flash动画、焦点图、背景音乐的话，效果会更好。当然，作为游戏攻略网站，加一些战斗视频的话或许会更像专业网站了。
总之，我感觉网页制作这门课程很有意思，能学到很多东西，我也学到了很多。
教 师 评 价
评定项目
A
B
C
D
评定项目
A
B
C
D
算法正确
界面美观，布局合理
程序结构合理
个人网站的制作实验报告
操作熟练
语法、语义正确
解析完整
实验结果正确
文字流畅
报告规范
题解正确
其他：
评价教师签名：
年  月  日

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。