12fireworks.pptVIP

网页设计与制作教程12 图像的交互性设计 主 讲：胡艳春 12 图像的交互性设计 15.1 切割图像 15.1.1 切片概述 切片的优点： 加快网页下载速度 便于构建图像链接 便于优化图像 减少重复图像 便于局部更新 12 图像的交互性设计 15.1 切割图像 15.1.2 创建和编辑切片对象 15.1.2.1 创建切片对象 1、基于所选对象插入矩形切片 2、使用切割图片工具 12 图像的交互性设计 15.1 切割图像 15.1.2 创建和编辑切片对象 15.1.2.2 编辑切片对象 1、设置切片的属性 2、显示或隐藏切片 3、改变切片对象的位置和大小 12 图像的交互性设计 15.1 切割图像 15.1.3 使切片具有简单的交互效果 Fireworks提供了两种使切片交互的方式： 拖放变换图像方法是使切片交互的最简单方法。只需拖动切片的行为手柄并将其放在目标切片中，即可快速创建简单的交互效果。 利用行为面板创建更复杂的交互。行为面板包含各种交互行为，用户可以将它们附加到切片中。 12 图像的交互性设计 15.1 切割图像 15.1.3 使切片具有简单的交互效果 1、创建简单变换图像 变换图像的状态： 释放：鼠标不在变换图像区域时的显示； 滑过：鼠标在变换图像上滑过的显示； 按下：单击变换图像时的显示； 按下时滑过：变换图像在“按下”状态时，鼠标又从其上滑过。 12 图像的交互性设计 15.1 切割图像 15.1.3 使切片具有简单的交互效果 1、创建简单变换图像 12 图像的交互性设计 15.1 切割图像 15.1.3 使切片具有简单的交互效果 2、创建不相交变换图像 不相交变换图像交换来自除触发器切片之外的切片中的图像。当指针在一个网页对象上方滚动时，不相交变换图像交换另一个网页对象下方的图像。 12 图像的交互性设计 15.1 切割图像 15.1.3 使切片具有简单的交互效果 2、创建不相交变换图像 12 图像的交互性设计 15.2 创建热点 热点用于创建图像映射，即在HTML文档中定义热区的HTML代码。 15.2.1 创建热点 创建热点的方法： 使用【编辑】＞【插入】＞【热点】菜单 使用工具面板上的热点工具 15.2.2 编辑热点 12 图像的交互性设计 15.3 按钮和导航栏的制作 15.3.1 按钮概述：按钮的4个基本的状态 “释放”：表示鼠标远离按钮时的外观，绝大多数情况下，按钮处于这种状态下。 “滑过”：表示按钮处于激活状态，提示用户单击鼠标时很可能会引发一个动作。 “按下”状态：表示单击后的按钮外观，此状态通常在多按钮导航栏上表示当前网页。 “按下时滑过”状态是在用户将指针滑过处于“按下”状态的按钮时的按钮外观，此状态通常表明指针正处于当前网页的按钮上方。 12 图像的交互性设计 15.3 按钮和导航栏的制作 15.3.2 创建按钮 【按钮编辑器】 的使用 15.3.3 编辑按钮 修改所有实例 ：双击工作区中的按钮实例，或在库面板中双击按钮预览或按钮元件旁边的元件图标，打开【按钮编辑器】，可以编辑按钮元件。 修改当前实例 ：在【属性面板】上直接修改其属性。 12 图像的交互性设计 15.3 按钮和导航栏的制作 15.3.4 创建图像导航栏 导航栏是指提供到网站不同区域的链接的一组按钮。它通常在整个站点保持一致，从而可以提供一种固定的导航方法，而不管用户处在站点中的什么位置上。 12 图像的交互性设计 15.3 按钮和导航栏的制作 15.3.4 创建图像导航栏 12 图像的交互性设计 15.4 应用弹出菜单导航 15.4.1 创建和编辑弹出菜单 12 图像的交互性设计 15.4 应用弹出菜单导航 15.4.2 导出弹出菜单 12 图像的交互性设计 15.5 本章小结 掌握切片的概念，使用切片创建变换图像和交换图像的效果。 热点的概念及使用方法 按钮和弹出菜单的创建、编辑 熟练制作各式各样的导航栏 * *