第十章 使用行为制作网页特效解析.pptVIP

第十章 使用行为制作网页特效 第十章　使用行为制作网页特效 本章学习要点： 行为的基本概念 Dreamweaver中的内置行为 使用行为创建网页特效 10.1 学习任务：认识行为 10.1.1 行为概述 行为是对象为响应某一事件而采取的动作，它由对象、事件和动作组成。 对象是产生行为的主体。很多网页元素都可以成为对象，如图片、文字、多媒体文件等。此外，网页本身有时也可作为对象。 事件是触发动作效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或标签而言的。 动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver CS3中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自己编写。 10.1.2 行为面板 在Dreamweaver CS3中，对行为的添加和管理主要通过“行为”面板完成。在菜单栏中选择“窗口→行为”命令或按〈Shift+F4〉组合键，可以展开“行为”面板。 在“行为”面板中，右侧显示动作，左侧显示行为对应的事件类型。面板中各选项作用如下： 显示设置事件：显示添加到当前文档的事件。 显示全部事件：显示所有事件。 添加行为：单击该按钮，从弹出菜单中选择需要添加的行为类别。 删除事件：从行为列表中删除选中的行为。 增加事件值：将当前选定的行为向前移动。 降低事件值：将当前选定的行为向后移动。 10.1.3 事件 用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有看不见的事件（如Ajax的交互进度改变）。绝大部分事件都由用户动作引发，如：用户单击鼠标就触发onClick事件，鼠标移动到目标对象时，就触发onMouseOver事件等等。 常用的Javascript事件 常用的Javascript事件 常用的Javascript事件 常用的Javascript事件 常用的Javascript事件 常用的Javascript事件 10.1.4 Dreamweaver CS3的行为 Dreamweaver CS3内置了一些标准行为以满足用户需求，它们主要是针对Internet Explorer4.0或更高版本浏览器。在“行为”面板中，单击“添加行为”按钮，可以展开行为菜单，如右图所示，菜单项对应了Dreamweaver内置的各种行为。 10.2 案例1 制作网页加载时弹出公告页 〖学习目标〗在Dreamweaver CS3中，利用行为面板制作网页加载时弹出公告页。 〖知识要点〗创建行为；添加行为的基本方法。当加载网页时，弹出公告页，效果如图示。 10.3 案例2 利用JavaScript实现关闭网页 〖学习目标〗为网页文档调用Javascript，当在浏览器中打开该网页时，弹出消息框，提示是否关闭当前浏览器窗口。 〖知识要点〗Javascript脚本语言；通过“行为”面板调用Javascript。在浏览器中打开网页时，弹出消息框，由浏览者决定是否继续关闭浏览器窗口。效果如图所示。 Javascript在网页中有两种引用方法 Javascript在网页中有两种引用方法，一种是直接将Javascript脚本语言嵌入到网页中，另一种是引用外部文件的方式。 1．直接嵌入HTML文档 html head title一个简单的JavaScript/title /head body 　　 script type=text/javascript !-- 　　 document.write(hello world!); -- /script Javascript…… /body /html 2．引用方式 如果已经存在一个Javascript源文件（以js为扩展名），则可以采用引用的方式，以提高程序代码的利用率。其基本格式如下： 　　script src＝url type=text/javascript/script 其中的url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”列举的例子效果，需要先创建一个Javascript源代码文件“script.js”，其内容如下： document.writeln(hello world!); 在网页中可以这样调用程序：script src＝script.js type=text/javascript/script 。 10.3.2利用JavaScript实现关闭网页 “调用JavaScript”行为在事件发生时执行自定义函数或JavaScript代码行。可以自己编写JavaScript，也可以使用Web上各种免费的