网页设计与制作 第19章 行为.ppt
《网页设计与制作 第19章 行为.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作 第19章 行为.ppt(33页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第第1919章章 行为行为第第1919章章 行为行为 行为是将行为是将行为是将行为是将 Java Script Java Script 代码代码代码代码放置在文档中以允放置在文档中以允放置在文档中以允放置在文档中以允许访问者与许访问者与许访问者与许访问者与 Web Web 页进行交互。用户页进行交互。用户页进行交互。用户页进行交互。用户只需用鼠标点击进只需用鼠标点击进只需用鼠标点击进只需用鼠标点击进行简单的设定就可行简单的设定就可行简单的设定就可行简单的设定就可以实现复杂的动态以实现复杂的动态以实现复杂的动态以实现复杂的动态网页的效果。网页的效果。网页的效果。网页的效果。v19.1 19.1
2、19.1 19.1 行为概述行为概述行为概述行为概述v19.2 19.2 19.2 19.2 使用使用使用使用DreamweaverDreamweaverDreamweaverDreamweaver 8 8 8 8自带行为自带行为自带行为自带行为v19.3 19.3 19.3 19.3 本章小结本章小结本章小结本章小结19.1 19.1 行为概述行为概述19.1.1 19.1.1 19.1.1 19.1.1 行为介绍行为介绍行为介绍行为介绍 行为行为行为行为是事件和由该事件触发的动作的组合。其中:是事件和由该事件触发的动作的组合。其中:是事件和由该事件触发的动作的组合。其中:是事件和由该事件触
3、发的动作的组合。其中:动作动作动作动作是由预先编写的是由预先编写的是由预先编写的是由预先编写的 JavaScript JavaScript 代码组成的,这些代码组成的,这些代码组成的,这些代码组成的,这些代码执行特定的任务,例如打开浏览器窗口、显示或隐代码执行特定的任务,例如打开浏览器窗口、显示或隐代码执行特定的任务,例如打开浏览器窗口、显示或隐代码执行特定的任务,例如打开浏览器窗口、显示或隐藏层、播放声音或停止藏层、播放声音或停止藏层、播放声音或停止藏层、播放声音或停止 Shockwave Shockwave 影片等等。影片等等。影片等等。影片等等。事件事件事件事件是浏览器生成的消息,指示页
4、面的访问者执行是浏览器生成的消息,指示页面的访问者执行是浏览器生成的消息,指示页面的访问者执行是浏览器生成的消息,指示页面的访问者执行了某种操作。例如,当访问者将鼠标指针移动到某个链了某种操作。例如,当访问者将鼠标指针移动到某个链了某种操作。例如,当访问者将鼠标指针移动到某个链了某种操作。例如,当访问者将鼠标指针移动到某个链接上时,浏览器为该链接生成一个接上时,浏览器为该链接生成一个接上时,浏览器为该链接生成一个接上时,浏览器为该链接生成一个 onMouseOver onMouseOver 事件,事件,事件,事件,然后浏览器查看是否存在应该调用的然后浏览器查看是否存在应该调用的然后浏览器查看是
5、否存在应该调用的然后浏览器查看是否存在应该调用的 JavaScript JavaScript 代码。代码。代码。代码。系统为不同的页面元素定义不同的事件。将一个动系统为不同的页面元素定义不同的事件。将一个动系统为不同的页面元素定义不同的事件。将一个动系统为不同的页面元素定义不同的事件。将一个动作和一个事件结合在一起就完成了一个行为的过程。例作和一个事件结合在一起就完成了一个行为的过程。例作和一个事件结合在一起就完成了一个行为的过程。例作和一个事件结合在一起就完成了一个行为的过程。例如我们在网页的载入事件中响应一个弹出对话框的动作,如我们在网页的载入事件中响应一个弹出对话框的动作,如我们在网页的
6、载入事件中响应一个弹出对话框的动作,如我们在网页的载入事件中响应一个弹出对话框的动作,其对应的事件为其对应的事件为其对应的事件为其对应的事件为OnloadOnload,对应的动作为对应的动作为对应的动作为对应的动作为“弹出信息弹出信息弹出信息弹出信息”,经过简单的设定就可以完成需要的功能。如图所示经过简单的设定就可以完成需要的功能。如图所示经过简单的设定就可以完成需要的功能。如图所示经过简单的设定就可以完成需要的功能。如图所示。19.1 19.1 行为概述行为概述19.1.2 19.1.2 19.1.2 19.1.2 认识事件认识事件认识事件认识事件 每个浏览器都提供一组事件,这些事件可以与每
7、个浏览器都提供一组事件,这些事件可以与每个浏览器都提供一组事件,这些事件可以与每个浏览器都提供一组事件,这些事件可以与“行为行为行为行为”面板的面板的面板的面板的“+”“+”按钮中按钮中按钮中按钮中弹出的行为相关联。弹出的行为相关联。弹出的行为相关联。弹出的行为相关联。大多数事件只能用于特定的页面元素。若要查大多数事件只能用于特定的页面元素。若要查大多数事件只能用于特定的页面元素。若要查大多数事件只能用于特定的页面元素。若要查明对于给定的页面元素给定的浏览器支持哪些事件,明对于给定的页面元素给定的浏览器支持哪些事件,明对于给定的页面元素给定的浏览器支持哪些事件,明对于给定的页面元素给定的浏览器
8、支持哪些事件,可在文档中插入该元素并向其附加一个行为,然后单可在文档中插入该元素并向其附加一个行为,然后单可在文档中插入该元素并向其附加一个行为,然后单可在文档中插入该元素并向其附加一个行为,然后单击击击击“行为行为行为行为”面板中事件右侧的按钮面板中事件右侧的按钮面板中事件右侧的按钮面板中事件右侧的按钮,查看事件,查看事件,查看事件,查看事件弹出式弹出式弹出式弹出式菜单。菜单。菜单。菜单。IE4.0IE4.0以上的浏览器支持的部分主要事件以上的浏览器支持的部分主要事件以上的浏览器支持的部分主要事件以上的浏览器支持的部分主要事件可见可见可见可见书中表书中表书中表书中表19-119-1。19.1
9、 19.1 行为概述行为概述19.1.3 19.1.3 19.1.3 19.1.3 行为面板行为面板行为面板行为面板 “行为行为行为行为”面板如图所示:面板如图所示:面板如图所示:面板如图所示:添加行为按钮:添加行为按钮:添加行为按钮:添加行为按钮:单击此按钮将单击此按钮将单击此按钮将单击此按钮将弹出可以显示行为的菜单,当弹出可以显示行为的菜单,当弹出可以显示行为的菜单,当弹出可以显示行为的菜单,当选择了其中一个行为后会弹出选择了其中一个行为后会弹出选择了其中一个行为后会弹出选择了其中一个行为后会弹出响应的设置对话框。响应的设置对话框。响应的设置对话框。响应的设置对话框。19.1 19.1 行
10、为概述行为概述删除行为按钮:删除行为按钮:删除行为按钮:删除行为按钮:单击此按钮将删除当前选中的行为。单击此按钮将删除当前选中的行为。单击此按钮将删除当前选中的行为。单击此按钮将删除当前选中的行为。事件更改按钮:事件更改按钮:事件更改按钮:事件更改按钮:单击此按钮将弹出事件菜单,从中进行选单击此按钮将弹出事件菜单,从中进行选单击此按钮将弹出事件菜单,从中进行选单击此按钮将弹出事件菜单,从中进行选择以更换触发动作的事件类型。如果菜单中未列出所需的择以更换触发动作的事件类型。如果菜单中未列出所需的择以更换触发动作的事件类型。如果菜单中未列出所需的择以更换触发动作的事件类型。如果菜单中未列出所需的事
11、件,可在事件,可在事件,可在事件,可在“显示事件显示事件显示事件显示事件”弹出的子菜单中更改目标浏览器。弹出的子菜单中更改目标浏览器。弹出的子菜单中更改目标浏览器。弹出的子菜单中更改目标浏览器。19.1.4 19.1.4 19.1.4 19.1.4 添加行为添加行为添加行为添加行为(1 1)选中一个网页中的对象。)选中一个网页中的对象。)选中一个网页中的对象。)选中一个网页中的对象。(2 2)单击添加行为按钮,在弹出的菜单)单击添加行为按钮,在弹出的菜单)单击添加行为按钮,在弹出的菜单)单击添加行为按钮,在弹出的菜单中选中你希望添加的行为。中选中你希望添加的行为。中选中你希望添加的行为。中选中
12、你希望添加的行为。(3 3)单击所选行为,在弹出的对话框中单击所选行为,在弹出的对话框中单击所选行为,在弹出的对话框中单击所选行为,在弹出的对话框中进行设置。进行设置。进行设置。进行设置。(4 4)在行为面板中,单击事件更改按钮,)在行为面板中,单击事件更改按钮,)在行为面板中,单击事件更改按钮,)在行为面板中,单击事件更改按钮,在弹出的下拉菜单中选择你需要的触发在弹出的下拉菜单中选择你需要的触发在弹出的下拉菜单中选择你需要的触发在弹出的下拉菜单中选择你需要的触发事件类型。事件类型。事件类型。事件类型。19.1 19.1 行为概述行为概述19.1.5 19.1.5 19.1.5 19.1.5
13、编辑管理行为编辑管理行为编辑管理行为编辑管理行为“行为行为行为行为”面板的约定:面板的约定:面板的约定:面板的约定:()行为面板中有多个行为时,则按事件的字母顺序()行为面板中有多个行为时,则按事件的字母顺序()行为面板中有多个行为时,则按事件的字母顺序()行为面板中有多个行为时,则按事件的字母顺序显示在面板上。显示在面板上。显示在面板上。显示在面板上。()同一个事件可以有多个动作,对于同一个事件的()同一个事件可以有多个动作,对于同一个事件的()同一个事件可以有多个动作,对于同一个事件的()同一个事件可以有多个动作,对于同一个事件的多个动作,行为面板中的显示顺序就是多个动作的执行多个动作,行
14、为面板中的显示顺序就是多个动作的执行多个动作,行为面板中的显示顺序就是多个动作的执行多个动作,行为面板中的显示顺序就是多个动作的执行顺序。顺序。顺序。顺序。()要想调整动作的执行顺序,可以利用行为面板的()要想调整动作的执行顺序,可以利用行为面板的()要想调整动作的执行顺序,可以利用行为面板的()要想调整动作的执行顺序,可以利用行为面板的按钮按钮按钮按钮 和和和和 来调整,以实现所需要的效果。来调整,以实现所需要的效果。来调整,以实现所需要的效果。来调整,以实现所需要的效果。19.1 19.1 行为概述行为概述19.2.1 19.2.1 19.2.1 19.2.1 交换图像交换图像交换图像交换
15、图像 使用使用使用使用“交换图像交换图像交换图像交换图像”行为,可以改变行为,可以改变行为,可以改变行为,可以改变 标签的标签的标签的标签的srcsrc属性,即用另一张图像替代当前的图像。对话框如图属性,即用另一张图像替代当前的图像。对话框如图属性,即用另一张图像替代当前的图像。对话框如图属性,即用另一张图像替代当前的图像。对话框如图所示。所示。所示。所示。预先载入图像:选中它可以预先载入图像:选中它可以预先载入图像:选中它可以预先载入图像:选中它可以防止当图像由于下载而防止当图像由于下载而防止当图像由于下载而防止当图像由于下载而导致延迟。导致延迟。导致延迟。导致延迟。19.2 19.2 使用
16、自带的行为使用自带的行为19.2.2 19.2.2 19.2.2 19.2.2 弹出信息弹出信息弹出信息弹出信息 使用使用使用使用“弹出信息弹出信息弹出信息弹出信息”行为,可以行为,可以行为,可以行为,可以显示一个带有用户指显示一个带有用户指显示一个带有用户指显示一个带有用户指定消息的定消息的定消息的定消息的 JavaScript JavaScript 警告。因为警告。因为警告。因为警告。因为 JavaScript JavaScript 警告只有警告只有警告只有警告只有一个按钮(一个按钮(一个按钮(一个按钮(“确定确定确定确定”),所以使用此动作可以提供信息,),所以使用此动作可以提供信息,)
17、,所以使用此动作可以提供信息,),所以使用此动作可以提供信息,而不能为用户提供选择。而不能为用户提供选择。而不能为用户提供选择。而不能为用户提供选择。对话框如图所示。对话框如图所示。对话框如图所示。对话框如图所示。19.2 19.2 使用自带的行为使用自带的行为19.2.3 19.2.3 19.2.3 19.2.3 打开浏览器窗口打开浏览器窗口打开浏览器窗口打开浏览器窗口 使用使用使用使用“打开浏览器窗口打开浏览器窗口打开浏览器窗口打开浏览器窗口”行为,可以实现当用户在行为,可以实现当用户在行为,可以实现当用户在行为,可以实现当用户在触发所定义的事件时打开一个新的浏览器窗口,在新的触发所定义的
18、事件时打开一个新的浏览器窗口,在新的触发所定义的事件时打开一个新的浏览器窗口,在新的触发所定义的事件时打开一个新的浏览器窗口,在新的窗口中可以载入指定窗口中可以载入指定窗口中可以载入指定窗口中可以载入指定URLURL地址上的网页。对话框如图所地址上的网页。对话框如图所地址上的网页。对话框如图所地址上的网页。对话框如图所示。示。示。示。19.2 19.2 使用自带的行为使用自带的行为注意:注意:注意:注意:如果没有指定窗口的属性,则窗口将按启动窗如果没有指定窗口的属性,则窗口将按启动窗如果没有指定窗口的属性,则窗口将按启动窗如果没有指定窗口的属性,则窗口将按启动窗口的属性和大小打开,一旦指定了窗
19、口的任何属性,口的属性和大小打开,一旦指定了窗口的任何属性,口的属性和大小打开,一旦指定了窗口的任何属性,口的属性和大小打开,一旦指定了窗口的任何属性,都将自动关闭其他属性。都将自动关闭其他属性。都将自动关闭其他属性。都将自动关闭其他属性。19.2.4 19.2.4 19.2.4 19.2.4 拖动图层拖动图层拖动图层拖动图层 使用使用使用使用“拖动层拖动层拖动层拖动层”行为,行为,行为,行为,可以实现访问者在页面上拖可以实现访问者在页面上拖可以实现访问者在页面上拖可以实现访问者在页面上拖动图层。一般是使用动图层。一般是使用动图层。一般是使用动图层。一般是使用 onLoad onLoad 事件
20、将事件将事件将事件将“拖动层拖动层拖动层拖动层”附加到附加到附加到附加到 对象上。对话框如图所示。对象上。对话框如图所示。对象上。对话框如图所示。对象上。对话框如图所示。v“限制限制限制限制”选项后的上、下、左、右文本框中可输入以选项后的上、下、左、右文本框中可输入以选项后的上、下、左、右文本框中可输入以选项后的上、下、左、右文本框中可输入以像素为单位的值,这些值是相对于图层的起始位置的值。像素为单位的值,这些值是相对于图层的起始位置的值。像素为单位的值,这些值是相对于图层的起始位置的值。像素为单位的值,这些值是相对于图层的起始位置的值。19.2 19.2 使用自带的行为使用自带的行为v“放下
21、目标放下目标”的左和上文本框中输入以像素为单位的左和上文本框中输入以像素为单位的放置目标的值。的放置目标的值。v“靠齐距离靠齐距离”文本框中输入一个以像素为单位的值,文本框中输入一个以像素为单位的值,指定图层与放置目标的靠近距离。指定图层与放置目标的靠近距离。如果还要定义图层的拖动柄等动作,可以单击如果还要定义图层的拖动柄等动作,可以单击【高级】标签。【高级】标签。19.2 19.2 使用自带的行为使用自带的行为19.2.5 19.2.5 19.2.5 19.2.5 控制控制控制控制ShockwaveShockwaveShockwaveShockwave或或或或FlashFlashFlashF
22、lash 使用使用使用使用“控制控制控制控制 Shockwave Shockwave 或或或或 Flash”Flash”行为,可以控行为,可以控行为,可以控行为,可以控制制制制Macromedia Shockwave Macromedia Shockwave 或或或或 Macromedia Flash Macromedia Flash SWFSWF文件的播放、停止、倒带或转到文件中的帧。对文件的播放、停止、倒带或转到文件中的帧。对文件的播放、停止、倒带或转到文件中的帧。对文件的播放、停止、倒带或转到文件中的帧。对话框如图所示:话框如图所示:话框如图所示:话框如图所示:19.2 19.2 使用自
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 第19章 行为 网页 设计 制作 19
限制150内