您的位置:首页→Dreamweaver→行为详解
Dreamweaver MX的行为详解
Call JavaScript(调用 JavaScript )
调用 JavaScript 是使选中的物件具有可执行的能力。方法:
1、选取物件,并打开 Behaviors inspector 。
2、在 Behaviors inspector 窗口中点击“ + ”号,打开下拉选单。在其中选择“ Call JavaScript
”动作。
3、在打开的窗口中录入 JavaScript 语句或变量。我们可以录入: window.close()
4、点击确定退出对话框。并确认其缺省事件值为“OnClick”。
5、F12预览一下,当我们点击按按钮时,浏览器会自动关闭。
Change Property (改变属性)
使用本功能可以动态改变物件的属性,从而响应用户的动作,产生交互操作的效果。我们以动态改变一个层的背景色为例说明这个功能的用法:
1、选择在网页中己存在的一个层,假定它的名称为: LyrRed 。
2、在 Behaviors inspector 窗口中点击“ + ”号,打开下拉选单。在其中选择“ Change Property
”动作。
3、这时将弹出一个对话框,如图修改其属。注意,只有当你选择了正确的目标浏览器时,这个效果才能正确显示出来。对于不熟悉语言的读者来说,这个动作是较难掌握的。
4、本例子是当用户用鼠标点击层时,层的背景色变为我们定义的: #f1fafa 颜色。
Check Browser(检查目标浏览器)
正如我们所知道的,两大有着各自个性化标准的浏览器给网页制作人员带来了很大的麻烦,当我们不知道用户是使用何种浏览器访问我们的网站时,就不得不得罪其中的一种浏览器用户。使用
Check Browser功能就可以智能地检测对方的浏览器类型及版本。为了实现智能检测用户浏览器类型并适当引入为不同浏览器所设计的页面,我们进行如下操作:
1、首先做好两个分别为 IE 、 Navigator 优化的页面,存盘为: 4IE.HTML 、 4NN.HTML ,以备下一步调用。
2、由于本项功能是在页面加载时( onload )进行 ,
相对应的物件就是页面本身 $#@60;body$#@62;,所以在进行下一步操作之前并不一定非要选择 $#@60;body$#@62;,系统默认值是指向整个页面的。
3、打开 Behavior inspector ,并选点“ ”按键,在下拉菜单中选择 Check Browser。这时会打开一个对话框,要求您进行适当的设置。如图设置参数,注意在这里就使用到了前面己建好的两个页面。
其中我们需要用逻辑思维进行跳转设置,学过程序的读者会觉得很轻松,“ Stay on this page”的意思是不进行任何操作,一般我们都是选取“
Goto URL”跳至首选地址或“ Go to Alt URL”跳至次要地址。
4、点击“ ”,回到 Behavior inspector,确认事件项中为“; ”,可以预览了。
Check Plugin 检查插件
虽然现在利用 FLASH 的主页越来越多,但并不是所有的用户都能在自己的浏览器上观看到效果,因为播放FLASH、SHOCKWAVE
等第三方多媒体程序时是需要使用适当的浏览器插件的。为了照顾不同的用户,也使得网站更具有人性化的特点,我们可以利用“检查插件”这一功能自动把不具备播放条件的用户引导到非FLASH
版本页面中去。
1、首先做好两个分别为含有 FLASH 的页面和不含有 FLASH 文件的页面,存盘为: flash.htm 、 noflash.htm
,以备下一步调用。
2、同上例一样,本例中仍不需选中任何物件,直接打开 Behavior inspector,并选点“ + ”按键,在下拉菜单中选择
Check Plugin 。
3、如图所示进行参数设置:在简体中文版的操作系统中,这个对话框会出现显示不全的毛病,不过只要你按项来填写,滚动条还是可以工作的。注意,要选中对话框下面的“
Always go to first URL if detection is not possible ”。
4、本功能除了可以检测 FLASH 插件外,还可以检测: Shockwave, LiveAudio, Netscape
media player, QuickTime。由于 Flash 5己经出版,大家还可以到 MacroMedia的网站上去扩充本项的功能。当然,如果你的程序足够厉害的话,也可以自行改造一个。这将在以后的课中涉及到。
5、点击“ ”,回到 Behavior inspector,确认事件项中为“; ”,可以存盘预览了。
Control Shockwave or Flash (控制 FLASH)
使用本功能可以手工控制嵌入文档中的 FALSH 或 SHOCKWAVE 。 DreamWeaver 对同属本公司出品的
FLASH 格式在控制上有极大优势,我们不需要在 FLASH 动画中做出诸如“停止”、“播放”、“回放”、“转至”等功能控制,在后期的
中设置显得更富定制性。
1、在这个例子中我们以 FLASH 动画为例,至于 SHOCKWAVE 的操作方法大同小异。首先做好一个 FLASH
动画,存盘为: flash.swf ,以备下一步调用。使用菜单中的插入媒体命令插入 FLASH 动画,并且一定要为其命名,我们在属性面板中录入:
CotrlFls
2、选中这个 FLASH 物件,直接打开 Behavior inspector ,并选点“ ”按键,在下拉菜单中选择
。
3、在弹出的对话框中选择“停止”、“播放”、“回放”、“转至”控制命令即可以了。
Drag Layer (拖动层)
此功能可以让浏览者在浏览器中拖动己有的层,常见的拼盘游戏、网络试题等都是使用了此功能。在 DeramWeaver的姐妹篇
coursebuilder中强化了这个功能并将其制成了功用更为强大模板,在此我们只介绍单纯利用 DreamWeaver来完成拖动层的实现。
1、在网页中加入一个层(诸如此类的简单动作在以后的说明中不再详述)。使用加入图片或者改变背颜色的方法使得此层清楚可见。
2、因为用户在拖动层以前这个行为必须在之前被执行,所以最好让此层在 BODY 中并且使用 onload 属性。同样直接打开
Behavior inspector ,并选点“ ”按键,在下拉菜单中选择 Drag Layer。
3、在弹出的对话框中按要求定制。我们可以令此层只在水平或者垂直方向上移动,也可以令其在任意方向移动。使用“ Get Current
Position”可以讯速得到当前层在网页中的位置座标。
4、如果你不愿意使用 Onload 事件,也可以使用 OnMouseOver 事件,但之前你必须在层中设置一个空链接并以
OnMouseOver 事件来触发 Drag Layer ,有能力的读者可以自行尝试。
Go To URL (在窗口中打开链接)
使用本功能可以轻松实现在窗口中打开链接的功能。由于操作过程与前面的例子相似,十分简单,在此不做详述。值得注意的是在框架结构的网页中一定要养成为各框架命名的习惯,否则此功能无法正确实现。
Jump Menu & Jump Menu Go
使用此功能可以控制跳转菜单的定制,实际等于双击页面的中跳转菜单。此功能操作简便,在此不做详述。
Open Browser Window (定制窗口)
使用本功能可以定制打开窗口的大小、命名、是否有工具栏、是否有地址栏等属性。灵活使用本功能,可以得到意想不到的屏幕效果。
我们利用点击按钮打开一个无边框、无工具栏的窗口为例。先准备一个 文件,取名为 show.htm ,插入一个按钮并使其链接指向这个页面。
1、我们利用点击按钮打开一个无边框、无工具栏的窗口为例。先准备一个HTML 文件,取名为show.htm ,插入一个按钮并使其链接指向这个页面。
2、选取按钮物件,并打开 Behaviors inspector 。在 Behaviors inspector 窗口中点击“
+ ”号,打开下拉选单。在其中选择“ Open Browser Window ”动作。
3、在弹出的窗口中,如图所示,在 width 与 Height 中分别录入要打开窗口的宽与高。在属性一项中可选取:导航栏、菜单、地址栏、滚动条、状态栏等等。在
Windows name中设置打开窗口的名字。
4、点击确定,存盘预览。
Play Sound (播放背景音乐)
使用本功能可以设置当前页面的背景音乐,以及对音乐播放的控制。因为播放音乐是需要音频的支持,所以您需要确定你嵌入网页的音乐格式能够被设别。
1、选取按钮物件,并打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“Play
Sound”动作。
2、在弹出的对话框中选取一个音乐文件。一般来说小巧的MIDI或MP3文件是最适合选用的,如果你能找到相对较小的WAV
文件也是可以的。尽量不要选用不常用的文件格式而且文件字节也不要过大。
3、确定事件为Onload。
Popup Message (弹出信息对话框)
此功能是最常用也是最有效率的提示方法。
1、选取按钮物件,并打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“Popup
Message”动作。
2、在弹出的对话框中录入需要显示的文字,这些文字将成为未来对话框的主体文字。除此之外你也可以在其中使用JavaScript语句,只需要加在大括号中。
Preload Images (预下载图片)
使用本功能只在提高网页的显示速度,当本页中存在许多图片之时,尤其是本页由多幅图片组成。否则因为下载速度较慢,文字部份先显示而图片迟迟不能显示,不利于浏览。本功能实现较简单,可以只选择BODY或不选择物件即可在指导下完成,本教程不做详述。
Set Text of Layer(Frame ,Status Bar ,Text Field )动态改变层、框架、状态栏、文字域的文字
这几项功能十分相近,我们在一起进行讲解。一般来说改变其中的文字只在提供交互性的提示或结果,我们就以改变状态栏的提示为例来一同讲解他们的使用方法:
1、选取按钮物件,并打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择SetText-$#@62;Status
Bar动作。
在弹出的对话框中录入需要显示的文字,这些文字将成为浏览器状态栏的提示文字。除此之外你也可以在其中使用JavaScript语句,只需要加在大括号中。
2、点击确定退回到Behaviors inspector,在其中把事件选为OnMouseOver。
3、存盘预览。这时你将发现当你的鼠标移到物件上时浏览器下方的状态栏文字变成了我们刚才设置的文字。
注:如果你想让鼠标离开物件后状态栏恢复空白的话,重复前三步,在第一步的后期将对话框中文字设为无,并且在第二步把事件选为OnMouseOut即可。
由于其它三项的实现与之相似,不再多说。需要强调的是,不要小看这些小命令,综合使用会实现看起来十分有气势的主页。好了,你亲自试试吧。
Show-Hide Layers (显示隐藏层)
显示隐藏层命令可以使我们能够利用交互行为控制在页面中的层的显示与隐藏。层在应用中是十分广泛的,但是由于两大浏览器对它的定义大有不同,所以在实际应用中并不是很多,但是我相信随着更高版本的浏览器的出现,对双方代码的兼容能够更上一层楼。
1、打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“Show-Hide
Layers”动作。
2、如图所示,在对话框中显示了在当前页中所有可用的层,如果页中加的层过多的话,为它们分别起个易于识别的名字则很重要。选中其中的一个层,再点击下面的“显示”或“隐藏”按钮来定制层的显隐。
Swap Image (/Restore)交叠图片
一般来说交叠图片用于接收用户的动作而动态改变图像的地方,比如当我们把鼠标指向某个图片链接时,这个图片会变成另外的一个图像,而当鼠标移出图片区时图片再恢复到原来的样子。
我们使用一个例子来说明使用方法及注意事项:
首先我们要准备两个图片备用,值得说明的是这两个图片的尺寸需要一致,否则会因尺寸的不同而导至后一组图片拉伸或变形。
2、使用菜单命令插入图片序列中的第一幅图片(PIC1)。
3、打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“
Swap Image”动作。
4、在弹出的对话框中,选取图片序列中的第二幅图片(PIC2),有必要同时选中“预下载图像”与“鼠标移出时恢复图像”选项。
事实上接受用户鼠标的动作而转换图像可以最多达到四幅:原始图、鼠标悬浮时显示图、鼠标点击时显示图、鼠标点击后显示图。有精力的读者可自行在此代码基础上研究开发,当然你也可以借鉴由FireWorks产生的代码。
Go To Timeline Frame 在时线中跳转
TimeLine是DreamWeaver提供的最富特色的动画功能,虽然它最终会为新兴的动画技术所取代,但是在一段相当长的时间内,使用语句来控制TimeLine的动画还是极有意义的。
相比于Flash动画,在“时线”中的对帧的控制还是显得比较薄弱,但是如果你使用“Go To Timeline Frame”功能,可以控制对某帧的跳转,从而实现动画停止、回转、跳至某帧的功能。
1、打开一个含有Timeline的页面,使用菜单中“窗口”—$#@62;“时线”来打开Timeline inspector。对于如何创建Timeline读者可以参照其他教程,我推荐一个站点:http://mail.3322.net/。
2、选择物件,并打开Behavior inspector,在Behaviors inspector窗口中点击“+”号,打开下拉选单。其中选择“Go
To Timeline”动作,并适当选择命令。
3、如图所示,我们在下拉菜单中选择要控制的时线,并键入跳至的帧数。
4、点击确定,回到Behaviors inspector中,确认一种动作。
Validate Form检测表单合法性
当我们在网上填写一些比如个人资料的表单时,当我们因错误录入时会有一个窗口弹出提示我们录入的规范。一般我们可以利用CGI程序来完成比较复杂的检验工作,但是当检验是需要即时提示或者不具备CGI环境时,我们可以利用Validate
Form命令来检验表单填写的合法性。
我们先以填写年龄为例:
1、先在面页中插入一个表单,为其命名。选取这个表单项并打开并打开Behavior inspector,在Behaviors
inspector窗口中点击“+”号,打开下拉选单。在其中选择“Validate Form”命令。
2、在弹出的对话框和上半部选择需要控制的表单项,并在Value项中选中Required,这一点很重要,在下面的选项中我们可以进行数种过滤:Anything(任意)、数字、邮件地址、限制区间数字。我们在这个例子中输入合法年龄,从1到110。
3、点击确定回到Behavior inspector,确定动作为:OnBlur,现在你可以预览了,当你在此表单中录入的数字不在1~110之间时,浏览器马上会提示:“需要录入1~110之间的数字”
还有一个情况是针对群体表单项进行设置,操作基本与单项相同,只是在第一步时,是选中$#@60;form$#@62;标签,而不是单个单元罢了。
至此我们就己经利用一些浅显的例子讲解了各行为的具体用法,但还是要强调的是不要小看这些功能,只要你灵活应用,就能做到别人难以企及的精彩页面。还有一点就是为了考虑低配置、低传输率的用户,也不要在同一页中过多地使用行为,那样会使得整个页面的下载与显示十分缓慢。
用dreamweaver来做透明效果:选中刚才已插入的flash动画,右击鼠标选择properties调出属性面板后,再单击parameter按钮,在弹出的对话框中点击加号图标,在左侧的parameter中键入wmode在右侧的value框内键入transparent点击ok
每个浏览器都提供一组事件,这些事件可以与“行为”面板的“动作”(+)
弹出菜单中列出的动作相关联。当 Web 页的访问者与页进行交互时(例如,单击某个图像),浏览器生成事件;这些事件可用于调用引起动作发生的
JavaScript 函数。(没有用户交互也可以生成事件,例如设置页每 10 秒钟自动重新载入。)DW MX
2004 提供许多可以使用这些事件触发的常用动作。
根据所选对象和在“显示事件”子菜单中指定的浏览器的不同,显示在“事件”弹出菜单中的事件将有所不同。若要查明对于给定的页元素给定的浏览器支持哪些事件,请在您的文档中插入该页元素并向其附加一个行为,然后查看“行为”面板中的“事件”弹出菜单。如果页上尚不存在相关的对象或所选的对象不能接收事件,则这些事件将禁用(灰显)。如果未显示预期的事件,则检查是否选择了正确的对象,或在“显示事件”弹出菜单中更改目标浏览器。
如果要将行为附加到某个图像,则一些事件(例如 onMouseOver)显示在括号中。这些事件仅用于链接。当选择其中之一时,DW
MX 2004 在图像周围使用 a 标签来定义一个空链接。在属性检查器的“链接”文本框中,该空链接表示为
javascript:;。如果要将其变为一个指向另一页的真正链接,您可以更改链接值,但是如果删除了
JavaScript 链接却未用另一个链接来代替它,则将删除该行为。
在动作选单中,越是高版本的浏览器支持的动作越多,我们先认识一下它们:
|
事件 |
适用浏览器 |
简单描述
|
| onAbort
|
NS3,
NS4, IE4 |
当用户终止下载传输时发生
|
| onAfterUpdate
|
IE4
|
当面面中的数据被更新时发生
|
| onBeforeUpdate |
IE4
|
当面面中数源完成更新但还未失去焦点时发生 |
onBlur
|
NS3, NS4, IE3, IE4 |
当用户取消焦点时(如取消文字选中)发生 |
| onChange
|
NS3,
NS4, IE3, IE4 |
当用户改变面属性时发生
|
| onClick
|
NS3,
NS4, IE3, IE4 |
当用户用鼠标点击特定物件时发生
|
| onDblClick
|
NS4,
IE4 |
当用户用鼠标双击特定物件时发生 |
| onError
|
NS3,
NS4, IE4
|
当页面出现错误时(下载期间)发生
|
| onFinish
|
IE4
|
字幕结束一个循环时发生
|
| onFocus
|
NS3,
NS4, IE3, IE4 |
使产生焦点时发生
|
| onHelp
|
IE4
|
当用户点击浏览器帮助按键时
|
onKeyDown
|
NS4,
IE4 |
当用户按下一个按键(未释放)时
|
onKeyPress
|
NS4,
IE4 |
当用户按下一个按键(己释放)时 |
| onKeyUp
|
NS4,
IE4 |
当按键被释放时
|
onLoad
|
NS3,
NS4, IE3, IE4 |
当网页加载时
|
| onMouseDown
|
NS4,
IE4
|
当用户按下鼠标键时
|
onMouseMove
|
IE3,
IE4 |
当用户在物件上移动鼠标时
|
| onMouseOut
|
NS3,
NS4, IE4 |
当用户将鼠标移离物件上时
|
onMouseOver
|
NS3,
NS4, IE3, IE4
|
当用户将鼠标移入物件上时 |
onMouseUp
|
NS4,
IE4
|
当鼠标按键被释放时 |
onMove
|
NS4
|
当鼠标移动时 |
onReadyStateChange
|
IE4
|
当指定元素状态改变时发生 |
onReset
|
NS3,
NS4, IE3, IE4
|
当重置表单初始值时 |
onResize
|
NS4,
IE4
|
当用户改变(窗口)大小时 |
onRowEnter
|
IE4
|
当当前指针记录所对应的源记录被改变时发生 |
onRowExit
|
IE4
|
当当前指针记录所对应的源记录即将改变时发生 |
onScroll
|
IE4
|
当滚屏时发生 |
onSelect
|
NS3,
NS4, IE3, IE4
|
当选中文字时发生 |
onStart
|
IE4
|
当字幕开始循环时发生 |
onSubmit
|
NS3,
NS4, IE3, IE4
|
当提交时发生 |
onUnload
|
NS3,
NS4, IE3, IE4
|
当重新下载时发生 |
|
|