这份教程将从 入门基础 到 核心功能，再到 实战项目，并附上 资源推荐，帮助您快速掌握 Fireworks CS4。
（图片来源网络，侵删）
第一部分：入门基础 - 认识 Fireworks CS4
在开始之前，我们需要了解 Fireworks 是做什么的,以及它的界面布局。
什么是 Fireworks？
Fireworks 是一款“为网络而生的”图像处理软件,它的核心优势在于：
- 一体化工作流：集位图编辑（类似 Photoshop）、矢量绘图（类似 Illustrator）和网页原型制作于一体。
- 快速切片与导出：能轻松创建网页切片，并一键导出为 HTML、CSS 和图片文件,极大提高了前端开发效率。
- 强大的样式和符号：可以创建可重用的样式和符号（按钮、导航栏等）,确保整个网站的设计一致性。
熟悉工作区界面
打开 Fireworks CS4,你会看到以下主要区域：
- 菜单栏：包含所有命令，如文件、编辑、视图、选择、修改、文本、滤镜、命令、窗口、帮助。
- 工具面板：所有绘图、编辑、选择工具的集合,通常位于左侧。
- 属性检查器：这是最重要的面板！当选中画布上的任何对象时，这里会显示该对象的属性（如位置、大小、颜色、效果等）,并进行修改。
- 文档窗口：你的画布,在这里进行设计和编辑。
- 浮动面板：如“层”、“样式”、“库”、“颜色混合器”等，可以通过“窗口”菜单来显示或隐藏。
第二部分：核心功能详解
这是教程的核心部分，我们将逐一学习 Fireworks 的关键功能。
（图片来源网络，侵删）
矢量绘图
矢量图形可以无限放大而不失真，非常适合制作 Logo、图标、按钮等。
- 基本形状工具：选择工具栏中的“矩形”、“圆形”、“多边形”等工具，在画布上拖动即可绘制，按住
Shift键可以绘制正方形、正圆。 - 钢笔工具：绘制精确、复杂的路径，点击创建锚点,点击并拖动可以创建带手柄的曲线锚点。
- 路径操作：
- 合并路径：将多个形状合并为一个。
- 打孔：用一个形状“挖掉”另一个形状。
- 联合：将多个形状融合成一个整体。
- 颜色填充：
- 颜色混合器：可以自定义 RGB、HSL 颜色。
- 渐变填充：为形状应用线性或径向渐变,双击渐变条可以编辑渐变色标。
位图编辑
位图图像由像素组成，适合处理照片、复杂纹理等。
- 位图模式：点击工具栏下方的“位图”按钮,进入位图编辑模式。
- 选择工具：
- 选框工具：创建矩形或椭圆选区。
- 套索工具：自由绘制不规则选区。
- 魔术棒工具：根据颜色相似度创建选区。
- 绘画与修饰工具：
- 画笔/铅笔：自由绘制。
- 橡皮擦：擦除像素。
- 模糊/锐化/涂抹：修饰图像。
- 蒙版：位图蒙版可以隐藏位图或矢量图的一部分,实现非破坏性编辑。
文本工具
- 添加文本：选择“文本工具”（T）,在画布上点击并输入。
- 文本属性：在属性检查器中，可以设置字体、字号、颜色、字间距、行间距、对齐方式等。
- 路径文本：可以将文字沿着一条矢量路径排列，先绘制路径，然后输入文字，在属性检查器中选择“附加到路径”。
- 转换为路径：将文本转换为矢量图形，这样可以像编辑其他矢量对象一样,对文字的形状进行修改。
样式与符号
这是 Fireworks 提高效率的两大法宝。
- 样式：
- 作用：将一组属性（如填充色、描边、阴影、特效等）保存为一个可重用的“样式”。
- 用法：为按钮或标题设置好样式后，只需将样式面板中的样式拖拽到其他对象上,即可快速应用一致的外观。
- 符号：
- 作用：将一个或多个对象创建为“符号”（Symbol），修改符号后,画布上所有该符号的实例都会同步更新。
- 类型：
- 图形符号：静态的图形元素。
- 按钮符号：用于创建交互式按钮，可以定义“释放”、“滑过”、“按下”和“按下时滑过”四种状态。
- 用法：将常用元素（如 Logo、导航按钮）拖入“库”面板即可创建为符号。
切片与热点
这是 Fireworks 制作网页原型的核心功能。
（图片来源网络，侵删）
- 切片工具：在“Web”工具组中，在画布上拖动，将一张大图切割成多个小图，浏览器会重新将这些小图拼接起来,实现加速加载和局部交互。
- 热点工具：为图片的某个区域添加链接，当用户鼠标悬停或点击时，可以触发动作（如打开新网页、显示弹出框）。
- 交互状态：在“原型”模式下，可以设置热点在不同状态下的行为，如“滑过时显示弹出信息”。
导出
- 导出向导：选择“文件” > “导出向导”，它会引导你选择文件格式、优化设置,非常适合新手。
- 导出：选择“文件” > “导出”，可以指定导出格式（如 JPG, PNG, GIF）、路径、切片导出方式等。
- 导出到 HTML：这是最强大的功能之一，完成设计和切片后，选择“文件” > “导出”，在“格式”中选择“HTML 和图像”，Fireworks 会自动生成一个包含 HTML、CSS 文件和所有切片图片的文件夹,可以直接在浏览器中打开预览效果。
第三部分：实战项目 - 制作一个简单的网页原型
让我们来动手实践一下,制作一个包含导航栏和内容区域的简单网页原型。
- 新建文档：
文件>新建，设置画布大小（如 1024x768 像素）,背景色为白色。 - 创建 Logo：使用“文本工具”输入网站名称，用“矩形工具”绘制一个色块作为背景，将它们组合起来，并拖入“库”面板，创建为“图形符号”。
- 创建导航按钮：
- 使用“矩形工具”绘制一个按钮形状。
- 使用“文本工具”输入“首页”。
- 选中按钮和文字，在“样式”面板中创建一个新样式。
- 按住
Alt键拖动按钮，复制出多个，修改文字为“关于我们”、“产品”、“联系”。
- 区：使用“矩形工具”绘制一个大的内容区域框,填充浅色背景。
- 添加图片占位符：
文件>导入，导入一张示例图片,调整大小后放入内容区。 - 添加文本内容：使用“文本工具”在图片下方添加一些说明文字。
- 切片与导出：
- 切换到“原型”模式。
- 使用“切片工具”将整个页面切分成几个部分（如顶部横幅、导航栏、内容区、页脚），注意，每个按钮最好单独切一片,以便后期添加链接。
- 按
F12键,在浏览器中预览效果。 - 选择
文件>导出，格式选择HTML 和图像，选择一个文件夹，点击“保存”，打开生成的 HTML 文件,你就能看到一个完整的网页框架了。
第四部分：学习资源推荐
由于 Fireworks 已被 Adobe 停止开发，最新的官方教程很少,但社区资源依然非常丰富。
视频教程
- YouTube：搜索 "Adobe Fireworks CS4 Tutorial" 或 "Fireworks Tutorial for Beginners"，有大量英文和中文视频，推荐关注一些经典的设计频道，如 Tutvid，他们有非常详细的 Fireworks 系列教程。
- Bilibili (B站)：搜索 "Fireworks 教程"，可以找到很多 UP主上传的中文视频教程,非常适合入门。
图文教程与博客
- Adobe 官方存档：Adobe 官网虽然不更新了，但旧的教程库还在，可以搜索 "Adobe Fireworks CS4 Help" 找到官方的帮助文档。
- 社区博客：搜索 "Fireworks 教程 博客"，可以找到很多设计师分享的经验和技巧文章，一些早期的设计博客（如优设网、站酷）曾收录过相关文章。
灵感与素材
- 范例文件：下载一些
.png格式的 Fireworks 源文件，是学习其图层结构、符号使用和切片技巧的最好方法。 - 社区：虽然 Fireworks 用户在减少，但在一些老牌设计论坛或 QQ 群中,你仍然可以找到热情的前辈和丰富的资源。
总结与提示
- 动手是关键：教程看再多,不如自己动手做一个项目。
- 善用快捷键：Fireworks 的快捷键和 Photoshop、Flash 很相似,熟练使用能极大提升效率。
- 从模仿开始：找一些优秀的网页设计，尝试用 Fireworks 去模仿它的布局和效果。
- 了解局限性：Fireworks CS4 比较老旧，不支持最新的 CSS3/HTML5 特效,但它的核心设计思想和原型制作能力在今天依然非常有价值。
希望这份详细的教程能帮助你顺利入门 Fireworks CS4,享受这款经典工具带来的高效与乐趣！
