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

精通Fireworks8主讲：李志伟第12课：切片、变换图像和热点切片是MacromediaFireworks8中用于创建交互性的基本构造块。切片是网页对象,它们不是以图像的形式存在，而是最终以HTML代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。本章描述切片的主要概念，并提供了使用切片将交互性结合到网页中的步骤。使用拖放变换图像方法将交互性附加到切片，可以在工作区中快速创建变换图像和交换图像效果。可以在“行为”面板中查看指定的行为并使用此面板创建更复杂的交互。还可以使用热点将交互性结合到网页中。热点用于创建图像映射，即在HTML文档中定义热区的HTML代码。这些区域不一定链接到某个地方；它们可能只是触发一个行为或定义替代文本。热点还可以接收鼠标事件，使得JavaScript行为在切片中起作用。本章包含以下主题：创建和编辑切片使切片交互准备切片以供导出使用热点和图像映射创建和编辑切片切片将Fireworks文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks还创建一个包含表格代码的HTML文件，以便在浏览器中重新组合图形。切片将一个文档分割成多个部分，它们都以单独文件的形式导出。将图像切片至少有三个主要优点：“优化”网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。有关更多信息，请参阅优化和导出。“交互性”您可以使用切片来创建响应鼠标事件的区域。有关如何使切片具有交互性的信息，请参阅使切片交互。“更新网页的某些部分”切片使您可以轻松地更新网页中经常更改的部分。例如，贵公司的网页中可能包含每月更改一次的“本月雇员”部分。切片使您可以快速更改雇员的姓名和照片而不用更换整个网页。创建HTML切片HTML切片指定浏览器中出现普通HTML文本的区域。HTML切片不导出图像，它导出出现在由切片定义的表格单元格中的HTML文本。若要创建HTML切片：1.绘制切片对象并将其保留为选定状态。2.在“属性”检查器中，从“类型”弹出菜单中选择“HTML”。3.单击“编辑”。4.在“编辑HTML切片”窗口中键入文本，如果需要，通过添加HTML文本格式设置标记来设置文本的格式。注意：或者，可以在使用文本编辑器或HTML编辑器（如MacromediaDreamweaver）导出HTML后，将HTML文本格式设置标记添加到HTML。5.单击“确定”以应用更改并关闭“编辑HTML切片”窗口。您输入的文本和HTML标记以原始HTML代码的形式出现在FireworksPNG文件中切片的正文上。注意：在不同的浏览器以及不同的操作系统中查看HTML文本切片时，它们的外观可能会有所变化，这是因为浏览器中可以设置字体大小和类型。创建非矩形切片当试图将交互性附加到非矩形图像时，矩形切片可能无法满足需要。例如，如果打算将变换图像行为附加到切片，而切片对象互相重叠或者形状不规则，则矩形切片可能会与交换图像交换出非您所要的背景图形。Fireworks解决此问题的方法是：允许您使用“多边形切片”工具绘制任何多边形形状的切片。您也可以在矢量路径的顶部插入切片，以便创建不规则的切片形状。若要绘制多边形切片对象：1.选择“多边形切片”工具。2.单击以放置多边形的矢量点。“多边形切片”工具仅绘制直线段。3.当在具有柔边的对象周围绘制多边形切片对象时，请确保包括整个对象，以免在切片图形中创建多余的实边。4.若要停止使用“多边形切片”工具，请从“工具”面板中选择另一个工具。不必再次单击第一个点以关闭多边形。注意：请小心不要过度使用多边形切片，这是因为与类似的矩形切片相比，它们需要更多的JavaScript代码。使用太多的多边形切片可能会增加Web浏览器的处理时间。若要从矢量对象或路径创建矩形切片或多边形切片：选择一个矢量路径。选择“编辑”“插入”“插入矩形切片”或“插入多边形切片”（具体取决于需要的形状）。查看并显示切片和切片辅助线可以使用“层”面板和“工具”面板控制文档中切片和其它网页对象的可见性。当关闭整个文档的切片可见性时，切片辅助线也将被隐藏。使用“属性”检查器，可以通过为每个切片对象指定唯一的颜色来组织切片。您也可以通过“视图”菜单更改切片辅助线的颜色。在“层”面板中查看切片“网页层”显示文档中的所有网页对象，以便可以选择并查看每个网页对象。若要在“层”面板中查看并选择切片：选择“窗口”“层”以打开“层”面板。单击加号(+)按钮（在Windows中）或三角形（在Macintosh中）展开“网页层”。“网页层”显示文档中当前网页对象的完整列表。单击一个切片名称以选择该切片。切片在“网页层”中高亮显示，并且在画布上处于选定状态。显示和隐藏切片隐藏一个切片时可使该切片在FireworksPNG文件中不可见。可以关闭全部或某些网页对象。由于切片是网页对象，因此它们在“层”面板中的“网页层”下面列出，在此处可以打开或关闭所选切片的可见性。也可以通过“工具”面板控制切片可见性。隐藏一个切片对象时并不会阻止将该切片导出到HTML。若要隐藏和显示特定的切片和热点：在“层”面板中单击各个网页对象旁边的眼睛图标。在“眼睛”列中单击以重新打开可见性。当网页对象再次可见时，眼睛图标将重新出现。若要隐藏或显示所有热点、切片和辅助线，请执行下列操作之一：在“工具”面板的“Web”工具部分中单击适当的“隐藏/显示切片”按钮。在“层”面板中，单击“网页层”旁边的眼睛图标。若要在任何文档视图中隐藏或显示切片辅助线：选择“视图”“切片辅助线”。更改切片和切片辅助线颜色如果文档中使用的颜色与切片颜色相似，则在文档中区分对象和切片会很困难。为了易于查看，您可以为选定的切片指定一个新颜色。为各个切片指定唯一的颜色还有助于对它们进行组织。您也可以改变切片辅助线的颜色。注意：当预览文档时，取消选择的切片显示为白色层叠。若要更改所选切片对象的颜色：在“属性”检查器中，从颜色框中选择一种新颜色。若要更改切片辅助线的颜色：选择“视图”“辅助线”“编辑辅助线”。从“辅助线”对话框的“切片颜色”部分中选择新颜色，并单击“确定”。编辑切片在Fireworks中，可以像处理文字处理应用程序中的表格一样处理切片布局。当拖动切片辅助线以调整切片大小时，Fireworks也将自动调整所有相邻的矩形切片的大小。另外，可以使用“属性”检查器来调整切片大小以及将切片变形，就像对待矢量对象和位图对象一样。移动切片辅助线以编辑切片使用工具编辑切片对象:可以使用“指针”、“部分选定”和“变形”工具更改切片的形状或调整切片的大小。您只能倾斜和扭曲多边形切片。使用“属性”检查器或“信息”面板编辑切片对象使切片具有简单的交互效果拖放变换图像方法是创建变换图像和交换图像效果的快速而有效的方法。具体说来，拖放变换图像方法使您可以确定指针经过一个切片时该切片所发生的变化。最终结果通常称为变换图像。变换图像是在网页浏览器中当指针经过其上方移动时，其外观发生更改的图形。当选定切片时，一个带有十字的圆圈出现在切片的中央。这称为行为手柄。通过从触发切片拖动行为手柄并将其放置在目标切片上，可以轻松地创建变换图像和交换图像效果。触发器和目标可以是同一切片热点也具有用于结合变换图像效果的行为手柄。变换图像变换图像的工作方式都是一样的。当指针滑过一个图形时，该图形将触发另一个图形的显示。触发器始终是一个网页对象—切片、热点或按钮。最简单的变换图像是将第1帧中的一个图像与紧挨着它的下面第2帧中的图像交换。您还可以生成更复杂的变换图像。交换图像的变换图像可以交换来自任何帧的图像；不相交变换图像交换来自除触发器切片之外的切片中的图像。当在Fireworks中选择一个使用行为手柄或“行为”面板创建的触发器网页对象时，将显示它的所有行为关系。默认情况下，变换图像交互由一条蓝色行为线表示。创建简单的变换图像简单变换图像在顶部帧正下方的帧中进行交换，并且只涉及一个切片。简单变换图像附加到切片：1.确保该触发器对象不在共享层上。2.选择“编辑”“插入”“切片”以在触发器对象上方创建切片。3.单击“新建/复制帧”按钮在“帧”面板中创建一个新帧。4.创建、粘贴或导入用作新帧上的交换图像的图像。将该图像放在步骤2中创建的切片的下方（即使您现在位于第2帧中，该切片仍然可见）。切片在所有帧中都是可见的。5.在“帧”面板中选择“第1帧”返回到包含原始图像的帧。6.选择切片并将指针放在行为手柄上方。指针随即变为手形。注意：您可在任何帧中选择该切片。7.单击行为手柄，并从菜单中选择“简单变换图像”。8.单击“预览”选项卡并测试简单变换图像，或者按F12键在浏览器中预览它。创建不相交变换图像当指针在一个网页对象上方滚动时，不相交变换图像交换另一个网页对象下方的图像。当指针滑过或单击一个触发器图像时，作为响应，在网页的另一个位置中出现一个图像。鼠标滑过的图像被视为触发器；发生更改的图像被视为目标。与仅使用一个切片的简单变换图像一样，首先必须对触发器、目标切片和交换图像所驻留的帧进行设置。然后，可以使用一条行为线将触发器链接到目标切片。若要将不相交变换图像附加到所选图像：1.选择“编辑”“插入”“切片”或“热点”，将切片或热点附加到触发器图像。注意：如果所选对象是按钮，或者如果切片或热点已经覆盖图像，则无需执行此步骤。2.单击“帧”面板中的“新建/复制帧”按钮创建一个新帧。3.在画布上所需位置的新帧中再放置一个用作目标的图像。可将该图像放在任何位置（除了在步骤1创建的切片下方以外）。4.选择图像，然后选择“编辑”“插入”“切片”将切片附加到图像。5.在“帧”面板中选择“第1帧”返回到包含原始图像的帧。6.选择覆盖触发器区域（原始图像）的切片、热点或按钮，然后将指针放在行为手柄上。指针随即变为手形。7.将触发器切片或热点的行为手柄拖到在步骤4中创建的目标切片。出现一条从触发器中心延伸到目标切片左上角的行为线，同时打开“交换图像”对话框。8.从“交换图像自”弹出菜单中，选择在步骤2中创建的帧，然后单击“确定”。9.单击“预览”按钮以预览和测试不相交变换图像。将多个变换图像应用到切片您可以从单个切片中拖动多个行为手柄来创建多个变换行为。例如，您可以从同一切片中触发一个变换图像和一个不相交变换图像。若要将多个变换图像应用到所选切片：1.将行为手柄从所选切片拖到同一切片的边缘或其它切片上。将手柄拖动到同一切片的左上边缘时可创建一个交换图像，将手柄拖动到其它切片时可创建不相交变换图像。2.选择交换图像的帧，然后单击“确定”。3.根据需要，重复执行步骤1和2可以创建多个变换图像。删除拖放变换图像您可以轻松地从切片、热点或按钮中删除拖放变换图像。若要从所选网页对象或按钮中删除拖放变换图像：单击要删除的蓝色行为线。单击“确定”即可删除交换图像行为。用“行为”面板向切片添加交互效果除变换图像以外，还可使用“行为”面板向切片中附加其它类型的交互效果。可通过编辑现有行为来创建自定义交互。注意：尽管可以使用“行为”面板创建简单、不相交和复杂的变换图像，但还是建议使用拖放变换图像的方法。“简单变换图像”通过将“第1帧”用作“弹起”状态以及将“第2帧”用作“滑过”状态来向所选切片添加变换图像行为。选择此行为后，需要使用同一切片在第2帧中创建一个图像以创建“滑过”状态。“简单变换图像”选项实际上是包含“交换图像”和“恢复交换图像”行为的行为组。“交换图像”使用另一个帧的内容或外部文件的内容来替换指定切片下面的图像。“恢复交换图像”将目标对象恢复为它在“第1帧”中的默认外观。“设置导航栏图像”将切片设置为Fireworks导航栏的一部分。作为导航栏一部分的每个切片都必须具有此行为。“设置导航栏图像”选项实际上是一个包含“滑过导航栏”、“按下导