WEB游戏网页制作报告(含源代码).docVIP

WEB程序设计基础 学 号：201109XXX 班 级：电气 110X 姓 名：张 XXXXX 一、设计思路 设计目标：设计一个图文并茂的游戏介绍网页。网页中包括音乐和视频。 设计思路：本次设计共有三个网页，包括主页，图文介绍，视频欣赏。代码内容主要涉及图片及多媒体的链接，文字的对齐方式，超链接的设置，网页特效的使用。 设计步骤： （1）首页 置顶为滚动文字，用分割线分隔内容，菜单是使用javaScript语言编写的特效代码，用分割线分隔正文内容，图像分布于正文的左右两侧，底部加入自动播放的音乐。 在写入内容前，先定义网页的背景颜色及设定背景图片，并使之与滚动条对应滚动。文本的颜色，字体，链接颜色等。然后开始写入正文内容，插入滚动文字作为标题（h1号大小），编写菜单代码（此处于网上摘录一段菜单特效代码）。写入文本内容，定义文字大小颜色，对齐方式；插入图片，设置图片的位置，设置图片链接。底下加入滚动文字。最后调整结构，排版（在文本与菜单之间加入分隔线。）使网页看起来更加美观。 为增加效果，在页面进入时，会有网页展开效果（如从中间展开、向两边展开、百叶窗等；此处我设置了随机选取）。另外当双击网页时，可实现自动滚屏功能，方便阅览。 主页的界面 （2）图文页 代码编写与首页类似，这里网页背景选用纯黑色。依旧是对网页先进行定义。然后再写入内容。最后排版。 图片加入了显示特效，正常状况下为暗色，当鼠标移动到上面时，变成高亮状态。 网页后面加入一段自动播放音乐的代码。 为增加效果，在页面进入时，会有网页展开效果。另外当双击网页时，可实现自动滚屏功能，方便阅览。 图文页面的上半部分，包括标题返回链接，特效图像。 下半部分，包括文字内容及音乐。 （3）视频页 这个页面的定义代码与图文页一样。不同的是，在最顶上加入固定标题，然后是一段自动播放的视频。取消了音乐播放。下面的代码和图文页一样。不作说明。 网页上半部分，包括标题和视频。 下半部分，图像文字介绍。 二、网页界面 首页 图文页 视频页 三、网页源代码 首页代码 HTML HEAD title网页制作/title/HEAD BODY body background=d:/ls/05.jpg body bgproperties=fixed metahttp-equiv=Entercontent=revealTrans(duration=15, transition=23) marquee h1font color=#ffffff一花一世界，一叶一菩提/font/h1/marquee hr/ color=#0000ff img src=d:/ls/bj3.jpg width=1280 height=10 /p STYLE !--.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:none;color:#333333;border:1pxsolid##4740a7;background:##4700a7;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;} --/STYLE script functionattachXMenu(objid){var tds=objid.getElementsByTagName(td); for(var i=0;itds.length;i++){ with(tds[i]){ onmouseover=function(){ with(this){ filters[0].apply(); style.background=#ec7272; //这是鼠标移上去时的背景颜色 style.border=1px solid #e29e61; //边框 style.color=#ffffff; //文字颜色 filters[0].play(); } } onmouseout=function(){ with(this){ filters[0].apply(); style.background=#4740a7; //这是鼠标离开时的背景颜色 style.border=1px solid #554bde; //边框 style.color=#bebaf3; //文字颜色 filters[0].play();}}}}} /script /head body div align=center table border=1 width=778 cellpadding=0 s