Dreamweaver MX行为应用指南

附录

钟峰

“行为”(Behaviors)是Dreamweaver中一个很重要的概念。它集成在Dreamweaver中，可用来自动实现网页的动态效果和交互的JavaScript脚本程序。“行为”是Dreamweaver独特的概念，它使得我们不必去学习复杂的JavaScript程序也能方便迅速地实现一些网页的特殊效果。

一、“行为”基础

1.“行为”详解

我们先来了解一下“行为”的原理。一个完整的行为由“动作”和“事件”两个部分组成。“动作”是Dreamweaver预先编写好的JavaScript脚本程序，这些程序可以控制，例如打开一个新窗口、显示或隐藏层、播放一段音乐等动作；而“事件”是指我们对网页进行某种操作时，如鼠标点击、移动到某个图片上、键盘按下等，是否触发该事件。例如，当访问者将鼠标移动到某个链接上时，浏览器为该链接生成一个 onMouseOver事件。然后浏览器(IE或Netscape)检查是否存在一个为该链接生成事件时应该调用的JavaScript程序，也就是是否有一个预先设定的动作，如果这个动作是show layer，那么浏览器就将指定的那个层显示出来。

2.为网页添加一条“行为”

在“设计”面板上可以找到“行为”面板，如果找不到此面板，可点击“窗口→行为”菜单命令以打开“行为”面板。如（图19）所示。

添加一条“行为”的一般步骤是：首先在页面上选择需要添加“行为”的对象，如一个图片、一个链接。点击“行为”面板上的“+”按钮，从弹出的菜单中选择一个动作，如“播放声音”，在打开的动作设置对话框中设置好各个参数后回到“行为”面板。然后点击“事件”栏的倒三角形按钮，选择一个合适的事件。
(1)选择浏览器版本：
如果你是第一次使用行为面板，你会发现当你添加一个动作时，可供选择的事件非常少。这是因为Dreamweaver默认的浏览器版本是IE 3.0。所以为了能在特定浏览器下正常使用“行为”，首先要选择合适的事件集。选择事件集的方法是点击“行为”面板上部的“+”按钮，在弹出菜单中选择“显示事件”，这时会出现浏览器版本列表，从中选择“IE 5.0”选项。
注意：选择的浏览器版本越高，所支持的事件就越多。但并不是事件越多就越好，因为并不是所有人都使用的是最高版本的浏览器。
(2)选择动作：
在页面上选择好需要应用动作的对象后，我们为它添加动作。点击“行为”面板上的“+”按钮会出现所有动作的列表，选择你需要的动作后，在打开的设置对话框中进行具体的设置。
(3)选择触发事件：
点击“事件”栏的倒三角形按钮，选择一个合适的事件。当动作发生时即触发该事件。

二、基本动作应用

下面我们将逐一探讨Dreamweaver MX中内置的各种动作，详细介绍每一种动作的操作方法、参数设置及技巧。

1.播放声音

此动作的作用是为网页加入一段背景音乐。设置非常简单，选择此动作后将打开“播放声音”对话框，点击“浏览”按钮选择好需要播放的音乐文件即可。此动作的默认执行事件是onLoad，即打开网页就开始播放音乐，一般我们不必改动该事件。
注意：网页只支持MID和WAV两种格式的音乐文件。

2.打开浏览器窗口

此动作用于弹出新的网页，我们可以设置弹出的新网页的大小和外观。它实际上是调用JavaScript中的window.open()方法。该动作有多个设置选项：（图1）

注意：“要显示的URL”为必填项，其他参数均可不填，此时打开网页为正常大小；当页面中应用了多个此动作，而所有此动作设置的“窗口名称”都相同时，打开的网页都将在同一浏览器窗口出现，而不会打开多个；设置了窗口宽度和高度后，打开的网页窗口将不能改变大小，除非在“属性”选项中设置选中“调整大小手柄”项。

3.弹出信息

此动作经常用于在特定的条件下提示浏览者某些信息。如告诉注册者输入的密码太短等，它调用的是JavaScript的alert()方法，该动作也只有一个设置选项，在打开对话框中的“消息”栏中输入需要出现的信息即可。

4.调用JavaScript

此动作用于调用某一个JavaScript方法或函数，在打开的对话框中的“JavaScript”框中直接键入相应的文件即可。

5.改变属性

改变属性动作让我们可以轻易地控制网页中某个对象(标记)的属性，实现动态效果。它利用JavaScript找到指定的对象，然后改写该对象的属性值。此动作设置选项如下：（图2）

注意：使用此动作前一定要先给需要改变属性的对象命名，否则在动作设置窗口中将无法找到此对象，容易造成JavaScript出错。

6.恢复交换图像

此动作用来恢复设置“交换图像”，却又因为某种原因而失去交换效果的图像。不需作任何设置，选择此动作即可完成。

7.检查表单

此动作能够检测用户填写的表单内容是否符合我们预先设定的规范。这样可以在表单被提交之前找出填写错误的地方，提示用户重新输入，避免了表单提交后再交给服务器端去检测输入的正确性，而在客户端就完成检测，减轻了服务器的负担和对网络的占用。（图3）

提示：与改变属性动作一样，本动作也建议在使用前先为要检查的表单元素命名，以便在“命名的栏位”中方便准确地找到此元素。另外，此动作一般使用的事件为onSubmit，在表单提交时检查。方法是先选择整个表单，然后设置此动作，这样动作就会自动附加到

标记，并默认事件为onSubmit。

8.检查插件

“检查插件”动作通常应用于制作引导页。比如一个网站有Flash和HTML两种版本，利用此插件我们可以检测浏览器是否安装了Flash插件，如果有，则引导浏览者进入Flash版的网站；如果没有，则进入HTML版的普通网站。这样就避免了没有安装插件的的浏览者不会看到无法显示的网页。（图4）

9.检查浏览器

与“检查插件”动作类似，“检查浏览器”也是检测客户端来实现网页的引导。不同的是，此动作是检测用户的浏览器信息，然后根据浏览器类型和版本的不同将用户引导到不同的网页。这两个动作的目的都是尽量提高网站的兼容性，确保不同用户在不同环境下都能达到最佳的浏览效果。
本动作设置窗口如（图20）所示。基本思路是判断用户的浏览器是Netscape还是IE或是其他浏览器、此浏览器是哪一个版本、不同版本下网页要发生什么变化，是转到哪一个地址还是停留不动。这几个问题在这个设置窗口中都能得到解决。

图2

10.交换图像

“交换图像”动作可以实现图像感应鼠标的效果。当鼠标移动到图片上时，变成另一张图；当鼠标移出时，又恢复为原来的图片。（图5）

注意：使用此动作前应先为图像命名；先选中图像或其他网页元素，再设置此动作，否则动作会作用到标记上，这样当你一打开页面，图像就已经被交换了；如果需要移到一个图片上就发生多个图片的交换，只需在页面图像列表中再选择一个，然后指定原始文件。

11.控制Shockwave或Flash

本动作用于控制Shockwave或Flash的播放。（图6）

注意：应用此动作前必须给Flash或Shockwave命名，不然Dreamweaver会弹出警告框提示，无法继续。

12.设置导航条图像

导航条是网站的重要组成部分。为了突出导航效果，一个完整的导航条图像需要四张图片，以表现导航条对鼠标的感应。这四种状态是：默认时、鼠标经过时、鼠标按下时、鼠标经过已被按下的图像时。一般情况下，我们只需要前三种状态的图像。
做为导航条最基本的功能，当然还需要按下时能使网页跳转到另一页、提示文字等，这些通过“设置导航条图像”动作都可以轻松实现。
此动作的设置分为两个选项卡：
“基本”选项卡用来设置当前选中的导航图像的各种选项。（图7）

“高级”选项卡用来设置当前选中的导航图像在正常显示和按下两种状态下其他导航图像的变化。（图8）

13.设置文本

“设置文本”动作其分为四个子动作：
(1)设置层文本：
用来设置层中出现文字。它只有两个参数：一个是“层”，在其下拉列表中列出了网页中所有的层；另一个参数是“新建HTML”，输入要出现在层中的文字或HTML代码即可。
(2)设置框架文本：
用来设置框架页中出现文字。（图9）

(3)设置文本域文字：
用来设置文本域中出现的文字。它只有两个参数：一个是“文本域”，在其下拉列表中列出网页中所有的文本域；另一个参数是“新建HTML”，输入要出现在文本域中的文字即可。
(4)设置状态条文本：
用来设置状态栏中出现文字。它只有一个参数：“消息”，在后面的输入框中输入需要的文字即可，注意这里不能使用HTML代码。

14.时间轴

“时间轴”动作用来控制时间轴动画的播放。
(1)播放时间轴：
用来设置使时间轴动画开始播放。它只有一个参数，只需要在下拉列表中选择需要播放的时间轴动画即可。
(2)停止时间轴：
用来使时间轴动画停止播放。它也只有一个参数，只要在下拉列表中选择需要停止的时间轴动画即可。不过你可以选择第一项“所有时间轴”来停止页面中所有的时间轴动画。
(3)转到时间轴：
用来设置跳转到时间轴动画的某一帧。它也有三个参数：“时间轴”下拉列表用来选择作用的时间轴动画；“前往帧”框可以确定要跳转到哪一帧；“循环”框用于确定跳转要循环多少次。

15.跳转菜单

此动作的功能与“插入”面板中的“跳转菜单”的功能完全一样，设置方法相同。

16.跳转菜单开始

此动作用来设置或改变一个带跳转按钮的下拉菜单的索引。当页面中有多个下拉菜单时，它可以决定跳转按钮根据哪一个下拉菜单来选择要跳转到的页面。参数只有“选择跳转菜单”，用以从页面中所有跳转菜单中选择需要的即可。

17.拖动层

“拖动层”动作的基本功能就是使层可以被拖动，当浏览者在层上按下鼠标不放并拖动时，层会跟随鼠标移动。具体还可以设置层的哪部分可以响应拖动事件，而其他部分则不响应；可以在什么样的范围内拖动还是不作任何限制；拖动后是否有一个固定的目标位置、当接近这一位置时是否自动对齐等细微的设置。如果加上一个好的创意，它能简单地实现神奇的动态效果，比如在线试衣、拼图等。此动作的设置窗口有两个选项卡：
(1)“基本”选项卡：（图10）

(2)“高级”选项卡：（图11）

18.显示-隐藏层

“显示-隐藏层”是最常用的动作之一，它使我们可以动态控制层的出现与否。网上很多的动态提示、导航菜单都是用这个动作实现的。它的原理是利用JavaScript控制层的CSS属性中“visibility”的状态是“visible”或“hidden”，从而决定层是显示还是隐藏。
（图12）

19.显示弹出式菜单

此动作专门用来制作一个响应事件的弹出式菜单，前面的“显示-隐藏层”也可以实现类似的效果，但这个来得更方便、细致一些。
(1)“内容”选项卡：
（图13）

(2)“外观”选项卡：
（图14）

(3)“高级”选项卡：
（图15）

(4)“位置”选项卡：
（图16）

注意：应用此动作之前必须先保存文件，否则Dreamweaver将提示无法继续。

20.隐藏弹出式菜单

此动作与“显示弹出式菜单”对应使用。从列表中选择需要隐藏的弹出式菜单即可。

21.预先载入图像

此动作用来让网页预先载入某些图片，以使当页面需要显示这些图片时，用户不用等待图片下载。使得页面的动态效果更加流畅。
（图17）

22.转到URL

此动作可使页面转到另外一个地址。该动作只有两个选项，第一个是在列表中选择打开窗口，一般情况下只有“主窗口”，当页面为框架结构时，列表中会出现多个窗口名；第二个是URL，输入要转到的URL地址。

四、基本事件详解

当完成上面的“动作”设置后，我们还需要为该动作选择一个“事件”，当触发该事件，以完成某一网页特效。
（图18）

五、Dreamweaver行为应用实例

1.制作可拖动的层

在这个实例中，我们将制作一个简单的可拖动层，在该层的上方会有一段背景为黑色的提示文字“按住这里可拖动”，在这个黑色区域中按下鼠标并移动时，该层将跟随鼠标移动。
(1)前期准备工作：
点击Dreamweaver MX中“插入”面板里的“常用”标签，然后点击“描绘层”按钮。将鼠标移动到页面中，拖动画出一个选区，释放鼠标，这样就在页面中建立了一个层。
选中该层，在“属性”面板中“层编号”框中输入该层的名字，这里是“drag”。同时，为了方便识别，我们还要给层加一个背景色，同样在“属性”面板上，在“背景颜色”框选择或输入一个具体的值，如#006699，它是一种深蓝色。另外，我们还要限定层的宽度，在“宽”输入框中键入200。
最后将光标移至该层内，插入一个两行一列、宽为100%的表格，将第一行单元格的高度设为20。然后在空单元格中输入“按住这里可拖动”文字。
(2)应用“拖动层”动作到层：
打开“行为”面板，点击“+”按钮打开动作选择菜单，从中选择“拖动层”选项。打开相应的对话框，从层列表中选择“层“drag””选项，“移动”项选择“不限制”；然后点击“高级”选项卡，在“拖曳控制点”下拉列表中选择“层内区域”选项，它的功能是设置层的可作用区域，决定鼠标在层的哪个范围内按下并移动时能拖动层，在后面出现的左、上、宽、高四个输入框中分别输入为0、0、200、20。它们是设置层可作用区域距离层左边的宽度、可作用区域距离层顶部的宽度、可作用区域的宽度/高度。200和20这两个值正是我们前面定义的层的宽度和单元格的高度。设置完成点击“确定”按钮。
(3)定义激发动作的事件：
返回“行为”面板，我们会发现行为列表中多了一条。在事件项下是“onClick”，动作项下是“拖动层”，这就是我们刚才为层“drag”添加的“拖动层”动作。点击“事件”项下的倒三角形按钮，在弹出的事件列表中选择“onDrag”事件即可。
这样，我们就完成了一个简单的拖动层特效。按下F12键即可预览。

2.检测注册者填写的资料

在这个实例中，我们假设有一个供用户注册的网页，用户可以在这个网页中填写个人资料来注册一个新用户。供用户输入资料的实际上是一个表单，在用户填写完成后，点击“确定”按钮，网页将检查所填写的资料是否完整、正确，否则会弹出一个警告框提示填写者，比如“用户名必须填写”、“电话号码必须是数字”、“请输入正确的E-mail地址”等。
(1)前期准备工作：
新建一个网页，制作一个如（图21）所示的表单：

给各个文本框命名，用户名为name，密码为password，邮箱为email，电话为tel。
(2)应用“检查表单”动作到注册表单：
在行为面板中点击“+”按钮，在动作列表中选择“检查表单”选项。在打开的设置对话框中，“命名的栏位”框中列出了我们上一步中命名的文本框。然后进行下面的操作：
选中“文本“name”在表单form1”，选中“必需的”选项。
选中“文本“password”在表单form1”，选中“必需的”选项。
选中“文本“email”在表单form1”，不选择“必需的”选项，“可接受”选项中选中“电子邮件地址”选项。
选中“文本“tel”在表单form1”，不选择“必需的”选项，“可接受”选项中选中“数字”选项。
最后点击“确定”按钮完成设置。
(3)定义激发动作的事件：
返回“行为”面板，在事件项下将是“onMouseOver”改为“onSubmit”事件。
这样，我们就完成了一个可先检查用户输入的资料是否完整正确的注册表单。该表单可供注册者输入用户名、密码、邮箱和电话，其中用户名和密码是必须填写的，邮箱地址中应该有@字样，电话号码一定要为数字格式。

3.打开一个不一样的小窗口

在这个实例中，我们会用到“打开浏览器窗口”动作，实现的效果是点击某一个链接，会打开一个固定大小的小窗口，这个窗口没有菜单栏、工具栏、导航条、状态栏可以用来做为广告、通知、公告窗口。
(1)前期准备工作：
新建一个网页，建立一个“打开小窗口”的空链接。
(2)应用“打开浏览器窗口”动作到链接：
在行为面板中点击“+”按钮，在动作列表中选择“打开浏览器窗口”选项。在打开的设置对话框中，“要显示的URL”中填入要打开的网页，“窗口宽度”和“窗口高度”中根据需要填入数值，此例中均填为200，其余选项可以不用选择。点击“确定”按钮完成设置。
(3)定义激发动作的事件：
返回“行为”面板，此时的默认事件即为“onClick”，如果不是，点击选择“onClick”事件即可。
