网页制作教程Fireworks

Fireworks 网页制作教程：从入门到精通

第一部分：为什么选择 Fireworks？

在开始之前,我们首先要明白，为什么在今天还要学习一款“过时”的软件？

1. 切图之王：Fireworks 的“切片”功能极其强大和智能，它可以轻松地将一个完整的设计稿导出为网页所需的图片、HTML 文件和 CSS 代码，大大提高了前端开发的工作效率。
2. 原型设计利器：其强大的样式、符号（Symbol）和页面功能，非常适合快速创建可交互的网页高保真原型，方便与客户或团队沟通。
3. 轻量且专注：相比 Photoshop 和 Illustrator，Fireworks 文件更小，启动更快，界面更简洁，所有功能都围绕着“网页”和“屏幕”设计，没有多余的功能。
4. 完美整合：虽然 Adobe 已停止支持，但如果你还在使用旧版的 Creative Suite (CS6)，Fireworks 可以与 Photoshop, Illustrator, Dreamweaver 等无缝协作。

第二部分：界面初探

打开 Fireworks，你会看到一个熟悉的 Adobe 风格界面，我们先来认识一下核心区域：

• 菜单栏：包含所有操作命令，如文件、编辑、视图、修改等。
• 工具栏：左侧的垂直工具栏，包含了选择、位图、矢量、文字、Web 等所有绘图和编辑工具。
• 属性检查器：通常位于界面下方或右侧，是 Fireworks 的核心，当选中画布上的任何对象时，这里会显示并允许你修改该对象的所有属性（如位置、大小、颜色、边框、效果等）。
• 图层和帧：右侧的浮动面板，用于管理画布上的对象（图层）和动画帧。
• 资源管理器：用于管理符号、样式、颜色等可复用资源。

第三部分：核心概念与工具

在制作网页之前,必须掌握几个核心概念。

文档设置

创建新文件时,务必正确设置。

• 预设：选择“Web”。
• 宽度/高度：根据你的设计需求设置，1920px (宽屏) 或 1200px。
• 分辨率：网页标准为 72 PPI。
• 画布颜色：通常选择白色或透明。

矢量与位图

• 矢量图形：基于数学公式，可以无限放大而不失真，Fireworks 的默认绘图模式就是矢量模式，适用于 Logo、图标、按钮形状等。
  • 常用工具：矩形、圆角矩形、椭圆、多边形、钢笔工具、直线工具。
• 位图图形：由像素组成，放大后会变模糊，适用于照片、复杂的纹理。
  • 常用工具：选框套索、魔术棒、画笔、橡皮擦、图章、模糊/锐化/涂抹等。

小技巧：你可以在同一个文档中自由切换和编辑矢量与位图对象。

符号

这是 Fireworks 最强大的功能之一，符号可以理解为“可复用的模板”，修改一个符号，所有实例都会同步更新。

• 创建符号：选中一个对象，按 F8 或右键选择“转换为符号”，你可以选择“图形”、“按钮”或“动画剪辑”。
• 编辑符号：双击画布上的符号实例，或双击“资源管理器”中的符号，进入符号编辑模式。
• 实例：拖拽符号库中的符号到画布上，它就是一个实例，你可以单独修改实例的某些属性（如颜色、大小），而不会影响符号本身。

切片

切片是网页设计的灵魂,它就像一把刀，将你的设计稿切割成一个个小图片，以便浏览器加载。

• 作用：
  1. 导出图片：精确控制导出哪些区域以及导出格式。
  2. 生成 HTML 表格：自动将切片区域组合成一个 HTML 表格，并放置背景图片。
  3. 创建热点：为图片的某个区域添加链接（<a> 标签）。
• 使用方法：选择“切片”工具（一个带小刀的矩形工具），在设计稿上拖拽出一个矩形区域，你会看到半透明的绿色覆盖层。

第四部分：实战演练：制作一个简单的网页头部

让我们通过一个实例,把以上知识串起来。

目标：制作一个包含 Logo、导航菜单和 Banner 图的网页头部。

步骤 1：创建新文档

• Ctrl + N 新建一个文档。
• 宽度：1200px，高度：300px，分辨率：72 PPI，背景色：白色。

步骤 2：制作 Logo

• 选择“文本工具”，输入你的网站名称，"MySite"。
• 在“属性检查器”中设置字体、大小、颜色，这里我们用粗体，深蓝色。
• 选中文字,按 F8，将其转换为“图形”符号，命名为 Logo。

步骤 3：制作导航菜单

• 选择“矩形工具”，画一个细长的矩形作为菜单项背景。
• 按 F8，将其转换为“图形”符号，命名为 MenuItem。
• 复制这个符号实例 (Ctrl + D)，并排好位置。
• 使用“文本工具”在每个矩形上输入菜单文字，如 "首页", ", "服务", "联系"。
• 批量修改：选中所有菜单项背景的实例，在“属性检查器”中统一修改它们的填充颜色和圆角半径，你会发现所有实例都同步了！

步骤 4：制作 Banner

• 使用“矩形工具”画一个占满剩余空间的矩形。
• 在“属性检查器”中，为其添加一个“渐变”填充，比如从蓝色到浅蓝色的线性渐变。
• 添加一些文字和装饰性图形,丰富 Banner 内容。

步骤 5：切片与导出

• 这是关键一步！我们的设计稿现在是几个独立的对象，但浏览器需要的是图片和 HTML。
• 选择“切片工具”，沿着每个需要独立导出的部分进行切割，Logo 一切，每个菜单项一切，Banner 整体一切。
• 导出设置：
  1. 按 Ctrl + Shift + Alt + S (或 文件 > 导出)。
  2. 在弹出的对话框中,选择“HTML 和图像”。
  3. 在“选项”中：
     • HTML：选择“表格”。
     • 图像：选择“导出区域”。
     • 默认切片设置：设置切片的格式（如 GIF, PNG-24）。
  4. 点击“导出”。

步骤 6：查看成果

• 在你导出的文件夹中,你会发现：
  • 一个 .html 文件。
  • 一个名为 images 的文件夹，里面包含了所有切好的小图片。
• 用浏览器打开 .html 文件，你会看到一个由表格构成的、和你 Fireworks 设计稿几乎一样的网页头部！

第五部分：进阶技巧

1. 样式：为常用的按钮或文本样式创建“样式”，选中一个设置好的对象，点击“样式”面板中的“新建样式”，之后，你可以一键将这个样式应用到其他对象上，实现快速统一的设计。
2. 按钮符号：创建一个“按钮”符号，可以轻松制作出“弹起”、“滑过”、“按下”和“按下时滑过”四种状态的交互效果，非常适合制作导航按钮。
3. 页面面板：在“页面”面板中，你可以创建多个页面，用于设计一个网站的不同页面（首页、内页等），导出时可以选择导出所有页面或指定页面。
4. 与 Dreamweaver 协作：Fireworks 可以直接将设计稿导出为 Dreamweaver 的库项目或模板，实现工作流的无缝衔接。

第六部分：替代品与未来

虽然 Fireworks 已经落幕，但它的设计思想依然影响着许多现代工具。

• Figma：目前最流行的 UI/UX 设计工具，基于浏览器，支持实时协作，它的组件系统就是现代版的“符号”。
• Sketch (macOS)：老牌的 Mac 平 UI 设计工具，同样拥有强大的符号和切片功能。
• Adobe XD：Adobe 官方的替代品，免费，与 Creative Cloud 生态整合良好。

如果你需要学习现代网页设计工具,以上三个是更好的选择，但如果你需要处理旧的 Fireworks 文件，或者想在本地快速进行高保真原型设计，Fireworks 依然是一个非常棒的、值得掌握的工具。

希望这份教程能帮助你顺利入门 Fireworks！多动手练习，你会发现它在网页制作中独特的魅力。