《网页设计-任务十三 网页特效—行为》由会员分享，可在线阅读，更多相关《网页设计-任务十三 网页特效—行为（42页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS3 项目教程项目五 美化网页 技能目标 在网页设计中能够灵活利用CSS样式对页面元素变换不 同的视觉效果。 能够利用行为创设与众不同的网页效果。 知识目标 理解行为、事件的含义。 熟练掌握行为的添加与删除操作。 掌握触发事件的更换方法。 理解JavaScript脚本的运用。 熟练掌握Dreamweaver CS3 新增加的Spry炫目效果。 任务十三 网页特效行为 项目五 美化网页 5.3.1使用行为制作特效 5.3.2 问题探究行为与事件 5.3.3 知识拓展行为的应用 5.3.4 知识拓展内置行为任务十三 网页特效行为 项目五 美化网页工作任务虽然行为是用来动态
2、响应用户操作、改变当 前页面效果或执行特定任务的一种方法。使用 行为可以使访问者与网页之间产生一种交互， 改变页面或触发任务。Dreamweaver CS3中所 有的动作都是经过精心编写的JavaScript，以便 适用于尽可能多的浏览器。通过任务中内置行 为的灵活运用，增添页面的动感效果。 任务十三 网页特效行为-构建任务项目五 美化网页工作流程 打开指定页面。 选中标签添加“设置状态栏文本”行为 。 继续选中标签添加“弹出信息”行为。 给指定图片添加“晃动”效果。 继续给指定图片添加“交换图像/恢复交换图像 ”行为。 选定图片添加“显示/渐隐”效果。 选定图片添加“增大/收缩”效果。 任务
3、十三 网页特效行为-构建任务项目五 美化网页网页预览 效果任务十三 网页特效行为-构建任务项目五 美化网页行为与事件 行为(behavior)随着JavaScript技术的发展 而得以快速扩张。行为有三个重要组成部分： 对象、事件（Event）、动作(Action)，对象是 产生行为的主体，许多页面元素或标记都可以 成为对象，如图片、文字、多媒体等；事件是 触发动态效果的条件，它可以被附加到各种页 面元素上，也可以被附加到HTML标记中，任 何一个动作都需要一个事件激活，两者相辅相 成。 任务十三 网页特效行为-问题探究 项目五 美化网页事件和动作 事件事件是指示访问者执行了何种操作，是触发动
4、作的原因。事件可 以与“行为”面板的“动作(+)”弹出菜单中的动作相关联。例如，当访问者 将鼠标指针移到某个链接上时，将为该链接生成一个onMouseOver事 件；调用JavaScript代码并进行响应。不同的页元素定制了不同的事件 ， onMouseOver和onClick是与链接关联的事件，而onLoad是与图像和 文档的body部分关联的事件。事件针对不同对象分为鼠标事件、键盘事 件、表单事件、页面事件四大类。 。 动作动作是一段预先编写的JavaScrip代码，这些代码执行特定的任务 ，并提供了最大程度的跨浏览器兼容性，是事件的直接后果。使用 Dreamweaver CS3提供的行为
5、控制面板不需要书写任何代码，就可以 向页面中添加或修改指定动作，每个动作可以实现特定的任务。 任务十三 网页特效行为-问题探究 项目五 美化网页行为面板 Dreamweaver CS3提供了一个专门管理和编辑行 为的工具行为面板，它为用户提供了丰富的行为动 作，涉及网页制作各个方面。在Dreamweaver CS3窗口中选择“窗口/行为”（快捷 键Shift+F4），就可以打开行为面板，如图5-53所示。 任务十三 网页特效行为-问题探究 项目五 美化网页选择一个行为项后，可以通过单击事件右边的箭头 ，打开一个菜单，为这个行为动作选择不同的事件，如 图5-55所示。 任务十三 网页特效行为-问
6、题探究 项目五 美化网页选择目标浏览器的类型 事件有很多种，不同的浏览器所能支持的事件不尽 相同。在行为控制面板上单击“+”按钮，在下拉菜单中选 择“显示事件”，可以选择目标浏览器的类型，所设置的 行为只有在指定的类型浏览器上才能够正常工作，如图 5-56所示。 任务十三 网页特效行为-问题探究 项目五 美化网页1、行为的应用 添加行为 行为可以附加到整个文档（即附加到 标签），还可以附加到链接、图像、表 单元素以及其他任何HTML元素。所选择的目标 浏览器将确定对于给定的元素支持哪些事件。 Deamweaver中每个事件可以指定多个动作，动 作将按其在行为动作列表中的顺序依次发生。 任务十三
7、 网页特效行为-知识拓展 项目五 美化网页 修改行为 在附加了行为之后，如果对添加的行为不满意，可 对其进行修改，更改触发动作的事件、添加或删除动作 以及更改动作的参数。 将行为附加到文本 不能将行为附加到纯文本上，但可以将行为附加到 链接。因此，若要将行为附加到文本，最简单的方法就 是向文本添加一个空链接（不指向任何内容），然后将 行为附加到该链接上。请注意，如果这样做，文本将显 示为链接状态。如果实在不想让它显示为链接，可以更 改链接颜色并删除下划线，但这样站点访问者可能不知 道可以点击该文本。 任务十三 网页特效行为-知识拓展 项目五 美化网页 JavaScript技术 JavaScri
8、pt是一种基于对象和事件驱动并具 有安全性能的脚本语言，它可以直接嵌套在 HTML页面中，运行时不需要单独编译。它通过 嵌入或调用在网页中实现动态交互功能，弥补 了HTML语言的先天不足，使得静态网页效果生 动起来。 任务十三 网页特效行为-知识拓展 项目五 美化网页（1）JavaScript代码可以嵌入到HTML中， 并与HTML标识符、CSS样式表相结合， 成为HTML文档的一部分，实现网页的动 态效果或交互功能。嵌入形式有以下几种 ： 在Head部分添加JavaScript脚本 直接在Body部分添加JavaScript脚本 链接JavaScript脚本文件 任务十三 网页特效行为-知识
9、拓展 项目五 美化网页（2）JavaScript是基于对象的语言，它把复杂的 对象统一起来，形成一个非常强大的对象系统 。而基于对象的基本特征，就是采用事件驱动 。浏览器对象就是网页和浏览器本身各种实体 元素在JavaScript程序中的体现，主要包括以下 几种： lNavigator对象 lWindows对象 lLocation对象： lHistory对象 lDocument对象 任务十三 网页特效行为-知识拓展 项目五 美化网页2、内置行为 Dreamweaver CS3提供了24个行为 动作，基本上满足了网页设计的需要。如 果想扩充更多的动作可以到http:/adobe- 开发人员站点
10、下载更多的动作，也可以自 己编写行为动作。在Dreamweaver CS3 中许多行为是组合使用的，如“交换图像” 与“恢复交换图像”等。 任务十三 网页特效行为-知识拓展 项目五 美化网页 弹出信息行为 “弹出信息”行为显示一个带有指定信息的JavaScript警 告。因为JavaScript警告只有一个“确定”按钮，所以使用此动 作可以提供信息，但不能为用户提供选择操作。选中“body” 标签或将鼠标放在页面空白处（其实也是针对“body”），单 击行为面板中的按钮，从弹出菜单中选择“弹出信息”命令， 弹出如图5-57所示的对话框。 任务十三 网页特效行为-知识拓展 项目五 美化网页 弹出
11、信息行为 “弹出信息”行为建议针对某个对象比较合适 ，因为针对“body”标签时，每次打开或单击页面 都会弹出该消息框（“onLoad” 或“onClick”事件 ），只有单击了弹出消息框中的“确定”按钮后才 能正常浏览网页。特别当此行为针对主页实施 时，每次返回主页都会弹出该窗口会让人厌烦 。任务十三 网页特效行为-知识拓展 项目五 美化网页 打开浏览器窗口 打开浏览器窗口行为可在一个新的窗口打开页面，并可以设置 新窗口的属性（包括其大小）、特性（是否允许调整窗口大小、是 否显示菜单栏等）和名称等参数。首先准备一幅弹出页面：新建或打开一幅页面，设置其页面属 性。打开需要添加弹出小窗口的页面，
12、在标签选择器中选择“body” 标签，在行为面板中单击按钮添加行为，从弹出菜单中选择“打开 浏览器窗口”命令，弹出打开浏览器窗口对话框。如图所示。 任务十三 网页特效行为-知识拓展 项目五 美化网页 交换图像和恢复交换图像 “交换图像”行为通过更改标签的src属性，将 一张图像替代当前的图像。新建一个文档并在页面中插 入一张图片。选定这张图片，在属性检查器中为该图像 输入一个名称。如果未为图像命名，“交换图像”仍将起 作用。单击行为面板中的按钮，从弹出菜单中选择“交换 图像”命令，弹出交换图像对话框，如图所示。任务十三 网页特效行为-知识拓展 项目五 美化网页 交换图像和恢复交换图像 行为载后
13、自动添加了三个行为，首先在行为面板 自动添加了“交换图像”和“恢复交换图像”行为（该行为是 在交换图像对话框中选择默认选项“鼠标滑开时恢复图像 ”时被定义的），默认事件也是成对出现onMouseOver 和onMouseOut。其次为网页主体标签加载“预 先载入图像”行为，默认事件onLoad（防止图像显示时 由于下载导致的延迟暂放到浏览器缓存中，使显示效果 较为平滑，同时也便于脱机浏览）。 任务十三 网页特效行为-知识拓展 项目五 美化网页 改变属性 使用该行为可通过设定的动作触发行为，动态改变 对象某个属性，包括对象的颜色、尺寸和背景等。只有 在非常熟悉HTML和JavaScript的情况
14、下才使用此动作。首先在页面上选择要增加行为的对象，在行为面板 中单击按钮添加行为，从弹出菜单中选择“改变属性”命 令，弹出改变属性对话框。如图所示。 任务十三 网页特效行为-知识拓展 项目五 美化网页 设置文本 该行为包括四种类型：容器文本、文本域文本、框 架文本、状态栏文本。 （1）设置容器文本设置AP元素文本动作可以用指定的内容（包括任何 有效的HTML源代码）来替换页面上现有的容器（即包 含文本或其它元素的任何元素）的内容和格式。在调用 该动作前，先要在页面中插入一个AP元素。任务十三 网页特效行为-知识拓展 项目五 美化网页 设置容器文本 打开行为面板，单击按钮在菜单中选择“设 置文本
15、/设置容器的文本”命令。在弹出的“设置 容器的文本”对话框中使用“容器”菜单选择目标 元素，在“新建HTML”后的文本框内输入新的文 本或JavaScript代码，如图所示。 任务十三 网页特效行为-知识拓展 项目五 美化网页（2）设置框架文本该行为只有在框架集文件存在时才能设置。设置 框架文本动作可以动态地改变框架文本、用特定的内容 （包含任何有效的HTML代码）替换框架的格式和内容 ，此操作可动态显示信息。调用该动作前，先要创建框 架集。任务十三 网页特效行为-知识拓展 项目五 美化网页（3）设置状态栏文本 设置状态栏文本动作可以在浏览器窗 口的底部左侧的状态栏中显示文本消息。 访问者常常会忽略或注意不到状态栏中的 消息，如果消息比较重要，将考虑将其显 示为弹出式消息或层文本。 任务十三 网页特效行为-知识拓展 项目五 美化网页（3）设置状态栏文本 选定要连接行为的对象，然后打开行为面板，单击 按钮在菜单中选择“设置文本/设置状态栏文本”命令。弹 出“设置状态栏文本”对话框，在“消息”栏中输入你需要显 示的消息文本。如图所示。任务十三 网页特效行为-知识拓展 项目五 美化网页（4）设置文本域文字 设置文本域文字动作可以用指定的内容替换表单文本 域的内容，结合一些具有特殊功能的网页脚本可以实现更 加丰富的功能。首先选择“插入/表单/文本域”插入一个文本域，选择对 象并打开“
