第九章 行为与时间轴.ppt

第7章　行为与时间轴 第7章　行为与时间轴 7.1　 “炫”网页――软件下载之家 7.1.1 案例综述 　　　本例我们将在原有页面的基础上，添加Dreamweaver 8所提供的行为，并通过时间轴在页面中添加动画。 7.1　 “炫”网页――软件下载之家 7.1.2 案例分析 　　　添加行为的时候要遵循3个步骤： 选择对象。 添加动作。 调整事件。 7.1　 “炫”网页――软件下载之家 7.1.3 实现步骤 准备页面 。 设置“弹出信息” 打开浏览器窗口 设置状态栏文本 设置文本域文本 创建图像交换功能 用时间轴控制图片替换 将层设置为可拖动 创建小鸟飞翔动画 7.2　行为的概述 行为是动作和触发该动作的事件的结合体 事件 事件是触发动态效果的原因，它可以被附加在各种页面元素上，也可以被附加到HTML标记中。 动作 动作其实是一段网页上的JavaScript代码，这些代码在特定事件被激发时执行，从而实现访问者与Web页进行交互，以多种方式更改页面或执行某些任务。通过动作来完成动态效果，如：打开浏览器窗口、显示或隐藏层、播放声音等都是动作。 7.2　行为的概述 事件与动作的关系 将“事件”和“动作”组合起来就构成了“行为”。在将行为附加到页面元素之后，只要对该元素触发了所指定的事件，浏览器就会调用与该事件关联的动作（JavaScript）。 7.3 使用【行为】面板 选择【窗口】｜【行为】命令，打开【行为】面板 7.3 使用【行为】面板 【显示设置事件】　仅显示附加到当前文档的那些事件 【显示所有事件】　按字母降序显示所有事件 【添加行为】　在出现的动作菜单中, 选择一个动作，并指定该动作的相关参数，即可添加行为。 【显示事件】　在此菜单中选择确定哪些事件将显示在“事件”弹出式菜单中 【删除事件】　单击“删除事件”按钮，可以从行为列表中删除所选的事件和动作。 【向上移动】和【向下移动】　将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是以选定的顺序执行的。 7.4????? 向页面中添加基本行为 添加行为：通过“行为”面板上的“添加行为”按钮，可以将行为附加到整个文档，也可以附加到链接、图像、表单元素或多种其他HTML元素中的任何一种。 事件的选择：在添加行为后，当单击行为列表框中所选事件名称旁边的箭头按钮时，会出现一个下拉菜单，其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。 7.4????? 向页面中添加基本行为 7.4.1 弹出信息 使用【弹出信息】动作将显示一个带有指定消息的警告窗口 使用【弹出信息】动作的操作步骤如下： 选择对象并打开行为面板。 单击＋按钮，并从“添加动作”菜单中选择【弹出信息】。打开“弹出信息”对话框。 在【消息】域中输入在信息框中将要显示的信息文字。 设置完成后单击【确定】按钮。 检查【行为】面板中默认事件是否是所需的事件 ，如果不是，从弹出式菜单中选择另一个事件。 7.4????? 向页面中添加基本行为 7.4.2 打开浏览器窗口 使用的【打开浏览器窗口】动作在一个新的窗口中打开URL 使用【打开浏览器窗口】行为的操作步骤如下： 选择一个对象并打开【行为】面板。 单击单击按钮并从“添加动作”菜单中选择【打开浏览器窗口】命令。打开“打开浏览器窗口”对话框。 设置完成后单击【确定】按钮。 检查【行为】面板中默认事件是否是所需的事件。如果不是，从弹出式菜单中选择另一个事件。 7.4????? 向页面中添加基本行为 7.4.3 设置文本 使用Dreamweaver内置的【设置文本】动作可以动态地设置层、框架、文本域以及状态栏的文本。 使用【设置文本】行为的操作步骤如下： 选择一个对象并打开【行为】面板。 单击单击按钮并从“添加动作”菜单中选择【设置文本】｜【设置状态栏文本】命令。打开“设置状态栏文本”对话框。 在【消息】文本框中输入相应的信息。 7.4????? 向页面中添加基本行为 7.4.4 检查表单 利用【检查表单】动作可以为表单中各元素设置有效性规则，并检查指定文本域的内容以确保用户输入正确的数据类型 使用【检查表单】动作的操作步骤如下： 首先在文档中插入表单和文本域。 然后执行下列步骤之一： 如果要在用户填写表单时验证单个文本域，选取一个文本域，打开【行为】面板。 如果要在用户提交表单时验证多个文本域，单击文档窗口左下角标签选择器中的form标签并打开【行为】面板。 7.4????? 向页面中添加基本行为 7.4.4 检查表单 从【添加行为】下拉列表中选择【检查表单】动作。 重复以上操作检查其他的