第10章使用行为制作网页特效摘要.ppt

第10章 使用行为制作网页特效 《网页设计与制作案例教程》（第2版） 《网页设计与制作案例教程》（第2版） Dreamweaver行为是一段Javascript代码，当某个事件触发它时，将执行一个动作，如打开浏览器窗口或显示页面元素。使用Dreamweaver内置的行为，不需要编写代码，就可以实现复杂的网页特效。 本章学习内容 10.1 学习任务：认识行为 10.2 案例1 制作网页加载时弹出公告页 10.3 案例2利用JavaScript实现加载网页时弹出消息框 10.4 案例3 使用行为设置图像特效 10.5 案例4 使用行为设置文本 10.6 案例5 使用行为设置跳转菜单效果 10.7 案例6 制作网页拼图游戏 10.1 学习任务：认识行为 行为是Dreamweaver CS5中一个非常强大的工具。使用行为，编程人员不用编写Javascript代码便可实现多种动态网页特效。Dreamweaver CS5提供了很多行为，这些行为放在其内部行为库中。 ?本节学习任务 认识行为，了解行为的相关概念以及属性、事件、方法的含义；掌握行为面板的基本操作。 10.1.1 行为概述 行为是对象为响应某一事件而采取的动作，它由对象、事件和动作组成。 对象是产生行为的主体。很多网页元素都可以成为对象，如图片、文字、多媒体文件等。此外，网页本身有时也可作为对象。 10.1.1 行为概述 事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。 动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver CS5中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户完全不必自己编写。 10.1.2 “标签检查器”面板 在Dreamweaver CS5中，对行为的添加和管理主要通过”标签检查器”面板完成，在菜单栏中选择“窗口→行为”命令或按Shift+F4组合键，可以打开”标签检查器”面板，如图10-1所示。 10.1.3 事件 用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有看不见的事件（如Ajax的交互进度改变）。绝大部分事都由用户的动作所引发，如：用户单击鼠标触发onClick事件，若鼠标移动到目标时，触发onMouseOver事件等等。在Javascript中，事件往往与事件处理程序配套使用。 每个浏览器都提供一组事件，这些事件可以与”标签检查器”面板的“动作”(+) 弹出菜单中列出的动作相关联。当网页的访问者与页面进行交互时（例如，单击某个图像），浏览器会生成事件；这些事件可用于调用执行动作的 JavaScript 函数。Dreamweaver 提供多个可通过这些事件触发的常用动作。 10.1.4 Dreamweaver CS5的标准行为 针对Internet Explorer4.0或更高版本浏览器。在“标签检查器”面板中，单击【添加行为】按钮 ，可以展开行为菜单，如图10-2所示。 10.2 案例1 制作网页加载时弹出公告页 ?学习目标 使用Dreamwear的“打开浏览器窗口”行为制作网页加载时弹出公告页。 ? 知识要点 创建行为的步骤，“打开浏览器窗口”行为。当加载网页时，弹出公告页，如图10-3所示。 ? 案例小结 在Dreamweaver CS5中，内置了丰富的行为。行为的设置是通过”标签检查器”面板完成的。添加行为的步骤为： 创建或选择要触发行为的页面元素； 选择要应用的行为，并设置其参数； 指定触发该行为的事件。 通过学习设置“打开浏览器窗口”行为的具体步骤，掌握了在Dreamweaver中添加行为的方法。 10.3 案例2 利用JavaScript实现加载网页时弹出消息框 ?学习目标 为网页调用JavaScript，当加载网页时，弹出对话框，提示用户当前正访问的网站。 ? 知识要点 了解JavaScript基本概念、在网页中引用JavaScript脚本的两种方法，掌握通过“标签检查器”面板调用JavaScript脚本的步骤。 在浏览器中打开网页时，弹出消息框，由浏览者单击【确定】后继续浏览网站。效果如图10-7所示。 请在Dre