使用行为创建特效网页.ppt

第7章使用行为创建特效网页,教学内容：行为是Dreamweaver内置的JavaScript程序库。在页面中使用行为可以让不懂得编程的人也能将JavaScript程序添加到页面中，从而制作出具有动态效果与交互效果的网页。如果运用得当，一定能使网页增色不少。本章主要讲述行为概述、使用Dreamweaver内置行为等 。,学习目标 熟悉行为的基本知识 掌握Dreamweaver内置行为的使用,教学目标和基本要求 _ _ _ 教学时间：本章共分_课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample第7章 练习文件：exercise第7章,7.1 行为概述,行为是事件和由该事件触发的动作的组合。在【行为】面板中可以先指定一个动作，然后指定触发该动作的事件，从而将行为添加到页面中 。,7.1.1 【行为】面板 【行为】面板的作用是为网页元素添加动作和事件，使网页具有互动的效果。在介绍【行为】面板前先了解一下3个词语：事件、动作和行为 。,7.1.2 认识事件 事件是访问者在浏览器上指定的一种操作。如当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个onMouseOver事件，然后浏览器查看是否存在相应的JavaScript代码。不同的页面元素定义了不同的事件，如在大多数浏览器中，onMouseOver和onClick是与链接关联的事件，而onLoad是与图像和文档body部分关联的事件 。,7.1.3 动作类型 动作是由预先编写的JavaScript代码组成的，这些代码指定特定的任务，如打开浏览器窗口、播放声音、控制Shockwave或Flash、设置状态栏文本和预先载入图像等 。,7.1.4 添加行为 在Dreamweaver中，可以为整个页面、表格、链接、图像、表单或其他任何HTML元素增加行为，最后由浏览器决定是否执行这些行为 。,7.2 小案例制作指定大小的弹出窗口,使用【打开浏览器窗口】动作可以在一个新的窗口中打开网页，并且可以指定新窗口的属性、特征和名称。,7.3 调用JavaScript 【调用JavaScript】动作允许使用【行为】面板指定当发生某个事件时应该执行的自定义函数或JavaScript代码行。可以使用自己编写的JavaScript代码或使用网络上免费的JavaScript代码。使用此动作可以创建更加丰富的互动特效网页 。,7.3.1小案例利用JavaScript实现打印功能 调用JavaScript打印当前页面，制作时先定义一个打印当前页函数printPage()，然后在中添加代码“OnLoad=“printPage()“”，当打开网页时调用打印当前页函数printPage()。利用JavaScript函数实现打印功能 。,7.3.2小案例利用JavaScript实现关闭网页 下面是利用【调用JavaScript】动作制作的自动关闭网页的效果 。,7.4 设置浏览器环境 使用【检查表单】动作和【检查插件】动作可以设置浏览器环境，下面就讲述这两个动作的使用 。,7.4.1小案例检查表单 【检查表单】动作用于检查指定的文本域内容，以确保用户输入了正确的数据类型，防止表单提交到服务器后，存在任何指定的文本域包含无效的数据的情况 。,7.4.2 检查插件 【检查插件】动作用来检查访问者的计算机中是否安装了特定的插件，从而决定是否将访问者带到不同的页面 。,7.5 小案例显示/隐藏元素 【显示-隐藏元素】动作，顾名思义就是改变一个或多个AP元素的可见性状态。【显示-隐藏元素】动作显示、隐藏或恢复一个或多个AP元素的默认可见性。此动作用于在用户与网页进行交互时显示信息。,7.6 设置图像动作 浏览网页时，经常碰到网页上插入大量图片的情况，使用【预先载入图像】动作和【交换图像】动作可以设置网页特效 。,7.6.1 小案例交换图像 【交换图像】就是当鼠标指针经过图像时，原图像会变成另外一幅图像。一个交换图像其实是由两幅图像组成的：原始图像（当页面显示时候的图像）和交换图像（当鼠标经过原始图像时显示的图像）。组成图像交换的两幅图像必须有相同的尺寸，如果两幅图像的尺寸不同，Dreamweaver会自动将第二幅图像尺寸调整成第一幅同样大小。,7.6.2 小案例预先载入图像 【预先载入图像】动作将不会立即出现在网页上的图像载入浏览器缓存中，这样可以防止当该图像出现时由于下载导致的延迟。,7.6.3 恢复交换图像 利用【恢复交换图像】动作，可以将所有被替换显示的图像恢复为原始图像，一般说来，在设置【交换图像】动作时会自动添加交换图像恢复动作，这样当鼠标离开对象时会自动恢复原始图像 。,7.7 设置文本 【设置文本】行为中包含了4项针对不同类型的动作，分别为【设置状态栏文本】、【设置文本域文字】、【设置框架文本】和 【设置容器中文本】 。,7.7.1 小案例设置状态栏文本 【设置状态栏文本】动作用于在浏览器窗口底部左侧的状态栏中显示消息 。,7.7.2 小案例设置容器中的文本 使用【设置容器中的文本】动作可以将指定的内容替换网页上现有AP元素中的内容和格式设置 。,7.8设置特殊效果,要向某个元素应用效果，则该元素当前必须处于选定状态，或它必须具有一个ID。例如，如果要向当前未选定的Div标签应用高亮显示效果，则该Div必须具有一个有效的ID值。如果该元素还没有有效的ID值，将需要在HTML代码中添加一个ID值 。,7.8.1 小案例增大/收缩效果 设置增大/收缩效果的效果 。,7.8.2 小案例挤压效果 设置挤压效果的效果 。,7.8.3 小案例晃动效果 设置晃动效果的效果 。,7.9 小案例转到URL 【转到URL】动作在当前窗口或指定的框架中打开一个新页面 。,本 章 小 结,有许多优秀的网页，它们不只包含文本和图像，还有许多其他交互式的效果，例如当鼠标移动到某个图像或按钮上，特定位置便会显示出相关信息，又或者一个网页打开的同时，响起了优美的背景音乐等