第7章 网页交互行为

图7.5“交换图像”对话框
7.6 对图像附加的行为
10
Biblioteka Baidu
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.1 交换图像 【例7.1】为网页中一幅图片添加“交换图像”行为。 （6）按F12键对当前添加的效果进行预览，如图7.7所示。
a 光标在图像外 b 光标在图像内 图7.7 “交换图像”预览效果
4
第7章 网页交互行为
表7.1
动作类型 交换图像 弹出消息 恢复交换图像 打开浏览器窗口 拖动AP元素 改变属性 显示-隐藏元素 检查插件 检查表单 设置文本 调用JavaScript 跳转菜单 跳转菜单开始 转到URL 预先载入图像 说明 发生设置的事件后，用其他图片来取代选定图片 在设置的事件发生之后，显示警告信息 在运用交换图像动作之后，显示原来的图片 在新窗口中打开URL 在页面中按照指定的方式拖动某层元素移动 改变选定客体的属性 显示或隐藏特定元素 确认是否设有运行网页的插件 检查表单文档在有效性的时候才能使用 用指定的内容来代替页面上现有的容器 调用JavaScript 可以建立若干个链接的跳转菜单 在跳转菜单中选定要移动的站点之后，只有单击 GO 按钮才可以移 动到链接的站点上 可以转到特定的站点或者网页文档上 为了在浏览器中快速显示图片，事先下载图片之后显示出来
图7.11在页面中插入对象
图7.12“拖动层”对话框
16
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.4 拖动AP元素 【例7.4】利用“拖动AP元素”行为制作一个拼图游戏。 （4）在“AP元素”下拉列表中选择“div apDiv1”，在“移动”下拉列 表中可以选择“限制”或“不限制”，如图7.12所示。对于滑块控件和 可移动的布景，可选择“限制”移动，并且在选择该项后显示的 “上”﹑“下”﹑“左”和“右”文本框中输入值，单位为像素。 （5）在“左”和“右”文本框中为拖放目标输入值，单位为像素。拖放 目标是一个点，也就是用户要将div元素拖放到的位置。当div元素的左 坐标和上坐标与在“左”和“上”文本框中输入的值匹配时便认为div元 素已经达到拖放目标。这些值是与浏览器窗口的左上角相对的。单击 “取得目前位置”按钮，Dreamweaver会自动将div元素的当前位置填入 这些文本框，本例中使用的就是该项。
7
第7章 网页交互行为
表7.2（续）
事件 onLoad onMouseDown onMouseMove onMouseOver onMouseOut onMouseUp onReset onResize onScroll onSelect onSubmit onUnload 说明 选定的对象出现在浏览器上时发生的事件 鼠标单击时发生的事件 鼠标指针经过选定要素上面时发生的事件 鼠标指针在选定要素上面时发生的事件 鼠标指针离开选定要素上面时发生的事件 释放按住的鼠标左键时发生的事件 把表单文档重新设置为初始值时发生的事件 访问者调整浏览器或框架大小时发生的事件 访问者使用滚动条时发生的事件 访问者选择文本区域中的文本时发生的事件 访问者提交表单时发生的事件 访问者退出网页文档时发生的事件
8
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.1 交换图像 【例7.1】为网页中一幅图片添加“交 换图像”行为。 （1）单击“插入”|“图像”命令来 插入一幅图像，并且在属性面板中为 该图像输入名称“pic1.jpg”，如图 7.4所示。 （2）选择图像pic1.jpg，在“行为” 面板中单击添加行为按钮 ，从弹出式 菜单中选择“交换图像”命令，打开 “交换图像”对话框。 （3）单击“设定原始档为”右侧的 “浏览”按钮，打开“选择图像源文 件”对话框，从中选择一幅图片 pic2.jpg。
2
第7章 网页交互行为
7.1 行为的基本概念和操作 7.1.2 常见动作类型 在Dreamweaver CS6中，进行附加行为和编辑行为的操作都将使用到 “行为”面板，选择菜单栏中的“窗口”|“行为”命令打开该面板，如 图7.1所示。
图7.1“行为”面板
图7.2 动作菜单
3
第7章 网页交互行为
7.1 行为的基本概念和操作 7.1.2 常见动作类型 “行为”面板上提供了6个按钮，分别是： ：显示已经设置的事件。 ：显示所有可以设置的事件。 ：显示可以发生的动作菜单，如图7.2所示，其中每种动作的功能说 明如表7.1所示，从中选择一个动作将打开该动作相应的参数设置对话框。 ：从行为列表中删除选中的动作及其相关的事件。 和 ：可以改变行为列表中动作发生的顺序。 在“行为”面板上，用户可以进行添加行为、删除行为等操作。
图7.4 命名图像
9
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.1 交换图像 【例7.1】为网页中一幅图片添加 “交换图像”行为。
（4）单击“确定”按钮，返回“交换 图像”对话框，如图7.5所示。
（5）单击“确定”按钮，“行为” 面板列表中出现两项对图像附加的 行为：“交换图像”和“恢复交换 图像”，如图7.6所示。
图7.3选择触发事件
6
第7章 网页交互行为
表7.2
事件 onAbort onBeforeUpdate onAfterUpdate onBlur onChange onClick onError onFinish onStart onFocus onKeyDown onKeyPress onKeyUp 说明 在浏览器中停止加载网页文档的操作时发生的事件 表单文档的项目发生变化时发生的事件 表单文档的内容被更新时发生的事件 鼠标指针移动到窗口或框架外侧时等非激活状态时发生的事件 访问者更改表单文档的初始设定值时发生的事件 单击选定要素时发生的事件 加载网页文档的过程中发生错误时发生的事件 结束移动文字（Marquee）时发生的事件 开始移动文字（Marquee）时发生的事件 鼠标到窗口或框架中处于激活状态时发生的事件 键盘上某个按键被按下触发事件 键盘上按下某个按键被释放时触发事件 放开按下的键盘中的指定键时触发的事件
5
第7章 网页交互行为
7.1 行为的基本概念和操作 7.1.3 常见事件 事件用于指明执行某项动作的条件， 例如光标移动到对象上方、离开对 象、单击对象、双击对象、定时等 都是事件。在列表中选择一个行为， 单击该项左侧的事件名称栏中下拉 菜单箭头，如图7.3示。菜单中列出 了可以使用的触发事件，用户可以 根据实际需要进行设置，下面根据 使用用途分类介绍Dreamweaver中 提供的事件种类，如表7.2所示。
图7.14预览“改变属性”网页
19
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.6 显示隐藏元素 【例7.6】应用“显示隐藏元素”行为制作图 书简介，提供出版信息及内容介绍等信息。 （1）在文档窗口中插入一幅图片，将该图片 设置为空链接（在“属性”面板的“链接”文 本框中输入“#”即可）。 （2）在文档窗口中插入一个层，并且在这个 层中再绘制一个同等大小的嵌套子层。在子层 中插入图书的说明信息，如图7.15所示。 （3）打开层面板，将包含图书说明信息的子 层的可见性设为打开时隐藏（眼睛图标为关闭 状态），如图7.16所示。
图7.9预览“弹出信息”
13
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.3 打开浏览器窗口 【例7.3】在新窗口中打开图片。 （1）在文档窗口中插入一个对象，例如图片“pic4.jpg”。 （2）在“行为”面板中单击添加行为按钮，从弹出式菜单中选择“打开 浏览器窗口”菜单项，弹出“打开浏览器窗口”对话框。
图7.10“打开浏览器窗口”对话框
14
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.3 打开浏览器窗口 【例7.3】在新窗口中打开图片。 （3）单击“浏览”按钮选择放大图的图片. （4）本例中只需要输入图片放大图的路径和文件，其它选项保持默认设 置，如图7.10所示。单击“确定”按钮。 （5）在“行为”面板中将触发事件设置为“onMouseDown”表示鼠标 按下时触发动作。 （6）按下F12键预览网页。用鼠标单击网页中小图片即可打开一个显示 大图片的新窗口。
21世纪普通高校计算机公共课程规划教材 《Dreamweaver CS6 网页设计与制作》 祁瑞华 主编 李富宇 副主编
第7章 网页交互行为
清华大学出版社
第7章 网页交互行为
7.1 行为的基本概念和操作 7.1.1 什么是行为 行为由对象、事件和动作构成。对象是产生行为的主体。网页中的大多 数元素都可以作为行为的对象，例如整个HTML文档、插入的一个图片、 一段文字、一个媒体文件等。对象也可以是基于成对出现的标签，在创 建时应该首先选中对象的标签。事件是行为触发动态效果的条件。网页 事件根据触发介质的不同可以分为不同的种类，例如与鼠标相关的单击， 与键盘相关的某个按键按下。对于同一个对象，不同版本的浏览器支持 的事件种类和多少也是不一样的。动作是行为最终产生的动态效果。动 态效果可以是图片的翻转、链接的改变、声音播放等。行为可以附加到 整个文档，还可以附加到链接、图像、表单对象或其他HTML元素中的 任何一种，用户可以为每个事件制定多个动作。动作按照他们在行为面 板的动作列表中列出的顺序发生。
18
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.5 改变属性 【例7.5】使用“改变属性”制作图片变脸效果。 （1）在菜单栏中选择则“插入”|“图像”命令， 在页面中插入一幅图片，本例为“pic5.jpg”。 （2）选中文档中的图像，在“行为”面板中单击 添加行为按钮 ，从弹出式菜单中选择“改变属性” 菜单项，弹出“改变属性”对话框。 （3）在行为面板中设置事件为“onClick”，表示 单击图像时触发该行为的发生。 （4）单击“确定”按钮后返回设计界面，将该文 件进行保存并预览效果。页面中默认显示图像 pic5.jpg，当单击图像时显示图像pic6.jpg，如图 7.14所示。
17
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.4 拖动AP元素 【例7.4】利用“拖动AP元素”行为制作一个拼图游戏。 （6）在“靠齐距离”文本框中输入一个值，以像素为单位，以确定用户 必须拖放值离目标多近才能将div元素靠齐到目标位置，较大的值可以使 用户较容易地找到拖放目标。 单击“确定”按钮完成设置。然后在“行为”面板中调整事件为 “onLoad”，表示页面载入时就可以拖动这些div元素。 （7）同样地，分别选中其它的3幅图像，为它们也附加相对应的3个div 元素的“拖动AP元素”的行为，设置的内容与第1个div元素相同。 （8）在文档中打乱4个div元素的顺序，增加一些拼图的难度，此时，保 存网页并预览。
15
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.4 拖动AP元素 【例7.4】利用“拖动AP元素”行为制作一个拼图游戏。 （1）单击“插入”|“布局对象”|“AP Div(A)”菜单命令，分别在文 档窗口中绘制4个div层，并在层中插入图片素材，如图7.11所示。 （2）在“文档”窗口底部的标签选择器中选择<body>标签。 （3）在“行为”面板中单击添加行为按钮 ，从弹出式菜单中选择“拖 动AP元素”菜单命令，弹出 “拖动AP元素”对话框，如图7.12所示。
图7.8 编辑“弹出信息”对话框
12
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.2 弹出信息 【例7.2】点击网页中的一幅图片后弹出信息“对 不起，本照片不能下载！” （3）在“消息”文本框中输入要提示访问者的文 本信息：“抱歉，该图片禁止下载!”，如图7.8所 示，单击“确定”按钮完成设置。 （4）“行为”面板中的触发事件默认设置为 “onClick”，此处不做修改，表示当鼠标单击时 触发该行为的发生。 （5）按下F12键预览该网页，如果在图片上单击 光标便会弹出一个信息框，如图7.9所示。
11
第7章 网页交互行为
7.2 使用Dreamweaver内置行为 7.2.2 弹出信息 【例7.2】点击网页中的一幅图片后弹出信息“对不起，本照片不能下 载！” （1）单击“插入”|“图像”命令来插入一幅图像 “pic3.jpg”。 （2）在“行为”面板中单击添加行为按钮，从弹出式菜单中选择“弹出 信息”命令，打开“弹出信息”对话框。