应用交互特效资料.ppt

* 第6章 应用交互特效 在设计网页时，添加一些动画效果可以时网页内容更加丰富，也使网页更富有交互性。早先制作这些网页的动画效果往往需要用户具有一定的JavaScript编程基础。基于此，Dreamweaver提供了行为、Spry框架、Widget组件等多种可视化的功能，帮助用户快速实现这些动态效果。 * 本章学习要点: 使用【行为】面板 应用网页行为 使用Spry框架 安装Widget插件 使用Widget组件 * 6.1 网页行为 Dreamweaver网页行为是Adobe借助JavaScript开发的一组交互特效代码库。在Dreamweaver中，用户可以通过简单的可视化操作对这些交互特效代码进行编辑，创建丰富的网页应用。 6.1.1 标签检查器面板 在使用网页行为之前，用户需要先了解【标签检查器】面板，该面板的作用是显示当前用户选择的网页对象各种属性，以及在该网页对象上应用的所有行为。在Dreamweaver中执行【窗口】|【标签检查器】命令，即可显示【标签检查器】面板。 * 6.1.2 查看标签属性 使用【标签检查器】面板中的默认【属性】界面，用户可方便地查看网页标签的各种属性。在该界面中，默认显示【类别】属性视图，将显示当前选择网页标签的各种分类属性。 * 属性分类 内容 常规 常规属性显示网页标签中各种描述性的属性，例如超链接的URL地址、表格的背景颜色等。 浏览器特定的 仅在特定的Web浏览器中可用的属性。 CSS/辅助功能 与CSS样式相关的属性，例如class、id、style、title等。 数据绑定 仅在表格中可见，用于XML数据绑定的datapagesize属性 语言 定义网页标签字符集和显示语言的dir、lang等属性 ICE Dreamweaver模板的重复区域标签属性 Spry Spry框架属性 未分类 其他一些属性 6.1.3 编辑行为 如需要查看Dreamweaver中的行为，则用户可在【标签检查器】面板中单击【行为】按钮，此时，【标签检查器】面板将切换至【行为】界面。 * 6.2 应用网页行为 在了解了【标签检查器】面板的【行为】界面后，即可选择网页标签，为其添加行为特效。Dreamweaver CS5为用户提供了25种网页行为，按照这些行为所应用的网页对象类型，可将其分为以下4类。 * 6.2.1 文本信息行为 文本信息行为的作用是使用JavaScript脚本设置网页对象中的文本，例如容器对象中的文本、状态栏文本等，从而实现网页与用户的交互。 * 6.2.2 窗口信息行为 窗口信息行为的作用是通过浏览器窗口、对话框等窗体组件实现与用户的交互。在Dreamweaver中，主要包括两种窗口信息行为，即弹出信息行为和打开浏览器窗口行为。 * 6.2.3 图像效果行为 图像效果行为可为各种网页图像添加一些动画效果，包括增大/收缩、挤压等，或对图像本身进行一些交互操作，例如交换图像/恢复交换图像等，使图像可根据用户的操作变换。 * 属性 作用 目标元素 选择添加缩放行为的网页图像 效果持续时间 定义网页图像增大或收缩动画的持续时间，单位为毫秒。 效果 收缩 选中该选项，则可为网页图像添加收缩的特效 增大 选中该选项，则可为网页图像添加增大的特效 收缩自/增大自 设置网页图像在进行缩放变化时的初始百分比或像素大小 收缩到/增大到 设置网页图像在进行缩放变化后的百分比或像素大小 收缩到/增大到 左上角 设置网页图像以图像的左上角为缩放的中心点，向右侧、下方进行缩放 居中对齐 设置网页图像以图像的中心为缩放的中心点，向四周进行缩放 切换效果 选中该选项，则可为图像缩放增加切换效果 属性 作用 目标元素 选择添加缩放行为的网页图像 效果持续时间 定义网页图像增大或收缩动画的持续时间，单位为毫秒。 效果 渐隐 选中该选项，则可为网页图像添加渐隐的特效 显示 选中该选项，则可为网页图像添加显示的特效 显示自/渐隐自 设置网页图像在进行显示或渐隐变化时的初始百分比或像素大小 显示到/渐隐到 设置网页图像在进行显示或渐隐变化后的百分比或像素大小 切换效果 选中该选项，则可为图像的显示/渐隐增加切换效果 * 6.2.4 其他行为 除了之前介绍的几种行为外，Dreamweaver还提供了拖动AP元素、改变属性、显示-隐藏元素等常用的行为，用于操作网页中的AP Div布局对象和其他对象，实现用户交互。 属性 作用 AP元素 在列表中可选择网页中的AP Div布局对象 移动 不限制 不对AP Div布局对象可移动的方位进行限制 限制 根据【上】、【下】、【左】