《Dreamweaver CS6 完全自学教程》笔记第十五章：使用行为创建网页特效

本文主要是介绍《Dreamweaver CS6 完全自学教程》笔记第十五章：使用行为创建网页特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

第十五章：使用行为创建网页特效
- 15.1 行为简介
- 15.2 行为面板
- 15.3 使用行为
- - 15.3.1 交换图像
  - 15.3.2 恢复交换图像
  - 15.3.3 弹出信息
  - 15.3.4 改变属性
  - 15.3.5 拖动 AP 元素
  - 15.3.6 调用 JavaScript
  - 15.3.7 打开浏览器窗口
  - 15.3.8 转到 URL
  - 15.3.9 设置文本
- 15.4 行为的管理与修改
- - 15.4.1 行为参数的修改
  - 15.4.2 行为的排序
  - 15.4.3 删除行为

第十五章：使用行为创建网页特效

15.1 行为简介

行为由 JavaScript 函数和事件处理程序组成。Dreamweaver 中的行为是将 JavaScript 代码放置在文档中，从而以多种方式更改页面或引起某些任务的执行。

行为由事件和触发该事件的动作组成。在 “行为” 面板中，可以先指定一个动作，然后指定触发该动作的事件，从而将行为添加到页面。

事件是浏览器生成的消息，指示该页的访问者执行了某种操作。
动作是由预先编写的 JavaScript 代码组成的，这些代码执行特定的任务。

把行为附加到对象上之后，在浏览器中只要对该元素发生了所指定的事件，浏览器就会调用与该事件关联的动作。单个事件可以触发多个不同的动作，可以指定这些动作发生的顺序，以不同时间来执行。

15.2 行为面板

点击窗口 -> 行为，打开 “行为” 面板，或者按快捷键 Shift + F4 打开。

在 “行为” 面板上点击 “显示设置事件” 按钮，将显示已经设置了的行为。

在这里插入图片描述
点击 “显示所有事件” 按钮，将显示所有的事件。

在这里插入图片描述
点击 “添加行为” 按钮，为选定的对象加载动作，即自动生成 JavaScript 代码。

在这里插入图片描述

动作介绍：

建议不再使用： 建议不再使用的一些过时的行为动作。
交换图像： 通过改变 <img> 的 src 属性来改变图像，可用来创建活动按钮或其他图像效果。
弹出信息： 显示带指定信息的 JS 警告，用户可嵌入任何有效的 JS 功能。
恢复交换图像： 恢复交换图像为原图。
打开浏览器窗口： 在新窗口中打开 URL ，可设置新窗口的尺寸等属性。
拖动 AP 元素： 允许用户拖拽层。
改变属性： 改变对象属性值。
效果： 制作一些类似增大、搜索等效果。
显示 - 隐藏元素： 显示、隐藏一个或多个层窗口，或者恢复默认。
检查插件： 利用该动作可根据访问者所安装的插件，发送给不同的网页。
检查表单： 检查输入框的内容，以确保用户输入的数据格式正确无误。
设置导航栏图像： 将图片加入导航栏或改变导航栏的图片显示。
设置文本： 设置层文本、设置文本域文字、设置框架文本、设置状态栏文本。
调用 JavaScript： 执行 JS 代码。
跳转菜单： 当用户创建了一个跳转菜单时，Dreamweaver 将创建一个菜单对象，并为其附加行为。在 “行为” 面板中双击 “跳转菜单” 动作可编辑跳转菜单。
**跳转菜单开始：**当用户已经创建了一个跳转菜单时，在其后面会添加一个行为动作按钮。
转到 URL： 在当前窗口或指定框架打开新页面。
预先载入图像： 该图像在页面载入浏览器缓冲区之后不会立即显示，它主要用于时间线、行为等，从而防止因下载引起的延迟。
显示事件： 显示所适合的浏览器版本。
获取更多行为： 从网站上获得更多的动作功能。

15.3 使用行为

15.3.1 交换图像

因为这个动作只影响 src 属性，所以变换图像的尺寸应该一致。否则显示时会压缩或扩展。

先插入图像，在 “属性” 面板中输入图像的名称，还可以插入多幅，将这些作为原始图像。
然后选择要附加替换图像行为的图像，点击 “行为” 面板上的加号，打开 “交换图像” 对话框。在 “图像” 列表框中选择原始图像，在 “设定原始档为” 文本框中输入替换后的图像文件的路径，可设置多个替换图像。

15.3.2 恢复交换图像

当鼠标移出对象区域后，所有被替换显示的图像恢复为原始图像。若在添加 “交换图像” 动作时选择了 “鼠标划开时恢复图像” 选项，则不需要手动选择 “恢复交换图像” 动作。

选择添加了交换图像的对象。点击 “行为” 面板上的 “添加行为” 按钮，打开 “动作” 菜单，选择 “恢复交换图像” 命令，打开 “恢复交换图像” 对话框，点击 “确定”。

15.3.3 弹出信息

点击 “行为” 面板上的 “添加行为” 按钮，选择 “弹出信息” ，打开 “弹出信息” 对话框。在 “消息” 文本框中输入要弹出的文字信息。

15.3.4 改变属性

选中对象，点击 “行为” 面板上的 “添加行为” 按钮，选择 “改变属性” ，打开 “改变属性” 对话框。

元素类型： 选择对象类型。
元素 ID： 选择一种对象类型。
属性： 选择一个属性，或输入准确的 JS 名称。
新的值： 输入该属性的新值。

15.3.5 拖动 AP 元素

用此动作可以创建滑动控件、创建拼图游戏等。
由于访问者在拖拽层之前必须先调用 “拖动 AP 元素” 动作，所以请确保触发动作的事件发生在拖拽层之前。最佳的方法是使用 onLoad 事件将 “拖动 AP 元素” 附加到 body 对象上，不过也可以使用 onMouseOver 事件将它附加到填满整个层的链接上。

15.3.6 调用 JavaScript

选择一个附加行为的对象，点击 “行为” 面板上的 “添加行为” 按钮，选择 “调用 JavaScript ” ，打开 “调用 JavaScript ” 对话框。在 JS 文本框中输入要触发的函数名称，如要创建一个关闭当前页面的按钮，可以输入 window.close() 。点击 “确定” 完成。在 “行为” 面板中选择相应的事件项，如 onClick。

15.3.7 打开浏览器窗口

打开一个页面文档，点击 “行为” 面板上的 “添加行为” 按钮，选择 “打开浏览器窗口” ，打开 “打开浏览器窗口” 对话框。

要显示的 URL： 设置打开窗口的 URL。
属性：
- 导航工具栏：浏览器窗口的导航工具栏。
- 菜单条：浏览器窗口的菜单。
- 地址工具栏：地址栏。
- 需要时使用滚动条：当页面内容过多时出现滚动条。
- 状态栏：浏览器下方的状态栏。
- 调整大小手柄：浏览器窗口大小可调整。
- 窗口名称：如果浏览器按这个名字找到了一个窗口或框架，就在这个窗口中打开，否则生成新的窗口。

15.3.8 转到 URL

选择一个要附加行为的对象，点击 “行为” 面板上的 “添加行为” 按钮，选择 “转到 URL ” ，打开 “转到 URL ” 对话框。在 “打开在” 列表中选择打开链接的窗口。在 “ URL ” 中输入设置链接的 URL 地址。

15.3.9 设置文本

“设置文本” 动作中包含了 4 个选项，分别是 “设置容器的文本”、“设置文本域文字”、“设置框架文本”、“设置状态栏文本”。

设置容器的文本：

将页面上的现有容器（即可以包含文本或其他元素中的任何元素）的内容和格式替换为指定的内容，该内容包括任何有效的 HTML 源代码。

选中对象，点击 “行为” 面板上的 “添加行为” 按钮，选择 “设置文本 -> 设置容器的文本” ，打开 “设置容器的文本” 对话框。

容器： 显示了该页面中可以包含的文本或其他元素中的任何元素。
新建 HTML： 在该文本框中输入要在文本域中显示的文本。

设置文本域文字：

用户以指定的内容替换表单文本域的内容，可以在文本中嵌入任何有效的 JS 函数调用、属性、全局变量或其他表达式。若要嵌入 JS 表达式，必须将其放在 {} 中。

选择已经创建的文本域，点击 “行为” 面板上的 “添加行为” 按钮，选择 “设置文本 -> 设置文本域文字” ，打开 “设置文本域文字” 对话框。

设置框架文本：

允许用户动态设置框架的文本，以用户指定的内容替换框架的内容和格式，此内容可包含任何有效的 HTML 代码。使用 “设置框架文本” 动作可以动态显示信息。
尽管 “设置框架文本” 会替换框架的格式设置，但是仍可勾选 “保留背景颜色” 以保留网页背景和文本颜色属性。
可以在文本中嵌入任何有效的 JS 函数调用、属性、全局变量或其他表达方式。若要嵌入一个 JS 表达式，必须将其放在 {} 中。
点击 “行为” 面板上的 “添加行为” 按钮，选择 “设置文本 -> 设置框架文本” ，打开 “设置框架文本” 对话框。在 “框架” 下拉列表中选择目标框架。点击 “获取当前 HTML ” 可复制当前框架 body 部分的内容。

设置状态栏文本：

用于在浏览器状态栏中显示信息。弹出式消息框多用来显示一些重要信息，而状态栏文本多用来显示提示性信息。