让你的网页活跃起来
发布时间:2006-10-14 3:09:18   收集提供:gaoqian

    W3C组织(www.w3c.org)定义的新的HTML 4.0规范给每一个网页设计者带来了更强大的工具,这是一项影响所有网络开发者和设计者的变化,许多在过去想都不敢想的动态效果,如今借助于DHTML和CSS可以轻而易举地实现,这里就网页编制过程中一些效果的实现加以详述,希望您能够借以活跃一下您的网页。   

  * 菜单技术 

  访问过Microsoft和Macromedia站点的人如果细心的话,一定会注意到其中的菜单技术,点击一下出现子菜单,再点一下隐去子菜单,很是有趣和实用。笔者分别下载了这两个页面,在对源码进行分析之后,发现他们用的并不是同一种方法,而且两种方法各有利弊,下面让我们来看一下他们都是如何实现的。 

  Macromedia 采用的是多页技术。就是先做一个没有展开项的主菜单的页面,然后分别制作每一个主菜单项展开后的页面,主菜单有多少项,就得做多少个子页面与之相对应。下面我们举个简单的例子加以说明: 


  <html> 

  <head> 

  <title>A menu example</title> 

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

  </head> 

  <body bgcolor="#FFFFFF"> 

  <a name="abc"></a><p> 

  <a href="menu_2.htm#abc"><b>Click here!</b></a> 

  </body> 

  </html> 

  <html> 

  <head> 

  <title>A menu example</title> 

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

  </head> 

  <body bgcolor="#FFFFFF"> 

  <p><a name="abc"></a></p> 

  <p><a href="menu_1.htm#abc"> 

  <b>Click here!</b></a> </p> 

   list 1
 

   list 2
 

   list 3
 

  </body> 

  </html> 


  点击图1中的Click here!就会出现图2的效果。具体实现时,一定要注意标签<a name=" ">的定义和使用,要做到一一对应,否则就会乱套。另外,当菜单项很多时,记住只有当前列出的子菜单处用<a name=" ">来定义,别的主菜单项应分别链接到它相应展开的页面去。 

  这种方法实现得很简单,一般人很快就能掌握,而且任何浏览器均可支持,但它的缺点也是明显的。首先是慢,来回调用各个页面必然带来长时间的等待,只有页面上都是文字时,才感觉不到停滞;再就是编制困难,虽然技术简单,但是一个一个地制作实在是有点麻烦。因此,这种技术还是有一定的局限性的。 

  Microsoft采用的是DHTML技术。DHTML是比较新的技术,因此对于一些“古老”的浏览器来说,这种菜单实现方式就无能为力了。 

  我们还是举个例子来说明一下。 


  如图3,单击 Product & Services 立刻就出现了下面的菜单,再点一下又隐去了,和Macromedia的一样,不同的是仿佛快了许多,它的源代码如下。 

  <html> 

  <head> 

  <meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"> 

  <title>Welcome to Microsoft's Homepage</title> 

   

  <style TYPE="text/css"> 

  .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;} 

  </style> 

   

  </head> 

  <body> 

   

  <script TYPE="text/javascript"> 

   

   function clikker(a,b) { 

   if (a.style.display ==') { 

   a.style.display = 'none'; 

   b.src='usm.gif'; 

   } 

   else { 

   a.style.display='; 

   b.src='dsmh.gif'; 

   } 

   } 

  </script> 

  <div CLASS="NV1" ID="BB" onClick="clikker(BB1,BBp);"> 

   <dd><img ID="BBp" SRC="dsmh.gif" ALT="*" ALIGN="MIDDLE" BORDER="0" WIDTH="11" HEIGHT="11"> 

   Products & Services 

   <div CLASS="NV2" ID="BB1" STYLE="display:';" 

   onclick="window.event.cancelBubble = true;"> 

   <a HREF="/products/"><p>Product Catalog</a>
 

   <a HREF="http://support.microsoft.com/support/">Technical Support</a>
 

   <a HREF="/events/">Events & Seminars</a>
 

   <a HREF="/train_cert/">Training & Certification</a>
 

   <a HREF="/referral/sr_default.asp">Referrals to 3rd Parties</a> </p> 

   </div> 

   </dd> 

  </div> 

  </body> 

  </html> 

   

  在源代码中,.NV1和.NV2 是CSS字体定义,clikker函数是控制菜单项显示和隐藏的,其中变量a控制文字,变量b控制图片(因下载不全,图中未显示)。在实际应用时,请注意 div所定义的范围,不要在点击时把别的主菜单项也隐去了。 

  Microsoft的实现方式相对比较高明,它速度快,制作比较简单,只需要一个页面就行了。不足之处是至少需要 IE 4.0或 NN 4.0以上版本的支持。 

  两种方法各有利弊,您到底选用哪种,这要看您的主页性质和对浏览器的支持情况。 

   

  * 文字变色 

  这是Web上最常见的技术,当你的鼠标划过某个元素时,该元素立刻改变颜色,有时还会发出声音,就像多媒体教育软件一样。如果您的颜色调配得好,页面就会非常令人喜爱。 

  实现文字变色的方法也有好多种,这里只简单地介绍其中的两种。 

  第一种方法是单纯使用CSS技术,目前还只有IE 4.0支持这种技术。它的示例代码如下。 

  <html> 

   

  <head> 

  <title>A study of population dynamics</title> 

  <style type="text/css"> 

   BODY { background: white; } 

   A:link { color: red } 

   A:visited { color: maroon } 

   A:active { color: fuchsia } 

   A:hover {color:blue} 

  </style> 

  </head> 

   

  <body> 

  <p><a href="www.microsoft.com"> 

  这是一个最简单的利用CSS技术控制文本颜色的例子.</a></p> 

  </body> 

   

  </html> 

  在这个示例中,链接文字起初用红色显示,当鼠标划过文字时变为蓝色,点击访问时改为紫红色,访问之后又变为栗色。由于Netscape还不支持link、visited、hover等CSS属性,因此,您要是用Communicator 的话,就看不到这些效果了。 

  第二种方法是利用 JavaScript编写一个小脚本程序来运行,从而起到变色的目的。它的示例代码如下。 

  <html> 

  <head> 

  <title>Change text color</title> 

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

   

  <style type="text/css"> 

  <!-- 

  .css1 { font-family: "Courier New", Courier, mono; font-size: 14pt; font-style: normal; line-height: normal; font-weight: bold; color: blue} 

  --> 

  </style> 

   

  <script language="JavaScript"> 

  function MM_changeProp(objStrNS,objStrIE,theProp,theValue) { 

   var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE); 

   if ((theObj != null) && (theProp.indexOf("style.") != 0 && 

  theObj.style != null)) 

   eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '="'+theValue+'"'); 

  } 

  </script> 

  </head> 

  <body bgcolor="#FFFFFF"> 

  <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')"> 

  改变文本颜色.</span> 

  </body> 

  </html> 

  由于IE 4.0 和NN 4.0 对对象的控制机制不同,因此需要先检查浏览器,然后再作相应的处理。MM_changeProp()函数实现了这一种文本变色方法。这种方法需要在应变色的每个地方都用span定义ID并添加onmouseover和onmouseout,这与第一种方法相比麻烦了不少。因此,您若不是对Microsoft很有意见的话,就用第一种方法为好。 

   

  * 动态按钮 

  这里的动态按钮既不是.gif动画,也不是FrontPage 中提供的各种特效按钮。相信您一定遇到过这种情况:当您的鼠标划过某一个按钮时,它会忽然动一下,似乎在诱惑您去点击它,很有意思是吗?下面我们来实现它。 

  首先您应该准备两幅图片,由于是按钮,不必很大,颜色也不必太花,简单的.gif就行,两幅图要有一些差别,免得动了以后看不出来。下面是我做的两张图片。 


  接下来让我们来看看动态效果是怎么实现的。其源代码如下。 

  <html> 

  <head> 

  <title>Push-In Buttons</title> 

  </head> 

  <body bgcolor=ffffff> 

  <script> 

  <!-- 

  versionButton = 1 

  browserName = navigator.appName; 

  browserVer = parseInt(navigator.appVersion); 

   if ( browserVer >= 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; 

   } 

   } 

  // --> 

  </script> 

  <a href=http://www.microsoft.com 

  onMouseover = "img_act('toc1')" 

  onMouseout = "img_inact('toc1')"><img src=home.gif 

  width=100 height=50 border=0 name="toc1"></a> 

  </body> 

  </html> 

  应该注意的地方有两处: 

  1.一定要给img赋一个名字,然后在源图片定义处应用这个名字。 

  2.注意源文件中的各种符号,特别是引号,还要注意源图片文件的路径,最好用相对路径,以免站点上载后无法正常显示。当然,这种交换图片的方式也需要4.0以上版本的浏览器的支持,如果您还在使用3.0版本的浏览器,就赶快升级吧! 

   

  * 提示的话 

  把鼠标放到一幅图片上就能出现提示信息,就像好多软件的按钮给出功能提示一样。这一功能在网页编辑中很容易实现,下面我们来看看其效果。 


  实现这种效果很容易,看看源代码就明白了。 

  ...... 

  <tr> 

  <td WIDTH="57"><a HREF="who.html" TARGET="main" 

  ONMOUSEOVER="img_act('who')" 

  ONMOUSEOUT="img_inact('who')"><img 

  SRC="../images/button_who0.gif" NAME="who" 

  title="周华健个人小档案" ALT="我是谁" 

  BORDER="0" WIDTH="113" HEIGHT="45"></a><a 

  HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')" 

  ONMOUSEOUT="img_inact('who')"></a></td> 

  </tr> 

  ...... 

  代码中加下划线的部分就是实现它的方法。Title这一属性很有用吧!它可用于除了BASE、BASEFONT、HEAD、HTML、META、PARAM、SCRIPT、STYLE、TITLE以外的所有元素中,以定义鼠标划过时的提示信息。 

     以上我们就网页编制过程中的一些小技巧进行了详细的讨论。Web上有许多设计精美、技术先进的页面,分析它们的源码是很好的学习途径。计算机技术在不断地进步,面对这些纷至沓来的新技术:DHTML、CSS、XML......我们只有迎难而上去掌握它,并把它应用到我们的网页上,使我们的网页更加活跃起来。 

  (天津市蓟县旅游局 301900 贾贺敬)

 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50