网页设计PPT电子课件教案-第5章_使用行为和JavaScript制作特效网页.ppt

第5章 使用行为和javascript制作特效网页,教学内容：行为可以说是dreamweaver中最有特色的功能，它可以让用户不用编写一行javascript代码即可实现多种动态页面效果。dreamweaver cs4中自带的行为多种多样、功能强大。javascript在实际设计网页过程中非常有用，运用它可以设计出一些丰富多彩的网页。,教学重点 熟悉行为的概念 掌握行为中常见的动作和事件 教学难点 掌握dreamweaver内置行为的使用 掌握javascript的使用,教学目标和基本要求 _ _ _ 教学时间：本章共分_课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample第5章 练习文件：exercise第5章,本章各节课时分配及链接,5.1 任务14创建打开浏览器窗口网页（ ）课时 5.2 任务15创建弹出提示信息网页（ ）课时 5.3 任务16使用转到url行为创建跳转页面网页（ ）课时 5.4 任务17在浏览器状态栏显示文本（ ）课时 5.5 任务18使用效果（ ）课时 5.6 任务19 显示当前日期和时间（ ）课时 5.7 综合实训设计动感特效网页（ ）课时 本 章 小 结 思考与练习,5.1 任务14创建打开浏览器窗口网页,行为是用来动态响应用户操作、改变当前页面效果或执行特定任务的一种方法。行为是由对象、事件和动作构成。,5.1.1 简单讲评 当访问者打开一个页面时，有时会自动打开另一个窗口，通常在该窗口中放置一些通知或广告等内容。 利用行为中的“打开浏览器窗口”动作可以轻松的制作出弹出网页特效，同时还可以编辑弹出窗口的大小、名称、状态栏菜单栏等属性。,5.1.2 核心知识 行为是为响应某一具体事件而采取的一个或多个动作，当指定的事件被触发时，将运行相应的javascript程序，执行相应的动作。所以在创建行为时，必须先指定一个动作，然后再指定触发动作的事件。,5.1.3 实际操作 创建弹出窗口效果的具体操作步骤如下。 步骤2 单击文档窗口中的标签，选择“窗口行为”命令，在打开的“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“打开浏览器窗口”命令。,步骤3 在弹出的“打开浏览器窗口”对话框中单击“要显示的url”文本框右边的“浏览”按钮，在弹出的“选择文件”对话框中选择网站根目录下的jianjie.htm文件。,步骤4 单击“确定”按钮，添加到文本框中，将“窗口宽度”设置为500，“窗口高度”设置为400，在“属性”中勾选“需要时使用滚动条”复选框。,步骤5 单击“确定”按钮，添加行为。,5.2 任务15创建弹出提示信息网页,使用“弹出消息”动作可以制作弹出提示信息的网页。 5.2.1 简单讲评 “弹出消息”显示一个带有指定消息的javascript警告，因为javascript警告只有一个按钮，所以使用此动作可以提供信息，而不能为用户提供选择。,5.2.2 核心知识 在“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“弹出信息”命令，在弹出的“弹出信息”对话框中的“消息”文本框输入要提示的文本信息，单击“确定”按钮，即可添加“弹出信息”行为。,5.2.3 实际操作 创建弹出提示信息网页的具体操作步骤如下。 步骤2 在“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“弹出信息”命令。,步骤3 在弹出的“弹出信息”对话框中的“消息”文本框输入“科源种业有限公司欢迎您!” 。,步骤4 单击“确定”按钮，添加行为。,5.3 任务16使用转到url行为创建跳转页面网页,“转到url”动作在当前窗口或指定的框架中打开一个新网页。此操作尤其适用于通过一次单击更改两个或多个框架的内容。,5.3.1 简单讲评 下面制作一个跳转页面网页。,5.3.3 实际操作 创建自动跳转页面效果的具体操作步骤如下。 步骤2 在“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“转到url”命令。,步骤3 在弹出的“转到url”对话框中单击url文本框右边的“浏览”按钮，在弹出的“选择文件”对话框中选择index1.htm。,步骤4 单击“确定”按钮，添加到文本框中。,5.4 任务17在浏览器状态栏显示文本,浏览器窗口的状态栏默认显示链接的目标信息，使用“设置状态栏文本”动作可以改变状态栏中显示的信息。 5.4.1 简单讲评 下面制作设置状态栏文本网页。,5.4.2 核心知识 设置文本行为包括“设置容器的文本”、“设置文本域文字”、“设置框架文本”和“设置状态栏文本”4个选项，可以分别为ap div、文本域、框架和状态栏对象添加文本消息。,在“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“设置文本设置状态栏文本”命令，在弹出的“设置状态栏文本”对话框中的“消息”文本框中输入要显示在浏览器状态中的文字。,5.4.3 实际操作 在浏览器状态栏显示文本的具体操作步骤如下。 步骤1在“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“设置文本设置状态栏文本”命令。,步骤2 在弹出的“设置状态栏文本”对话框中的“消息”文本框中输入“欢迎光临本网站！”,步骤3 单击“确定”按钮，添加行为。,5.5 任务18使用效果,“spry效果”是视觉增强功能，可以将它们应用于使用javascript的html页面上几乎所有的元素。,5.5.1 简单讲评 “增大/收缩”效果可以使对象产生增大和收缩。要向某个元素应用效果，该元素当前必须处于选定状态，或者它必须具有一个id。例如，如果要向当前未选定的div标签应用高亮显示效果，该div必须具有一个有效的id值。如果该元素尚且没有有效的id值，将需要向html代码中添加一个id值。,5.5.2 核心知识 效果可以修改元素的不透明度、缩放比例、位置和样式属性。可以组合两个或多个属性来创建有趣的视觉效果。 选中要应用效果的对象，在“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“效果增大/收缩”命令，在弹出的“增大/收缩”对话框中进行相应的设置。,5.5.3 实际操作 创建增大效果的具体操作步骤如下。 步骤2 选中图像，在“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“效果增大/收缩”命令。,步骤3 在弹出的“增大/收缩”对话框中进行相应的设置。,步骤4 单击“确定”按钮，添加行为。,5.6 任务19 显示当前日期和时间,在网页中添加当前时间和日期，可以增强网页的实用功能，为浏览者带来方便 5.6.1 简单讲评 利用javascript脚本可以添加显示当前时间和日期特效。首先定义月份和日期数组，创建一个date()对象的实例，利用getyear()、getmonth()、getdate()和getday()分别获取当前年、月、日期和星期，然后利用document.write()方法输出当前日期和时间。,5.6.2核心知识javascript代码 在html中，最常见的网页脚本语言就是javascript，它可以嵌入到html中，在客户端执行，是动态特效网页设计的最佳选择，同时也是浏览器普遍支持的网页脚本语言。,5.6.3 实际操作 显示当前日期和时间的具体操作步骤如下。 步骤2 切换到代码视图，在相应的位置输入代码。,5.7 综合实训设计动感特效网页,本章主要讲述了特效网页的制作，下面通过一个综合实例进一步巩固本章所学知识。具体操作步骤如下。 步骤2 选择“窗口行为”命令，打开“行为”面板，在“行为”面板中单击“添加行为”按钮，在弹出的菜单中选择“建议不再使用播放声音”命令。,步骤3 弹出“播放声音”对话框，单击“播放声音”右边的“浏览”按钮，弹出“选择文件”对话框，在对话框中选择相应的声音文件。,步骤4 单击“确定”按钮，添加到播放声音对话框中。,步骤5 单击“确定”按钮，将行为添加到“行为”面板中。,本 章 小 结,本章介绍了有关行为的知识。通过本章的学习，对事件和动作有了一个更深刻的了解。应掌握怎样给对象附加行为，怎样利用dreamweaver自带的行为，包括打开浏览器窗口、转到url、设置状态栏文本、增大/收缩效果和播放声音等。,思考与练习,1填空题 （1）_是用来动态响应用户操作、改变当前页面效果或执行特定任务的一种方法。行为是由_、_和_构成。 （2）设置文本行为包括_、_、_和_4个选项。 （3）要向某个元素应用效果，该元素当前必须处于_状态，或者它必须具有一个_。,2选择题 （1）_是视觉增强功能，可以将它们应用于使用javascript的html页面上几乎所有的元素。 （a）弹出信息 （b）spry效果 （c）效果 （d）交换图像 （2）_动作在当前窗口或指定的框架中打开一个新页。,（a） 打开浏览器窗口 （b） 预先载入图像 （c） 跳转菜单 （d） 转到url （3）使用_动作可根据访问者不同类型和版本的浏览器将它们转到不同的页面。 （a） 检查浏览器 （b） 检查表单 （c） 检查插件 （d） 打开浏览