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

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动画、焦点图、背景音乐的话，效果会更好。当然，作为游戏攻略网站，加一些战斗视频的话或许会更像专业网站了。总之，我感觉网页制作这门课程很有意