第九章切片、变换图像和热点

第9章切片、变换图像和热点

切片9.1使切片交互9.2将准备的切片导出9.3使用热点和图像映射9.49.1切片9.1.1创建切片9.1.2查看并显示切片和切片辅助线9.1.3编辑切片9.2使切片交互9.2.1使切片具有简单的交互效果9.2.2使用“行为”面板向切片添加交互效果9.3将准备的切片导出9.3.1指定URL9.3.2

输入替换文本9.3.3

指定目标9.3.4命名切片9.4使用热点和图像映射9.4.1创建热点9.4.2编辑热点9.4.3用热点创建图像映射9.4.4用热点创建变换图像9.4.5在切片上使用热点9.1切片

切片是Fireworks中用于创建交互效果的基本构造，它是最终以HTML代码形式存在的网页对象。9.1.1创建切片

“工具”面板“Web”工具组中的“切片”工具，可以创建切片对象。使用“切片”工具，可以在对象上创建矩形切片和多边形切片。创建矩形切片选择“切片”工具后，拖动，即可绘制切片对象。创建的切片对象出现在“网页层”中，从切片对象延伸的线是切片辅助线。切片辅助线可以确定导出文档时将文档拆分成的单独图像文件的边界。创建多边形切片从矢量对象或路径创建多边形切片时，首先选择矢量路径，然后单击“编辑”菜单中的“插入”→“插入多边形切片”命令，即可创建。创建HTML切片HTML切片不导出图像，它导出由切片定义的表格单元格中的HTML文本。创建HTML切片，则首先绘制切片对象并将其保留为选定状态，在“属性”检查器的“类型”下拉菜单中选择“HTML”，然后单击“编辑”按钮，在“编辑HTML切片”对话框中编辑完成后，单击“确定”。9.1.2查看并显示切片和切片辅助线当在文档的对象上创建切片后，对文档进行编辑，将会影响编辑效果。因此，可以通过“图层”面板和“工具”面板将文档中的切片对象进行隐藏，当隐藏切片时，切片辅助线也将被隐藏，还可以为每个切片对象指定唯一的颜色或更改切片辅助线的颜色。查看切片切片要在“图层”面板中点击查看。首先展开“网页层”，在“网页层”内单击切片名称，选中该切片。此时该切片在“网页层”中高亮显示，并且在画布上处于选定状态。单击“网页层”右上角的按钮，可以选中文档中所有的切片。显示和隐藏切片

隐藏切片时可使该切片在FireworksPNG文件中不可见，但可以在HTML中导出隐藏的切片对象。

单击单个网页对象左侧的眼睛图标，可以将该切片隐藏，此时眼睛图标位置显示为空，再单击该位置，可以使切片重新可见。单击“网页层”左侧的眼睛图标，可以将在“网页层”的所有切片隐藏。更改切片对象和辅助线的颜色

更改所选切片对象的颜色，在“属性”检查器的颜色框中选择新颜色。

更改切片辅助线的颜色，单击“编辑”菜单中的“首选参数”命令，在“首选参数”对话框左侧的“辅助线和网格”类别中选择新的切片辅助线颜色。9.1.3编辑切片

在Fireworks中，可以对切片的布局进行设计，可以直接拖动切片辅助线调整其大小。

Fireworks会自动调整所有相邻的矩形切片的大小。另外，可以通过使用“属性”检查器调整切片大小以及将切片变形。移动切片辅助线调整切片的大小

调整一个或多个切片的大小时，首先将“指针”或“部分选定”工具放在切片辅助线上，此时指针变为辅助线移动指针；然后将切片辅助线拖动到所需位置，切片大小即被调整，并且所有相邻切片也自动调整大小。使用工具编辑切片对象

使用“指针”、“部分选定”和“变形”工具可以更改切片的形状和切片的大小。但是对于多边形切片，只能使用“倾斜”和“扭曲”工具编辑。对切片的形状进行编辑时，首先选择切片，然后选择“指针”或“部分选定”工具，拖动切片的角点，修改其形状或者使用变形工具执行所需的变形。删除切片

需要删除切片时，在“图层”面板的“网页层”中，选择要删除的切片，单击面板底部的“删除所选”按钮。

使用“指针”工具在画布上选择了切片并将该切片删除时，会删除整个按钮元件。若要保留底层图形，先使用“指针”工具在画布上选择切片/对象，然后单击“修改”菜单中的“元件”→“分离”命令。该切片消失，但会保留该按钮图形。9.2使切片交互

Fireworks提供了两种使切片交互的方式：（一）拖放变换图像方法，只需要拖动切片的行为手柄并将其放在目标切片中，即可快速创建简单的交互效果；（二）在“行为”面板中创建更复杂的交互，“行为”面板包含各种交互行为，可以将它们附加到切片中。9.2.1使切片具有简单的交互效果当选定切片时，拖动行为手柄并将其放置在目标切片上，可以轻松地创建变换图像和交换图像效果。触发器和目标可以是同一切片。热点也具有用于结合变换图像效果的行为手柄。创建简单的交换图像

变换图像的工作方式是当指针滑过一个图形时，该图形将触发另一个图形的显示，创建简单的变换图像是将两个重叠的状态进行交换，并且只涉及一个切片。创建简单的交换图像将简单变换图像附加到切片，单击“编辑”菜单中的“插入”→“矩形切片”或“多边形切片”命令，在触发器对象上方创建切片。接着在“状态”面板中创建一个新的状态，在“状态”面板中返回到包含原始图像的状态。选择切片，并将指针放在行为手柄上方，用鼠标右键单击行为手柄，在弹出的快捷菜单中单击“添加简单变换图像行为”命令。

9.2.2使用“行为”面板向切片添加交互效果通过使用“行为”面板，可以向切片中附加其他类型的交互效果。通过编辑现有行为创建自定义交互。“行为”须经过“行为”面板应用于“切片”或“热点”对象中。行为面板使用外部图像文件作为交换图像要选择外部图像文件作为交换图像的来源，可以在“交换图像”对话框、“滑过导航栏”对话框或“按下导航栏”对话框中，选择“图像文件”单选项，然后单击文件夹按钮，从图像文件导航到要使用的文件，然后单击“打开”按钮。9.3将准备的切片导出

将准备好的切片导出时，要在“属性”检查器中，为切片指定链接和目标框架；也可以指定图像在载入时，浏览器中显示的替换文本，还可选择一种导出文件格式优化所选切片。

“属性”检查器或“图层”面板可以为切片提供唯一的名称，在导出文件时会使用指定的名称来命名。如果未输入切片名称，在导出文件时，Fireworks将自动命名切片。将切片导出到CSSSprite将切片与图像文件一起导出为CSSSprite图像时，会生成包含位移值的CSS文件。右键单击切片或切片组，选择“导出CSSSprite”，在“导出”对话框中，输入PNG文件名，单击“导出”命令。9.3.1指定URL

为所选切片指定URL，可以在“属性”检查器的“链接”文本框中输入一个URL。

如果文件包含多个要导出的页面，则使用“链接”下拉菜单为URL选择一个页面。9.3.2输入替换文本选择不含替换文本的切片或热点为尚未输入替换文本的切片和热点，设置空白替换文本。单击“命令”菜单下的“网页”→“选择空白替换文本”命令。设置默认替换文本为尚未输入替换文本的切片和热点，设置默认替换文本。单击“命令”菜单下的“网页”子菜单“设置替换文本”，输入默认替换文本。9.3.3指定文本

目标是在其中打开链接文档的替换网页框架或网页浏览器窗口。在“属性”检查器中为所选切片或热点指定目标，在“目标”文本框中，输入HTML框架的名称，或直接从“目标”下拉菜单中，选择一个目标。9.3.4命名切片输入自定义切片名称，在画布上选择切片，然后在“属性”检查器的“对象名称”框中输入一个名称后按“Enter”键；或者在“网页层”中双击切片，在弹出的文本框中输入一个新名称，然后按“Enter”键。9.4使用热点和图像映射使用热点可以将图像的某些区域链接到其他网页，不需要这些区域为响应鼠标的移动或动作，而高亮显示或者产生变换图像效果。9.4.1创建热点

使用“矩形热点”工具、“圆形热点”工具或“多边形热点”（非常规形状）工具，可以在图形的目标区域周围绘制热点；也可以在选择对象上插入热点。创建矩形或圆形热点

创建矩形或圆形热点，则首先从“工具”面板的“Web”工具区选择“矩形热点”工具或“圆形热点”工具，然后拖动热点工具，在图形的某个区域上进行绘制。按住“Alt”键可以从中心点开始绘制。创建非常规形状热点

创建非常规形状热点，选择“多边形热点”工具，单击，以放置矢量点。这与使用“钢笔”工具绘制直线段类似，不管路径是开口的还是闭合的，填充都可以定义热点区域。通过跟踪选定对象创建热点当通过跟踪一个或多个选定对象创建热点时，单击“编辑”菜单中的“插入”→“热点”命令。9.4.2编辑热点

使用“指针”工具、“部分选定”工具或者“变形”工具点可以编辑热点。热点的形状有：“矩形”、“圆形”

和“多边形”。

在“属性”检查器中，可以为热点指定URL、替换文本、目标和自定义名称。9.4.3用热点创建图像映射

导出图像映射或将其复制到剪贴板中时，首先对图形进行优化，使其做好导出准备。单击“文件”菜单中的“导出”命令。指定要存放HTML文件的文件夹，并为文件命名，在“导出”下拉列表中，选择“HTML和图像”，设置完成后，单击“浏览”按钮，选择适当的文件夹。最后单击“保存”按钮，关闭“导出”对话框。9.4.4用热点创建图像映射

导出图像映射或将其复制到剪贴板中时，首先对图形进行优化，使其做好导出准备。单击“文件”菜单中的“导出”命令。指定要存放HTML文件的文件夹，并为文件命名，在“导出”下拉列表中，选择“HTM