WEB程序设计基础 学 号：201109XXX班 级：电气 110X姓 名：张 XXXXX 一、设计思路设计目标：设计一个图文并茂的游戏介绍网页。网页中包括音乐和视频。设计思路：本次设计共有三个网页，包括主页，图文介绍，视频欣赏。代码内容主要涉及图片及多媒体的链接，文字的对齐方式，超链接的设置，网页特效的使用。设计步骤：（1）首页置顶为滚动文字，用分割线分隔内容，菜单是使用javaScript语言编写的特效代码，用分割线分隔正文内容，图像分布于正文的左右两侧，底部加入自动播放的音乐。在写入内容前，先定义网页的背景颜色及设定背景图片，并使之与滚动条对应滚动。文本的颜色，字体，链接颜色等。然后开始写入正文内容，插入滚动文字作为标题（h1号大小），编写菜单代码（此处于网上摘录一段菜单特效代码）。写入文本内容，定义文字大小颜色，对齐方式；插入图片，设置图片的位置，设置图片链接。底下加入滚动文字。最后调整结构，排版（在文本与菜单之间加入分隔线。）使网页看起来更加美观。为增加效果，在页面进入时，会有网页展开效果（如从中间展开、向两边展开、百叶窗等；此处我设置了随机选取）。另外当双击网页时，可实现自动滚屏功能，方便阅览。主页的界面（2）图文页代码编写与首页类似，这里网页背景选用纯黑色。依旧是对网页先进行定义。然后再写入内容。最后排版。图片加入了显示特效，正常状况下为暗色，当鼠标移动到上面时，变成高亮状态。网页后面加入一段自动播放音乐的代码。为增加效果，在页面进入时，会有网页展开效果。另外当双击网页时，可实现自动滚屏功能，方便阅览。图文页面的上半部分，包括标题返回链接，特效图像。下半部分，包括文字内容及音乐。（3）视频页这个页面的定义代码与图文页一样。不同的是，在最顶上加入固定标题，然后是一段自动播放的视频。取消了音乐播放。下面的代码和图文页一样。不作说明。网页上半部分，包括标题和视频。下半部分，图像文字介绍。二、网页界面首页图文页视频页三、网页源代码首页代码 网页制作 一花一世界，一叶一菩提functionattachXMenu(objid)var tds=objid.getElementsByTagName(td);for(var i=0;itds.length;i+)with(tdsi)onmouseover=function()with(this)filters0.apply();style.background=#ec7272; /这是鼠标移上去时的背景颜色style.border=1px solid #e29e61; /边框style.color=#ffffff; /文字颜色filters0.play();onmouseout=function()with(this)filters0.apply();style.background=#4740a7; /这是鼠标离开时的背景颜色style.border=1px solid #554bde; /边框style.color=#bebaf3; /文字颜色filters0.play();絮 语 听 音首 页奇 幻 炫 影 attachXMenu(xmenu0); 流 年 剪 影 山围暮城一线天，雨落幻梦万念生。 黑岩山顶，王华站在一块黑色的岩石上，表情木然地抽了口烟，白色轻缈的烟雾缓缓从鼻腔喷出，消散无形，这是烟的一生。他觉得白色的烟雾好像带走了什么，可仔细一想却什么也没有带走。 王华看着徐徐下落的夕阳，映照着脚下的城市。离那座压抑的城市远了，他觉得自己好像脱离了这个世界，一种被抛弃的孤独与无助席卷全身。 本资料片背景主要叙述随着黑暗之门的打开，为了阻止燃烧军团的远征毁灭艾泽拉斯，战火已再度燃起，艾泽拉斯的英雄已经很少考虑诺森德大陆这片冰冻荒原，但古老的邪恶势力正在那里等待。已毁于战火的艾卓尼布鲁王朝中蛰伏的邪灵和它们邪恶的统治者却并未遗忘艾泽拉斯。版权所有，翻版收费 图文页代码 网页制作 天楼沙海风画壁，冥城九幽鬼打墙。返 回 首 页 var currentpos,timer; function initialize() timer=setInterval(scrollwindow(),16); function sc() clearInterval(timer); function scrollwindow() currentpos=document.body.scrollTop; window.scroll(0,+currentpos); if (currentpos != document.body.scrollTop) sc(); document.onmousedown=sc document.ondblclick=initialize !- function high(which2) theobject=which2 highlighting=setInterval(highlightit(theobject),50) function low(which2) clearInterval(highlighting) which2.filters.alpha.opacity=40 function highlightit(cur2) if (cur2.filters.alpha.opacity100) cur2.filters.alpha.opacity+=10 else if (window.highlighting) clearInterval(highlighting) img onmouseout=low(this) onmouseover=high(this) FILTER: alpha(opacity