这个部分虽然名为“javascript设计”,实际上不并真正涉及javascript语言,而只是想通过对Dreamweaver2的Behavior功能介绍来告诉你任何如何不手动写任何javascript代码却又可以达到各种完美的网页特效。所以,即便你是一个建网新手,也希望你能够满怀兴趣地看下去(实际上这个部分也并不枯燥)很快,你也可以实现许多离奇的网页特效了。为了便于理解,我想通过实例来讲述这个部分的内容。
用Dreamweaver2打开一个已经存在的网页,这个网页尽可能地包括文字、图片、表格、层和Flash,因为并不是随意的HTML标签都可以调用所有Behavior中的javascript效果。然后选择“Windows 〉 Behaviors”(F8)命令,打开Behaviors面板。Dreamweaver的Behaviors功能实际上是在工作的网页中插入javascrpt代码,并且在对应的HTML元素中加如事件处理器。整个Behaviors面板可以分为三个部分:
加减按钮,用来在选定的HTML标签中添加或删除Action;
“events for”确定所用的Action将适合于什么版本的浏览器,其中共有“适合3.0和4.0版本的浏览器(3.0+4.0 Browser)”、“适合4.0版本的浏览器(4.0 Browser)”、“适合IE4.0(IE4.0)”、“适合IE3.0(IE3.0)”、“适合Netscape3.0(Netscape3.0)”、“适合Netscape4.0(Netscape4.0)”六个选项,所以在添加Action之前只要定义正确的“events for”,就不必担心自己做的网页在不同的浏览器下会显示效果大相径庭了。
events列表,就是那块白色的区域,在events列表中罗列了被选定的HTML元素所包含的所有事件处理语句(events)。整个列表又分为左右两个部分,左边是时间列表,右边是事件名称。选中其中一个事件时,将会在此事件处理器栏上出现一个下拉箭头,单击此箭头可以呼出事件处理菜单,选择你需要的事件处理器就可以轻松改变javascript特效发生的条件,下面我来解释一些事件处理器的作用。
nLoad 当进入此页面时调用相应的javascript;
onUnload 当退出此页面时调用相应的javascript;
onResize 当改变此页面窗口大小时调用相应的javascript;
onMouseOver 当鼠标滑到此HTML元素之上时调用相应的javascript;
onMouseOut 当鼠标离开此HTML元素时调用相应的javascript;
onMouseDown 当鼠标箭头在此HTML元素之上鼠标被按下时调用相应的javascript;
onMouseUp 当鼠标箭头在此HTML元素之上鼠标被按下又弹起时调用相应的javascript;
onClick 当鼠标箭头在此HTML元素之上点击鼠标时调用相应的javascript;
onBlur 离开一个表单元素时调用相应的javascript;
onFocus 聚焦到一个表单元素时调用相应的javascript;
onChange 当一个表单元素被改变时调用相应的javascript;
onSelect 当一个表单元素被选中时调用相应的javascript;
onKeyDown 当在一个表单元素中按下键时调用相应的javascript;
onKeyup 当在一个表单元素中按下键并当此键回弹时调用相应的javascript。
HTML4.0还规定了其他不少事件处理器,由于不太常用,所以在此不多说了。下面我想举几个具体的例子来说明Behaviors的使用方法。在以下的例中我将events for设为默认的4.0 Browse。
例一、判断不同版本的浏览器,并且自动进入相对应的页面
1、按Ctrl+N新建一个HTML文件,在状态栏的左下角点中〈body〉标签。 在Behaviors面板中点击添加按钮,在弹出菜单中选Check Browser。
3、在Check Browser对话框中具体设置,可以根据三中浏览器(IE、Netscape、其他)而设置进入三个不同的页面(保持本页、go to Url和go to Alt Url)
4、然后在Behaviors面板的Events列表中就会出现“onLoad CheckBrowse”。这样就完成了,是不是有些不可思意,实在太简单了。
例二、当鼠标点击到一个图片上时浏览器播放声音 插入一个图片,然后在属性工具栏link栏中输入图片指向的网页地址。
在状态栏的左下角点中〈img〉标签左边的“〈a〉”标签。
在Behaviors面板中点击添加按钮,在弹出菜单中选Contrl Sound。
在“Play Sound”栏中填入声音文件所在地址。
然后在Behaviors面板的Events列表中就会出现“onClick PlaySound”,这样就完成了。
如果你希望当鼠标移动到此图片上就播放声音,只需将onClick 改为 onMouseOver。 如果声音文件很长,需要一个事件处理器停止播放,只要在Contrl Sound对话框中的Stop Sound中选中此声音即可。
例三、打开一个可以定义的新窗口
在网页中做一个连接,在状态栏的左下角点中〈a〉标签。
在Behaviors面板中点击添加按钮,在弹出菜单中选Open Browse Window。
在“Open Browse Window”对话框中添入页面所在的地址,同时你可以定制窗口大小,是否需要滚动条、工具栏、缩放块等等。如果你要在新开的窗口中加入关闭此窗口的功能的话,新窗口的名字一定不要忘了输入。
这就行了。
通过上面三个例子,是否觉得Behavior的好处了?何不自己动手试一试呢,由于篇幅有限,无法将Behaviors中的Actions的功能一一仔细讲述,只有你自己尝试了:)而且由于Dreamweaver提供了完全开放的插件环境,所以你可以从网上下载各种现成的Actions,轻松实现许多高难度的javascript特效。