1、21世纪普通高校计算机公共课程规划教材 Dreamweaver CS6 网页设计与制作 祁瑞华 主编 李富宇 副主编 第7章 网页交互行为 清华大学出版社第7章 网页交互行为 7.1 行为的基本概念和操作 7.1.1 什么是行为 行为由对象、事件和动作构成。对象是产生行为的主体。网页中的大多 数元素都可以作为行为的对象，例如整个HTML文档、插入的一个图 片、一段文字、一个媒体文件等。对象也可以是基于成对出现的标签， 在创建时应该首先选中对象的标签。事件是行为触发动态效果的条件。 网页事件根据触发介质的不同可以分为不同的种类，例如与鼠标相关的 单击，与键盘相关的某个按键按下。对于同一个对象，不
2、同版本的浏览 器支持的事件种类和多少也是不一样的。动作是行为最终产生的动态效 果。动态效果可以是图片的翻转、链接的改变、声音播放等。行为可以 附加到整个文档，还可以附加到链接、图像、表单对象或其他HTML元 素中的任何一种，用户可以为每个事件制定多个动作。动作按照他们在 行为面板的动作列表中列出的顺序发生。 2第7章 网页交互行为 7.1 行为的基本概念和操作 7.1.2 常见动作类型 在Dreamweaver CS6中，进行附加行为和编辑行为的操作都将使用到“ 行为”面板，选择菜单栏中的“窗口”|“行为”命令打开该面板，如图 7.1所示。 3 图7.1“行为”面板 图7.2 动作菜单第7章
3、网页交互行为 7.1 行为的基本概念和操作 7.1.2 常见动作类型 “行为”面板上提供了6个按钮，分别是：显示已经设置的事件。：显示所有可以设置的事件。：显示可以发生的动作菜单，如图7.2所示，其中每种动作的功能说 明如表7.1所示，从中选择一个动作将打开该动作相应的参数设置对话 框。：从行为列表中删除选中的动作及其相关的事件。和 ：可以改变行为列表中动作发生的顺序。 在“行为”面板上，用户可以进行添加行为、删除行为等操作。 4第7章 网页交互行为 表7.1 5 动作类型 说明 交换图像 发生设置的事件后，用其他图片来取代选定图片 弹出消息 在设置的事件发生之后，显示警告信息 恢复交换图像
4、在运用交换图像动作之后，显示原来的图片 打开浏览器窗口 在新窗口中打开URL 拖动AP元素 在页面中按照指定的方式拖动某层元素移动 改变属性 改变选定客体的属性 显示-隐藏元素 显示或隐藏特定元素 检查插件 确认是否设有运行网页的插件 检查表单 检查表单文档在有效性的时候才能使用 设置文本 用指定的内容来代替页面上现有的容器 调用JavaScript 调用JavaScript 跳转菜单 可以建立若干个链接的跳转菜单 跳转菜单开始 在跳转菜单中选定要移动的站点之后，只有单击GO按钮才可以移 动到链接的站点上 转到URL 可以转到特定的站点或者网页文档上 预先载入图像 为了在浏览器中快速显示图片，
5、事先下载图片之后显示出来第7章 网页交互行为 7.1 行为的基本概念和操作 7.1.3 常见事件 事件用于指明执行某项动作的条件 ，例如光标移动到对象上方、离开 对象、单击对象、双击对象、定时 等都是事件。在列表中选择一个行 为，单击该项左侧的事件名称栏中 下拉菜单箭头，如图7.3示。菜单中 列出了可以使用的触发事件，用户 可以根据实际需要进行设置，下面 根据使用用途分类介绍 Dreamweaver中提供的事件种类， 如表7.2所示。 6 图7.3选择触发事件第7章 网页交互行为 表7.2 7 事件 说明 onAbort 在浏览器中停止加载网页文档的操作时发生的事件 onBeforeUpdat
6、e 表单文档的项目发生变化时发生的事件 onAfterUpdate 表单文档的内容被更新时发生的事件 onBlur 鼠标指针移动到窗口或框架外侧时等非激活状态时发生的事件 onChange 访问者更改表单文档的初始设定值时发生的事件 onClick 单击选定要素时发生的事件 onError 加载网页文档的过程中发生错误时发生的事件 onFinish 结束移动文字（Marquee）时发生的事件 onStart 开始移动文字（Marquee）时发生的事件 onFocus 鼠标到窗口或框架中处于激活状态时发生的事件 onKeyDown 键盘上某个按键被按下触发事件 onKeyPress 键盘上按下某
7、个按键被释放时触发事件 onKeyUp 放开按下的键盘中的指定键时触发的事件第7章 网页交互行为 表7.2（续） 8 事件 说明 onLoad 选定的对象出现在浏览器上时发生的事件 onMouseDown 鼠标单击时发生的事件 onMouseMove 鼠标指针经过选定要素上面时发生的事件 onMouseOver 鼠标指针在选定要素上面时发生的事件 onMouseOut 鼠标指针离开选定要素上面时发生的事件 onMouseUp 释放按住的鼠标左键时发生的事件 onReset 把表单文档重新设置为初始值时发生的事件 onResize 访问者调整浏览器或框架大小时发生的事件 onScroll 访问者
8、使用滚动条时发生的事件 onSelect 访问者选择文本区域中的文本时发生的事件 onSubmit 访问者提交表单时发生的事件 onUnload 访问者退出网页文档时发生的事件第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.1 交换图像 【例7.1】为网页中一幅图片添加“交 换图像”行为。 （1）单击“插入”|“图像”命令来 插入一幅图像，并且在属性面板中为 该图像输入名称“pic1.jpg”，如图 7.4所示。 （2）选择图像pic1.jpg，在“行为” 面板中单击添加行为按钮 ，从弹出式 菜单中选择“交换图像”命令，打开 “交换图像”对话框。 （3）单击“设定原始
9、档为”右侧的“ 浏览”按钮，打开“选择图像源文件 ”对话框，从中选择一幅图片pic2.jpg 。 9 图7.4 命名图像 第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.1 交换图像 【例7.1】为网页中一幅图片添加“ 交换图像”行为。 （4）单击“确定”按钮，返回“交换 图像”对话框，如图7.5所示。 （5）单击“确定”按钮，“行为” 面板列表中出现两项对图像附加的 行为：“交换图像”和“恢复交换 图像”，如图7.6所示。 10图7.5“交换图像”对话框 7.6 对图像附加的行为第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.1 交换图像
10、【例7.1】为网页中一幅图片添加“交换图像”行为。 （6）按F12键对当前添加的效果进行预览，如图7.7所示。 11a 光标在图像外 b 光标在图像内 图7.7 “交换图像”预览效果第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.2 弹出信息 【例7.2】点击网页中的一幅图片后弹出信息“对不起，本照片不能下载 ！” （1）单击“插入”|“图像”命令来插入一幅图像 “pic3.jpg ”。 （2）在“行为”面板中单击添加行为按钮，从弹出式菜单中选择“弹出信 息”命令，打开“弹出信息”对话框。 12图7.8 编辑“弹出信息”对话框第7章 网页交互行为 7.2 使用Drea
11、mweaver内置行为 7.2.2 弹出信息 【例7.2】点击网页中的一幅图片后弹出信息“对 不起，本照片不能下载！” （3）在“消息”文本框中输入要提示访问者的文本 信息：“抱歉，该图片禁止下载! ”，如图7.8所示 ，单击“确定”按钮完成设置。 （4）“行为”面板中的触发事件默认设置为 “onClick ”，此处不做修改，表示当鼠标单击时触 发该行为的发生。 （5）按下F12键预览该网页，如果在图片上单击 光标便会弹出一个信息框，如图7.9所示。 13图7.9预览“弹出信息”第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.3 打开浏览器窗口 【例7.3】在新窗口中
12、打开图片。 （1）在文档窗口中插入一个对象，例如图片“pic4.jpg”。 （2）在“行为”面板中单击添加行为按钮，从弹出式菜单中选择“打开 浏览器窗口”菜单项，弹出“打开浏览器窗口”对话框。 14图7.10 “打开浏览器窗口”对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.3 打开浏览器窗口 【例7.3】在新窗口中打开图片。 （3）单击“浏览”按钮选择放大图的图片. （4）本例中只需要输入图片放大图的路径和文件，其它选项保持默认设 置，如图7.10所示。单击“确定”按钮。 （5）在“行为”面板中将触发事件设置为“onMouseDown ”表示鼠标按下 时触发动
13、作。 （6）按下F12键预览网页。用鼠标单击网页中小图片即可打开一个显示 大图片的新窗口。 15第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.4 拖动AP元素 【例7.4】利用“拖动AP元素”行为制作一个拼图游戏。 （1）单击“插入”|“布局对象”|“AP Div(A)”菜单命令，分别在文 档窗口中绘制4个div层，并在层中插入图片素材，如图7.11所示。 （2）在“文档”窗口底部的标签选择器中选择标签。 （3）在“行为”面板中单击添加行为按钮 ，从弹出式菜单中选择“拖 动AP元素”菜单命令，弹出 “拖动AP元素”对话框，如图7.12所示。 16图7.11在页面中插
14、入对象 图7.12“拖动层”对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.4 拖动AP元素 【例7.4】利用“拖动AP元素”行为制作一个拼图游戏。 （4）在“AP元素”下拉列表中选择“div apDiv1”，在“移动”下拉列 表中可以选择“限制”或“不限制”，如图7.12所示。对于滑块控件和 可移动的布景，可选择“限制”移动，并且在选择该项后显示的“上 ” “下” “左”和“右”文本框中输入值，单位为像素。 （5）在“左”和“右”文本框中为拖放目标输入值，单位为像素。拖放 目标是一个点，也就是用户要将div元素拖放到的位置。当div元素的左 坐标和上坐标与在“
15、左”和“上”文本框中输入的值匹配时便认为div元 素已经达到拖放目标。这些值是与浏览器窗口的左上角相对的。单击“ 取得目前位置”按钮，Dreamweaver会自动将div元素的当前位置填入这 些文本框，本例中使用的就是该项。 17第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.4 拖动AP元素 【例7.4】利用“拖动AP元素”行为制作一个拼图游戏。 （6）在“靠齐距离”文本框中输入一个值，以像素为单位，以确定用户 必须拖放值离目标多近才能将div元素靠齐到目标位置，较大的值可以使 用户较容易地找到拖放目标。 单击“确定”按钮完成设置。然后在“行为”面板中调整事件为 “
16、onLoad”，表示页面载入时就可以拖动这些div元素。 （7）同样地，分别选中其它的3幅图像，为它们也附加相对应的3个div 元素的“拖动AP元素”的行为，设置的内容与第1个div元素相同。 （8）在文档中打乱4个div元素的顺序，增加一些拼图的难度，此时，保 存网页并预览。 18第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.5 改变属性 【例7.5】使用“改变属性”制作图片变脸效果。 （1）在菜单栏中选择则“插入”|“图像”命令， 在页面中插入一幅图片，本例为“pic5.jpg”。 （2）选中文档中的图像，在“行为”面板中单击 添加行为按钮 ，从弹出式菜单中选择
17、“改变属性” 菜单项，弹出“改变属性”对话框。 （3）在行为面板中设置事件为“onClick”，表示 单击图像时触发该行为的发生。 （4）单击“确定”按钮后返回设计界面，将该文 件进行保存并预览效果。页面中默认显示图像 pic5.jpg，当单击图像时显示图像pic6.jpg，如图 7.14所示。 19 图7.14预览“改变属性”网页第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.6 显示隐藏元素 【例7.6】应用“显示隐藏元素”行为制作图 书简介，提供出版信息及内容介绍等信息。 （1）在文档窗口中插入一幅图片，将该图片 设置为空链接（在“属性”面板的“链接”文 本框中
18、输入“#”即可）。 （2）在文档窗口中插入一个层，并且在这个 层中再绘制一个同等大小的嵌套子层。在子层 中插入图书的说明信息，如图7.15所示。 （3）打开层面板，将包含图书说明信息的子 层的可见性设为打开时隐藏（眼睛图标为关闭 状态），如图7.16所示。 20图7.15绘制层 图7.16可见性为隐藏第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.6 显示隐藏元素 【例7.6】应用“显示隐藏元素”行为制作图书简介，提供出版信息及内容介绍 等信息。 （4）选中文档中的链接图像，在“行为”面板中单击添加行为按钮 ，从弹出式 菜单中选择“显示-隐藏元素”菜单项，弹出“显示-
19、隐藏元素”对话框。 （5）从“命名的层”列表框中列出了当前文档中所有存在的层的名称，这里选 择要显示的层，本例中为Layer2。 （6）从“显示” “隐藏” “默认”按钮中选择对层进行哪种控制，本例中 要显示Layer2，单击“显示”按钮，层的名称后会出现“显示”文本，如图7.17 所示。 21图7.17“显示隐藏层”对话框 图7.18附加行为第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.6 显示隐藏元素 【例7.6】应用“显示隐藏元素”行为制作图书简介 ，提供出版信息及内容介绍等信息。 （7）单击“确定”按钮，在“行为”面板中将事件 设为“onMouseOver”
20、；再次执行（4）的操作， 链接图像附加第2个动作（在光标移开时隐藏层）， 和刚才操作的不同点在于这次单击“隐藏”按钮， 并且事件设为“onMouseOut”。此时栏目链接图像 附加动作的操作就完成了，“行为”面板如图7.18 所示。 （8）按F12键保存并预览网页效果，光标指针经过 图像时，显示层及层中内容，如图7.19所示；光标 移开隐藏层及层中内容。 22图7.19 鼠标指针经过时显示层第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.7 跳转菜单 【例7.6】使用“行为”面板编辑跳转菜单 （1）新建一个文档并保存，单击“插入”|“表单 ”|“跳转菜单”命令，打开如
21、图7.20所示“插入跳 转菜单”对话框创建一个跳转菜单，在“文本”对 话框中，依次输入菜单的名称，并在“选择时，转 到URL”对话框中添加URL，或者单击“浏览”按钮 ，通过“选择文件”对话框选择链接文件的存储位 置。 （2）在文档中选择该跳转菜单对象，在“行为”面 板中单击“跳转菜单”，弹出如图7.21所示的“跳 转菜单”对话框，在该对话框中可以修改文本、链 接等内容。 23图7.20“插入跳转菜单”面板 第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.7 跳转菜单 【例7.6】使用“行为”面板编辑跳转菜单 （3）单击“确定”按钮，完成设置。 “跳转菜单开始”行为和
22、“跳转菜单”行为关系密切。“跳转菜单开始” 是在跳转菜单中加入一个“前往”按钮。 24图7.21“跳转菜单”对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.8 设置文本 1. 设置容器的文本 “设置容器的文本”行为的操作步骤如下 ： （1）选择“插入”|“布局对象”|“AP Div”菜单项，在文档窗口中插入一个层 元素。 （2）在插入的AP Div中输入文本，并在 “属性”面板中设置“溢出”选项为 “Visible”。 （3）在文档窗口选择该AP Div，单击行 为面板中的添加行为按钮 ，从弹出式菜 单中选择“设置文本”|“设置容器的文 本”，弹出“设置容器的文
23、本”对话框， 如图7.22所示，其中参数含义如下： 25图7.22“设置容器的文本”对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.8 设置文本 1. 设置容器的文本 容器：下拉列表中列出了页面中 所有的容器，在其中选择刚刚插 入的AP Div。 “设置容器的文本”行为的操作 步骤如下： 新建HTML：在文本框中输入要替 换的内容的HTML代码。 （4）单击“确定”按钮，将行为面 板中的触发事件设置为“onClick”。 （5）按下F12键即可预览网页效果。 26图7.22“设置容器的文本”对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为
24、7.2.8 设置文本 2.设置文本域文本 使用“设置文本域文本”动作的操作 步骤如下： （1）在文档中插入一个文本域。单 击“插入”|“表单”|“文本区域” 菜单项，若弹出如图7.23所示的提示 框，单击“是”按钮即可。 （2）在“属性”面板中为该文本域 输入一个名称，应确保该名称在页面 上是唯一的。 27图7.23 提示框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.8 设置文本 2.设置文本域文本 使用“设置文本域文本”动作的操作步骤如下： （3）选择要编辑的文本域对象，在“行为”面板中单击添加行为按钮 ，从弹出式 菜单中选择“设置文本”|“设置文本域文字”菜单
25、项弹出“设置文本域文字”对 话框。 （4）在该对话框中的“文本域”下拉列表中选择目标文本域，在“新建文本”文 本框中输入文本，如图7.24所示。 （5）单击“确定”按钮完成设置。 （6）在“行为”面板中设置所需要的触发事件，例如“onClick”，按下F12键即 可预览网页效果。 28图7.24“设置文本域文字”对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.8 设置文本 3.设置框架文本 “设置框架文本”动作的操作步骤 如下： （1）选择一个框架对象。 （2）在“行为”面板中单击添加 行为按钮 ,从弹出式菜单中选择“ 设置文本”|“设置框架文本”菜 单项弹出如
26、图7.25所示的“设置框 架文本”对话框。 （3）从“框架”弹出式菜单中选 择目标框架。 29图7.25“设置框架文本”对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.8 设置文本 3.设置框架文本 “设置框架文本”动作的操作步骤 如下： （4）单击“获取当前HTML”按钮 ，可以将当前目标框架的内容拷贝 到body部分。 （5）在“新建HTML”文本框中输 入信息，然后单击“确定”按钮。 （6）在“行为”面板中检查默认 事件是否是所需要的事件，若不是 将其设置为所需要的触发事件即 可。 30图7.25“设置框架文本”对话框第7章 网页交互行为 7.2 使用Dr
27、eamweaver内置行为 7.2.8 设置文本 4.设置状态栏文本 使用“设置状态栏文本”行为的操 作步骤如下： （1）打开要加入状态栏文本的网页 ，并且选择左下角的标 签。 （2）在“行为”面板中单击添加 行为按钮 ，从弹出式菜单中选择“ 设置文本”|“设置状态栏文本” 菜单项弹出如图7.26所示的“设置 状态栏文本”对话框。 31图7.26 设置状态栏文本对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.8 设置文本 4.设置状态栏文本 使用“设置状态栏文本”行为的操作步骤如下： （3）在“消息”文本框中输入文本，文本消息要简明扼要。若消息不 能完全放在状态
28、栏中，浏览器将截断消息。 （4）单击“确定”按钮，完成设置。 （5）在“行为”面板中设置所需要的触发事件，按下F12键即可预览网 页效果。 32第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.9 转到URL “转到URL”行为是在当前窗口或指定 的框架中打开一个新页，此行为对通过 一次单击更改两个或多个框架的内容时 特别有帮助，下面介绍其具体操作步骤 ： （1）在文档中插入一个按钮，并为其 设置显示属性。 （2）选中按钮，单击行为控制面板中 的 按钮，在弹出的菜单中选择“转到 URL”选项。 （3）在弹出的“转到URL”对话框中 设置“打开在”为“主窗口”，如图 7.
29、27所示。 33图7.27 “转到URL”对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.9 转到URL “转到URL”行为是在当前窗口或指定 的框架中打开一个新页，此行为对通过 一次单击更改两个或多个框架的内容时 特别有帮助，下面介绍其具体操作步骤 ： （4）单击图7.27中的“浏览”按钮， 在弹出的“选择文件”对话框中选择目 标文件，如图7.28所示。 （5）单击“确定”按钮后返回设计界 面，将得到的文件保存并预览，首先显 示按钮所在页面，当单击按钮后将调用 转移事件来到指定页面“login.html” 。 34图7.28 “选择文件”对话框第7章 网页交互
30、行为 7.2 使用Dreamweaver内置行为 7.2.10 调用JavaScript “调用JavaScript”行为可以指定在 事件发生时，要执行的自定义函数 或者JavaScript代码，“调用 JavaScript”行为的具体操作步骤如 下。 （1）打开“行为”面板，单击添加 行为按钮 ，从弹出式菜单中选择“ 调用JavaScript”菜单项，弹出“调 用JavaScript”对话框。 （2）在“调用JavaScript”对话框 中输入调用的JavaScript函数 “window.close()”，如图7.29所 示。 35图7.29 “调用JavaScript”对话框第7章 网页
31、交互行为 7.2 使用Dreamweaver内置行为 7.2.10 调用JavaScript “调用JavaScript”行为可以指定在 事件发生时，要执行的自定义函数 或者JavaScript代码，“调用 JavaScript”行为的具体操作步骤如 下。 （3）单击“确定”按钮返回设计 界面，保存文件后预览。当页面打 开后弹出如图7.30所示提示对话框 ，单击“是”按钮后此页面窗口将 被关闭，单击“否”按钮后将显示 此页面的内容。 36图7.30 提示对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.11 检查表单 单击文档窗口右侧的浮动面板“标签”|“ 行为”
32、上的 按钮，在下拉菜单中选择“检 查表单”选项，弹出“检查表单”对话框， 如图7.31所示。 （1）域：当前文档窗口中使用的文本域表 单对象的名称，如文本字段、密码域和文本 区域；但不会出现复选框、单选按钮等其他 表单对象的名称。找到需要验证的表单对象 ，例如email (电子邮件)。 （2）值：若“必需的”复选框被选中，则 表示“命名的栏位”中所对应的文本元素在 浏览时必须被填写。 37图7.30 提示对话框第7章 网页交互行为 7.2 使用Dreamweaver内置行为 7.2.11 检查表单 单击文档窗口右侧的浮动面板“标签”|“行 为”上的 按钮，在下拉菜单中选择“检查表 单”选项，弹
33、出“检查表单”对话框，如图 7.31所示。 （3）可接受：如果在该区域选择“任何东西 ”单选按钮，表示可接受任何内容；选择“ 数字”单选按钮表示只接受数字；选择“电 子邮件地址”单选按钮，填写的E-mail格式必 须含有一个符号；选择“数字从到” 单选按钮，用户必须填写指定范围的数字， 否则将会提示错误，要求用户重新填写。在 这里选择“电子邮件地址”，如图7.31所 示。 38图7.30 提示对话框第7章 网页交互行为 7.3 课堂实例 制作网页导航 【例7.7】利用行为制作一个文学网站的主页，如图7.33所示。 【目标】使用内置的Dreamweaver行为实现常用的网页效果。 【思路】使用“
34、交换图像”行为可以实现动态的导航条效果，使用“预 先载入图像”行为预先下载图片到浏览器缓存中，使用“打开浏览器窗 口”行为可以实现弹出广告效果等，本例将通过这两种行为来制作网站 首页。 39 图7.33 网站首页第7章 网页交互行为 7.3 课堂实例 制作网页导航 【例7.7】利用行为制作一个文学网站的主页，如图7.33所示。 【步骤】 步骤1：插入表格并设置属性。执行“插入”|“表格”命令，创建一个宽为1110 像素， 4行7列的表格。选择表格，在“属性”面板中设置“对齐”方式为“居 中对齐”。 步骤2：合并第1行所有单元格，设置背景图像“header_bg.png”，在合并后单元 格中插入
35、一个宽为80%的1行5列的嵌套表格，分别输入“站点首页”、“关于 我们”、“Welcome to ebook”、“相关服务”和“联系我们”，设置“字体” 为华文行楷，“字号”为24。 步骤3：添加网页其他内容，以及设置图像ID名称。在第2行的7个单元格中分别 插入图像“left_arrow”、“head_img1”、“head_img2”、“head_img3”、 “head_img4”、“head_img5”和“right_arrow”，并在“属性”面板的ID文 本框中，输入名称，这样即可为该图像添加ID名称，如图7.34所示。 40第7章 网页交互行为 7.3 课堂实例 制作网页导航 【例
36、7.7】利用行为制作一个文学网站的主页， 如图7.33所示。 【步骤】 步骤4：添加交换图像行为。在“行为”面板中 ，单击“添加行为”按钮，执行“交换图像” 命令。在弹出的对话框中，单击“浏览”按钮 ，选择“head_lightimg1”图像，如图7.35所 示。按照此方法，分别为导航条中其他图像添 加行为。 步骤5：添加预先载入图像行为，单击“标签选 择器”中的标签，逐个添加要预先载 入的图像，如图7.36所示。“事件列表”中显 示为标签设置了onload事件，事件触 发的行为是预先载入图像。 41 图7.34 为图像添加ID名称 图7.35 添加“交换图像”行为 图7.36 添加“预先载入
37、图像”图像第7章 网页交互行为 7.3 课堂实例 制作网页导航 【例7.7】利用行为制作一个文学网 站的主页，如图7.33所示。 【步骤】 步骤6：添加打开浏览器行为。单击 “添加行为”按钮，执行“打开浏 览器窗口”命令，在弹出的对话框 中，单击“浏览”按钮，选择 “ad.html”文件，并设置“窗口宽 度”为400，“窗口高度”为240， 单击“确定”按钮。 步骤7：保存文件，预览效果。 42 图7.37 添加“打开浏览器窗口”行为第7章 网页交互行为 7.4 本章小结 在本章中，主要介绍了时间轴、行为以及时间轴和行为的综合应用，提供了简便 的制作动态网页的方法，使用户不再烦心于编写客户端脚
38、本程序。 行为在技术上是和时间轴动画一样，一种动态HTML( DHTML )技术。在特定的 时间或者是某个特定的事件而引发的动作。事件可以是光标单击、光标移动、网 页下载完毕等事件，动作可以是打开新窗口、弹出菜单、变换图像等。行为实际 上是插入到网页内到一段JavaScript代码。 对象：是产生行为的主体，大部分网页元素都可以称为对象，比如图片、文本、 多媒体等，甚至整个页面。 事件：是触发动作的原因，可以被附加到各种页面元素上，也可以被附加到 HTML标记中。一个事件总是针对某个页面元素而言到。 动作：就是一段程序代码的执行所引出的一些效果。通过动作来完成动态效果。 行为：事件和动作组合在一起就是行为。也既是一个事件引发来一个动作。 Dreamweaver中内置来很多动作，使得用户不需要编写JavaScript代码，就可以 获得很多行为。需要注意的是，一个事件可以和多个动作相关联。 43
