项目12 使用行为增加动感效果.pptVIP

* * 项目十二 使用行为增加动感效果 情 境 设 置 大家上网浏览网页，经常会看到网页上有诸如弹出式菜单，控制一段视频播放，弹出对话框信息，网页自动跳转等等功能。这些功能使得网页更具动态性和交互性，也可以使得网页具有了一些特殊效果。在以往，这些功能需要你懂得某种脚本语言，并用脚本语言亲自编程实现，而有了Dreamweaver ，它能根据你的设置，自动完成编程，即使你不懂脚本语言，一样轻松实现这些功能。该项目中，大家将学会使用Dreamweaver来完成这些功能。 项 目 展 示 本项目完成后的大体效果如下 项 目 目 标 能够理解事件和动作 能够理解行为 能够在网页中为元素插入特定的行为 知道Dreamweaver提供的常用行为 项 目 分 析 具体工作任务： 制作网页，主题为“欢度春节” 采用表格和嵌套表格布局页面 通过添加设置文本行为，为页面添加状态文字 添加弹出信息窗口行为 添加打开浏览器窗口行为 通过添加显示弹出式菜单行为，为导航条设置菜单 为Flash动画添加控制行为 实 施 步 骤 步骤一：新建一个站点，并在站点根文件夹中建立一个名为images和flash的子文件夹，用于分别保存图像和flasn动画素材。并在站点根文件夹下创建一个网页文件“index.html”。 步骤二：在网页中插入表格以布局页面 步骤三：为相应的元素设置行为，这是本项目中的重点，也是Dreamweaver的一个特色，Dreamweaver正是借助行为来实现出入弹出式菜单等功能。 知 识 链 接 一、事件和动作的概念 为了正确使用和理解行为，必须先来理解事件和动作这两个概念。 事件是当用户与网页交互时，对网页或网页上的元素对象产生的操作 。 网页元素发生单击事件之后，可能做出某些响应，这些响应一般是执行特定的程序，我们把这种特定程序的执行称为动作。因此，动作也可以说是一段预先编好的脚本程序（如用JavaScript语言编写），用来完成特定功能。 知 识 链 接 二、Dreamweaver中事件和动作的种类 onLoad：当元素向浏览器加载并显示时发生的事件。 onResize：访问者改变窗口或框架的大小时发生的事件。 onClick: 鼠标单击网页的元素时发生的事件。 onBlur：鼠标移动到窗口或框架的外侧等非激活状态时发生的事件。 onFocus: 鼠标移动到窗口或框架中处于激活状态时发生的事件。 onDblclikc: 鼠标双击网页的元素时发生的事件。 onKeyDown：键盘上的某个键被按下时触发此事件。 onKeyPress：键盘上的某个键被按下且释放时触发此事件。 onMouseMove：鼠标经过选定元素的上面时发生的事件。 onMouseOut：鼠标离开选定的元素时发生此事件。 onMouseDown：鼠标左键被按下时发生此事件。 onMouseUp:鼠标左键被释放时发生此事件 常见事件 知 识 链 接 二、Dreamweaver中事件和动作的种类 调用JavaScript：发生事件时，调用特定的JavaScript函数。 改变属性： 更改选定元素的属性。 检查浏览器: 检查浏览者浏览器的版本并显示合适的网页。 检查插件：检查浏览器中所需插件的安装情况。 控制Shockwave或Flash: 控制Flash动画的状态。 拖动层: 设定可以在浏览器中自用移动的层。 转到URL：发生制定的事件时跳转到指定的网站或网页文档。 跳转菜单：制作可以一次设定多个链接的跳转菜单。 跳转菜单开始：在跳转菜单中选择要跳转到的网站后，只有单击Go按钮时才跳转。 打开浏览器窗口：显示一个新的浏览器窗口。 播放声音：发生指定的事件时，播放链接的音乐。 弹出信息: 反生指定的事件时显示弹出信息。 预先载入图像： 发生指定事件时，预先下载某副图像，加快显示速度。 设置导航栏图像：用图像制作构成菜单的导航条。 设置文本： 在选定的框架，层，或者状态栏中显示指定的内容。 显示弹出式菜单： 制作所需样式的菜单，且发生指定事件时弹出。 显示和隐藏层： 发生指定的事件时，显示和隐藏指定的层。 交换图像： 发生指定事件时,把选定图像替换为其他图像。 恢复交换图像： 应用交换图像动作后，显示原图像。 检查表单： 检查表单数据的有效性。 常见动作 知 识 链 接 三、行为的概念 行为是为响应某一具体事件而采取的一个或多个动作。因此，行为的概念中涉及了事件和动作，在Dreamweaver中，正是通过为元素简单的添加行为，方便的实现了交互式的动