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

WEB程序设计基础学号：201109XXX班级：电气110X姓名：张XXXXX一、设计思路设计目标：设计一个图文并茂的游戏介绍网页。网页中包括音乐和视频。设计思路：本次设计共有三个网页，包括主页，图文介绍，视频欣赏。代码内容主要涉及图片及多媒体的链接，文字的对齐方式，超链接的设置，网页特效的使用。设计步骤：（1）首页置顶为滚动文字，用分割线分隔内容，菜单是使用javaScript语言编写的特效代码，用分割线分隔正文内容，图像分布于正文的左右两侧，底部加入自动播放的音乐。在写入内容前，先定义网页的背景颜色及设定背景图片，并使之与滚动条对应滚动。文本的颜色，字体，链接颜色等。然后开始写入正文内容，插入滚动文字作为标题（h1号大小），编写菜单代码（此处于网上摘录一段菜单特效代码）。写入文本内容，定义文字大小颜色，对齐方式；插入图片，设置图片的位置，设置图片链接。底下加入滚动文字。最后调整结构，排版（在文本与菜单之间加入分隔线。）使网页看起来更加美观。为增加效果，在页面进入时，会有网页展开效果（如从中间展开、向两边展开、百叶窗等；此处我设置了随机选取）。另外当双击网页时，可实现自动滚屏功能，方便阅览。主页的界面（2）图文页代码编写与首页类似，这里网页背景选用纯黑色。依旧是对网页先进行定义。然后再写入内容。最后排版。图片加入了显示特效，正常状况下为暗色，当鼠标移动到上面时，变成高亮状态。网页后面加入一段自动播放音乐的代码。为增加效果，在页面进入时，会有网页展开效果。另外当双击网页时，可实现自动滚屏功能，方便阅览。图文页面的上半部分，包括标题返回链接，特效图像。下半部分，包括文字内容及音乐。（3）视频页这个页面的定义代码与图文页一样。不同的是，在最顶上加入固定标题，然后是一段自动播放的视频。取消了音乐播放。下面的代码和图文页一样。不作说明。网页上半部分，包括标题和视频。下半部分，图像文字介绍。二、网页界面首页图文页视频页三、网页源代码首页代码HTMLHEADtitle网页制作/title/HEADBODYbodybackground=d:/ls/05.jpgbodybgproperties=fixedmetahttp-equiv=Page-Entercontent=revealTrans(duration=15,transition=23)marqueeh1fontcolor=#ffffff一花一世界，一叶一菩提/font/h1/marqueehr/color=#0000ffimgsrc=d:/ls/bj3.jpgwidth=1280height=10/pSTYLE!--.xmenutd{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;}--/STYLEscriptfunctionattachXMenu(objid){vartds=objid.getElementsByTagName('td');for(vari=0;itds.length;i++){with(tds[i]){onmouseover=function(){with(this){filters[0].apply();style.background='#ec7272';//这是鼠标移上去时的背景颜色style.border='1pxsolid#e29e61';//边框style.color='#ffffff';//文字颜色filters[0].play();}}onmouseout=function(){with(this){filters[0].apply();style.background='#4740a7';//这是鼠标离开时的背景颜色style.border='1pxsolid#554bde';//边框style.color='#bebaf3';//文字颜色filters[0].play();}}}}}/script/headbodydivalign=centertableborder=1width=778cellpadding=0style=border-collapse:collapseheight=30id=table4bgcolor=#DBDBDBbordercolor=#DBDBDBcellspacing=0trtddivalign=centertableclass=xmenuid=xmenu0border=0width=776cellspacing=3cellpadding=3height=30id=table5trtdonclick=window.open('d:/ls/TUWEN.html','_blank');絮语听音/tdtdonclick=window.open('d:/shuoye.html','_blank');首页/tdtdonclick=window.open('d:/ls/SHIPIN.html','_blank');奇幻炫影/td/tr/tablescriptattachXMenu(xmenu0);/script/div/td/tr/table/divhr/color=#ff0000centerfontcolor=#ffffffh2bi流年剪影/i/b/h2/font/centerprefontcolor=#ffffffahref=d:/ls/TUWEN.htmlimgsrc=d:/ls/06.gifalign=lefthspace=10/a山围暮城一线天，雨落幻梦万念生。黑岩山顶，王华站在一块黑色的岩石上，表情木然地抽了口烟，白色轻缈的烟雾缓缓从鼻腔喷出，消散无形，这是烟的一生。他觉得白色的烟雾好像带走了什么，可仔细一想却什么也没有带走。王华看着徐徐下落的夕阳，映照着脚下的城市。离那座压抑的城市远了，他觉得自己好像脱离了这个世界，一种被抛弃的孤独与无助席卷全身。hr/color=#ff0000ahref=d:/ls/SHIPIN.htmlimgsrc=d:/ls/07.gifalign=righthspace=10/apalign=right本资料片背景主要叙述随着黑暗之门的打开，为了阻止燃烧军团的远征毁灭艾泽拉斯，战火已再度燃起，艾泽拉斯的英雄已经很少考虑诺森德大陆这片冰冻荒原，但古老的邪恶势力正在那里等待。已毁于战火的艾卓—尼布鲁王朝中蛰伏的邪灵和它们邪恶的统治者却并未遗忘艾泽拉斯。/p/font/preimgsrc=d:/ls/bj4.jpgwidth=1280height=10h3fontcolor=#ffffffMARQUEEscrollAmount=3direction=left版权所有，翻版收费/MARQUEE/font/h3/BODY/HEAD/HTML图文页代码HTMLHEADtitle网页制作/title/HEADBODYh1fontcolor=#ff0000centerMARQUEEscrollAmount=3direction=leftblink天楼沙海风画壁，冥城九幽鬼打墙。/blink/MARQUEE/center/font/h1bodybgcolor=#000000text=#ffffffimgsrc=d:/ls/bj3.jpgwidth=1280height=10/ptrahref=d:/shuoye.html返回首页/ahr/metahttp-equiv=Page-Entercontent=revealTrans(duration=15,transition=23)centerSCRIPTlanguage=javascriptvarcurrentpos,timer;functioninitialize(){timer=setInterval(scrollwindow(),16);}functionsc(){clearInterval(timer);}functionscrollwindow(){currentpos=document.body.scrollTop;window.scroll(0,++currentpos);if(currentpos!=document.body.scrollTop)sc();}document.onmousedown=scdocument.ondblclick=initialize/SCRIPTSCRIPTlanguage=javascript1.2!--functionhigh(which2){theobject=which2highlighting=setInterval(highlightit(theobject),50)}functionlow(which2){clearInterval(highlighting)which2.filters.alpha.opacity=40}functionhighlightit(cur2){if(cur2.filters.alpha.opacity100)cur2.filters.alpha.opacity+=10elseif(window.highlighting)clearInterval(highlighting)}/scriptimgonmouseout=low(this)onmouseover=high(this)style=FILTER:alpha(opacity=40)src=d:/ls/06.jpg/centerhr/imgsrc=d:/ls/10.jpgfontcolor=#ffffffprepalign=center云雾飘渺，如烟雾般飘荡着，随着一阵清风徐徐而来，给山顶带来了几分湿润的气息。雾过云飘，露出光秃秃的山顶。山顶正中，一个身材高大的胖子坐在地上，嘴里还咀嚼着什么，“哎，我这最后一根鸡腿也吃了，那家伙怎么还不来，这不是故意吊我的胃口，想吃他一顿大餐还真是不容易。上天啊！为什么不让他是一个女人，如果是那样，我就算拼了老命也要娶她为妻，让她天天来安慰我的胃。”一边说着，胖子用沾满油腻的大手揉了揉自己的肚子，脸上充满了哀叹之色，只不过，哀叹之色出现在他这张胖大的脸上。“胖子，你又在白日做梦了。你以为，这次我还打不过你么？只要我胜了，你就必须还我凤女。”低沉的声音如同来自九幽一般。七点绚丽的光芒飘然而至，叮的一声轻响，以北斗七星之势同时落在胖子身前，那是七柄刀，但却只有刀柄露在外面，每一柄刀的末端，都镶嵌着一颗形状不同、颜色不同的璀璨宝石。蓝、红、青、黄、银、白、黑七种颜色交映生辉，顿时使山顶上覆盖了一层氤氲宝光。金发青年人眼中流露出痴迷的光芒，“冰雪女神的叹息——晨露。”嗡的一声轻响，蓝光骤然湛放，山顶上的水元素明显强盛起来。“火焰之神的咆哮——正阳刀。”红光亮。“自由之风的轻吟——傲天刀。”青光亮。“大地苏醒的旋律——长生刀。”黄光亮。“神机百变的六芒——璇玑刀。”银光亮。“贯通天地的曙光——圣耀刀。”白光亮。“永世地狱的诅咒——噬魔刀。”黑光亮。七色光芒骤然湛放，交织成如同彩虹一般的绚丽色彩。金发青年人面露笑容，看着那七色光芒，道：“它们，是七大神刃，也是凝聚着冰、火、风、土、空间、光明、黑暗七种元素的魔法杖，最重