• 创建矩形切片

  • 创建非矩形切片

  • 创建 HTML 文本切片

  • 查看并显示切片和切片辅助线

  • 编辑切片

切片是用于在 Adobe? Fireworks? 中创建交互效果的基本构造块。切片是最终以 HTML 代码形式存在的网页对象。可以通过“层”面板中的“网页层”查看、选择和重命名它们。

切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时,Fireworks 会创建一个包含表格代码的 HTML 文件,以便在浏览器中重新组合图形。

切片将一个文档分割成多个部分,它们都以单独文件的形式导出。

将图像切片有三个主要优点:

优化图像

获得最快的下载速度。


增加交互性

使图像能够快速响应鼠标事件。


易于更新

适用于经常更改的网页部分(例如,“本月雇员”页上的照片和姓名)。

创建矩形切片

可以通过使用“切片”工具进行绘制或基于所选对象插入切片来创建矩形切片。使用切片辅助线(从切片对象延伸的线)确定导出文档时将文档拆分成的单独图像文件的边界。

创建矩形切片

绘制矩形切片对象

  1. 选择“切片”工具

  2. 拖动以绘制切片对象。

    注:  若要在拖动以绘制切片时调整切片的位置,请按住鼠标按钮,按住空格键,然后将切片拖动到画布上的另一个位置。释放空格键以继续绘制切片。

基于所选对象创建矩形切片

  1. 选择“编辑”>“插入”>“矩形切片”。该切片是一个矩形,它的区域包括所选对象最外面的边缘。

  2. 如果选择了多个对象,请选择“单个”以创建覆盖全部所选对象的单个切片对象,或选择“多个”为每个选定对象创建一个切片对象。

创建非矩形切片

使用“多边形切片”工具创建非矩形切片。在尝试将交互性附加到非矩形图像时,非矩形切片非常有用。

创建非矩形切片

绘制多边形切片对象

  1. 选择“多边形切片”工具

  2. 单击以放置多边形的矢量点。这是必要的,因为“多边形切片”工具绘制直线段。

  3. 当在具有柔边的对象周围绘制多边形切片对象时,请包括整个对象以免在切片图形中创建多余的实边。

  4. 若要停止使用“多边形切片”工具,请从“工具”面板中选择另一个工具。您不必单击第一个点来关闭多边形。

    注:  多边形切片将 HTML 表格与图像映射组合在一起,与相似的矩形切片相比需要更多的代码。使用许多多边形切片可能会增加在 Web 浏览器中的处理时间。

从矢量对象或路径创建多边形切片

  1. 选择一个矢量路径。

  2. 选择“编辑”>“插入”>“多边形切片”。

创建 HTML 文本切片

HTML 切片指定浏览器中出现普通 HTML 文本的区域。然后,它会导出在切片定义的表单元格中显示的 HTML 文本。

创建 HTML 文本切片

HTML 切片有助于快速更新网站文本而不用创建新图形。

注:  由于可以在浏览器中设置字体大小和类型,因此在不同的浏览器和不同的操作系统中查看 HTML 文本切片时,它们的外观可能会有所变化。

  1. 绘制切片对象。

  2. 在选定了切片对象时,从“属性”检查器的“类型”弹出菜单中选择“HTML”。

  3. 单击“编辑”。

  4. 在“编辑 HTML 切片”窗口中键入文本,然后通过添加 HTML 文本格式设置标签来设置文本的格式。

    注:  或者,在导出 HTML 之后应用 HTML 文本格式设置标签。

  5. 单击“确定”以应用更改并关闭“编辑 HTML 切片”窗口。

    您输入的文本和 HTML 标记以原始 HTML 代码的形式出现在 Fireworks PNG 文件中切片的正文上。

查看并显示切片和切片辅助线

可以使用“层”面板和“工具”面板控制文档中切片和其它网页对象的可见性。当关闭整个文档的切片可见性时,切片辅助线也将被隐藏。

查看并选择切片

“网页层”显示文档中的所有网页对象。

  1. 选择“窗口”>“层”。

  2. 单击三角形展开“网页层”。

  3. 单击一个切片名称以选择该切片。

显示和隐藏切片

隐藏一个切片时可使该切片在 Fireworks PNG 文件中不可见。可以在 HTML 中导出隐藏的切片对象。

  • 若要隐藏个别切片,请在“层”面板中单击各个网页对象旁边的眼睛图标

  • 若要显示隐藏的切片,请在“眼晴”列中单击以重新打开可见性。

  • 若要隐藏或显示所有热点、切片和辅助线,请在“工具”面板的“Web”工具部分中单击相应的“隐藏/显示切片”按钮 ,或单击“层”面板中“网页层”旁边的眼睛图标。

  • 若要在任何文档视图中隐藏或显示切片辅助线,请选择“视图”>“切片辅助线”。

更改切片对象和辅助线的颜色

为各个切片和切片辅助线指定唯一的颜色有助于查看和组织它们。

  • 若要更改所选切片对象的颜色,请在“属性”检查器中从颜色框中选择新颜色。

  • 若要更改切片辅助线的颜色,请选择“编辑”>“首选参数”(在 Windows 中)或“Fireworks”>“首选参数”(在 Mac OS 中)。然后从“首选参数”对话框的“辅助线和网格”类别中选择新的切片辅助线颜色。

    注:  当预览文档时,取消选择的切片显示为白色层叠。

编辑切片

处理切片布局与在字处理应用程序中使用表格类似。在拖动切片辅助线来调整切片大小时,所有相邻的矩形切片也会被调整。

还可以使用“属性”检查器调整切片大小以及改变其形状。

通过移动切片辅助线来编辑切片

切片辅助线定义切片的周长和位置。超出切片对象的切片辅助线定义在导出时如何对文档的其余部分进行切片。通过拖动矩形切片对象周围的切片辅助线,可以更改其形状。

不能通过移动切片辅助线来调整非矩形切片对象的大小。

通过拖动切片对象的切片辅助线调整其大小

注:  如果在文档窗口中拖动某个 Fireworks 按钮周围的切片辅助线,Fireworks 将调整用来定义该按钮的活动区域的切片大小。您不能通过拖动 Fireworks 按钮周围的切片辅助线来删除该按钮的活动区域。

如果多个切片对象沿单个切片辅助线对齐,则可以拖动该切片辅助线来同时调整全部切片对象的大小。

通过拖动单个辅助线调整多个切片对象的大小

如果沿给定的坐标拖动一个辅助线,则此坐标上的所有其它辅助线将随它一起移动。

调整一个或多个切片的大小

  1. 将“指针”或“部分选定”工具放在切片辅助线上。

    指针会变为辅助线移动指针

  2. 将切片辅助线拖动到所需位置。

    切片以及所有相邻切片的大小都会被调整。

将切片辅助线重新定位到画布的边缘

使用“指针”或“部分选定”工具将切片辅助线拖出画布的边缘。

移动相邻切片辅助线

  1. 按下 Shift 并拖动一个切片辅助线经过相邻的切片辅助线。

  2. 在所需位置释放该切片辅助线。

    拖动时经过的所有切片辅助线都将移到此位置。

    若要取消此操作,使所有切片辅助线恢复为原始位置,请在释放鼠标按钮之前释放 Shift。

使用工具编辑切片

使用“指针”、“部分选定”和“变形”工具更改切片的形状或调整切片的大小。

注:  只能倾斜或扭曲多边形切片。

由于相邻切片对象的大小不会自动调整,因此调整切片大小和更改切片形状可能会导致切片相互重叠。当切片相互重叠时,如果发生交互,则最顶层的切片将优先。若要避免切片重叠,请使用切片辅助线编辑切片。

若要编辑所选切片的形状,请执行下列操作之一:

  • 选择“指针”或“部分选定”工具,然后拖动切片的角点修改其形状。

  • 使用变形工具来执行变形。对矩形切片进行变形处理可能会更改它的形状、位置或尺寸,但切片本身仍保持为矩形。

  • 使用“属性”检查器以数字方式更改切片对象的位置和大小。

删除切片

  1. 在“层”面板中,选择“网页层”中的切片。

  2. 单击面板底部的垃圾桶图标。

将按钮元件从公用库拖动到页面时,会自动创建一个切片,可以在画布上看到该切片,但它不会出现在网页层中。

如果使用指针工具在画布上选择了切片并将该切片删除,则会删除整个按钮元件。若要保留底层图形,请使用指针工具在画布上选择该切片/对象,然后选择“修改”>“元件”>“分离”。该切片消失,但保留状态 #1 中的按钮图形。但是当分离某个按钮元件时,会丢失状态 2、3 和 4 的图形。

,