3.5 行为
在网页中合理地使用行为，可以实现许多动态效果，从而使网页变得活泼、生动，使浏览者流连忘返。在Dreamweaver中，用户可以非常方便地向网页及其对象中添加行为，可以非常高效地实现预期效果。
3.5.1 基本概念
1．行为
行为是响应某一事件而采取的动作，通过动作实现用户同网页的交互，或使某个任务被执行。行为实质上是在网页中调用JavaScript等脚本语言，以实现网页的动态效果。在Dreamweaver中应用行为免去了编写代码的麻烦，使网页制作过程更加便捷，尤其对于初学者非常适用。
2．行为组成
行为由事件和动作两部分组成。事件是指用户的操作，它是触发动态效果的原因，可以被附加到各种网页元素上，也可以被附加到HTML标签中。动作是指发生什么，即最终完成的动态效果，如打开浏览器窗口、弹出信息等。对于一般的行为，都是由事件来激活动作。常用的事件及动作如表3-3和表3-4所示。
表3-3 常用事件及其说明
表3-4 常用动作及其说明
3．“行为”面板
在Dreamweaver右侧面板组中单击“标签检查器”中的“行为”按钮即可打开“行为”面板，或选择菜单“窗口”→“行为”命令也可将其打开，面板如图3-47所示。创建与编辑行为均在“行为”面板中完成。
图3-47 “行为”面板
3.5.2 应用行为
行为可以应用于HTML标签、图像、文本等各网页元素。如果要对某个对象应用行为，首先需选定对象，然后单击“行为”面板上的“添加行为”按钮
，在打开的行为列表中选择动作，最后设定事件。
提示：
添加动作后，“行为”面板自动出现事件，但不一定是需要的事件，因此可根据需要调整事件。
下面通过几个实例来学习行为的应用，如设置状态栏文本、打开浏览器窗口、弹出信息、交换图像与恢复交换图像等。
1．设置状态栏文本
通过应用行为可以在网页的状态栏上显示设定好的文字信息。
例3-6 在网站“book”中为文件“index.html”的状态栏添加文本“欢迎光临Bookshop网站!”，要求网页打开时文本内容显示。
素材所在位置：……\素材\课堂案例\案例素材\No3\book\……
效果所在位置：……\素材\课堂案例\案例效果\No3\book\……
步骤：
1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“index.html”文件。
2）单击文档窗口下方状态栏中的“<body>”标签（代表选中整个网页内容），打开“行为”面板，单击“添加行为”按钮
，在弹出的列表中选择“设置文本”→“设置状态栏文本”命令，如图3-48所示。
图3-48 设置状态栏文本
3)打开“设置状态栏文本”对话框，在“消息”文本框中输入“欢迎光临Bookshop网站!”，然后单击“确定”按钮，如图3-49所示。
图3-49 输入文本内容
4)在“行为”面板的“事件”下拉列表中选择“onLoad”，表示网页下载完毕后即显示设置的状态栏文本，如图3-50所示。
图3-50 设置事件
5)保存文件并预览，网页打开后可以看到状态栏中的文本，如图3-51所示。
图3-51 预览效果
2．打开浏览器窗口
使用该动作可在新的浏览器窗口中打开一个网页文档，并定义窗口属性。
例3-7 在网站“book”中为文件“index.html”添加“打开浏览器窗口”行为，要求单击网页左上方的图像“logo2.jpg”时，浏览器新窗口打开网页“ad.html”。
素材所在位置：……\素材\课堂案例\案例素材\No3\book\……
效果所在位置：……\素材\课堂案例\案例效果\No3\book\……
步骤：
1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“index.html”文件。
2)单击选定文档左上方的图像“logo2.jpg”，打开“行为”面板，单击“添加行为”按钮
，在弹出的列表中选择“打开浏览器窗口”命令，如图3-52所示。
图3-52 选择“打开浏览器窗口”命令
3)打开“打开浏览器窗口”对话框，单击“要显示的URL”文本框右侧的“浏览”按钮，在打开的“选择文件”对话框中选择网页“ad.html”，然后单击“确定”按钮，如图3-53所示。
图3-53 设置“要显示的URL”
4)回到“打开浏览器窗口”对话框，设置“窗口宽度”和“窗口高度”均为“500”，“窗口名称”为“ad”，然后单击“确定”按钮，如图3-54所示。
5)在“事件”下拉列表中选择“onClick”，表示单击图像“logo2.jpg”即打开浏览器新窗口，如图3-54所示。
图3-54 设置浏览器窗口属性及事件
6)保存文件并预览，新窗口显示内容为“ad.html”，如图3-55所示。
图3-55 预览效果
3．弹出信息
行为动作弹出JavaScript警告框，用来向用户提供信息。
例3-8 在网站“book”中为文件“type.html”添加“弹出信息”行为，要求打开网页时弹出信息“请查看书籍分类!”。
素材所在位置：……\素材\课堂案例\案例素材\No3\book\……
效果所在位置：……\素材\课堂案例\案例效果\No3\book\……
步骤：
1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“type.html”文件。
2)单击文档窗口下方状态栏中的“<body>”标签，打开“行为”面板，单击“添加行为”按钮
，在弹出的列表中选择“弹出信息”命令，如图3-56所示。
图3-56 选择“弹出信息”命令
3)打开“弹出信息”对话框，在“消息”编辑框中输入“请查看书籍分类!”，然后单击“确定”按钮，如图3-57所示。
4)在“事件”下拉列表中选择“onLoad”，如图3-57所示。
图3-57 添加信息及设置事件
5)保存文件并预览。打开网页“type.html”后会弹出消息框，其显示内容为“请查看书籍分类!”，如图3-58所示。
图3-58 预览效果
4．交换图像与恢复交换图像
交换图像是指通过改变img标签的src属性将一幅图像变换为另一幅图像。恢复交换图像是指将交换图像还原为初始图像。
例3-9 在网站“book”中为文件“new.html”添加“交换图像”与“恢复交换图像”行为，要求鼠标指针移至相应图像上方时，图像变为另一张图像；鼠标指针离开图像时，图像恢复为原始图像。
素材所在位置：……\素材\课堂案例\案例素材\No3\book\……
效果所在位置：……\素材\课堂案例\案例效果\No3\book\……
步骤：
1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“new.html”文件。
2)在网页中的“NO.3”上方单元格内插入图像“b10.jpg”，并选中该图像，打开“行为”面板，单击“添加行为”按钮
，在弹出的列表中选择“交换图像”命令，如图3-59所示。
图3-59 选择“交换图像”命令
3)打开“交换图像”对话框，单击“设定原始档为”文本框右侧的“浏览”按钮，在打开的“选择图像源文件”对话框中选择图像“b10a.jpg”，选中“预先载入图像”和“鼠标滑开时恢复图像”复选框，然后单击“确定”按钮，如图3-60所示。
图3-60 设置原始档
提示：
“预先载入图像”是指图像预先下载到浏览器缓存中，当图像需要显示时能快速显示。若本步中没有选中“鼠标滑开时恢复图像”复选框，那么在“交换图像”行为设置完成后，需在“行为”面板中添加“恢复交换图像”动作并设置事件来达到预期效果。
4)在“事件”下拉列表中，“交换图像”选择“onMouse Over”，“恢复交换图像”选择“onMouseOut”，如图3-61所示。
图3-61 设置事件
5)保存文件并预览效果。
3.5.3 编辑行为
1．修改行为
行为创建后，若要对其进行修改，可在“行为”面板完成。
修改行为，首先要选定应用了行为的对象，然后在“行为”面板中双击相应的动作名称（或在行为上单击鼠标右键，选择“编辑行为”命令），在打开的对话框中进行修改；若修改事件，则直接在“事件”下拉列表中选择所需事件即可。
提示：
当“行为”面板中有多个行为时，若要更改行为的顺序，可先选定该行为，然后单击面板上方的
或
按钮进行上移或下移。
2．删除行为
若创建的行为不需要了，则可将其删除。删除行为的方法有以下几种。
选中行为，单击“行为”面板上的“删除行为”按钮
。
选中行为，按〈Delete〉键。
在行为上单击鼠标右键，在弹出的快捷菜单中选“删除行为”命令。