第11章应用行为创建网页特效.ppt

第11章 应用行为创建网页特效 本章导读： 使用客户端行为，可以使网页具有一些动感效果。 Dreamweaver CS3的插入客户端行为的实质上是Dreamweaver CS3自动给网页添加一些JavaScript代码，这些代码能实现动感网页的效果。 教学目标： 　　　掌握在网页中创建和使用行为的方法，掌握利用行为制作动感网页。 重点和难点： 1、行为相关的基础知识 2、创建和使用行为的方法 3、利用行为制作动感网页（难点） 11.1 行为基础 行为的功能：以多种方式变化网页从而实现网页的动感效果或引起某些任务的执行。 行为的三要素：对象、事件、动作（在A对象上发生B事件时执行C动作）。 11.1.1 事件和动作 1、事件 （1）定义：事件是计算机可以识别的发生在对象上的事情。 （2）类型：访问者在浏览器上执行的一种操作。例如，onMouseOver（鼠标经过）事件，onClick（单击）事件；没有用户交互的事件，例如onLoad（加载事件）。 （3）注意事项：不同的页面元素具有不同的事件，可以通过“行为面板”进行查看。不同的浏览器具有不同的事件。 2、动作 （1）含义：动作是预先编写的一段JavaScript代码，这些代码执行特定的任务。 （2）类型 Dreamweaver CS3自身提供的一些动作，可以在“行为”面板中设置。由Dreamweaver工程师精心编写的，提供了最大的跨浏览器兼容性。 自己编写的JavaScript代码 （3）事件可以与动作相关联。 11.1.2 　【行为】面板 1、打开【行为】面板 　　　在菜单中选择【窗口】|【行为】命令，或直接使用快捷组合键Shift+F4打开 2、 【行为】面板基本操作 3、“添加行为”菜单中各项的含义 （1）交换图像：改变页面中图像的图像源。 　注：页面中必须有图像； 　　　可以给非图像元素添加此行为； 　　　有些元素的行为中不包含恢复功能（例如普通文字）。 （2）弹出信息：弹出一个信息对话框。 （3）恢复交换图像：可以和（1）配合使用。 （4）打开浏览器窗口：在新窗口中打开指定的URL。 （5）拖动AP元素：实现让访问者拖动AP元素，用于实现拼板游戏等功能。 （6）改变属性：动态地改变元素的属性值。 （7）效果：设置元素的增大/收缩（变大变小）、挤压（消失）、显示/隐藏（透明度的改变）、左右晃动、具有ID的容器中的元素上下滑动和遮帘、高亮度色（改变背景色）等效果。 （8）时间轴（前面讲过） （9）显示/隐藏元素：显示/隐藏一个或多个具有ID的元素。 （10）检查插件：检查用户的机器上是否安装某插件，根据检查结果转到不同的页面。 （11）检查表单：表单验证功能。 （12）设置导航栏图像：将图像设置为导航图像或更改导航图像。 （13）设置文本：设置容器中的HTML代码或修改文本域或状态栏中的文字。 （14）调用JavaScript：调用JavaScript程序段或函数。 （15）跳转菜单：使普通菜单具有跳转功能或编辑跳转菜单。（须选中菜单） （16）跳转菜单开始：根据跳转菜单中的选项，让其跳转。 （17）转到URL：在当前浏览器窗口或指定的框架中载入指定的页面。 （18）预先载入图像 （19）建议不再使用 插入声音：只插入声音，不显示。 控制shockwave或flash（控制其播放、停止、前进、后退） 检查浏览器：检查客户机上的浏览器的种类，可以根据不同的各类转到不同的页面。 显示弹出式菜单：使用spry菜单代替 隐藏弹出式菜单：使用spry菜单代替 11.2　 使用行为 复习：行为的三要素： 　　　对象、事件、动作 　　　（在A对象上发生B事件时执行C动作）。 添加行为的三个步骤： 选择对象A 添加动作C 调整事件B 11.2.1 　弹出信息 使用此动作可以提供信息，而不能为浏览者提供选择。 举例：当光标移向某对象时，显示其说明信息。 11.2.3 　播放声音 播放声音行为动作，用来在网页中播放选定的声音文件，也可以是视频文件，但不显示画面。 举例：“放松一下”按钮，播放音乐。 10.2.5 显示隐藏元素 举例：实现图片在当前页面中的自由缩放。 实质：AP元素的显示和隐藏。 apDiv1中放小图片， apDiv2中放大图片（隐藏）。 给层apDiv1添加一个【显示-隐藏元素】的行为，设置apDiv2的状态为“显示”，事件改为“onMouseOver”。 给apDiv2添加一个隐藏apDiv2的行为，而鼠标事件变成onMouseOut，使鼠标移出apDiv2的时候隐藏apDiv2而显示apDiv1。 * * 图11-1 【行为】面板 11.2.2 打开浏览器窗口 使用此动作可以在新窗口中打开指定的URL ，经常用于弹出广告页。 举例：