主页制作动态技术

最新推荐文章于 2025-04-11 14:17:22 发布

jeffreyren

最新推荐文章于 2025-04-11 14:17:22 发布

阅读量736

点赞数

文章标签：浏览器 function javascript microsoft css border

本文链接：https://blog.youkuaiyun.com/jeffreyren/article/details/6394

版权

主页制作动态技术

作者: 濮青
来源: 起点工作室

传统的主页以文字和简单图像所构成，比较平实单一。现在，随着W3C组织（www.w3c.org）定义的新的HTML 4.0规范的出现，多种动态主页技术层出不穷，如CSS、ASP、DAO、CGI、JAVA脚本等，这些都极大地丰富了主页创作的手法和技术，给每一个网页设计者带来了更强大的工具。如今的主页是真正的由图象、动画、声音、视频集于一体的，且具有良好交互界面的新型多媒体动态主页。许多在过去想都不敢想的动态效果，如今借助于这些新技术可以轻而易举地实现。本文就网页编制过程中一些动态效果的实现加以描述，希望各位能够借以活跃一下你的网页。　

一、菜单技术　

菜单技术通常与框架(Frame)相结合，一般左侧框架为菜单项，主菜单点击一下可以出现子菜单，再点一下隐去子菜单，非常有趣和实用。菜单技术的实现可以有以下两种技术：

1、多页技术：Macromedia的主页即采用这种技术。就是先做一个没有展开项的主菜单的页面，然后分别制作每一个主菜单项展开后的页面，主菜单有多少项，就得做多少个子页面与之相对应。例如：

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

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

......

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

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

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

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

2、DHTML技术：在Microsoft主页上就采用这种技术。DHTML是比较新的技术，因此对于一些"古老"的浏览器来说，这种菜单实现方式就无能为力了。　例如：单击"点击这里"立刻就出现了下面的菜单，再点一下又隐去了，与多页技术相比，速度较快：

<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>　

......

<script TYPE="text/javascript">　

function clikker(a，b)　{　

if　(a.style.display==''){a.style.display='none';b.src='photo.gif';}　

else　{　　　a.style.display='';　　　b.src='photo.gif';　}}

</script>　

......

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

<dd><img ID="BBp"　SRC="photo。gif"　ALT="*"　ALIGN="MIDDLE"　

BORDER="0"　WIDTH="11"　HEIGHT="11">　

点击这里

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

οnclick="window.event.cancelBubble　=　true;">　

<a HREF="http://abc/">点击这里</a>　</div></dd></div>　

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

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

二、文字变色

这是Web上最常见的技术，当鼠标划过某个元素时，该元素立刻改变颜色，有时还会发出声音，就象多媒体教育软件一样。如果颜色调配得好，页面就会非常令人喜爱。实现文字变色的方法也有好多种，这里只简单地介绍其中的两种。　

1、单纯使用CSS技术，目前还只有IE 4.0支持这种技术。例如：

<style type="text/css">　

BODY　{　background：　white;　}　

A：link　{　color：　red　}　

A：visited　{　color：　maroon　}　

A：active　{　color：　fuchsia　}　

A：hover　{color：blue}　

</style>　

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

2、利用JavaScript脚本：例如：

<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>　

......

<span class="css1"　ID="x"　

οnmοuseοver="MM_changeProp(''，'document.all[/'x/']'，'style.color'，

'red'，'SPAN')" 　

οnmοuseοut="MM_changeProp(''，'document.all[/'x/']'，'style.color'，

blue'，'SPAN')"

改变文本颜色</span>　

由于IE 4.0和NC 4.0对对象的控制机制不同，因此脚本需要先检查浏览器，然后再作相应的处理。MM_changeProp()函数实现了这一种文本变色方法。这种方法需要在应变色的每个地方都用SPAN定义ID并添加onmouseover和onmouseout，这与第一种方法相比麻烦了不少。因此，一般还是选择上一种方法。　

三、动态按钮　

这里的动态按钮既不是gif动画，也不是FrontPage中提供的各种特效按钮。这种动态按钮的情况是：

当鼠标划过某一个按钮时，它会忽然动一下，似乎在诱惑着去点击它，很有意思。下面介绍实现方法。准备两幅图片，由于是按钮，不必很大，颜色也不必太花，简单的gif就行，两幅图要有一些差别，以免动了以后看不出来变化。它的实现代码为：

......

toc1on　=　new Image(42，　197);　

toc1on.src　=　"on.home.gif";　

toc1off　=　new Image(42，　197);　

toc1off.src　=　"home.gif";　

......　

function img_act(imgName)　

imgon　=　eval(imgName　+　"on.src");　

document　[imgName].src　=　imgon;　

......

function img_inact(imgName)　

imgoff　=　eval(imgName　+　"off.src");　

document　[imgName].src　=　imgoff;　

......

<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>　

应该注意的地方有两处：　

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

2.注意源文件中的各种符号，特别是引号，还要注意源图片文件的路径，最好用相对路径，以免站点上载后无法正常显示。当然，这种交换图片的方式也需要4.0以上版本的浏览器的支持。

四、提示的话　

把鼠标放到一幅图片上就能出现提示信息，就像好多软件的按钮给出功能提示一样。这一功能在网页编辑中很容易实现，源代码如下：

......　

<img　SRC="../images/button_who.gif"　NAME="who"　

title="我的个人小档案"　ALT="我是谁^_^"　>

......　

Title这一属性很有用吧!它可用于除了BASE、BASEFONT、HEAD、HTML、META、PARAM、SCRIPT、STYLE、TITLE以外的所有元素中，以定义鼠标划过时的提示信息。　

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