Dreamweaver行为功能的分析与实现

摘要：该文介绍了Dreamweaver软件的行为功能，分析了该功能实现过程中可能出现的各种问题，最后通过用户与页面的交互实例提供了完整的脚本代码。

关键词：Dreamweaver；行为；事件

中图分类号：TP317文献标识码：A文章编号：1009-3044(2008)32-1210-02

Analysis and Implementation of Action Function of Dreamweaver

DING hui1,2

(1.Jiangsu University, Zhenjiang 212013, China; 2.Nanjing Forest Police College, Nanjing 210046, China)

Abstract: This paper introduces the action function of Dreamweaver. Analyzes the problems easy to occur during the implementation process and provides the complete script code of example of interaction between use and web page.

Key words: dreamweaver; action; events

当一个网页做好之后，有时需要它能够接受外界的信息，并且对这些信息做出相应的响应。这时就要为网页添加相应的动态或交互内容，使网页能对外界的信息进行反馈，然后自动执行它内部制定的动作。一般说来，动态网页是通过JaveScript或基于JaveScript的DHTML代码来实现的。包含JaveScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业需要专门学习，而Dreamweaver提供的“行为”的机制，虽然行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。

行为是事件与动作的彼此结合。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为时间，图片的变化称为动作，一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成，而事件是由浏览器前用户的操作相关，如单击鼠标、鼠标上滚等。

1 了解行为

行为是通过响应某一具体事件而采取的一个或多个动作，也就是说，行为是要由事件和动作来组成的。当把一个事件和一个动作组合成一个行为后，再把它赋给一个页面元素，当发生指定事件时，就会触发执行动作，运行相应的JavaScript程序。“行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化（前面介绍过的轮替图像），就导致发生了一个动作。与行为相关的有三个重要的部分――对象、事件和动作。

1.1 对象(Object)

对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。

1.2 事件(Event)

事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。

1.3 动作(Action)

行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码，在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必自己编写。

1.4 事件与动作

将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JaveScript代码相关联，单击鼠标时就可以执行相应的JaveScript代码（动作）。一个事件可以同多个动作相关联(1:n)，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。

2 使用行为

如果想要使网页更“聪明”的话，就要使用行为来感知外界的信息并做出相应的响应。这些外界信息包括鼠标的活动，如页面的调用与关闭、鼠标移动到页面元素上点击元素或移开元素，以及焦点的改变和键盘的情况等各种变化，对不同的页面内容有不同的事件，另外能够响应的事件也和浏览器有关，一般说来，3.0的浏览器能够响应的事件要少于4.0浏览器，而IE4能够响应的事件要多于Netscape4.0浏览器，我们可以根据不同的浏览器进行不同的设置。

2.1 改变对象属性

使用“改变属性”动作更改对象某个属性（例如层的背景颜色或表单的动作）的值。您可以更改的属性是由浏览器决定的。例如，您可以动态设置层的背景颜色。只有在您比较熟悉HTML和JavaScript 的情况下才使用此动作。若要使用“改变属性”动作，请执行以下操作：选择一个对象并打开“行为”面板，从“动作”弹出菜单中选择“更改属性”。从“对象类型”弹出菜单中选择您要更改其属性的对象的类型。 “命名对象”弹出菜单马上列出所有所选类型的命名对象。从“命名对象”弹出菜单中选择一个对象。从“属性”弹出菜单中选择一个属性，或在文本框中输入该属性的名称。例如：在网页中插入一个图片，并且设置图片的名字为image1，最终要求：浏览者用鼠标单击图片时，图片变为另一幅。

2.2 显示/隐藏层

“显示－隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。“显示隐藏层”还可用于创建预先载入层，即一个最初挡住页的内容的较大的层，在所有页组件都完成载入后该层即消失（可做一个广告效果，记得在新浪见过这样的广告）。“显示隐藏层”动作，具体操作：

1) 选择“插入”“布局对象”“层”然后在“文档”窗口中绘制一个层。

2) 重复此步骤可以创建其它的层。

3) 在“文档”窗口中单击取消对层的选择，然后打开“行为”面板。

4) 单击加号(+)按钮并从“动作”弹出菜单中选择“显示隐藏层”。

在“命名的层”列表中选择要更改其可见性的层。单击“显示”以显示该层、单击“隐藏”以隐藏该层、或单击“默认”以恢复层的默认可见性。

2.3 弹出消息

“弹出消息”动作显示一个带有您指定的消息的 JavaScript 提示。因为 JavaScript 提示只有一个按钮（“确定”），所以使用此动作可以提供信息，而不能为用户提供选择。要注意的是：我们无法控制 JavaScript 提示的外观，它取决于访问者的浏览器。如果我们希望对消息的外观进行更多的控制，可考虑使用“打开浏览器窗口”行为。具体制作过程：插入一个按钮，选择按钮，打开“行为”面板，从动作中选择“弹出消息”。并且输入我们要在消息窗口中显示的内容。在“消息”文本框中输入我们要告诉浏览者的信息。别忘了看看行为面板中设置的动作是onclick，单击“确定”，保存文档。

2.4 设置文本

这里，本人介绍如何设置层文本、文本域文本、状态栏文本。

2.4.1 设置层文本

“设置层文本”动作用您指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的 HTML 源代码。通过在“设置层文本”对话框的“新建 HTML”文本框中包括 HTML 标签，可对内容进行格式设置。具体实现的步骤：选择“插入”“布局对象”“层”。在层内输入你需要的文字，打开行为面板，从“动作”中选择“设置文本”“设置层文本”。

2.4.2 设置文本域文本

“设置文本域文本”动作用您指定的内容替换表单文本域的内容。具体制作的过程：选择“插入”“表单”，然后再选择“插入”“表单”“文本域”。注意文本域要包含在表单当中。 在文本域中键入内容。选择文本域并打开“行为”面板，从“动作”中选择“设置文本”“设置文本域文本”。

2.4.3 设置状态栏文本

“设置状态栏文本”动作在浏览器窗口底部左侧的状态栏中显示消息。我们经常在一些网站看到这个效果啊，制作简单比较实用。具体制作的过程：选择一个对象或者什么也不选择也可以，打开“行为”面板，从动作中选择“设置文本”“设置状态栏文本”。

2.5 播放声音

使用“播放声音”动作来播放声音。例如，可以要在每次鼠标指针滑过某个链接时播放一段声音效果，或在页载入时播放音乐剪辑，或者点击某个按钮播放声音等等。要注意：浏览器可能需要用某种附加的音频支持（例如音频插件）来播放声音。因此，具有不同插件的不同浏览器所播放声音的效果通常会有所不同。很难准确地预测出站点的访问者对网页制作者提供的声音感受如何。

3 行为的具体实例

我们可以用这些方法编写出十分精彩的网页，比如：当我们开启一个网页的时候先奏一段音乐（这里用到对onLoad事件的响应），当浏览者将鼠标移动到网页的各个项目上时，这一项目闪烁并响起音乐且状态条显示项目的说明（这里用到对onMouseOver事件的响应，响应为图片来源控制、声音控制和状态条信息的设置），当浏览者随超链接进入新的页面并点击页面的MOV格式的电影时检查浏览器是否有quicktime插件，如果有就播放这段电影（对onClick事件响应，响应为检查插件），我们可以将一幅图片作为一超链接，当浏览者点击或按下任意键时显示目标页（用到对onKeyPress 和onMouseOver事件的响应），如果是商业或教育网页我们还可以对onHelp 和onError等事件产生响应。我们还可以对整个页面进行控制（用到对onReadyStateChange事件的响应），如果浏览者结束浏览时说一些感谢的话或传达一些信息或打开相关网页就要用到对onClose事件的响应等等，还有许多更精彩的事件和不同寻常的响应事件留给广大读者去发现。

4 结论

行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互。利用Dreamweaver的行为，不需要书写一行代码，就可以实现丰富的动态页面效果，达到用户与页面的交互。在实际应用中，Dreamweaver 还提供了更多的行为,需要大家去进一步的了解；还有很多技巧，只有不断的实践和探索，才能很好的把握，取得更好的效果。将网页制作工作做得更上一个台阶。

参考文献：

[1] 李月,李晓春.Dreamweaver网页制作标准教程[M].北京：清华大学出版社,2005:152-175.

[2] 傅连仲,杨小劲,张明学.网页设计与制作教程[M].北京：清华大学出版社,2005.

[3] 齐建玲.网页设计与制作[M].北京：清华大学出版社,2006.

[4] 袁鑫.Dreamweaver 8 的行为应用[J].科技咨询导报,2007(09):13.