使用Dreamweaver中的行为

《使用Dreamweaver中的行为》由会员分享，可在线阅读，更多相关《使用Dreamweaver中的行为（91页珍藏版）》请在金锄头文库上搜索。

1、4.3 使用Dreamweaver中的行 为4.4 制作展开菜单 4.5 制作跳转菜单本节概述v本节主要讲述如何使用行为。行为在网页中常被 用在页面的交互中，通过使用行为可以使网页多 些“灵性”。如当用户打开或页面下载完时弹出 一个问候或消息的对话框。还可通过【检查表单 】行为检查用户是否按照表单的要求如实的填写 调查表，这样可以防止一些垃圾信息。行为在网 页的设计和制作中常和层、表单等页面元素结合 使用。合理的使用行为可以为网站增添不少特色 。学习目标v理解行为和事件的概念v掌握行为面板的使用v掌握行为的应用方法。本节内容v行为概述v 行为面板v Dreamweaver内置的行为v 下载和安

2、装第三方行为v 行为的应用一、行为简介v行为（behaviors）实际上就是JavaScript产生器 ，以前网页设计者要设计互动效果的网页必须学 习JavaScript脚本语言。现在有了Dreamweaver 这个强大的网页设计工具，不用写一句代码就可 以创建互动式网页。vDreamweaver行为将JavaScript代码放置在文档 中以允许访问者与Web页进行交互，从而以多种 方式更改页或引起某些任务的执行。行为是事件 和由该事件触发的动作的组合。在行为面板中， 通过指定一个动作然后指定触发该动作的事件， 可将行为添加到页中。1. 行为概念 为了更好地理解行为的概念，下面分别解释与行为相

3、关的三个 重要的概念【对象】、【事件】和【动作】。v【对象】是产生行为的主体，很多网页元素都可以成为对象，如图 片、文字、多媒体文件等。此外，网页本身有时也可作为对象。v【事件】是触发动态效果的原因，它可以被附加到各种页面元素上 ，也可以被附加到HTML标记中。一个事件总是针对页面元素或标 记而言的，例如将鼠标指针移到图片上、把鼠标指针放在图片之外 和单击鼠标左键，是与鼠标有关的三个最常见的事件 (onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事 件种类和数量是不一样的，通常高版本的浏览器支持更多的事件。v【动作】是指最终需完成的动态效果，如交换图像、弹出信

4、息、打 开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript 代码。在Dreamweaver 8中使用内置的行为时，系统会自动向页面 中添加JavaScript代码，用户完全不必自己编写。将事件和动作组合起来就构成了行为。 行为概述v行为是在网页中进行的一系列动作，通过这些动 作实现用户同网页的交互，也可以通过动作使某 个任务被执行。通常，行为由事件（event）和对 应动作（actions）组成。v事件是浏览器为每个网页元素做的定义，以响应 用户的动作，是浏览器生成的消息，指示页的访 问者执行了某种操作。v动作包含了预先写好的用来执行任务的JavaScript 代码。如打开浏

5、览器窗口、显示或隐藏层、播放 声音等。v网页中的每个元素都可以看作是一个对象，在 Dreamweaver 8中可以给任何对象附加一个行为 。行为触发动作 的事件动作在行为面板中 为元素附加指定在页面上应用行为概述2. 行为工作原理v在将行为附加到页元素之后，只要该元素发生了用户所指 定的事件，浏览器就会调用与该事件关联的动作（ JavaScript代码）（可以用来触发给定动作的事件随浏览 器的不同而有所不同）。如当用户在页面中将鼠标移动并 单击某一个链接后，载入了一幅图像，这就产生了两个事 件onMouseOver和onClick，同时触发了一个动作载入图 像。 v单个事件可以触发多个不同的动

6、作，可以指定这些动作发 生的顺序。vDreamweaver 8提供大约20多个行为动作，可以在 Macromedia Exchange Web站点以及第三方开发人员站 点上找到更多的动作。如果精通JavaScript，可以编写自 己的行为动作。3. 使用行为面板 在Dreamweaver 8中，对行为的添加和控制主要 通过【行为】面板来实现。具体操作步骤如下。 1)选择【窗口】中的【行为】命令。 2)打开【行为】面板，如图所示。 【行为】面板“窗口” “行为” 在弹出的下拉菜 单中选择行为 删除选中 的行为 调整行为 的顺序 显示页面中附 加的行为名称 行为面板图示图 9-3 行为面板行为面板

7、按钮说明(1)显示设置事件:仅显示附加到当前文档的那些事件。每个类别的事件都 包含在一个可折叠的列表中，您可以单击类别名称旁边的加号/减号按 钮展开或折叠该列表。“显示设置事件”是默认的视图。 (2)显示所有事件:按字母降序显示给定类别的所有事件。 (3)添加动作(+):是一个弹出菜单，其中包含可以附加到当前所选对象的动 作。当从该列表中选择一个动作时，将出现一个对话框，您可以在该 对话框中指定该动作的参数。如果所有动作都灰显，则没有所选对象 可以生成的事件。 (4)删除(-):从行为列表中删除所选的事件和动作。 (5)上下箭头按钮：将特定事件的所选动作在行为列表中向上或向下移动 ，但只在相同

8、事件多个动作时才会显示。给定事件的动作是以特定的 顺序执行的。可以为特定的事件使用上下箭头按钮更改动作的顺序。 对于不能在列表中上下移动的动作，箭头按钮将被禁用。 (6)事件（单击行为列表中所选事件名称旁边的箭头按钮时出现的菜单） 是一个弹出式菜单，其中包含可以触发该动作的所有事件。只有在选 择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同， 显示的事件也有所不同。如果未显示预期的事件，则检查是否选择了 正确的页元素或标签（若要选择特定的标签，请使用文档窗口底部左 侧的标签选择器）。同时确保在“显示事件”子菜单中选择了正确的浏 览器。 行为面板动作列表v动作是由预先编写的 JavaS

9、cript代码组成的 ，这些代码能够执行 某种特定的任务，如 弹出信息，打开浏览 器窗口等。单击行为 面板中的按钮 ，弹出 如图所示的内置动作 （灰色显示的动作表 示作用对象不可用或 所选的【显示事件】 项中浏览器版本较低 ）。4. Dreamweaver内置的行为v调用JavaScriptv 改变属性v 检查浏览器v 检查插件v 控制Shockwave或Flashv 拖动层v转到URLv 跳转菜单和跳转菜单开始v 打开浏览器窗口v播放声音v 弹出信息v 预先载入图像v 设置导航栏图像v 设置框架文本v设置层文本v 设置状态栏文本v 设置文本域文字v 显示弹出式菜单v 显示-隐藏层v 交换图像

10、v 恢复交换图像v 时间轴v 检查表单v交换图像：“交换图像”动作通过更改img标签的src 属性将一个图像和另一个图像进行交换。v弹出消息：“弹出消息”动作显示一个带有指定消息 的 JavaScript 警告。v恢复图像交换：“恢复交换图像”动作将最后一组交 换的图像恢复为它们以前的源文件。v打开浏览器窗口：使用“打开浏览器窗口”动作在一 个新的窗口中打开URL。v拖动层：“拖动层”动作允许访问者拖动层。v控制 Shockwave 或 Flash：使用“控制 Shockwave 或 Flash”动作来播放、停止、倒带或 转到 Macromedia Shockwave 或 Macromedia

11、 Flash SWF 文件中的帧。v播放声音：使用“播放声音”动作来播放声音。v改变属性：使用“改变属性”动作更改对象某个属性 （例如层的背景颜色或表单的动作）的值。v时间轴：使用“时间轴”动作可以停止时间轴、播放 时间轴、转到时间轴帧。v显示隐藏层：“显示隐藏层”动作显示、隐藏或 恢复一个或多个层的默认可见性。此动作用于在用 户与页进行交互时显示信息。v显示弹出菜单：使用“显示弹出菜单”行为来创建或 编辑 Dreamweaver 弹出式菜单，或者打开并修改 已插入 Dreamweaver 文档的 Fireworks 弹出式菜 单。v检查插件：使用“检查插件”动作根据访问者是否安 装了指定的插

12、件这一情况将他们转到不同的页。v检查浏览器：使用“检查浏览器”动作可根据访问者 不同类型和版本的浏览器将他们转到不同的页。v检查表单：“检查表单”动作检查指定文本域的内 容以确保用户输入了正确的数据类型。v设置导航条图像：使用“设置导航条图像”动作将 某个图像变为导航条图像，或更改导航条中图 像的显示和动作。v设置文本：包括以下几项： （1）设置框架文本：“设置框架文本”动作允许读者动态设 置框架的文本，用读者指定的内容替换框架的内容和格 式设置。 （2）设置层文本：“设置层文本”动作用读者指定的内容替 换页上现有层的内容和格式设置。该内容可以包括任何 有效的 HTML 源代码。 （3）设置状

13、态栏文本：“设置状态栏文本”动作在浏览器窗 口底部左侧的状态栏中显示消息。 （4）设置文本域文本：“设置文本域文本”动作用读者指定 的内容替换表单文本域的内容。v调用 JavaScript：“调用 JavaScript”动作允许读者 使用“行为”面板指定当发生某个事件时应该执行的 自定义函数或 JavaScript 代码行。v跳转菜单：创建一个菜单对象并向其附加一个“跳 转菜单”（或“跳转菜单转到”）行为。v转到 URL：“转到 URL”动作在当前窗口或指定的 框架中打开一个新页。v预先载入图像：“预先载入图像”动作将不会立即出 现在页上的图像载入浏览器缓存中。v事件是浏览器生成的消息，用于表

14、明浏览器用 户执行了某种操作。v事件是由浏览器为每个页面元素定义的，通常 浏览器都会提供一组事件，如onMouseOver、 onMouseOut和onClick等，事件总是与动作相 关联。当访问者与网页进行交互时，浏览器生 成事件，但并非所有的事件都是交互的，如设 置网页每10s自动重新载入。v根据所选对象和在“显示事件”子菜单中指定的浏 览器的不同，显示在“事件”下拉列表框中的事件 将有所不同。Internet Explorer和Netscape Navigator是当今主流浏览器。IE4表明此事件适 用于Internet Explorer 4-0浏览器，NE4表明此 事件适用于Netsc

15、ape Navigator 4-0浏览器。5.事件5. 标准事件 Dreamweaver 8配备了一套得到流行浏览 器承认的事件列表。单击【行为】面板上的【】按钮，选取【 显示事件】菜单，打开级联菜单，可以看到 在级联菜单中提供的10种不同浏览器的版 本。Dreamweaver提供了许多常用的 能够触发的动作的事件：vonAbort：当浏览器用户中断浏览器正在载入图像的操作 时产生。 vonAfterUpdate：当网页中的数据元素已经完成源数据的 更新时产生该事件。 vonBeforeUpdate：当网页中的数据元素已经改变并且就要 和浏览器用户失去交互时产生该事件。 vonBlur：当指定

16、元素不再被浏览器用户交互时产生。 vonBounce：当字幕（Marquee）中的内容移动到该字幕 边界时产生。 vonChange：当浏览器用户改变网页中的某个值时产生。 vonClick：当浏览器用户在指定的元素上单击时产生。 vonDblClick：当浏览器用户在指定的元素上双击时产生。 vonError：当浏览器在网页或图像载入产生错误时产生。 常用事件vonFinish：当字幕（Marquee）中的内容完成一次循环时 产生。 onFocus：当指定元素被浏览器用户交互时产生。 vonHelp：当浏览器用户单击浏览器帮助按钮或选择浏览器 菜单中的帮助菜单项时产生。 vonKeyDown：当按下任意键的同时产生。 vonKeyPress：当按下和松开任意键时产生。vonKeyUp：当按下的键松开时产生。 vonLoad：当一图像或网页载入完成时产生。 vonMouseDown：当浏览器用户按下鼠标时产生。 vonMouseMove：当浏览器用户将鼠标在指定元素上移动 时产生。 vonMouseOut：当鼠标从指定元素上移开时产生。 vonMouseOv