|
|||||||||||||||||
| 让你的网页活跃起来 |
|
|
W3C组织(www.w3c.org)定义的新的HTML 4.0规范给每一个网页设计者带来了更强大的工具，这是一项影响所有网络开发者和设计者的变化，许多在过去想都不敢想的动态效果，如今借助于DHTML和CSS可以轻而易举地实现，这里就网页编制过程中一些效果的实现加以详述，希望您能够借以活跃一下您的网页。 * 菜单技术 访问过Microsoft和Macromedia站点的人如果细心的话，一定会注意到其中的菜单技术，点击一下出现子菜单，再点一下隐去子菜单，很是有趣和实用。笔者分别下载了这两个页面，在对源码进行分析之后，发现他们用的并不是同一种方法，而且两种方法各有利弊，下面让我们来看一下他们都是如何实现的。 Macromedia 采用的是多页技术。就是先做一个没有展开项的主菜单的页面，然后分别制作每一个主菜单项展开后的页面，主菜单有多少项，就得做多少个子页面与之相对应。下面我们举个简单的例子加以说明：
<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>
这种方法实现得很简单，一般人很快就能掌握，而且任何浏览器均可支持，但它的缺点也是明显的。首先是慢，来回调用各个页面必然带来长时间的等待，只有页面上都是文字时，才感觉不到停滞；再就是编制困难，虽然技术简单，但是一个一个地制作实在是有点麻烦。因此，这种技术还是有一定的局限性的。 Microsoft采用的是DHTML技术。DHTML是比较新的技术，因此对于一些“古老”的浏览器来说，这种菜单实现方式就无能为力了。 我们还是举个例子来说明一下。
<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="Technical'>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"> |
|
| 上一篇:在网页上实现文字闪烁 下一篇:在你的主页中为Web Robot设计路标 |
| 大部分文章摘自网上，如有侵犯您的权益请与我们联系，我们会第一时间进行处理，谢谢! | [ 打印文章 ] [ 关闭窗口 ] |
|
|
|