|
|
|
[
来路：21kn.com 时间：2007-7-7 17:31:05
点击： ] |
|
|
|
|
|
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="http://www.21kn.com/Files/BeyondPic/2007-7/7/077717310550166.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 贾贺敬）
|
|
|
：：：：站长友情提示：多花一分钟学点什么都好：：：：
|
|
|
|
|
|
|
|
|
|
|
|
=
= 免责声明 = = |
|
①
欢迎转载我网所刊信息，请注明“来源：E天下网络”。
② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。
※联系方式：Airtofly@163.com |
|
|
|
|
|
|
