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