第12章 行为.ppt

内置行为 本章主要内容 了解对象 事件 动作和行为的基本概念熟悉行为面板掌握如何利用行为面板增加各种内置行为 几个基本概念 1 行为 Behavior 行为是被用来动态响应用户操作 改变当前页面效果或是执行特定任务的一种方法 通过使用行为可以使访问者与网页之间产生一种交互来改变页面或触发任务 Dreamweaver中的行为采用的是是完全面向对象的思想 通过设置行为预定义的JavaScript代码放置在文档中 以允许访问者与Web页进行交互 从而以多种方式更改页面或引起某些任务的执行 行为是事件和由该事件触发的动作的组合 2 对象 Object 在Dreamweaver8中指的是产生行为的主体 很多网页元素都可以成为对象 如图片 文字 多媒体文件等 甚至是整个页面 几个基本概念 3 事件 Event 事件是指各种触发动态效果的原因 它可以被附加到各中页面元素上 也可以被附加到HTML标记中 它也是Dreamweaver预定义好的 不同的浏览器支持的事件种类和多少是不一样的 通常高版本的浏览器技持更多的事件 4 动作 Action 动作是预先编写的JavaScript代码组成的 这些代码执行某种特定的任务 Dreamweaver中使用内置的行为 系统会自动向页面中添加对应的JavaScridpt代码 用户完全不必自己编写 对用户而言是完全透明的 打开 行为面板 的方法 窗口 行为 Shift F4 几个基本概念 行为 面板中各按钮名称与功能描述 交换图像 1 概述 交换图像 行为是通过更改 img 标签的 src 属性将一个图像与另一个图像交换 使用此动作可创建创建鼠标经过图像和其他图像的效果 包括一次交换多个图像 插入鼠标经过图像会自动将一个 交换图像 行为添加到网页中 需要注意一点 因为只有 src 属性受此动作影响 所以应该换入一个与原图像具有相同尺寸 高度与宽度 的图像 否则 换入的图像显示时会被压缩或扩展 以使适应原图像的尺寸 这样效果就不会很理想 2 交换图像通过以下步骤添加 交换图像 行为 插入一个图像并为它命名选中图片 单击 行为 面板中的 添加行为 的按钮 并从弹出的菜单中选择 交换图像 这时会弹出 交换图像 对话框 交换图像 在 交换图像 对话框的 设定原始档为 文本框中输入新图像的路径与文件名 也可以单击后面的 浏览 按钮来选择一个图像的文件 预先载入图像 在载入页时将新图像载入到浏览器的缓存中 防止图像该出现时由于下载而导致的延迟 鼠标滑开时恢复图像 当鼠标离开新图像时 会恢复为以前的原始图像检查默认事件是否是所需的事件 若不是 可以从弹出式菜单中选择一个事件 如果未列出所需的事件 则在 显示事件 弹出菜单中更改目标浏览器 弹出信息 1 概述 弹出信息 动作显示一个带有指定消息的对话框 由于该对话框中只有一个 确定 按钮 所以使用此动作仅仅向用户提供消息 而不能为用户提供选择 2 添加 弹出信息 行为通过以下步骤添加 弹出信息 行为 选中一个对象并打开 行为 面板单击 行为 面板中的 添加行为 按钮 从弹出的菜单中选择 弹出消息 此时会弹出 弹出信息 对话框在 消息 文本框中输入任何消息 另外要根据用户的实际需要 可以在文本中嵌入任何有效的JavaScript函数调用 属性 全局变量或其他表达式 若要嵌入一个javascript表达式 可将其放置在大括号中 若要显示大括号 需要在它前面加一个反斜杠 恢复交换图像 1 概述使用 恢复交换图像 行为可以将所有被替换的图像恢复为它们以前的原始图像 当为某个对象添加 交换图像 行为时 若选中 鼠标敞滑开时恢复图像 选项 则系统会自动添加该动作 若在附加 交换图像 时选择了 恢复 选项 则不再需要手动选择 恢复交换图像 动作 2 添加 恢复交换图像 行为添加 恢复交换图像 行为的步骤如下 选中一个对象 一般为图像对象 打开 行为 面板单击 行为 面板中的 添加行为 按钮 从弹出的菜单中选择 恢复交换 图像 此时会弹出 恢复交换图像 提示框 单击 确定 即可 打开浏览窗口 1 概述使用 打开浏览器窗口 行为可以打开一个新的窗口 在这个窗口既可以显示一个网页文件 也可以显示一幅图片 这个窗口的各种属性可以由用户自己设置 如可以指定新窗口的属性 包括其大小 特性 它是否可以调整大小 是否具有菜单栏等 和名称等 若没有为新窗口指定属性值 则新窗口的各项属性和生成它的当前窗口一致 在实际网页设计中 打开浏览器窗口 行为主要用于浏览大的图像 在访问者单击缩略图时 使用此行为可以在一个单独的窗口中打开一个较大的图像 可以使新窗口与该图像恰好一样大 2 添加 打开浏览窗口 行为具体步骤如下 选中一个对象 一般为较小的图形对象 并打开 行为 面板 打开浏览窗口 单击 行为面板中的 添加行为按钮 从弹出的菜单中选择 打开浏览器窗口 此时会弹出 打开浏览器窗口 对话框单击 要显示的URL 文本框后面的 浏览 按钮 选择一个网页文件或或者一一个原始图像文件 按实际需要设定相关参数 单击 确定 即可检查默认事件是否是所需的事件 若不是 请从弹出式菜单中选择另一个事件 若未列出所需的事件 则在 显示事件 弹出菜单中更改目标浏览器 拖动层 1 概述使用 拖动层 行为可以使用户在某个页面中拖动一个层以实现一定的效果 所以可以很容易地设计出网上流行的拼图游戏 如果再与JavaScript脚本语言结合 就可以设计出用于网上购物购物袋 购物车等 在 拖动层 行为中可以指定用户向哪个方向拖动层 水平 垂直或任意方向 拖动该层的目标 如层与目标的间距在指定像素范围内是否将层自动靠齐到目标 当层找到目标以后该怎么办等各种参数 因为用户在拖动层之前必须先调用 拖动层 动作 为了确保触发该动作的事件发生在用户试图拖动层之前 最好的办法是使用onLoad事件将 拖动层 附加到 body 对象上 也可以使用onMouseOver事件将它附加到填满整个层的链接上 拖动层 2 添加 拖动层 行为具体步骤如下 在当前文档中绘制一个层并在层中插入适当的图片和文字选中层 并打开 行为 面板单击 行为 面板中的 添加行为 按钮 从弹出的菜单中选择 拖动层 弹出 拖动层 对话框 拖动层 对话框中包含 基本 和 高级 两个选项卡 在每个选项卡上又有许多参数 设置完相关参数 单击 确定 即可 控制Shockwave或Flash 1 概述在设计网页时 设计者经常会在其中加入Shockwave或Flash对象 这样会使网页变得有声有色 丰富多彩 使用 控制Shockwave或Flash 行为可以很方便地控制它们的播放 停止 倒带或转到MacromediaShockwave或MacromediaFlashSWF文件中的某一个帧等操作 2 添加 控制Shockwave或Flash 行为具体步骤如下 执行菜单命令 插入 媒体 Shockwave 或 插入 媒体 Flash 在当前页面插入Shockwave或FlashSWF文件在 属性 面板中给插入的对象命名 注 若要用 控制Shockwave或Flash 动作对影片进行控制 必须对该影片进行命名打开 行为 面板 单击 行为 面板中的 添加行为 按钮并从弹出的菜单中选择 控制Shockwave或Flash 此时会弹出对话框 根据需要选择适当的操作 播放声音 1 概述使用 播放声音 行为可以城某个时间开始播放声音 如在完全加载页面之后或者鼠标经过某个对象时 值得注意的是浏览器可能需要用某种附加的音频支持 如音频插件 来播放声音 因此 具有不同插件的不同浏览器所播放的效果通常会有所不同 所以难很准确地预测站点的访问者对提供的声音感受如何 2 添加 播放声音 行为具体步骤如下 选中一个对象 并打开 行为 面板单击 行为 面板中的 添加行为 按钮 并从弹出菜单中选择 播放声音 弹出对话框在 播放声音 文本框中输入欲播放声音的咱径及文件名或单击 浏览 按钮来选择一个声音文件 然后单击 确定 即可 改变对象属性 1 概述使用 改变属性 行为能够在某个特定的时刻动态改变对象的属性 如改变网页的背景色或背景图片 层的大小及隐藏属性 图像的大小等 需注意的是这个行为能够改变的属性不仅决定于附加动作的对象 而且也决定于所使用的浏览器的类型 一般而言 在高版本的浏览器中能改变的属性比低版本的的浏览器要多得多 2 添加 改变属性 行为具体步骤如下 选择一个对象 示例为一个层 并打开 行为 面板单击 行为 面板中的 添加行为 按钮并从弹出菜单中选择 改变属性 此时会弹出对话框从 对象类型 下拉列表中选择欲改变属性的对象的类型 由于在一个页面中可能存在多个不同类型的对象 所以再从 命名对象 中选择欲改变属性的对象 从 属性 下选择或直接输入欲改变的具体属性名称 再在 新的值 文本框中输入新值 控制时间轴 1 概述在实际进行网页设计时 还经常会要求根据某一个事件来停止播放动画 继续播放动画 转到动画的某一个帧进行播放等 这些都可以使用 控制时间轴 行为来实现 2 添加 控制时间轴 行为具体步骤如下 在当前页面中插入时间轴 可以多个 并对时间轴进行相关的设置和操作选中时间轴上的对象或时间轴 单击 行为 面板中的 添加行为 按钮 从弹出菜单中选择 时间轴 菜单项 这时系统会自动弹出其子菜单项根据实际需要可以从三个方面对选定的时间轴进行控制 停止时间轴 停止当前选定时间轴的播放播放时间轴 继续当前选定时间轴的播放转到时间轴 转到当前选定时间轴的某一个特定轴继续播放 并设置循环次数 显示和隐藏层 1 概述利用 显示 隐藏层 行为可以显示 隐藏或恢复一个层或者多个层的默认可见性 显示 隐藏层 行为通常被用来显示提示信息 还可以被用于创建预先载入层 即一个最初挡住页的内容的较大的层 在所有页组件都完成载入后该层即消失 2 添加 显示 隐藏层 行为具体步骤如下 在页面中插入层 可以多个 并打开 行为 面板单击 行为 面板的 添加行为 按钮 从弹出的菜单中选择 显示 隐藏层 弹出对话框 在其中有显示 隐藏和默认三个功能按钮 它们的功能分别是使选定的层可见 隐藏选定的层和还原层的默认可见性属性 显示弹出式菜单 1 概述弹出式菜单是进行网面设计过程中经常要用到的技术 通常是在网页中由鼠标指针移到某个对象时就触发弹出菜单 当鼠标指针从该对象移开时 弹出式菜单就会自动消失 使用该行为不仅能快速设计出完善的弹出式菜单 而且可以通过该菜单选项来设置其水平或垂直显示模式 此外还可使用此对话框来设置或修改菜单的颜色 文本和位置等 2 添加 弹出式菜单 行为具体步骤如下 在页面中插入触发对象 如一幅图像或一个放有按钮的层 打开 行为 面板单击 行为 面板中的 添加行为 按钮 从弹出的对话框中选择 显示弹出式菜单 有户可通过 内容 选项卡来创建一个最基本的弹出式菜单 显示弹出式菜单 在 外观 选项页面中还能够设置菜单 一般状态 和 滑过状态 的外观以及设置菜单项文本的字体选择在 高级 选项页面中还允许用户设置菜单单元格的属性 如设置单元格的高度与宽度 单元格的颜色和边框的颜色 文本缩进在 位置 选项页面可以设置菜单相对于触发图像或链接的放置位置 检查插件 1 概述使用 检查插件 行为可以根据用户的浏览器是否安装了指定的页面来将它们导向不同的页面 注 不能使用JavaScript在IE中检测特定的插件 2 添加 检查插件 行为具体步骤如下 选中页面中的某个对象 打开 行为 面板单击 行为 面板的 添加行为 按钮 从弹出菜单中选择 检查插件 弹出对话框从 插件 后的 选择 下拉列表中选择一个插件名称 或者选择 输入 选项 并直接输入某一个插件的名称 检查插件 在 如果有 转到URL 文本框中输入若指定的插件存就转向在URL地址 注 若转向的URL地址为远程地址 则地址前面必须加上http 前缀 否则会导致出错不能正确转向 在 否则 转到URL 文本框中输入若指定的插件不存在就转向的URL地址 注意点同上 若选择 如无法检测 则始终转到第一个URL 复选框 则每当浏览器无法检测到指定插件时 就转向第一个URL地址 该选项只适用于IE浏览器 通常 若插件内容对于用户的页面是必不可少的一部分 可选择此复选框 浏览器会提示不具有该插件的访问者下载该插件 若插件不是必要的 要保留此选项的未选中状态 检查浏览器 1 概述利用Dreamweaver提供的 检查 浏览器行为可以很好的解决浏览器兼容问题 该行为一般放在页面的OnLoad事件中 这样当页面被加载的时候就会自动判断浏览器的类型并显示适当的内容 2 添加 检查浏览器 行为具体操作如下 选中页面中的某个对象 打开 行为 面板单击 行为 面板中的 添加行为 按钮 从弹出的菜单中选择 检查浏览器 弹出对话框在 NetscapeNavigator 和 InternetExplorer 两个对话框中分别输入检查浏览器的最低版本 在 URL 和 替代URL 中分别输入检查成功与否跳转的两个URL地址 若是一个远程URL 除了输入www地址之外还必须输入http 前缀 在五个下拉列表框中都有三个选项 分别是 转到URL 转到替代URL 和 留在此页 根据实际需要 选择合适的选项即可 检查表单 1 概述利用 检查表单 行为可以很方便地为表单中各元素设置有效性规则 它会自动检查指定文本域的内容以确保用户输入正确的数据类型 可以使用OnBlur事件将此动作附加到单个文本域 在用户填写表单时就可以验证该文本域的正确性 也可以使用OnSubmit事件将其附加到表单 在用户单击 提交 按钮同时一次验证多个文本域 2 添加 检查表单 行为若要在用户填写表单时验证单个文本域 则选择该文本域 若要在用户提交表单时同时验证多个文本域 则点击文档窗口左下角标签选择器中的 标签以选择整个表单单击 行为 面板的 添加行为 按钮 从弹出菜单中选择 检查表单 此时会弹出对话框 检查表单 在 命名的栏位 中选择要进行验证的文本域 若该文本域必须包含某种数据 则选择 必需的 选项从以下 可接受 选项中选择一个选项 若该域是必需的但不需要包含任何特定数据 则使用 任何东西 使用 数字 检查该域是否只包含数字使用 电子邮件地址 检查该域是否包含一个 符号使用 数字从 检查该文本域是否包含特定范围内的数字设置完各参数后 单击 确定 按钮关闭该对话框 若在用户提交表单时检查多个域 则OnSubmit事件自动出现在 事件 弹出菜单中 若分别检查每个域 则检查默认事件是否是OnBlur或OnChange 建议使用OnBlur事件 设置导航图像 通过以下步骤添加 设置导航图像 行为 执行菜单命令 插入 图像对象 导航条 在当前页面中插入一个导航条并进行相关设置选中导航条中的某个导航条按钮 单击 行为 面板中的 添加行为 按钮 从弹出菜单中选择 设置导航条图像 弹出相应的对话框在 基本 选项卡中可以输入或更改 项目名称 状态图像 鼠标经过图像 按下图像 按下时鼠标经过图像 替换文本 等各种选项参数若要为某个导航条按钮设置多个图像 可单击 设置导航栏图像 对话框中的 高级 选项 在 当项目正在显示 下拉列表中有两个选项 点击图像 若在用户单击选定图像以后需改变另一幅图像的时候 可此项鼠标经过图像或点击时鼠标经过图像 若在用户鼠标位于选定图像上方时需要改变另一幅图像的显示 则选择此项 设置文本 1 概述 设置文本 行为共有 设置层文本 设置文本域文本 设置框架文本 和 设置状态栏文本 四种选项 其中 设置状态栏文本 是一种直接应用的行为 而其他三种选项 则要看在当前页面中是否有对应的对象 否则其行为不能使用 另外 除了 设置状态栏 之外 其他三种选项都有一个共同的特点 那就是设置的内容可以包括任何有效的HTML源代码 即可以是JavaScript函数调用 属性 全局变量或其他的表达式等 2 设置层文本 设置层文本 动作将指定的内容替换页面上现有层的内容和格式设置 若要使用该操作 可执行下面的操作 选择文档中的一个层对象并打开 行为 面板单击 行为 面板中的 添加行为 按钮 从弹出的菜单中选择 设置文本 设置层文本 此时会弹出相应的对话框 设置文本 在 设置层文本 对话框中的 层 下拉列表中选择目标层在 新建HTML 文本框中输入要设置的任何文本单击 确定 按钮关闭该对话框 并在 行为 面板选择合适的事件3 设置文本域文本使用 设置文本域文本 行为可以用指定的内容替换表单某文本域的内容 若要使用该动作 可执行下面的操作 选择当前文档表单中的某一个文本域对象并打开 行为面板 单击 行为 面板中的 添加行为 按钮 从弹出的菜单中选择 设置文本 设置文本域文本 此时会弹出相应的对话框在 设置文本域文本 对话框的 文本域 下拉列表中选择目标文本域在 新建文本 文本框中输入要设置的任何文本单击 确定 按钮关闭该对话框 并在 行为 面板选择合适的事件 设置文本 4 设置框架文本使用 设置框架文本 动作允许用户动态设置框架的文本 即用指定的内容替换框架的内容和格式设置 该内容可以包含任何有效的HTML代码 使用此动作也可以动态显示信息 若要使用该动作 可执行下面的操作 选择当前文档中的框架对象并打开 行为面板 单击 行为 面板中的 添加行为 按钮 并从弹出的菜单中选择 设置文本 设置框架文本 此时会弹出相应的对话框在 设置框架文本 对话框的 框架 下拉列表中选择目标框架在 新建HTML 文本框中输入要设置的任何文本虽然 设置框架文本 动作可以替换框架的格式设置 但建议选择 保留背景色 以保留页面背景和文本颜色属性单击 确定 按钮关闭该对话框 并在 行为 面板选择合适的事件 设置文本 5 设置状态栏文本使用 设置状态栏文本 动作可以在浏览器窗口底部左侧的状态栏中显示自定义的消息 若要设置状态栏文本 可以使用下面的操作 选择当前文档中的框架对象并打开 行为面板 单击 行为 面板中的 添加行为 按钮 并从弹出的菜单中选择 设置文本 设置状态栏文本 此时会弹出相应的对话框在该对话框中可以在 消息 文本框中输入任何自定义的文本消息 然后单击 确定 按钮关闭该对话框 并在 行为 面板选择合适的事件 默认的事件是OnMouseOver 调用JavaScript 1 概述JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言 使用Dreamweaver中自带的 调用JavaScript 行为允许用户指定当发生某个事件时应该执行的自定义函数或JavaScript代码 这些JavaScript代码可以自己写 也可以使用网络上免费发布的各种JavaScipt代码 2 调用JavaScript具体步骤如下 选择当前文档的某对象 如一个图像按钮 并打开行为面板单击 行为 面板中的 添加行为 按钮 并从弹出的菜单中选择 调用JavaScript 此时会弹出相应的对话框在 调用JavaScript 对话框的 JavaScript 文本框中输入要执行的自定函数名称或者JavaScript代码 若已经将代码封闭某个函数 那么只需要直接输入该函数的名称即可单击 确定 按钮关闭该对话框 并在 行为 面板选择合适的事件 跳转菜单 1 概述在Dreamweaver8中 当使用菜单命令 插入 表单对象 跳转菜单 创建一个跳转菜单时 Dreamweaver创建一个菜单对象并自动为其附加一个 跳转菜单 行为 2 编辑 跳转菜单 跳转菜单创建之后 可以使用以下两种方式来编辑它 在 行为 面板中双击现有的 跳转菜单 动作 在弹出的对话框中编辑和重新排列菜单 也可更改要跳转到目标文件以及更改这些文件打开的窗口等选择该跳转菜单并使用属性窗口的 列表值 按钮 可以在菜单中编辑这些项 跳转菜单开始 1 概述在 跳转菜单开始 可以在跳转菜单中加一个前往按钮 用户点击该 前往 按钮会自动打开对应链接 从跳转菜单中选取一个菜单项就会引起加载对应的URL动作 并不需要用户有进一步的操作 若用户在跳转菜单中选取了一个已经选定的菜单项 则跳转行为不会发生 使用Dreamweaver中的 跳转菜单开始 行为允许用户重新选取一个在跳转菜单中已经选取的菜单项 2 添加 跳转菜单开始 行为具体步骤如下 选取当前文档中的某一个 跳转菜单 对象作为 前往 按钮并打开 行为 面板单击 行为 面板中的 添加行为 按钮 并从弹出的菜单中选择 跳转开始菜单 此时会弹出相应的对话框在 选择跳转菜单 下