第12课：切片、变换图像和热点.ppt

精通Fireworks 8 主讲：李志伟 第12课：切片、变换图像和热点 切片是 Macromedia Fireworks 8 中用于创建交互性的基本构造块。切片是网页对象 ,它们不是以图像的形式存在，而是最终以 HTML 代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。本章描述切片的主要概念，并提供了使用切片将交互性结合到网页中的步骤。 使用拖放变换图像方法将交互性附加到切片，可以在工作区中快速创建变换图像和交换图像效果。可以在“行为”面板中查看指定的行为并使用此面板创建更复杂的交互。 还可以使用热点将交互性结合到网页中。热点用于创建图像映射，即在 HTML 文档中定义热区 的 HTML 代码。这些区域不一定链接到某个地方；它们可能只是触发一个行为或定义替代文本。热点还可以接收鼠标事件，使得 JavaScript 行为在切片中起作用。 本章包含以下主题： 创建和编辑切片 使切片交互 准备切片以供导出 使用热点和图像映射 创建和编辑切片 切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks 还创建一个包含表格代码的 HTML 文件，以便在浏览器中重新组合图形。 切片将一个文档分割成多个部分，它们都以单独文件的形式导出。 将图像切片至少有三个主要优点： “优化”?网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。有关更多信息，请参阅优化和导出。 “交互性”?您可以使用切片来创建响应鼠标事件的区域。有关如何使切片具有交互性的信息，请参阅使切片交互。 “更新网页的某些部分”?切片使您可以轻松地更新网页中经常更改的部分。例如，贵公司的网页中可能包含每月更改一次的“本月雇员”部分。切片使您可以快速更改雇员的姓名和照片而不用更换整个网页。 创建 HTML 切片 HTML 切片指定浏览器中出现普通 HTML 文本的区域。HTML 切片不导出图像，它导出出现在由切片定义的表格单元格中的 HTML 文本。 若要创建 HTML 切片： 绘制切片对象并将其保留为选定状态。 在“属性”检查器中，从“类型”弹出菜单中选择“HTML”。 单击“编辑”。 在“编辑 HTML 切片”窗口中键入文本，如果需要，通过添加 HTML 文本格式设置标记来设置文本的格式。 注意：或者，可以在使用文本编辑器或 HTML 编辑器（如 Macromedia Dreamweaver）导出 HTML 后，将 HTML 文本格式设置标记添加到 HTML。 单击“确定”以应用更改并关闭“编辑 HTML 切片”窗口。 您输入的文本和 HTML 标记以原始 HTML 代码的形式出现在 Fireworks PNG 文件中切片的正文上。 注意：在不同的浏览器以及不同的操作系统中查看 HTML 文本切片时，它们的外观可能会有所变化，这是因为浏览器中可以设置字体大小和类型。 创建非矩形切片 当试图将交互性附加到非矩形图像时，矩形切片可能无法满足需要。例如，如果打算将变换图像行为附加到切片，而切片对象互相重叠或者形状不规则，则矩形切片可能会与交换图像交换出非您所要的背景图形。Fireworks 解决此问题的方法是：允许您使用“多边形切片”工具绘制任何多边形形状的切片。 您也可以在矢量路径的顶部插入切片，以便创建不规则的切片形状。 若要绘制多边形切片对象： 选择“多边形切片”工具。 单击以放置多边形的矢量点。“多边形切片”工具仅绘制直线段。 当在具有柔边的对象周围绘制多边形切片对象时，请确保包括整个对象，以免在切片图形中创建多余的实边。 若要停止使用“多边形切片”工具，请从“工具”面板中选择另一个工具。不必再次单击第一个点以关闭多边形。 注意：请小心不要过度使用多边形切片，这是因为与类似的矩形切片相比，它们需要更多的 JavaScript 代码。使用太多的多边形切片可能会增加 Web 浏览器的处理时间。 若要从矢量对象或路径创建矩形切片或多边形切片： 选择一个矢量路径。 选择“编辑”“插入”“插入矩形切片”或“插入多边形切片”（具体取决于需要的形状）。 查看并显示切片和切片辅助线 可以使用“层”面板和“工具”面板控制文档中切片和其它网页对象的可见性。当关闭整个文档的切片可见性时，切片辅助线也将被隐藏。 使用“属性”检查器，可以通过为每个切片对象指定唯一的颜色来组织切片。您也可以通过“视图”菜单更改切片辅助线的颜色。 在“层”面板中查看切片 “网页层”显示文档中的所有网页对象，以便可以选择并查看每个网页对象。 若要在“层”面板中查看并选择切片： 选择“窗口”“层”以打开“层”面板。 单击加号