Fireworks 切片终极教程：从入门到精通
Fireworks 曾是网页设计师和前端开发者的利器，其强大的切片和导出功能至今仍有借鉴意义，本教程将带你一步步了解切片的原理、操作方法和最佳实践。
第一部分：为什么需要切片？—— 切片的核心作用
在开始操作前,我们必须明白“为什么要切片”，切片不是简单的“切图”，它有三大核心目的：
- 优化网页加载速度：这是最重要的原因，一张大图（如 2000x2000 像素）加载会很慢，通过切片，我们可以将大图分解成若干个小图，浏览器会并发请求这些小图，总下载时间远小于下载一张大图的时间。
- 实现复杂的交互效果：切片后的每个区域都可以被独立设置交互行为，如
onMouseOver（鼠标悬停时）、onMouseOut（鼠标移出时）等，这使得我们可以制作出导航栏的悬停效果、图片切换效果等，而无需编写复杂的 JavaScript。 - 生成高效的 HTML 和 CSS：Fireworks 的导出功能可以一键将你的设计稿转换成包含 HTML 表格或 CSS 布局的网页文件，极大地提高了开发效率。
第二部分：认识切片工具
在 Fireworks 中，主要有两种切片工具：
矩形切片工具
这是最常用的切片工具。
- 位置：在工具栏中，通常位于“切片”工具组里，图标是一个带小网格的矩形。
- 使用方法：就像使用矩形选框工具一样，在你需要切片的区域按住鼠标左键并拖动，即可创建一个矩形切片。
- 特点：只能创建矩形的切片，对于非矩形或不规则的图形，需要借助“热点”工具（稍后介绍）。
多边形切片工具
用于创建不规则形状的切片。
- 位置：在同一个“切片”工具组中，图标是一个带小网格的多边形。
- 使用方法：
- 点击工具激活。
- 在你想要定义的形状轮廓上,依次点击各个顶点。
- 双击最后一个点,或者回到起始点并单击，即可闭合路径，创建切片。
- 特点：可以沿着任何复杂的形状进行切割，非常灵活。
第三部分：切片实战步骤
假设我们有一个简单的网页头部设计,包含 Logo 和一个导航菜单，我们将为它添加切片。
步骤 1：准备工作
打开你的 Fireworks 设计稿，确保所有图层都可见且对齐，一个好的习惯是将所有需要切片的元素合并到一个图层，或者在切片前锁定/隐藏其他不需要的图层，以避免误操作。
步骤 2：创建切片
场景 A：为 Logo 创建切片
- 选择 矩形切片工具。
- 将鼠标移动到 Logo 周围，按住鼠标拖动，创建一个完全覆盖 Logo 的矩形切片，这个矩形不需要精确贴合 Logo，只要能将其包含在内即可。
- 你会看到,切片区域被半透明的绿色网格覆盖，并带有一个编号（如
Slice 1）。
场景 B：为导航菜单项创建切片
- 继续使用 矩形切片工具。
- 分别为“首页”、“关于我们”、“产品”、“联系我们”这几个菜单项创建独立的切片。为每个菜单项创建单独的切片至关重要，这样才能为它们分别设置悬停效果。
场景 C：为背景图片创建切片
假设你的头部有一个渐变背景图片。
- 使用 矩形切片工具，拖动一个覆盖整个头部区域的切片。
步骤 3：编辑和优化切片属性
切片创建后,需要对其进行设置，这通常在 “属性”检查器 中完成。
- 选择切片：用 指针工具 点击任意一个切片。
- 查看属性面板：
- 切片类型：通常默认为“图像”。
- 链接：设置点击该切片后跳转的 URL，为“首页”切片链接到
index.html。 - 替代文本：当图片无法加载时显示的文字，对 SEO 和无障碍访问很重要，为 Logo 切片输入“公司 Logo”。
- 目标：设置链接打开的方式，如
_blank（在新窗口打开）。 - 导出设置：这是最关键的部分！
步骤 4：设置导出选项
导出选项决定了切片最终以什么形式出现在网页上。
- 选择一个切片，在属性面板的“导出设置”区域进行配置。
- 格式：
- JPEG：适合颜色丰富、有渐变的照片类图像，可以调整“品质”来平衡文件大小和图像质量。
- GIF：适合颜色较少、有大块纯色或需要透明背景的图像（如 Logo）。
- PNG：通用格式，支持透明度和高质量压缩，是现代网页的首选。
- 透明度：勾选此项可以导出透明背景的图片（如 GIF 或 PNG）。
- 平滑：导出时应用平滑处理，使图片边缘更柔和。
- 包含无切片区域：这是一个全局设置，通常在导出时在菜单中选择，它会把没有被切片覆盖的区域也一并导出。
技巧：你可以为不同的切片设置不同的导出格式，背景用 JPEG，Logo 用 PNG，按钮用 GIF。
第四部分：设置交互效果
这是 Fireworks 的杀手级功能，我们来为导航菜单添加一个经典的“悬停变亮”效果。
-
准备状态图形：
- 在你的设计稿中,复制一份导航菜单。
- 将复制的菜单颜色调亮,作为“鼠标悬停”状态的图形，确保它与原始位置完全对齐。
- 将这个调亮的菜单图形放在原始菜单的上方。
-
创建“交换图像”：
- 用 指针工具 按住
Shift键，同时选中“首页”菜单项的原始切片和上方的亮色图形。 - 右键点击,选择 “制作交换图像”。
- 此时会弹出一个对话框,直接点击“确定”。
- 用 指针工具 按住
-
设置交互：
- 现在选中“首页”切片本身。
- 在属性面板的 “行为” 面板中，你会看到一个默认的
Simple Rollover（简单悬停）行为。 - 双击它,可以编辑触发事件，默认是
onMouseOver（鼠标悬停）。 - 你还可以添加
onMouseOut（鼠标移出）行为，让它移出时恢复原状，通常这个行为是自动生成的。
-
复制交互：
- 为第一个菜单项设置好交互后,选中它的切片。
- 按
Ctrl+C(Windows) /Cmd+C(Mac) 复制。 - 然后依次点击其他菜单项的切片,按
Ctrl+V/Cmd+V粘贴，Fireworks 会智能地将交互行为应用到新的切片上，并自动更新交换的图像区域。
第五部分：导出切片
所有设置完成后,就是最后一步：导出。
- 文件 -> 导出
- 在弹出的“导出”对话框中：
- 保存在：选择你要保存网页文件的文件夹。
- 文件名：给你的网页起个名字，如
index.html。 - 保存类型：这是最关键的一步！
- HTML 和图像：这是最常用的选项，它会生成一个 HTML 文件和所有切好的图片文件。
- 仅图像：如果你只需要图片，不需要 HTML 文件，就选这个。
- CSS 和图像：生成基于 CSS 的布局，这是更现代、更推荐的方式。
- 切片：选择 “导出切片”。
- HTML：可以选择“导出为 HTML 表格”或“导出为 CSS 和图像”。强烈推荐选择后者，因为 CSS 布局更灵活、更标准。
- 默认切片命名：可以选择
文件名_切片名的方式，方便管理。
- 点击 “保存”。
Fireworks 会在你指定的文件夹中生成一个 HTML 文件和一个名为 images 的子文件夹，里面包含了所有导出的切片图片。
第六部分：最佳实践与技巧
- 规划先行：在开始切片前，先在脑海中规划好哪些部分需要独立交互，哪些部分可以合并成一张大图。
- 对齐切片：使用 视图 -> 智能导出 功能，Fireworks 会自动吸附和对齐切片，减少不必要的空白图片。
- 使用热点：对于非矩形的可点击区域（如一个圆形的 Logo），应该使用 “热点”工具（工具栏中的小图标）来绘制形状，而不是切片，热点本身不导出图片，只负责定义链接和区域。
- 切片命名：在属性面板中为每个切片起一个有意义的名字（如
logo,nav_home），这样导出的文件名会很清晰，方便后期维护。 - 组合切片：如果几个切片在视觉上是连续的，且不需要独立的交互，可以将它们合并成一个大的切片，减少 HTTP 请求次数。
Fireworks 的切片功能是一个集设计、切图、交互和代码生成于一体的强大工作流，虽然现在市面上有更多现代化的工具（如 Adobe XD, Figma），但理解切片的原理和 Fireworks 的操作方式，对于理解网页图像的优化和前端交互的基本逻辑仍然非常有价值。
希望这份教程对你有帮助！多加练习，你很快就能熟练掌握它。
