第6章 应用交互特效

定的
CSS/ 辅 助功能 数据绑定 语言 ICE Spry 未分类
5
6.1.3 编辑行为
• 如需要查看Dreamweaver中的行为，则用户可在【标 签检查器】面板中单击【行为】按钮，此时，【标签检查器 】面板将切换至【行为】界面。
6
6.2 应用网页行为
• 在了解了【标签检查器】面板的【行为】界面后，即可 选择网页标签，为其添加行为特效。Dreamweaver CS5为 用户提供了25种网页行为，按照这些行为所应用的网页对象 类型，可将其分为以下4类。
• 在获取了Widget程序后，用户可在Widget Browser程序 中查看和编辑Widget，也可通过Dreamweaver CS5将Widget 组件插入到网页文档中。
21
6.5 课堂练习：制作产品说明网页
• 产品的说明通常有多个标题内容组成，包括产品的简介、 功能和其他相关的产品链接等。在本练习中，将使用Spry折叠 式功能制作一个企业文档管理软件制作产品的说明网页。
19
6.4.2 获取Widget组件
• 在为网页应用Widget时，用户需要先在Widget Browser 程序中单击右上角的【Sign In】文本，在弹出的【Sign In】 对话框中输入【Email】和【Password】，单击【Sign In】 按钮登录Adobe账户。
20
6.4.3 编辑和使用Widget组件
12
6.3.1 Spry菜单栏
• Spry菜单栏是一组可导航的菜单按钮组，其提供了水平和垂 直等两个方向的导航菜单样式，可在有限的网页页面中显示大量 可导航的信息。在访问者将鼠标滑过该菜单栏上的按钮时，可显 示该按钮下的子菜单。
属性 菜单条 编 辑菜单 项
添加菜单项 删除菜单项 上移项 下移项
文本 链接 标题 目标 禁用样式
1
本章学习要点:
• • • • • 使用【行为】面板 应用网页行为 使用Spry框架 安装Widget插件 使用Widget组件
2
6.1 网页行为
• Dreamweaver网页行为是Adobe借助JavaScript开发的 一组交互特效代码库。在Dreamweaver中，用户可以通过简 单的可视化操作对这些交互特效代码进行编辑，创建丰富的 网页应用。
靠齐距离___像素接近放下目标 拖动控制点
整个元素 元素内的区域 将元素置于顶层 然后
拖动时
放下时
11
6.3 使用Spry框架
• Spry框架是Dreamweaver内置的一组JavaScript脚本库， 其可以为网页添加各种面板、选项卡等用户界面元素，从而 丰富网页的交互性。在Dreamweaver CS5中，提供了5种静 态网页的Spry框架。
22
6.6 课堂练习：制作拼图游戏
• 使用Dreamweaver CS5中的行为，用户可以制作多种带有 动态交互效果的网页，实现用户与网页之间的交互。例如，使 用拖动AP元素行为，即可制作一个拼图游戏网页。
23
作用 Spry菜单栏在网页中唯一的ID标识 在当前选择的菜单级别中添加新的菜 单项目 删除当前选择的菜单项目 将当前选择的菜单项目上移一个位置 将当前选择的菜单项目下移一个位置 定义当前选择的菜单项目中显示的文 本信息 为当前选择的菜单项目添加超链接U RL地址 定义当鼠标滑过当前选择的菜单项目 时显示的工具提示信息 定义当前选择的菜单项目在打开新链 接时的打开方式 禁用该Spry菜单栏所有已添加的CS S样式。
7
6.2.1 文本信息行为
• 文本信息行为的作用是使用JavaScript脚本设置网页对 象中的文本，例如容器对象中的文本、状态栏文本等，从 而实现网页与用户的交互。
8
6.2.2 窗口信息行为
• 窗口信息行为的作用是通过浏览器窗口、对话框等窗体组件 实现与用户的交互。在Dreamweaver中，主要包括两种窗口信息 行为，即弹出信息行为和打开浏览器窗口行为。
属性分类 常规 浏览器特
内容 常规属性显示网页标签中各种描述性的属性，例如超链接的URL地址、 表格的背景颜色等。 仅在特定的Web浏览器中可用的属性。 与CSS样式相关的属性，例如class、id、style、title等。 仅在表格中可见，用于XML数据绑定的datapagesize属性 定义网页标签字符集和显示语言的dir、lang等属性 Dreamweaver模板的重复区域标签属性 Spry框架属性 其他一些属性
13
6.3.2 Spry选项卡式面板
• Spry选项卡式面板可将大量网页内容存放于位置重合的选 项卡中，通过选项按钮分别控制这些选项卡的显示和隐藏。使 用Spry选项卡式面板可节省大量网页的空间。
14
6.3.3 Spry折叠式
• Spry折叠式的作用与Spry选项卡式面板类似，都可将大 量内容存放于重合的位置，然而相比Spry选项卡式面板，Sp ry折叠式具有动画的功能，可呈现面板的折叠动画。
作用 选择添加缩放行为的网页图像 定义网页图像增大或收缩动画的持续时间，单位为毫秒。 选中该选项，则可为网页图像添加收缩的特效 选中该选项，则可为网页图像添加增大的特效 设置网页图像在进行缩放变化时的初始百分比或像素大小 设置网页图像在进行缩放变化后的百分比或像素大小 设置网页图像以图像的左上角为缩放的中心点，向右侧、下方进行缩放 设置网页图像以图像的中心为缩放的中心点，向四周进行缩放
15
6.3.4 Spry可折叠面板
• Spry可折叠面板与Spry折叠式类似，都是一种可弹出和 收缩的折叠菜单，然而相比Spry折叠式，Spry可折叠面板只 能显示一个面板的内容，并提供伸缩的动画。
16
6.3.5 Spry工具提示
• Spry工具提示的作用类似操作系统中的工具提示，可在鼠 标滑过某个网页对象时显示一段文本内容，并在鼠标从网页对 象中滑开时自动隐藏起来。Spry工具提示可为各种网页对象提 供说明信息，因此较为常用。
10
6.2.4 其他行为
• 除了之前介绍的几种行为外，Dreamweaver还提供了拖 Div布局对象和其他对象，实现用户交互。
属性 AP元素 移 动 放 下目标
不限制 限制 左 上 取得目前位置
作用 在列表中可选择网页中的AP Div布局对象 不对AP Div布局对象可移动的方位进行限制 根据【上】、【下】、【左】、【右】的坐标定义一个矩形区域，限制AP Div布局对象可移动的位置 定义放下AP Div布局对象时贴紧的水平坐标 定义放下AP Div布局对象时贴紧的垂直坐标 单击该按钮，可获取AP Div布局对象在当前的坐标位置，写入到【放下目标】的【左】和【上】文本域中。 定义在放下AP Div布局对象时贴紧的距离 定义鼠标在整个AP Div布局对象上按下均可开始拖拽 根据【左】、【上】、【宽】和【高】等属性定义一个矩形区域，设置只有鼠标在该矩形区域内按下时才可开始拖拽 定义在拖拽该AP Div布局对象时，将其提升至其他AP Div布局对象的上方 留 在 最上方 恢复 Z 轴 呼叫JavaScript 呼叫JavaScript 只有在靠齐时 定义在放下该AP Div布局对象时恢复其原有的层叠顺序 定义在拖动该AP Div布局对象时调用JavaScript脚本 定义在放下该AP Div布局对象时调用JavaScript脚本 定义只有在将AP Div布局对象贴紧至指定位置后才调用以上JavaScript脚本。 定义在放下该AP Div布局对象时仍然保留其在其他AP Div布局对象的上方
9
6.2.3 图像效果行为
• 图像效果行为可为各种网页图像添加一些动画效果，包括增 大/收缩、挤压等，或对图像本身进行一些交互操作，例如交换 图像/恢复交换图像等，使图像可根据用户的操作变换。
属性 目标元素 效果持续时间 效果 收缩 增大 收缩自/增大自 收缩到/增大到 收 缩 左上角 到 / 居中对齐 增大 到 切换效果 属性 目标元素 效果持续时间 效 渐隐 果 显示 显示自/渐隐自 显示到/渐隐到 切换效果
第6章 应用交互特效
在设计网页时，添加一些动画效果可以时网页内容更加丰富 ，也使网页更富有交互性。早先制作这些网页的动画效果往往需 要用户具有一定的JavaScript编程基础。基于此，Dreamweaver 提供了行为、Spry框架、Widget组件等多种可视化的功能，帮助 用户快速实现这些动态效果。
选中该选项，则可为图像缩放增加切换效果 作用 选择添加缩放行为的网页图像 定义网页图像增大或收缩动画的持续时间，单位为毫秒。 选中该选项，则可为网页图像添加渐隐的特效 选中该选项，则可为网页图像添加显示的特效 设置网页图像在进行显示或渐隐变化时的初始百分比或像素大小 设置网页图像在进行显示或渐隐变化后的百分比或像素大小 选中该选项，则可为图像的显示/渐隐增加切换效果
17
6.4 使用Widget组件
• Widget组件是Dreamweaver CS5新增的一个功能，该 功能允许用户从互联网中下载各种已编写好的插件，将其插 入到网页中，直接调用或进行二次开发。
18
6.4.1 获取和安装Widget插件
• 在使用Widget组件之前，用户需要先在Web浏览器中打 开“/technologies/widgetbrowser/”网 页，浏览和获取Widget组件。
3
6.1.1 标签检查器面板
• 在使用网页行为之前，用户需要先了解【标签检查器】面板 ，该面板的作用是显示当前用户选择的网页对象各种属性，以及 在该网页对象上应用的所有行为。在Dreamweaver中执行【窗口 】|【标签检查器】命令，即可显示【标签检查器】面板。
4
6.1.2 查看标签属性
• 使用【标签检查器】面板中的默认【属性】界面，用 户可方便地查看网页标签的各种属性。在该界面中，默认 显示【类别】属性视图，将显示当前选择网页标签的各种 分类属性。