切片变换图像和热点精选PPT.ppt

《切片变换图像和热点精选PPT.ppt》由会员分享，可在线阅读，更多相关《切片变换图像和热点精选PPT.ppt（33页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、切片变换图像和热点切片变换图像和热点第1页，此课件共33页哦第第12课：切片、变换图像和热点课：切片、变换图像和热点 n n切片是切片是 Macromedia Fireworks 8 Macromedia Fireworks 8 中用于创建交互性的基本构造块。切片是网页对象中用于创建交互性的基本构造块。切片是网页对象 ,它们不是以图它们不是以图像的形式存在，而是最终以像的形式存在，而是最终以 HTML HTML 代码的形式出现。可以通过代码的形式出现。可以通过“层层”面板中的面板中的“网页层网页层”查看、选择和重查看、选择和重命名它们。本章描述切片的主要概念，并提供了使用切片将交互性结合到网页

2、中的步骤。命名它们。本章描述切片的主要概念，并提供了使用切片将交互性结合到网页中的步骤。n n使用拖放变换图像方法将交互性附加到切片，可以在工作区中快速创建变换图像和交换图像效果。可以在使用拖放变换图像方法将交互性附加到切片，可以在工作区中快速创建变换图像和交换图像效果。可以在“行为行为”面板中查看指定的行为并使用此面板创建更复杂的交互。面板中查看指定的行为并使用此面板创建更复杂的交互。n n还可以使用热点将交互性结合到网页中。热点用于创建图像映射，即在还可以使用热点将交互性结合到网页中。热点用于创建图像映射，即在 HTML HTML 文档中定义热区文档中定义热区 的的 HTML HTML 代

3、码。这些区域不一定链接到某个地方；它们可能只是触发一个行为或定义替代文本。热点还可以接收鼠标代码。这些区域不一定链接到某个地方；它们可能只是触发一个行为或定义替代文本。热点还可以接收鼠标事件，使得事件，使得 JavaScript JavaScript 行为在切片中起作用。行为在切片中起作用。n n本章包含以下主题：本章包含以下主题：n n创建和编辑切片创建和编辑切片创建和编辑切片创建和编辑切片n n使切片交互使切片交互使切片交互使切片交互n n准备切片以供导出准备切片以供导出准备切片以供导出准备切片以供导出n n使用热点和图像映射使用热点和图像映射使用热点和图像映射使用热点和图像映射第2页，此

4、课件共33页哦创建和编辑切片创建和编辑切片n n切片将切片将 Fireworks Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks Fireworks 还创建一个包含表格代码的还创建一个包含表格代码的 HTML HTML 文件，以便在浏览器中重新组合图形。文件，以便在浏览器中重新组合图形。n n切片将一个文档分割成多个部分，它们都以单独文件的形式导出。切片将一个文档分割成多个部分，它们都以单独文件的形式导出。切片将一个文档分割成多个部分，它们都以单独文件的形式导出。切片将一个文档分割成

5、多个部分，它们都以单独文件的形式导出。n n将图像切片至少有三个主要优点：将图像切片至少有三个主要优点：n n“优化优化优化优化”网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使您可网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。有关更多信息，请参阅以使用最适合的文件格式和压缩设置来优化每个独立切片。有关更多信息，请参阅优化优化和导出和导出。n n“交互性交互性交互性交互性”您可以使用切片来创建响应鼠标事件的区域。有关如何使切片具有交互性的信息，请参您可以使用切片来创建响应鼠标事件的区域。有关如何使切片具有

6、交互性的信息，请参阅阅使切片交互使切片交互。n n“更新网页的某些部分更新网页的某些部分更新网页的某些部分更新网页的某些部分”切片使您可以轻松地更新网页中经常更改的部分。例如，贵公司切片使您可以轻松地更新网页中经常更改的部分。例如，贵公司的网页中可能包含每月更改一次的的网页中可能包含每月更改一次的“本月雇员本月雇员”部分。切片使您可以快速更改雇员的姓部分。切片使您可以快速更改雇员的姓名和照片而不用更换整个网页。名和照片而不用更换整个网页。第3页，此课件共33页哦创建创建 HTML 切片切片n nHTML HTML 切片指定浏览器中出现普通切片指定浏览器中出现普通 HTML HTML 文本的区域

7、。文本的区域。HTML HTML 切片不导出图像，切片不导出图像，它导出出现在由切片定义的表格单元格中的它导出出现在由切片定义的表格单元格中的 HTML HTML 文本。文本。n n若要创建若要创建若要创建若要创建 HTML HTML 切片：切片：切片：切片：1.1.绘制切片对象并将其保留为选定状态。绘制切片对象并将其保留为选定状态。2.2.在在“属性属性”检查器中，从检查器中，从“类型类型”弹出菜单中选择弹出菜单中选择“HTML”HTML”。3.3.单击单击“编辑编辑”。4.4.在在“编辑编辑 HTML HTML 切片切片”窗口中键入文本，如果需要，通过添加窗口中键入文本，如果需要，通过添加

8、 HTML HTML 文本格式文本格式设置标记来设置文本的格式。设置标记来设置文本的格式。注意：注意：注意：注意：或者，可以在使用文本编辑器或或者，可以在使用文本编辑器或 HTML HTML 编辑编辑器（如器（如 Macromedia DreamweaverMacromedia Dreamweaver）导出）导出 HTML HTML 后，将后，将 HTML HTML 文本格式设置标记添加到文本格式设置标记添加到 HTMLHTML。5.5.单击单击“确定确定”以应用更改并关闭以应用更改并关闭“编辑编辑 HTML HTML 切片切片”窗口。窗口。您输入的文本和您输入的文本和 HTML HTML 标

9、记以原始标记以原始 HTML HTML 代码的形式出现在代码的形式出现在 Fireworks PNG Fireworks PNG 文件中切片的正文上。文件中切片的正文上。n n注意：注意：注意：注意：在不同的浏览器以及不同的操作系统中查看在不同的浏览器以及不同的操作系统中查看 HTML HTML 文本切片时，它们的文本切片时，它们的外观可能会有所变化，这是因为浏览器中可以设置字体大小和类型。外观可能会有所变化，这是因为浏览器中可以设置字体大小和类型。第4页，此课件共33页哦创建非矩形切片创建非矩形切片n n当试图将交互性附加到非矩形图像时，矩形切片可能无法满足需要。例如，如果打算将变换图像行为

10、附加到切片，当试图将交互性附加到非矩形图像时，矩形切片可能无法满足需要。例如，如果打算将变换图像行为附加到切片，而切片对象互相重叠或者形状不规则，则矩形切片可能会与交换图像交换出非您所要的背景图形。而切片对象互相重叠或者形状不规则，则矩形切片可能会与交换图像交换出非您所要的背景图形。Fireworks Fireworks 解决此解决此问题的方法是：允许您使用问题的方法是：允许您使用“多边形切片多边形切片”工具绘制任何多边形形状的切片。工具绘制任何多边形形状的切片。n n您也可以在矢量路径的顶部插入切片，以便创建不规则的切片形状。您也可以在矢量路径的顶部插入切片，以便创建不规则的切片形状。n n

11、若要绘制多边形切片对象：若要绘制多边形切片对象：若要绘制多边形切片对象：若要绘制多边形切片对象：1.1.选择选择“多边形切片多边形切片”工具。工具。2.2.单击以放置多边形的矢量点。单击以放置多边形的矢量点。“多边形切片多边形切片”工具仅绘制直线段。工具仅绘制直线段。3.3.当在具有柔边的对象周围绘制多边形切片对象时，请确保包括整个对象，以免在切片图形中创建多余的实边。当在具有柔边的对象周围绘制多边形切片对象时，请确保包括整个对象，以免在切片图形中创建多余的实边。4.4.若要停止使用若要停止使用“多边形切片多边形切片”工具，请从工具，请从“工具工具”面板中选择另一个工具。不必再次单击第一个点以

12、关闭多边形。面板中选择另一个工具。不必再次单击第一个点以关闭多边形。n n注意：注意：注意：注意：请小心不要过度使用多边形切片，这是因为与类似的矩形切片相比，它们需要更多的请小心不要过度使用多边形切片，这是因为与类似的矩形切片相比，它们需要更多的 JavaScript JavaScript 代码。使用太多的多代码。使用太多的多边形切片可能会增加边形切片可能会增加 Web Web 浏览器的处理时间。浏览器的处理时间。n n若要从矢量对象或路径创建矩形切片或多边形切片：若要从矢量对象或路径创建矩形切片或多边形切片：若要从矢量对象或路径创建矩形切片或多边形切片：若要从矢量对象或路径创建矩形切片或多边

13、形切片：n n选择一个矢量路径。选择一个矢量路径。n n选择选择“编辑编辑”“插入插入”“插入矩形切片插入矩形切片”或或“插入多边形切片插入多边形切片”（具体取决于需要的形状）。（具体取决于需要的形状）。第5页，此课件共33页哦查看并显示切片和切片辅助线查看并显示切片和切片辅助线n n可以使用“层”面板和“工具”面板控制文档中切片和其它网页对象的可见性。当关闭整个文档的切片可见性时，切片辅助线也将被隐藏。n n使用“属性”检查器，可以通过为每个切片对象指定唯一的颜色来组织切片。您也可以通过“视图”菜单更改切片辅助线的颜色。第6页，此课件共33页哦在“层”面板中查看切片n n“网页层”显示文档中

14、的所有网页对象，以便可以选择并查看每个网页对象。n n若要在若要在“层层”面板中查看并选择切片：面板中查看并选择切片：n n选择“窗口”“层”以打开“层”面板。n n单击加号(+)按钮（在 Windows 中）或三角形（在 Macintosh 中）展开“网页层”。“网页层”显示文档中当前网页对象的完整列表。n n单击一个切片名称以选择该切片。切片在“网页层”中高亮显示，并且在画布上处于选定状态。第7页，此课件共33页哦显示和隐藏切片显示和隐藏切片n n隐藏一个切片时可使该切片在隐藏一个切片时可使该切片在 Fireworks PNG Fireworks PNG 文件中不可见。可以关闭全部或某些文

15、件中不可见。可以关闭全部或某些网页对象。由于切片是网页对象，因此它们在网页对象。由于切片是网页对象，因此它们在“层层”面板中的面板中的“网页层网页层”下面列下面列出，在此处可以打开或关闭所选切片的可见性。也可以通过出，在此处可以打开或关闭所选切片的可见性。也可以通过“工具工具”面板控制切面板控制切片可见性。隐藏一个切片对象时并不会阻止将该切片导出到片可见性。隐藏一个切片对象时并不会阻止将该切片导出到 HTMLHTML。n n若要隐藏和显示特定的切片和热点：若要隐藏和显示特定的切片和热点：若要隐藏和显示特定的切片和热点：若要隐藏和显示特定的切片和热点：n n 在在“层层”面板中单击各个网页对象旁

16、边的眼睛图标。面板中单击各个网页对象旁边的眼睛图标。n n在在“眼睛眼睛”列中单击以重新打开可见性。当网页对象再次可见时，眼睛图标将重新出现。列中单击以重新打开可见性。当网页对象再次可见时，眼睛图标将重新出现。n n若要隐藏或显示所有热点、切片和辅助线，请执行下列操作之一：若要隐藏或显示所有热点、切片和辅助线，请执行下列操作之一：若要隐藏或显示所有热点、切片和辅助线，请执行下列操作之一：若要隐藏或显示所有热点、切片和辅助线，请执行下列操作之一：n n在在“工具工具”面板的面板的“Web”Web”工具部分中单击适当的工具部分中单击适当的“隐藏隐藏/显示切片显示切片”按钮。按钮。n n n n在在

17、“层层”面板中，单击面板中，单击“网页层网页层”旁边的眼睛图标。旁边的眼睛图标。n n若要在任何文档视图中隐藏或显示切片辅助线：若要在任何文档视图中隐藏或显示切片辅助线：若要在任何文档视图中隐藏或显示切片辅助线：若要在任何文档视图中隐藏或显示切片辅助线：n n选择选择“视图视图”“切片辅助线切片辅助线”。第8页，此课件共33页哦更改切片和切片辅助线颜色更改切片和切片辅助线颜色n n如果文档中使用的颜色与切片颜色相似，则在文档中区分对如果文档中使用的颜色与切片颜色相似，则在文档中区分对象和切片会很困难。为了易于查看，您可以为选定的切片指象和切片会很困难。为了易于查看，您可以为选定的切片指定一个新

18、颜色。为各个切片指定唯一的颜色还有助于对它们定一个新颜色。为各个切片指定唯一的颜色还有助于对它们进行组织。您也可以改变切片辅助线的颜色。进行组织。您也可以改变切片辅助线的颜色。n n注意：注意：注意：注意：当预览文档时，取消选择的切片显示为白色层叠。当预览文档时，取消选择的切片显示为白色层叠。n n若要更改所选切片对象的颜色：若要更改所选切片对象的颜色：若要更改所选切片对象的颜色：若要更改所选切片对象的颜色：n n在在“属性属性”检查器中，从颜色框中选择一种新颜色。检查器中，从颜色框中选择一种新颜色。n n若要更改切片辅助线的颜色：若要更改切片辅助线的颜色：若要更改切片辅助线的颜色：若要更改切

19、片辅助线的颜色：n n选择选择“视图视图”“辅助线辅助线”“编辑辅助线编辑辅助线”。n n从从“辅助线辅助线”对话框的对话框的“切片颜色切片颜色”部分中选择新颜色，并单击部分中选择新颜色，并单击“确定确定”。第9页，此课件共33页哦编辑切片编辑切片n n在在 Fireworks Fireworks 中，可以像处理文字处理应用程序中的表格中，可以像处理文字处理应用程序中的表格一样处理切片布局。当拖动切片辅助线以调整切片大小时，一样处理切片布局。当拖动切片辅助线以调整切片大小时，Fireworks Fireworks 也将自动调整所有相邻的矩形切片的大小。也将自动调整所有相邻的矩形切片的大小。另外

20、，可以使用另外，可以使用“属性属性”检查器来调整切片大小以检查器来调整切片大小以及将切片变形，就像对待矢量对象和位图对象一样。及将切片变形，就像对待矢量对象和位图对象一样。n n移动切片辅助线以编辑切片移动切片辅助线以编辑切片n n使用工具编辑切片对象使用工具编辑切片对象:可以使用可以使用“指针指针”、“部分选部分选定定”和和“变形变形”工具更改切片的形状或调整切片的大小。工具更改切片的形状或调整切片的大小。您只能倾斜和扭曲多边形切片。您只能倾斜和扭曲多边形切片。n n使用使用“属性属性”检查器或检查器或“信息信息”面板编辑切片对象面板编辑切片对象第10页，此课件共33页哦使切片具有简单的交互

21、效果使切片具有简单的交互效果n n拖放变换图像方法是创建变换图像和交换图像效果的快速而有效的方法。拖放变换图像方法是创建变换图像和交换图像效果的快速而有效的方法。n n具体说来，拖放变换图像方法使您可以确定指针经过一个切片时该切片所发生的变化。最终结果通具体说来，拖放变换图像方法使您可以确定指针经过一个切片时该切片所发生的变化。最终结果通常称为变换图像。变换图像是在网页浏览器中当指针经过其上方移动时，其外观发生更改的图形。常称为变换图像。变换图像是在网页浏览器中当指针经过其上方移动时，其外观发生更改的图形。n n当选定切片时，一个带有十字的圆圈出现在切片的中央。这称为行为手柄。当选定切片时，一

22、个带有十字的圆圈出现在切片的中央。这称为行为手柄。n n通过从触发切片拖动行为手柄并将其放置在目标切片上，可以轻松地创建变换图像和交换图像效果。通过从触发切片拖动行为手柄并将其放置在目标切片上，可以轻松地创建变换图像和交换图像效果。触发器和目标可以是同一切片触发器和目标可以是同一切片 n n热点也具有用于结合变换图像效果的行为手柄。热点也具有用于结合变换图像效果的行为手柄。第11页，此课件共33页哦变换图像变换图像n n变换图像的工作方式都是一样的。当指针滑过一个图形时，该图形将触变换图像的工作方式都是一样的。当指针滑过一个图形时，该图形将触发另一个图形的显示。触发器始终是一个网页对象发另一个

23、图形的显示。触发器始终是一个网页对象 切片、热点或按钮。切片、热点或按钮。n n最简单的变换图像是将第最简单的变换图像是将第 1 1 帧中的一个图像与紧挨着它的下面第帧中的一个图像与紧挨着它的下面第 2 2 帧中的图像交帧中的图像交换。您还可以生成更复杂的变换图像。交换图像的变换图像可以交换来自任换。您还可以生成更复杂的变换图像。交换图像的变换图像可以交换来自任何帧的图像；不相交变换图像交换来自除触发器切片之外的切片中的图像。何帧的图像；不相交变换图像交换来自除触发器切片之外的切片中的图像。n n当在当在 Fireworks Fireworks 中选择一个使用行为手柄或中选择一个使用行为手柄或

24、“行为行为”面板创建的触发器网页对面板创建的触发器网页对象时，将显示它的所有行为关系。默认情况下，变换图像交互由一条蓝色行象时，将显示它的所有行为关系。默认情况下，变换图像交互由一条蓝色行为线表示。为线表示。第12页，此课件共33页哦创建简单的变换图像创建简单的变换图像n n简单变换图像在顶部帧正下方的帧中进行交换，并且只涉及一个切片。简单变换图像在顶部帧正下方的帧中进行交换，并且只涉及一个切片。n n简单变换图像附加到切片：简单变换图像附加到切片：简单变换图像附加到切片：简单变换图像附加到切片：1.1.确保该触发器对象不在共享层上。确保该触发器对象不在共享层上。2.2.选择选择“编辑编辑”“

25、插入插入”“切片切片”以在触发器对象上方创建切片。以在触发器对象上方创建切片。3.3.单击单击“新建新建/复制帧复制帧”按钮在按钮在“帧帧”面板中创建一个新帧。面板中创建一个新帧。4.4.创建、粘贴或导入用作新帧上的交换图像的图像。创建、粘贴或导入用作新帧上的交换图像的图像。将该图像放在步骤将该图像放在步骤 2 2 中创中创建的切片的下方（即使您现在位于第建的切片的下方（即使您现在位于第 2 2 帧中，该切片仍然可见）。切片在所帧中，该切片仍然可见）。切片在所有帧中都是可见的。有帧中都是可见的。5.5.在在“帧帧”面板中选择面板中选择“第第 1 1 帧帧”返回到包含原始图像的帧。返回到包含原始

26、图像的帧。6.6.选择切片并将指针放在行为手柄上方。指针随即变为手形。选择切片并将指针放在行为手柄上方。指针随即变为手形。注意：注意：注意：注意：您可在任何帧中选择该切片。您可在任何帧中选择该切片。7.7.单击行为手柄，并从菜单中选择单击行为手柄，并从菜单中选择“简单变换图像简单变换图像”。8.8.单击单击“预览预览”选项卡并测试简单变换图像，或者按选项卡并测试简单变换图像，或者按 F12 F12 键在浏览器中预键在浏览器中预览它览它。n n 第13页，此课件共33页哦创建不相交变换图像创建不相交变换图像n n当指针在一个网页对象上方滚动时，不相交变换图像交换另一个网页对象下方的图像。当指针滑

27、过或单击一个触发器图像时，当指针在一个网页对象上方滚动时，不相交变换图像交换另一个网页对象下方的图像。当指针滑过或单击一个触发器图像时，作为响应，在网页的另一个位置中出现一个图像。鼠标滑过的图像被视为触发器；发生更改的图像被视为目标。作为响应，在网页的另一个位置中出现一个图像。鼠标滑过的图像被视为触发器；发生更改的图像被视为目标。n n与仅使用一个切片的简单变换图像一样，首先必须对触发器、目标切片和交换图像所驻留的帧进行设置。然后，可与仅使用一个切片的简单变换图像一样，首先必须对触发器、目标切片和交换图像所驻留的帧进行设置。然后，可以使用一条行为线将触发器链接到目标切片。以使用一条行为线将触发

28、器链接到目标切片。n n若要将不相交变换图像附加到所选图像：若要将不相交变换图像附加到所选图像：若要将不相交变换图像附加到所选图像：若要将不相交变换图像附加到所选图像：1.1.选择选择“编辑编辑”“插入插入”“切片切片”或或“热点热点”，将切片或热点附加到触发器图像。，将切片或热点附加到触发器图像。注意：注意：注意：注意：如果所选对象是按钮，或者如果切片或热点已经覆盖图如果所选对象是按钮，或者如果切片或热点已经覆盖图像，则无需执行此步骤。像，则无需执行此步骤。2.2.单击单击“帧帧”面板中的面板中的“新建新建/复制帧复制帧”按钮创建一个新帧。按钮创建一个新帧。3.3.在画布上所需位置的新帧中再

29、放置一个用作目标的图像。可将该图像放在任何位置（除了在步骤在画布上所需位置的新帧中再放置一个用作目标的图像。可将该图像放在任何位置（除了在步骤 1 1 创建的切片下方以外）。创建的切片下方以外）。4.4.选择图像，然后选择选择图像，然后选择“编辑编辑”“插入插入”“切片切片”将切片附加到图像。将切片附加到图像。5.5.在在“帧帧”面板中选择面板中选择“第第 1 1 帧帧”返回到包含原始图像的帧。返回到包含原始图像的帧。6.6.选择覆盖触发器区域（原始图像）的切片、热点或按钮，然后将指针放在行为手柄上。指针随即变为手形。选择覆盖触发器区域（原始图像）的切片、热点或按钮，然后将指针放在行为手柄上。

30、指针随即变为手形。7.7.将触发器切片或热点的行为手柄拖到在步骤将触发器切片或热点的行为手柄拖到在步骤 4 4 中创建的目标切片。中创建的目标切片。出现一条从触发器中心延伸到目标切片左上角的行为线，同时出现一条从触发器中心延伸到目标切片左上角的行为线，同时打开打开“交换图像交换图像”对话框。对话框。8.8.从从“交换图像自交换图像自”弹出菜单中，选择在步骤弹出菜单中，选择在步骤 2 2 中创建的帧，然后单击中创建的帧，然后单击“确定确定”。9.9.单击单击“预览预览”按钮以预览和测试不相交变换图像。按钮以预览和测试不相交变换图像。第14页，此课件共33页哦将多个变换图像应用到切片将多个变换图像

31、应用到切片 n n您可以从单个切片中拖动多个行为手柄来创建多您可以从单个切片中拖动多个行为手柄来创建多个变换行为。例如，您可以从同一切片中触发一个变换行为。例如，您可以从同一切片中触发一个变换图像和一个不相交变换图像。个变换图像和一个不相交变换图像。n n若要将多个变换图像应用到所选切片：若要将多个变换图像应用到所选切片：若要将多个变换图像应用到所选切片：若要将多个变换图像应用到所选切片：1.1.将行为手柄从所选切片拖到同一切片的边缘或其它切片将行为手柄从所选切片拖到同一切片的边缘或其它切片上。上。将手柄拖动到同一切片的左上边缘时可创建一个交将手柄拖动到同一切片的左上边缘时可创建一个交换图像，

32、将手柄拖动到其它切片时可创建不相交变换图换图像，将手柄拖动到其它切片时可创建不相交变换图像。像。2.2.选择交换图像的帧，然后单击选择交换图像的帧，然后单击“确定确定”。3.3.根据需要，重复执行步骤根据需要，重复执行步骤 1 1 和和 2 2 可以创建多个变换图像。可以创建多个变换图像。第15页，此课件共33页哦删除拖放变换图像删除拖放变换图像n n您可以轻松地从切片、热点或按钮中删除拖放变换图像。n n若要从所选网页对象或按钮中删除拖放变若要从所选网页对象或按钮中删除拖放变换图像：换图像：n n单击要删除的蓝色行为线。n n单击“确定”即可删除交换图像行为。第16页，此课件共33页哦用用“

33、行为行为”面板向切片添加交互效果面板向切片添加交互效果 n n除变换图像以外，还可使用除变换图像以外，还可使用“行为行为”面板向切片中附加其它类型的交互效果。可通过编辑现有行为来创建自定义交互。面板向切片中附加其它类型的交互效果。可通过编辑现有行为来创建自定义交互。n n注意：注意：注意：注意：尽管可以使用尽管可以使用“行为行为”面板创建简单、不相交和复杂的变换图像，但还是建议使用拖放变换图像的面板创建简单、不相交和复杂的变换图像，但还是建议使用拖放变换图像的方法。方法。n n“简单变换图像简单变换图像简单变换图像简单变换图像”通过将通过将“第第 1 1 帧帧”用作用作“弹起弹起”状态以及将状

34、态以及将“第第 2 2 帧帧”用作用作“滑过滑过”状态来向所选切片添加变状态来向所选切片添加变换图像行为。选择此行为后，需要使用同一切片在第换图像行为。选择此行为后，需要使用同一切片在第 2 2 帧中创建一个图像以创建帧中创建一个图像以创建“滑过滑过”状态。状态。“简单变换简单变换图像图像”选项实际上是包含选项实际上是包含“交换图像交换图像”和和“恢复交换图像恢复交换图像”行为的行为组。行为的行为组。n n“交换图像交换图像交换图像交换图像”使用另一个帧的内容或外部文件的内容来替换指定切片下面的图像。使用另一个帧的内容或外部文件的内容来替换指定切片下面的图像。n n“恢复交换图像恢复交换图像恢

35、复交换图像恢复交换图像”将目标对象恢复为它在将目标对象恢复为它在“第第 1 1 帧帧”中的默认外观。中的默认外观。n n“设置导航栏图像设置导航栏图像设置导航栏图像设置导航栏图像”将切片设置为将切片设置为 Fireworks Fireworks 导航栏的一部分。作为导航栏一部分的每个切片都必须具有此行为。导航栏的一部分。作为导航栏一部分的每个切片都必须具有此行为。“设置导航栏图设置导航栏图像像”选项实际上是一个包含选项实际上是一个包含“滑过导航栏滑过导航栏”、“按下导航栏按下导航栏”和和“恢复导航栏恢复导航栏”等行为的行为组。当使用按钮编辑器创建一个包含等行为的行为组。当使用按钮编辑器创建一个

36、包含“包括包括按下时滑过按下时滑过”状态或状态或“载入时显示按下图像载入时显示按下图像”状态的按钮时，在默认情况下自动为您设置此行为。当创建两种状态的按钮时，会为其切片状态的按钮时，在默认情况下自动为您设置此行为。当创建两种状态的按钮时，会为其切片指定简单变换图像行为。当创建三种或四种状态的按钮时，会为其切片指定指定简单变换图像行为。当创建三种或四种状态的按钮时，会为其切片指定“设置导航栏图像设置导航栏图像”行为。有关按钮的更多信息，请参阅行为。有关按钮的更多信息，请参阅创创建按钮元件建按钮元件。n n“滑过导航栏滑过导航栏滑过导航栏滑过导航栏”为作为导航栏一部分的当前所选切片指定为作为导航栏

37、一部分的当前所选切片指定“滑过滑过”状态，还可根据需要指定状态，还可根据需要指定“预先载入图像预先载入图像”状态和状态和“包括包括按下时的滑过按下时的滑过”状态。状态。n n“按下导航栏按下导航栏按下导航栏按下导航栏”为作为导航栏一部分的当前所选切片指定为作为导航栏一部分的当前所选切片指定“按下按下”状态，并根据需要指定状态，并根据需要指定“预先载入图像预先载入图像”状态。状态。n n“恢复导航栏恢复导航栏恢复导航栏恢复导航栏”将导航栏中的所有其它切片恢复到它们的将导航栏中的所有其它切片恢复到它们的“弹起弹起”状态。状态。n n“设置弹出菜单设置弹出菜单设置弹出菜单设置弹出菜单”将弹出菜单附加

38、到切片或热点上。当应用弹出菜单行为时，您可以使用将弹出菜单附加到切片或热点上。当应用弹出菜单行为时，您可以使用“弹出菜单编辑器弹出菜单编辑器”。有关更多。有关更多信息，请参阅信息，请参阅创建弹出菜单创建弹出菜单。n n“设置状态栏文本设置状态栏文本设置状态栏文本设置状态栏文本”使您能够定义在大多数浏览器窗口底部的状态栏中显示的文本。使您能够定义在大多数浏览器窗口底部的状态栏中显示的文本。第17页，此课件共33页哦附加行为附加行为n n使用使用“行为行为”面板，可以向切片附加行为。还可以面板，可以向切片附加行为。还可以附加多个行为。附加多个行为。n n若要使用若要使用若要使用若要使用“行为行为行

39、为行为”面板向所选切片附加行为：面板向所选切片附加行为：面板向所选切片附加行为：面板向所选切片附加行为：n n单击单击“行为行为”面板中的面板中的“添加行为添加行为”按钮（按钮（“加号加号”按按钮）。钮）。n n通过通过“添加行为添加行为”按钮选择一个行为。按钮选择一个行为。第18页，此课件共33页哦编辑行为编辑行为n n“行为行为”面板还使您能够对现有行为进行编辑。可以指定触发该面板还使您能够对现有行为进行编辑。可以指定触发该行为的鼠标事件类型（如行为的鼠标事件类型（如 onClickonClick）。）。n n注意：注意：注意：注意：不能更改不能更改“简单变换图像简单变换图像”和和“设置导

40、航栏图像设置导航栏图像”事件。事件。n n若要更改激活该行为的鼠标事件：若要更改激活该行为的鼠标事件：若要更改激活该行为的鼠标事件：若要更改激活该行为的鼠标事件：n n选择包含要修改的行为的触发器切片或热点。选择包含要修改的行为的触发器切片或热点。与该切片或热点关联的所有行与该切片或热点关联的所有行为都显示在为都显示在“行为行为”面板中。面板中。n n选择要编辑的行为。选择要编辑的行为。n n单击事件旁边的箭头，然后从弹出菜单中选择一个新事件：单击事件旁边的箭头，然后从弹出菜单中选择一个新事件：n n “onMouseOver”onMouseOver”在指针滑过触发器区域时触发行为。在指针滑过

41、触发器区域时触发行为。n n“onMouseOut”onMouseOut”在指针离开触发器区域时触发行为。在指针离开触发器区域时触发行为。n n“onClick”onClick”在单击触发器对象时触发行为。在单击触发器对象时触发行为。n n“onLoad”onLoad”在载入网页时触发行为。在载入网页时触发行为。第19页，此课件共33页哦使用外部图像文件作为交换图像使用外部图像文件作为交换图像n n可以将当前可以将当前 Fireworks Fireworks 文档外部的图像用作交换图像的来源。源图像可以是文档外部的图像用作交换图像的来源。源图像可以是 GIFGIF、GIF GIF 动画、动画、

42、JPEG JPEG 或或 PNG PNG 格式。如果选择将外部文件作为图像源，则在格式。如果选择将外部文件作为图像源，则在 Web Web 浏览器中触发交换图像时，浏览器中触发交换图像时，Fireworks Fireworks 会将该文件与目标切片相交换。会将该文件与目标切片相交换。n n该文件的宽度和高度必须与它交换到的切片相同。如果不相同，则浏览该文件的宽度和高度必须与它交换到的切片相同。如果不相同，则浏览器将调整该文件的大小使之适合切片对象。调整文件大小时可能降低文器将调整该文件的大小使之适合切片对象。调整文件大小时可能降低文件质量，尤其是件质量，尤其是 GIF GIF 动画的质量。动画

43、的质量。n n若要选择外部图像文件作为交换图像的来源：若要选择外部图像文件作为交换图像的来源：若要选择外部图像文件作为交换图像的来源：若要选择外部图像文件作为交换图像的来源：n n在在“交换图像交换图像”、“滑过导航栏滑过导航栏”或或“按下导航栏按下导航栏”对话框中，选择对话框中，选择“图像文件图像文件”，然，然后单击文件夹图标。后单击文件夹图标。注意：注意：注意：注意：如果在如果在“交换图像交换图像”对话框中未看到此选项，请选择对话框中未看到此选项，请选择“更更多选项多选项”，然后执行步骤，然后执行步骤 1 1。n n导航到要使用的文件，然后单击导航到要使用的文件，然后单击“打开打开”。n

44、n如果需要，请取消选择如果需要，请取消选择“预先载入图像预先载入图像”（如果外部文件是（如果外部文件是 GIF GIF 动画）。动画）。预缓预缓存可能妨碍将存可能妨碍将 GIF GIF 动画显示为变换图像状态。为了避免此问题，请在设置变换图动画显示为变换图像状态。为了避免此问题，请在设置变换图像时取消选择像时取消选择“预先载入图像预先载入图像”。第20页，此课件共33页哦准备切片以供导出准备切片以供导出n n使用使用“属性属性”检查器，可通过向切片指定链接和目标框架来使它们具有交互效果。还可以指检查器，可通过向切片指定链接和目标框架来使它们具有交互效果。还可以指定在图像正在载入时浏览器中显示的

45、替换文本。此外，还可选择一种导出文件格式来优化所定在图像正在载入时浏览器中显示的替换文本。此外，还可选择一种导出文件格式来优化所选切片。如果选切片。如果“属性属性”检查器处于最小化状态，单击右下角的扩展箭头可看到所有切片属性。检查器处于最小化状态，单击右下角的扩展箭头可看到所有切片属性。n n“属性属性属性属性”检查器中的切片属性检查器中的切片属性检查器中的切片属性检查器中的切片属性n n使用使用“属性属性”检查器或检查器或“层层”面板，可以为切片提供唯一的名称。面板，可以为切片提供唯一的名称。Fireworks Fireworks 使用您指定的使用您指定的名称来命名在导出时从切片生成的文件。

46、如果您未在名称来命名在导出时从切片生成的文件。如果您未在“属性属性”检查器或检查器或“层层”面板中输入切片名称，面板中输入切片名称，则则 Fireworks Fireworks 将在导出时自动命名切片。可通过将在导出时自动命名切片。可通过“HTML HTML 设置设置”对话框更改对话框更改 Fireworks Fireworks 使用的自动命名使用的自动命名惯例。惯例。n nFireworks Fireworks 将经过切片的将经过切片的 Fireworks Fireworks 文档导出为一个文档导出为一个 HTML HTML 文件和一系列图形文件。可以使用文件和一系列图形文件。可以使用“HT

47、ML HTML 设置设置”对话框定义导出的对话框定义导出的 HTML HTML 文件的属性。文件的属性。第21页，此课件共33页哦指定指定 URLn nURL（即统一资源定位器）是 Internet 上特定页或文件的地址。为切片指定 URL 后，用户可通过在其 Web 浏览器中单击切片所定义的区域来导航到该地址。n n若要为所选切片指定若要为所选切片指定 URL：n n在“属性”检查器的“链接”文本框中输入一个 URL。第22页，此课件共33页哦输入替换文本输入替换文本n n从网页中下载图像时，替换文本出现在图像占位符上；从网页中下载图像时，替换文本出现在图像占位符上；替换文本还替换未能下载的

48、图形。在某些较新版本的浏替换文本还替换未能下载的图形。在某些较新版本的浏览器中，该文本还出现在指针旁边作为工具提示。览器中，该文本还出现在指针旁边作为工具提示。n n输入简短而有意义的替换文本在网页设计中已经变得越输入简短而有意义的替换文本在网页设计中已经变得越来越重要。越来越多的视觉障碍人士在使用屏幕朗读应来越重要。越来越多的视觉障碍人士在使用屏幕朗读应用程序，当指针经过网页上的图形时，该应用程序将替用程序，当指针经过网页上的图形时，该应用程序将替换文本转换为计算机生成的语音。换文本转换为计算机生成的语音。n n若要为所选切片或热点指定替换文本：若要为所选切片或热点指定替换文本：若要为所选切

49、片或热点指定替换文本：若要为所选切片或热点指定替换文本：n n在在“属性属性”检查器的检查器的“替换文本替换文本”框中键入文本。框中键入文本。第23页，此课件共33页哦指定目标指定目标n n目标是在其中打开链接文档的替换网页框架或网页浏览器窗口。目标是在其中打开链接文档的替换网页框架或网页浏览器窗口。可以在可以在“属性属性”检查器中为所选切片指定目标。如果检查器中为所选切片指定目标。如果“属性属性”检查器处于最小化状态，单击扩展箭头可看到所有属性。检查器处于最小化状态，单击扩展箭头可看到所有属性。n n若要在若要在若要在若要在“属性属性属性属性”检查器中为所选切片或热点指定目标：检查器中为所选

50、切片或热点指定目标：检查器中为所选切片或热点指定目标：检查器中为所选切片或热点指定目标：n n在在“目标目标”文本框中键入文本框中键入 HTML HTML 框架的名称或从框架的名称或从“目标目标”弹出菜单中弹出菜单中选择一个保留目标：选择一个保留目标：n n“blank”blank”将链接文档加载到一个新的未命名浏览器窗口中。将链接文档加载到一个新的未命名浏览器窗口中。n n“parent”parent”将链接的文档加载到包含该链接的框架的父框架集或窗口中。如将链接的文档加载到包含该链接的框架的父框架集或窗口中。如果包含该链接的框架不是嵌套的，则将链接的文档加载到整个浏览器窗口。果包含该链接的