项目八使用行为创建网页

1、网页制三合一项目教程行为和事件利用行为调节浏览器任务一任务二项目八 使用行为创建网页行为和事件任务三利用行为显示文本任务四任务五Spry效果的添加一、认识行为和事件二、“行为”面板任务一 行为和事件 所谓行为，就是响应某一事件而采取的一个操作。行为是一系列使用JavaScript程序预定义的页面特效工具，是JavaScript在Dreamweaver中内置的程序库。当把行为赋予页面中某个元素时，也就是定义了一个操作，以及用于触发这个操作的事件。一、认识行为和事件1行为 行为包括两部分内容：一部分是事件，另一部分是动作。 行为是某个事件和由该事件触发的动作的组合，事件用于指明执行某项动作的条件，

2、如鼠标指针移到对象上方、离开对象、单击对象、双击对象等都是事件。 动作是行为的另一个组成部分，它由预先编写的JavaScript代码组成，利用这些代码执行特定的任务，如打开浏览器窗口、弹出信息等。一、认识行为和事件2事件 常用的事件如下： onBlur：当指定的元素停止从用户的交互动作上获得焦点时，触发该事件。 onClick：当用户在网页中单击使用行为的元素，如文本、按钮或图像时，就会触发该事件。 onDblclick：在网页中双击使用行为的特定元素，如文本、按钮或图像时，就会触发该事件。 onError：当浏览器下载页面或图像发生错误时，就会触发该事件。 onFocus：指定元素通过用户的

3、交互动作获得焦点时，就会触发该事件。 onKeydown：当用户在浏览网页时，按下一个键后且尚未释放该键时，就会触发该事件。该事件常与onKeydown与onKeyup事件组合使用。一、认识行为和事件2事件 onKeyup：当用户浏览网页时，按下一个键后又释放该键时，就会触发该事件。 onLoad：当网页或图像完全下载到用户浏览器后，就会触发该事件。 onMouseDown：浏览网页时，单击网页中建立行为的元素且尚未释放鼠标之前，就会触发该事件。 onMousemove：在浏览器中，当用户将鼠标指针在使用行为的元素上移动时，就会触发该事件。 onMouseover：在浏览器中，当用户将鼠标指针

4、指向一个使用行为的元素时，就会触发该事件。 onMouseout：在浏览器中，当用户将鼠标指针从建立行为的元素移出后，就会触发该事件。 onMouseup：在浏览器中，当用户在使用行为的元素上按下鼠标并释放后，就会触发该事件。 onUnload：当用户离开当前网页，如关闭浏览器或跳转到其他网页时，就会触发该事件。二、“行为”面板图8-1 “行为”面板图8-2 显示所有事件 二、“行为”面板图8-3 单击“添加行为”按钮二、“行为”面板图8-4 单击“行为”命令 二、“行为”面板图8-5 选择“弹出信息”选项二、“行为”面板图8-6 输入弹出信息 二、“行为”面板8-7 查看添加行为二、“行为”

5、面板图8-8 选择所需事件 二、“行为”面板图8-9 重新设置弹出信息二、“行为”面板图8-10 单击“删除事件”按钮二、“行为”面板 图8-11 查看删除行为效果任务二 利用行为调节浏览器一、打开浏览器窗口二、创建自动关闭网页三、创建自动关闭网页 使用“行为”面板可以调节浏览器，如实现打开浏览器窗口、调用脚本、转到URL等各种效果。一、打开浏览器窗口图8-12 单击“行为”命令一、打开浏览器窗口 图8-13 选择“打开浏览器窗口”选项一、打开浏览器窗口图8-14 单击“浏览”按钮一、打开浏览器窗口图8-15 选择文件一、打开浏览器窗口 图8-16 确认设置操作一、打开浏览器窗口图8-17 选

6、择事件一、打开浏览器窗口 图8-18 预览效果 一、打开浏览器窗口 图8-19 查看动作效果二、创建自动关闭网页图8-20 单击标签二、创建自动关闭网页图8-21 选择“调用JavaScript”选项二、创建自动关闭网页图8-22 输入代码二、创建自动关闭网页 图8-23 预览效果三、创建自动关闭网页图8-24 选择“转到URL”选项 三、创建自动关闭网页图8-25 单击“浏览”按钮三、创建自动关闭网页 图8-26 选择文件三、创建自动关闭网页图8-27 查看已添加的文件三、创建自动关闭网页图8-28 查看添加的行为三、创建自动关闭网页图8-29 查看跳转效果任务三 行为和事件一、交换图像与恢

7、复交换图像 设计人员利用行为可以使对象产生各种特效，下面将介绍交换图像与恢复交换图像、预载入图像及拖动AP元素等行为的使用方法。一、交换图像与恢复交换图像图8-30 选择“交换图像”选项 一、交换图像与恢复交换图像 图8-31 单击“浏览”按钮一、交换图像与恢复交换图像图8-32 选择图像 一、交换图像与恢复交换图像 图8-33 单击“确定”按钮一、交换图像与恢复交换图像 图8-34 查看添加的行为 一、交换图像与恢复交换图像图8-35 预览效果任务四 利用行为显示文本二、设置状态栏文本一、弹出信息三、设置文本域文字 利用行为可以设置弹出信息、设置状态栏、设置容器的文本、设置文本域文本，以及设

8、置框架文本等。一、弹出信息 图8-36 单击标签 一、弹出信息图8-37 选择“弹出信息”选项一、弹出信息图8-38 输入消息内容一、弹出信图8-39 预览效果二、设置状态栏文本图8-40 单击标签二、设置状态栏文本图8-41 选择“设置状态栏文本”选项二、设置状态栏文本图8-42 “设置状态栏文本”对话框二、设置状态栏文本图8-43 预览效果三、设置文本域文字图8-44 选择“设置文本域文字”选项三、设置文本域文字图8-45 “设置文本域文字”对话框三、设置文本域文字图8-46 选择onMouseOver选项三、设置文本域文字图8-47 预览效果任务五 Spry效果的添加二、设置状态栏文本二

9、、设置状态栏文本二、设置状态栏文本 Spry效果是视觉增强功能，可以将它们应用于使用JavaScript的HTML页面上几乎所有的元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视方式修改页面元素。可以将效果直接应用于HTML元素，而无须其他自定义标签。 Spry效果包括增大/收缩、挤压、显示/渐隐、晃动、滑动、遮帘、高亮颜色七种效果，下面将对其中常用的几种进行详细介绍。一、添加增大/收缩效果图8-48 选择“增大/收缩”选项 一、添加增大/收缩效果图8-49 设置增大/收缩参数一、添加增大/收缩效果图8-50 查看创建的行为 一、添加增大/收缩效果图8-51 预览效果二、添加挤压效果图8-52 选择“挤压”选项二、添加挤压效果图8-53 确认挤