W3C组织(www.w3c.org)定义的新的HTML 4.0规范给每一个网页设计者带来了更强大的工具，这是一项影响所有网络开发者和设计者的变化，许多在过去想都不敢想的动态效果，如今借助于DHTML和CSS可以轻而易举地实现，这里就网页编制过程中一些效果的实现加以详述，希望您能够借以活跃一下您的网页。
* 菜单技术
访问过Microsoft和Macromedia站点的人假如细心的话，一定会注重到其中的菜单技术，点击一下出现子菜单，再点一下隐去子菜单，很是有趣和实用。笔者分别下载了这两个页面，在对源码进行分析之后，发现他们用的并不是同一种方法，而且两种方法各有利弊，下面让我们来看一下他们都是如何实现的。
Macromedia 采用的是多页技术。就是先做一个没有展开项的主菜单的页面，然后分别制作每一个主菜单项展开后的页面，主菜单有多少项，就得做多少个子页面与之相对应。下面我们举个简单的例子加以说明
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;title%26gt;A menu example%26lt;/title%26gt;
%26lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"%26gt;
%26lt;/head%26gt;
%26lt;body bgcolor="#FFFFFF"%26gt;
%26lt;a name="abc"%26gt;%26lt;/a%26gt;%26lt;p%26gt;
%26lt;a href="menu_2.htm#abc"%26gt;%26lt;b%26gt;Click here!%26lt;/b%26gt;%26lt;/a%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;title%26gt;A menu example%26lt;/title%26gt;
%26lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"%26gt;
%26lt;/head%26gt;
%26lt;body bgcolor="#FFFFFF"%26gt;
%26lt;p%26gt;%26lt;a name="abc"%26gt;%26lt;/a%26gt;%26lt;/p%26gt;
%26lt;p%26gt;%26lt;a href="menu_1.htm#abc"%26gt;
%26lt;b%26gt;Click here!%26lt;/b%26gt;%26lt;/a%26gt; %26lt;/p%26gt;
list 1
list 2
list 3
%26lt;/body%26gt;
%26lt;/html%26gt;
点击图1中的Click here!就会出现图2的效果。具体实现时，一定要注重标签%26lt;a name=" "%26gt;的定义和使用，要做到一一对应，否则就会乱套。另外，当菜单项很多时，记住只有当前列出的子菜单处用%26lt;a name=" "%26gt;来定义，别的主菜单项应分别链接到它相应展开的页面去。
这种方法实现得很简单，一般人很快就能把握，而且任何浏览器均可支持，但它的缺点也是明显的。首先是慢，往返调用各个页面必然带来长时间的等待，只有页面上都是文字时，才感觉不到停滞；再就是编制困难，虽然技术简单，但是一个一个地制作实在是有点麻烦。因此，这种技术还是有一定的局限性的。
Microsoft采用的是DHTML技术。DHTML是比较新的技术，因此对于一些“古老”的浏览器来说，这种菜单实现方式就无能为力了。
我们还是举个例子来说明一下。
如图3，单击 Product %26amp; Services 马上就出现了下面的菜单，再点一下又隐去了，和Macromedia的一样，不同的是仿佛快了许多，它的源代码如下。
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"%26gt;
%26lt;title%26gt;Welcome to Microsoft's Homepage%26lt;/title%26gt;
%26lt;style TYPE="text/css"%26gt;
.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margin-left: 14;}
.NV2 {position:relative;font-size:.9em;font-weight:normal;}
%26lt;/style%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;script TYPE="text/javascript"%26gt;
function clikker(a,b) {
if (a.style.display ==') {
a.style.display = 'none';
b.src='usm.gif';
}
else {
a.style.display=';
b.src='dsmh.gif';
}
}
%26lt;/script%26gt;
%26lt;div CLASS="NV1" ID="BB" onClick="clikker(BB1,BBp);"%26gt;
%26lt;dd%26gt;%26lt;img ID="BBp" SRC="dsmh.gif" ALT="*" ALIGN="MIDDLE" BORDER="0" WIDTH="11" HEIGHT="11"%26gt;
Products %26amp; Services
%26lt;div CLASS="NV2" ID="BB1" STYLE="display:';"
onclick="window.event.cancelBubble = true;"%26gt;
%26lt;a HREF="/products/"%26gt;%26lt;p%26gt;Product Catalog%26lt;/a%26gt;
%26lt;a HREF="Technical'>http://support.microsoft.com/support/"%26gt;Technical Support%26lt;/a%26gt;
%26lt;a HREF="/events/"%26gt;Events %26amp; Seminars%26lt;/a%26gt;
%26lt;a HREF="/train_cert/"%26gt;Training %26amp; Certification%26lt;/a%26gt;
%26lt;a HREF="/referral/sr_default.asp"%26gt;Referrals to 3rd Parties%26lt;/a%26gt; %26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;/dd%26gt;
%26lt;/div%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
在源代码中，.NV1和.NV2 是CSS字体定义，clikker函数是控制菜单项显示和隐藏的，其中变量a控制文字，变量b控制图片（因下载不全，图中未显示）。在实际应用时，请注重 div所定义的范围，不要在点击时把别的主菜单项也隐去了。
Microsoft的实现方式相对比较高明，它速度快，制作比较简单，只需要一个页面就行了。不足之处是至少需要 IE 4.0或 NN 4.0以上版本的支持。
两种方法各有利弊，您到底选用哪种，这要看您的主页性质和对浏览器的支持情况。
* 文字变色
这是Web上最常见的技术，当你的鼠标划过某个元素时，该元素马上改变颜色，有时还会发出声音，就像多媒体教育软件一样。假如您的颜色调配得好，页面就会非常令人喜爱。
实现文字变色的方法也有好多种，这里只简单地介绍其中的两种。
第一种方法是单纯使用CSS技术，目前还只有IE 4.0支持这种技术。它的示例代码如下。
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;title%26gt;A study of population dynamics%26lt;/title%26gt;
%26lt;style type="text/css"%26gt;
BODY { background: white; }
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
A:hover {color:blue}
%26lt;/style%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;p%26gt;%26lt;a href="www.microsoft.com"%26gt;
这是一个最简单的利用CSS技术控制文本颜色的例子.%26lt;/a%26gt;%26lt;/p%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
在这个示例中，链接文字起初用红色显示，当鼠标划过文字时变为蓝色，点击访问时改为紫红色，访问之后又变为栗色。由于Netscape还不支持link、visited、hover等CSS属性，因此，您要是用Communicator 的话，就看不到这些效果了。
第二种方法是利用 JavaScript编写一个小脚本程序来运行，从而起到变色的目的。它的示例代码如下。
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;title%26gt;Change text color%26lt;/title%26gt;
%26lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"%26gt;
%26lt;style type="text/css"%26gt;
%26lt;!--
.css1 { font-family: "Courier New", Courier, mono; font-size: 14pt; font-style: normal; line-height: normal; font-weight: bold; color: blue}
--%26gt;
%26lt;/style%26gt;
%26lt;script language="JavaScript"%26gt;
function MM_changeProp(objStrNS,objStrIE,theProp,theValue) {
var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE);
if ((theObj != null) %26amp;%26amp; (theProp.indexOf("style.") != 0 %26amp;%26amp;
theObj.style != null))
eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '="'+theValue+'"');
}
%26lt;/script%26gt;
%26lt;/head%26gt;
%26lt;body bgcolor="#FFFFFF"%26gt;
%26lt;span class="css1" ID="x"
onmouseover="MM_changeProp(','document.all[\'x\']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all[\'x\']','style.color','blue','SPAN')"%26gt;
改变文本颜色.%26lt;/span%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
由于IE 4.0 和NN 4.0 对对象的控制机制不同，因此需要先检查浏览器，然后再作相应的处理。MM_changeProp()函数实现了这一种文本变色方法。这种方法需要在应变色的每个地方都用span定义ID并添加onmouseover和onmouseout，这与第一种方法相比麻烦了不少。因此，您若不是对Microsoft很有意见的话，就用第一种方法为好。
* 动态按钮
这里的动态按钮既不是.gif动画，也不是FrontPage 中提供的各种特效按钮。相信您一定碰到过这种情况当您的鼠标划过某一个按钮时，它会忽然动一下，似乎在诱惑您去点击它，很有意思是吗？下面我们来实现它。
首先您应该预备两幅图片，由于是按钮，不必很大，颜色也不必太花，简单的.gif就行，两幅图要有一些差别，免得动了以后看不出来。下面是我做的两张图片。
接下来让我们来看看动态效果是怎么实现的。其源代码如下。
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;title%26gt;Push-In Buttons%26lt;/title%26gt;
%26lt;/head%26gt;
%26lt;body bgcolor=ffffff%26gt;
%26lt;script%26gt;
%26lt;!--
versionButton = 1
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if ( browserVer %26gt;= 3)
versionButton = "3";
if (versionButton == "3")
{
toc1on = new Image(42, 197);
toc1on.src = "on.home.gif";
toc1off = new Image(42, 197);
toc1off.src = "home.gif";
}
function img_act(imgName)
{
if (versionButton == "3")
{
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
}
function img_inact(imgName)
{
if (versionButton == "3")
{
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
// --%26gt;
%26lt;/script%26gt;
%26lt;a href=http://www.microsoft.com
onMouseover = "img_act('toc1')"
onMouseout = "img_inact('toc1')"%26gt;%26lt;img src=home.gif
width=100 height=50 border=0 name="toc1"%26gt;%26lt;/a%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
应该注重的地方有两处
1.一定要给img赋一个名字，然后在源图片定义处应用这个名字。
2.注重源文件中的各种符号，非凡是引号，还要注重源图片文件的路径，最好用相对路径，以免站点上载后无法正常显示。当然，这种交换图片的方式也需要4.0以上版本的浏览器的支持，假如您还在使用3.0版本的浏览器，就赶紧升级吧！
* 提示的话
把鼠标放到一幅图片上就能出现提示信息，就像好多软件的按钮给出功能提示一样。这一功能在网页编辑中很轻易实现，下面我们来看看其效果。
实现这种效果很轻易，看看源代码就明白了。
......
%26lt;tr%26gt;
%26lt;td WIDTH="57"%26gt;%26lt;a HREF="who.html" TARGET="main"
ONMOUSEOVER="img_act('who')"
ONMOUSEOUT="img_inact('who')"%26gt;%26lt;img
SRC="../images/button_who0.gif" NAME="who"
title="周华健个人小档案" ALT="我是谁"
BORDER="0" WIDTH="113" HEIGHT="45"%26gt;%26lt;/a%26gt;%26lt;a
HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')"
ONMOUSEOUT="img_inact('who')"%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
......
代码中加下划线的部分就是实现它的方法。Title这一属性很有用吧！它可用于除了BASE、BASEFONT、HEAD、HTML、META、PARAM、SCRIPT、STYLE、TITLE以外的所有元素中，以定义鼠标划过时的提示信息。
以上我们就网页编制过程中的一些小技巧进行了具体的讨论。Web上有许多设计精美、技术先进的页面，分析它们的源码是很好的学习途径。计算机技术在不断地进步，面对这些纷至沓来的新技术DHTML、CSS、XML......我们只有迎难而上去把握它，并把它应用到我们的网页上，使我们的网页更加活跃起来。
（天津市蓟县旅游局 301900 贾贺敬）