WEB程序设计基础
    学 号：******XXX
班 级：有网无法连接苹果商店电气 110X
姓 名：张 XXXXX
一、设计思路
设计目标：设计一个图文并茂的游戏介绍网页。网页中包括音乐和视频。
设计思路：本次设计共有三个网页，包括主页，图文介绍，视频欣赏。代码内容主要涉及图片及多媒体的链接，文字的对齐方式，超链接的设置，网页特效的使用。
设计步骤：
（1）首页
置顶为滚动文字，用分割线分隔内容，菜单是使用javaScript语言编写的特效代码，用分割线
分隔正文内容，图像分布于正文的左右两侧，底部加入自动播放的音乐。
在写入内容前，先定义网页的背景颜及设定背景图片，并使之与滚动条对应滚动。文本的颜，字体，链接颜等。然后开始写入正文内容，插入滚动文字作为标题（h1号大小），编写菜单代码（此处于网上摘录一段菜单特效代码）。写入文本内容，定义文字大小颜，对齐方式；插入图片，设置图片的位置，设置图片链接。底下加入滚动文字。最后调整结构，排版（在文本与菜单之间加入分隔线。）使网页看起来更加美观。
为增加效果，在页面进入时，会有网页展开效果（如从中间展开、向两边展开、百叶窗等；此处我设置了随机选取）。另外当双击网页时，可实现自动滚屏功能，方便阅览。
主页的界面
（2）图文页
代码编写与首页类似，这里网页背景选用纯黑。依旧是对网页先进行定义。然后再写入内容。最后排版。
图片加入了显示特效，正常状况下为暗，当鼠标移动到上面时，变成高亮状态。
网页后面加入一段自动播放音乐的代码。
为增加效果，在页面进入时，会有网页展开效果。另外当双击网页时，可实现自动滚屏功能，方便阅览。
图文页面的上半部分，包括标题返回链接，特效图像。
下半部分，包括文字内容及音乐。
（3）视频页
这个页面的定义代码与图文页一样。不同的是，在最顶上加入固定标题，然后是一段自动播放的视频。取消了音乐播放。下面的代码和图文页一样。不作说明。
网页上半部分，包括标题和视频。
张卫健的老婆张茜
大圣娶亲多少钱
下半部分，图像文字介绍。
二、网页界面
首页
图文页
视频页
三、网页源代码
首页代码
<HTML>
<HEAD>
<title>网页制作</title></HEAD>
<BODY>
<body background="d:/ls/05.jpg"  body bgproperties=fixed>
<metahttp-equiv="Page-Enter"content="revealTrans(duration=15, transition=23)">
<marquee ><h1><font 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 ElementsByTagName('td');
    for(var i=0;i<tds.length;i++){
        with(tds[i]){
            onmouseover=function(){
                with(this){
                    filters[0].apply();
                    style.background='#ec7272'; //这是鼠标移上去时的背景颜
                    style.border='1px solid #e29e61'; //边框
                    lor='#ffffff'; //文字颜
                    filters[0].play();
                }
            }
            onmouseout=function(){
多地上调2021年最低工资标准
                with(this){
                    filters[0].apply();
                    style.background='#4740a7'; //这是鼠标离开时的背景颜
                    style.border='1px solid #554bde'; //边框
                    lor='#bebaf3'; //文字颜
                    filters[0].play();}}}}}
</script>
</head>
<body>
<div align="center">
<table border="1" width="778" cellpadding="0" height="30" id="table4" bgcolor=#DBDBDB bordercolor="#DBDBDB" cellspacing="0">
<tr>
<td><div align="center">
新中国高光时刻
<table class="xmenu" id="xmenu0" border="0" width="776" cellspacing="3" cellpadding="
3" height="30" id="table5"><tr>
<td onclick="window.open('d:/ls/TUWEN.html',  '_blank');">絮 语 听 音</td>
<td onclick="window.open('d:/shuoye.html',  '_blank');">首      页</td><tdonclick="window.open('d:/ls/SHIPIN.html',  '_blank');">奇 幻 炫 影 </td>
</tr></table><script>attachXMenu(xmenu0); </script></div></td></tr></table></div>