[Fireworks切片、变换图像和热点.ppt

通过本讲的学习掌握创建编辑位图图像 1、 重点：了解Firworks的使用范围 一、切片、变换图像和热点 切片是用于在 Adobe? Fireworks? 中创建交互效果的基本构造块。切片是最终以 HTML 代码形式存在的网页对象。可以通过 “ 层” 面板中的“ 网页层” 查看、选择和重命名它们。 切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks 会创建一个包含表格代码的 HTML 文件，以便在浏览器中重新组合图形。。 一、切片、变换图像和热点 一、切片、变换图像和热点 将图像切片有三个主要优点： 优化图像获得最快的下载速度。 增加交互性使图像能够快速响应鼠标事件。 易于更新适用于经常更改的网页部分（例如， “ 本月雇员” 页上的照片和姓名）。 一、切片、变换图像和热点 创建矩形切片 可以通过使用“ 切片” 工具进行绘制或基于所选对象插入切片来创建矩形切片。使用切片辅助线（从切片对象延伸的线）确定 导出文档时将文档拆分成的单独图像文件的边界。 一、切片、变换图像和热点 绘制矩形切片对象 1 选择“ 切片” 工具。 切片、变换图像和热点 2 拖动以绘制切片对象。 基于所选对象创建矩形切片 1 选择“ 编辑”“ 插入”“ 矩形切片”。该切片是一个矩形，它的区域包括所选对象最外面的边缘。 2 如果选择了多个对象，请选择“单个”以创建覆盖全部所选对象的单个切片对象，或选择“多个”为每个选定对象创建一个切片 对象。 一、切片、变换图像和热点 创建非矩形切片 使用“ 多边形切片” 工具创建非矩形切片。在尝试将交互性附加到非矩形图像时，非矩形切片非常有用。 一、切片、变换图像和热点 绘制多边形切片对象 1 选择“ 多边形切片” 工具。 2 单击以放置多边形的矢量点。这是必要的，因为“ 多边形切片” 工具绘制直线段。 3 当在具有柔边的对象周围绘制多边形切片对象时，请包括整个对象以免在切片图形中创建多余的实边。 4 若要停止使用“ 多边形切片” 工具，请从“ 工具” 面板中选择另一个工具。您不必单击第一个点来关闭多边形 一、切片、变换图像和热点 从矢量对象或路径创建多边形切片 1 选择一个矢量路径。 2 选择“ 编辑”“ 插入”“ 多边形切片”。 创建 HTML 文本切片 HTML 切片指定浏览器中出现普通 HTML 文本的区域。然后，它会导出在切片定义的表单元格中显示的 HTML 文本。 一、切片、变换图像和热点 一、切片、变换图像和热点 查看并选择切片 “ 网页层” 显示文档中的所有网页对象。 1 选择“ 窗口”“ 层”。 2 单击三角形展开“ 网页层”。 3 单击一个切片名称以选择该切片。 一、切片、变换图像和热点 显示和隐藏切片 隐藏一个切片时可使该切片在 Fireworks PNG 文件中不可见。可以在 HTML 中导出隐藏的切片对象。 ? 若要隐藏个别切片，请在“ 层” 面板中单击各个网页对象旁边的眼睛图标。 ? 若要显示隐藏的切片，请在“ 眼晴” 列中单击以重新打开可见性。 ? 若要隐藏或显示所有热点、切片和辅助线，请在“工具”面板的“Web”工具部分中单击相应的“隐藏/显示切片”按钮， 或单击“ 层” 面板中“ 网页层” 旁边的眼睛图标。。 一、切片、变换图像和热点 更改切片对象和辅助线的颜色 “ 编辑”“ 首选参数”的“ 辅助线和网格” 类别中选择新的切片辅助线颜色 二、编辑切片 通过移动切片辅助线来编辑切片 二、编辑切片 调整一个或多个切片的大小 1 将“ 指针” 或“ 部分选定” 工具放在切片辅助线上。 指针会变为辅助线移动指针。 2 将切片辅助线拖动到所需位置。 切片以及所有相邻切片的大小都会被调整。 三、交互切片 对于简单的交互，请使用拖放变换图像方法。 ? 对于更复杂的交互，请使用“ 行为” 面板。Fireworks 中的行为与 Adobe Dreamweaver? 行为兼容。在将 Fireworks 变换图像导出到 Dreamweaver 时，可以使用 Dreamweaver 的“ 行为” 面板编辑 Fireworks 行为。 三、交互切片 使切片具有简单的交互效果 三、交互切片 使切片具有简单的交互效果 三、交互切片 关于变换图像 变换图像的工作方式都相同：当鼠标指针滑过一个图形时，该操作将触发另一个图形的显示。触发器始终是一个网页对象（切片、热点或按钮） 三、交互切片 三、交互切片 创建并附加简单的变换图像 简单变换图像在顶部状态正下方的状态中进行交换，并且只涉及一个切片。 1 确保该触发器对象不在共享层上。 2 选择“ 编辑”“ 插入”“ 矩形切片” 或“ 多边形切片” 以在触发器对象上方创建切