使用 Fireworks 和 Dreamweaver

优质

小牛编辑

138浏览

2023-12-01

使用 Fireworks 和 Dreamweaver 以简化在 HTML 页面中编辑、优化和放置 Web 图形的工作流程。

此功能在 Adobe Dreamweaver CC 版本中不受支持。

插入 Fireworks 图像

Dreamweaver 和 Fireworks 将识别并共享许多相同的文件编辑程序，包括对链接、图像地图、表格切片等的更改。此外，这两个应用程序均为在 HTML 页面中编辑、优化和放置 Web 图形文件提供了简化的工作流程。

您可使用“插入图像”命令将 Fireworks 导出图形直接放在 Dreamweaver 文档中，也可通过 Dreamweaver 图像占位符新建 Fireworks 图形。

在 Dreamweaver 文档中，将插入点放在希望图像出现的位置，然后执行下列操作之一：
- 选择“插入”>“图像”。
- 在“插入”面板的“常用”类别中，单击“图像”按钮或将其拖动到文档中。
导航到所需的 Fireworks 导出文件，然后单击“确定”(Windows) 或“打开”(Macintosh)。
注意:如果 Fireworks 文件不在当前 Dreamweaver 站点中，则将显示一条消息，询问您是否要将此文件复制到根文件夹中。单击“是”。

在 Dreamweaver 中编辑 Fireworks 图像或表格

当您打开并编辑属于 Fireworks 表格的一部分的图像或图像切片时，Dreamweaver 将启动 Fireworks，这将打开从中导出图像或表的 PNG 文件。

注意:以上是假设将 Fireworks 设置为 PNG 文件的主外部图像编辑器的情况下。Firework 在通常情况下是 JPEG 和 GIF 文件的默认编辑器，您可能希望将 Photoshop 设置为这些文件的默认编辑器。

如果图像是 Fireworks 表格的一部分，则可以打开整个 Fireworks 表格进行编辑，只要 HTML 代码中存在  注释。如果源 PNG 文件是从 Fireworks 导出到 Dreamweaver 站点的（使用 Dreamweaver 样式的 HTML 和图像设置），则将在 HTML 代码中自动插入 Fireworks 表格注释。

在 Dreamweaver 中，如果属性检查器没有打开，请将其打开（“窗口”>“属性”）。
单击图像或图像切片以选择它。
如果选择了从 Fireworks 导出的图像，则属性检查器会将所选项识别为 Fireworks 图像或表格，并显示 PNG 源文件的名称。
若要启动 Fireworks 进行编辑，请执行下列操作之一：
- 在属性检查器中单击“编辑”。
- 按住 Ctrl (Windows) 或 Command (Macintosh)，同时双击选择的图像。
- 右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh) 选择的图像，然后从上下文菜单中选择“使用 Fireworks 编辑”。
注意:如果 Fireworks 找不到源文件，则会提示您定位 PNG 源文件。在处理 Fireworks 源文件时，将更改同时保存在源文件和导出的文件中；否则，只有导出的文件会得到更新。
在 Fireworks 中，编辑源 PNG 文件并单击“完成”。
Fireworks 将更改保存在 PNG 文件中，导出更新的图像（或 HTML 和图像），然后将焦点返回 Dreamweaver。在 Dreamweaver 中，将显示更新的图像或表格。
有关 Dreamweaver 和 Fireworks 集成的教程，请参阅 www.adobe.com/go/vid0188_cn。

在 Dreamweaver 中优化 Fireworks 图像

您可使用 Dreamweaver 快速更改 Fireworks 图像和动画。在 Dreamweaver 中，可以更改优化设置、动画设置以及所导出图像的大小和区域。

在 Dreamweaver 中，选择所需图像，然后执行下列操作之一：
- 选择“命令”>“优化图像”
- 在属性检查器中单击“编辑图像设置”按钮。
在“图像预览”对话框中进行编辑：
- 若要编辑优化设置，请单击“选项”选项卡。
- 若要编辑所导出图像的大小和区域，请单击“文件”选项卡。
完成之后，单击“确定”。

使用 Fireworks 修改 Dreamweaver 图像占位符

您可在 Dreamweaver 文档中创建占位符图像，然后启动 Fireworks 设计图形图像或 Fireworks 表格来替换创建的占位符图像。

要从图像占位符创建新图像，您的系统上必须安装了 Dreamweaver 和 Fireworks。

确保您已经将 Fireworks 设为 PNG 文件的图像编辑器。
在“文档”窗口中，单击图像占位符以选择它。
以“从 Dreamweaver 进行编辑”模式启动 Fireworks，方法是执行下列操作之一：
- 在属性检查器中单击“创建”。
- 按 Ctrl (Windows) 或 Command (Macintosh)，然后双击图像占位符。
- 右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh) 图像占位符，然后选择“在 Fireworks 中创建图像”。
使用各种 Fireworks 选项设计图像。
Fireworks 将识别您在使用 Dreamweaver 中的图像占位符时设置的下列图像占位符设置：图像大小（其与 Fireworks 画布大小相关）、图像 ID（Fireworks 将其用作您创建的源文件和导出文件的默认文档名）以及文本对齐方式。Fireworks 还将识别您在 Dreamweaver 中工作时附加到图像占位符的链接和特定行为（如交换图像、弹出菜单和设置文本）。
注意:虽然 Fireworks 不会显示已添加到图像占位符的链接，但它们的确会被保留。如果您绘制一个热点并在 Fireworks 中添加一个链接，将不会删除您添加到 Dreamweaver 图像占位符中的链接；但是，如果您剪切 Fireworks 新图像中的切片，则 Fireworks 将在您替换图像占位符时删除 Dreamweaver 文档中的链接。
Fireworks 不识别以下图像占位符设置：图像对齐方式、颜色、垂直边距和水平边距以及映射。在图像占位符的属性检查器中，这些设置处于禁用状态。
完成后，请单击“完成”以显示保存提示。
在“保存位置”文本框中，选择您定义为 Dreamweaver 本地站点文件夹的文件夹。
如果您在将图像占位符插入 Dreamweaver 文档时已为其命名，则 Fireworks 会使用该名称填充“文件名”框。可以更改此名称。
单击“保存”保存 PNG 文件。
将出现“导出”对话框。使用此对话框将图像导出为 GIF 或 JPEG 文件；对于经过切片的图像，则可导出为 HTML 和图像。
对于“保存位置”，选择 Dreamweaver 本地站点文件夹。
“名称”框中会自动显示用于 PNG 文件的名称。可以更改此名称。
对于“另存为类型”，可选择要导出的文件的类型；例如，“仅图像”或“HTML 和图像”。
单击“保存”保存导出的文件。
将保存文件，并且焦点将返回 Dreamweaver。在 Dreamweaver 文档中，导出的文件或 Fireworks 表格将替换图像占位符。

关于 Fireworks 弹出菜单

您可以使用 Fireworks 快速方便地创建基于 CSS 的弹出菜单。

除了提供扩展性和较快的下载速度之外，使用 Fireworks 创建的弹出菜单还提供了以下优势：

菜单项可以由搜索引擎进行索引。
屏幕阅读器可以读取菜单项，使您的页面具有更高的可访问性。
Fireworks 生成的代码符合标准且可进行验证。
您可使用 Dreamweaver 或 Fireworks 编辑 Fireworks 弹出菜单，但不能同时使用二者进行编辑。Fireworks 中不会保留在 Dreamweaver 中进行的更改。

在 Dreamweaver 中编辑 Fireworks 弹出菜单

您可在 Fireworks 8 或更高版本中创建弹出菜单，然后使用 Dreamweaver 或 Fireworks 编辑此菜单（使用往返编辑），但不能同时使用二者进行编辑。如果您先在 Dreamweaver 中编辑菜单，然后在 Fireworks 中编辑它们，则您将失去文本内容之外的所有之前的编辑。

如果您更喜欢使用 Dreamweaver 编辑菜单，可以使用 Fireworks 创建弹出菜单，然后只使用 Dreamweaver 编辑和自定义菜单。

如果您更喜欢在 Fireworks 中编辑菜单，可以使用 Dreamweaver 中的往返编辑功能，但是不应直接在 Dreamweaver 中编辑菜单。

在 Dreamweaver 中，选择包含弹出菜单的 Fireworks 表格，然后在属性检查器中单击“编辑”。
将在 Fireworks 中打开源 PNG 文件。
在 Fireworks 中，使用弹出菜单编辑器编辑菜单，然后在 Fireworks 工具栏上单击“完成”。
Fireworks 会将已编辑的弹出菜单发送回 Dreamweaver。
如果您在 Fireworks MX 2004 或早期版本中创建了一个弹出菜单，可使用“行为”面板中可用的“显示弹出菜单”对话框在 Dreamweaver 中编辑此弹出菜单。

编辑在 Fireworks MX 2004 或更早版本中创建的弹出菜单

在 Dreamweaver 中，选择将触发弹出菜单的热点或图像。
在“行为”面板 (Shift+F3) 中，双击“动作”列表中的“显示弹出菜单”。
在“弹出菜单”对话框中进行更改，然后单击“确定”。

指定 Fireworks 源文件的启动并编辑首选参数

在使用 Fireworks 编辑图像时，网页中的图像通常是 Fireworks 根据某个源 PNG 文件导出的。当您在 Dreamweaver 中打开一个图像文件以进行编辑时，Fireworks 将自动打开源 PNG 文件，如果找不到 PNG 文件，将提示您进行查找。如果您喜欢，可在 Fireworks 中设置首选参数以让 Dreamweaver 打开插入的图像，也可让 Fireworks 在您每次在 Dreamweaver 中打开图像时，为您提供使用插入的图像文件或 Fireworks 源文件的选项。

注意:Dreamweaver 仅在特定情况下才识别 Fireworks 启动和编辑首选参数。具体而言，您打开和优化的图像不能是 Fireworks 表格的一部分，并且必须包含指向源 PNG 文件的正确的设计备注路径。

在 Fireworks 中，选择“编辑”>“首选参数”(Windows) 或“Fireworks”>“首选参数”(Macintosh)，然后单击“启动和编辑”选项卡 (Windows) 或者从弹出菜单中选择“启动和编辑”(Macintosh)。
指定在编辑或优化位于外部应用程序中的 Fireworks 图像时要使用的首选参数选项：
始终使用源 PNG
自动打开在“设计备注”中定义为所放置图像来源的 Fireworks PNG 文件。源 PNG 文件和对应的已放置图像均会被更新。
永不使用源 PNG
无论是否存在源 PNG 文件，均自动打开所放置的 Fireworks 图像。仅会更新所放置的图像。
启动时询问
显示一条信息，询问是否打开源 PNG 文件。您还可以从此消息中指定全局性的“启动并编辑”首选参数。

在 Dreamweaver 文档中插入 Fireworks HTML 代码

从 Fireworks 中，您可以使用导出命令将优化的图像和 HTML 文件导出并保存到 Dreamweaver 站点文件夹内的位置。然后可以将文件插入 Dreamweaver。Dreamweaver 允许您将 Fireworks 生成的 HTML 代码（包括相关图像、切片和 JavaScript）插入文档。

在 Dreamweaver 文档中，将插入点放置在您要插入 Fireworks HTML 代码的位置。
执行下列操作之一：
- 选择“插入”>“图像对象”>“Fireworks HTML”。
- 在“插入”面板的“常用”类别中，单击“图像”按钮，然后从弹出菜单中选择“插入 Fireworks HTML”。
单击“浏览”选择一个 Fireworks HTML 文件。
如果您将来不需要再使用该文件，可选择“插入后删除文件”。选择此选项对于与 HTML 文件关联的源 PNG 文件没有任何影响。
注意:如果该 HTML 文件位于某个网络驱动器上，它将被永久删除，而不会移动到回收站或垃圾桶。
单击“确定”将 HTML 代码连同它的相关图像、切片和 JavaScript 一起插入到 Dreamweaver 文档中。

将 Fireworks HTML 代码粘贴到 Dreamweaver 中

以下方法可快速将 Fireworks 生成的图像和表格放置到 Dreamweaver中：复制 Fireworks HTML 代码并将其直接粘贴到 Dreamweaver 文档中。

将 Fireworks HTML 代码复制和粘贴到 Dreamweaver 中

在 Fireworks 中，选择“编辑”>“复制 HTML 代码”。
按照向导的指示操作，它将引导您完成导出 HTML 和图像的设置工作。在接到提示时，将您的 Dreamweaver 站点文件夹指定为所导出图像的目标位置。
向导将图像导出到指定的目标位置并将 HTML 代码复制到剪贴板。
在 Dreamweaver 文档中，将插入点放置在您要粘贴 HTML 代码的位置，然后选择“编辑”>“粘贴 Fireworks HTML”。
与您导出的 Fireworks 文件关联的所有 HTML 和 JavaScript 代码将复制到 Dreamweaver 文档中，并且将更新指向图像的所有链接。

将 Fireworks HTML 代码导出并粘贴到 Dreamweaver 中

在 Fireworks 中，选择“文件”>“导出”。
将您的 Dreamweaver 站点文件夹指定为导出图像的目标文件夹。
在“导出”弹出菜单中，选择“HTML 和图像”。
在“HTML”弹出菜单中，选择“复制到剪贴板”，然后单击“导出”。
在 Dreamweaver 文档中，将插入点放置在您要粘贴所导出 HTML 代码的位置，然后选择“编辑”>“粘贴 Fireworks HTML”。
与您导出的 Fireworks 文件关联的所有 HTML 和 JavaScript 代码将复制到 Dreamweaver 文档中，并且将更新指向图像的所有链接。

更新放置在 Dreamweaver 中的 Fireworks HTML 代码

在 Fireworks 中，“文件”>“更新 HTML”命令将替代更新放置在 Dreamweaver 中的 Fireworks 文件的启动和编辑方法。使用“更新 HTML”，您可在 Fireworks 中编辑源 PNG 图像，然后自动更新 Dreamweaver 文档中放置的任何导出的 HTML 代码和图像文件。此命令使您能够更新 Dreamweaver 文件，即使 Dreamweaver 未运行时也可更新。

在 Fireworks 中，打开源 PNG 文件并且进行所需的编辑。
选择“文件”>“保存”。
在 Fireworks 中，选择“文件”>“更新 HTML”。
导航到包含要更新的 HTML 的 Dreamweaver 文件，然后单击“打开”。
导航到要放置更新后的图像文件的目标文件夹，然后单击“选择”(Windows) 或“选择”(Macintosh)。
Fireworks 更新 Dreamweaver 文档中的 HTML 和 JavaScript 代码。此外，Fireworks 还会导出与 HTML 相关的已更新图像，并将这些图像放置在指定的目标文件夹中。
如果 Fireworks 找不到匹配的待更新 HTML 代码，您可以选择将新的 HTML 代码插入 Dreamweaver 文档。Fireworks 将新代码的 JavaScript 部分放在文档的开头处，将 HTML 表格或图像链接放在末尾处。

创建 Web 相册

“创建 Web 相册”功能从 Dreamweaver CS5 开始已被弃用。