将 Fireworks 与 Dreamweaver 一起使用

搜索
Adobe Fireworks CS6 用户指南

在此页面上

适用于: Adobe Fireworks CS5 Adobe Fireworks CS6

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

将 Fireworks 与 Dreamweaver 一起使用

Adobe Dreamweaver® 和 Fireworks 可以识别和共享许多相同的文件编辑，其中包括对链接、图像映射、表格切片的更改。此外，Dreamweaver 和 Fireworks 还为在 HTML 页面中编辑、优化和放置网页图形文件提供了一个优化的工作流程。

在 Dreamweaver 文件中放置 Fireworks 图像

在 Dreamweaver 中插入 Fireworks JPEG 文件时，文件质量会自动进行计算。有些文件值可能为 79。

注意:

在使用这些步骤之前，请确保在“HTML 设置”对话框中选择了 Dreamweaver 作为 HTML 类型。

使用“文件”面板将 Fireworks 图像插入到 Dreamweaver

  1. 将图像从 Fireworks 导出到 Dreamweaver 中定义的本地站点文件夹。

  2. 打开 Dreamweaver 文档并确保处于“设计”视图中。

  3. 将图像从“文件”面板拖到 Dreamweaver 文档中。

使用“插入”菜单将 Fireworks 图像插入到 Dreamweaver

  1. 将插入点放在 Dreamweaver 文档窗口中希望图像出现的位置。

  2. 执行下列操作之一：

    • 选择“插入”>“图像”。

    • 在“插入”栏的“常用”类别中单击“图像”中的“图像”按钮。

  3. 定位到从 Fireworks 导出的图像，然后单击“确定”。

使用 Dreamweaver 占位符创建新的 Fireworks 文件

图像占位符使您能够在为页面创建最终图片之前尝试各种不同的网页布局。使用图像占位符来指定以后要在 Dreamweaver 中放置的 Fireworks 图像的大小和位置。

当使用 Dreamweaver 图像占位符创建 Fireworks 图像时，系统会用与所选占位符尺寸相同的画布创建一个新的 Fireworks 文档。

注意:

在 Fireworks 内应用的所有行为在导回到 Dreamweaver 时都会保留下来。同样，应用于图像占位符的大部分 Dreamweaver 行为在用 Fireworks 启动和编辑时也会保留下来。但有一个例外：应用到 Dreamweaver 中图像占位符的不相交变换图像在 Fireworks 中打开和编辑时不会保留。

一旦 Fireworks 会话结束并且您返回到 Dreamweaver，所创建的新 Fireworks 图形即会取代最初选择的图像占位符。

  1. 在 Dreamweaver 中，将所需的 HTML 文档保存到 Dreamweaver 站点文件夹内的一个位置。

  2. 将插入点放在文档中的所需位置，然后执行下列操作之一：

    • 选择“插入”>“图像对象”>“图像占位符”。

    • 在“插入”栏的“常用”类别中单击“图像”中的“图像”弹出菜单，并选择“图像占位符”。

  3. 输入图像占位符的名称、尺寸、颜色和替换文本。

    图像占位符即会插入到 Dreamweaver 文档中。

    图像占位符
    图像占位符

  4. 执行下列操作之一：

    • 在“属性”检查器中选择图像占位符并单击“创建”。

    • 按住 Ctrl（在 Windows 中）或 Command（在 Mac OS 中）并双击图像占位符。

    • 在 Fireworks 中右键单击（在 Windows 中）或按住 Control 并单击（在 Mac OS 中），然后选择“创建图像”。

      Fireworks 即会打开，并显示一个大小与占位符图像完全相同的空画布。文档窗口的顶部会指示出您编辑的是 Dreamweaver 中的图像。

  5. 在 Fireworks 中创建图像，然后单击“完成”。

  6. 指定源 PNG 文件的名称和位置。

  7. 指定导出的图像文件的名称。

    这些图像文件就是显示在 Dreamweaver 中的那些图像文件。

  8. 在您的 Dreamweaver 站点文件夹中为导出的文件指定位置，然后单击“保存”。

    返回到 Dreamweaver 时，新 Fireworks 图像或表格将取代最初选择的图像占位符。

    新 Fireworks 图像将取代图像占位符
    新 Fireworks 图像将取代图像占位符

将 Fireworks HTML 代码置入 Dreamweaver

将 Fireworks 文件导出到 Dreamweaver 分两步进行。首先，将文件从 Fireworks 直接导出到一个 Dreamweaver 站点文件夹中。此操作将在指定的位置生成一个 HTML 文件和关联的图像文件。然后，使用“插入 Fireworks HTML”功能将 HTML 代码置入 Dreamweaver 中。

  1. 将 Fireworks HTML 文档导出为 HTML 格式。

  2. 在 Dreamweaver 中，将文档保存到已定义的站点中。

  3. 将插入点放在文档中开始插入 HTML 代码的位置。

  4. 执行下列操作之一：

    • 选择“插入”>“图像对象”>“Fireworks HTML”。

    • 在“插入”栏的“常用”类别中单击“图像”中的“图像”弹出菜单，并选择“Fireworks HTML”。

  5. 在出现的对话框中，单击“浏览”选择所需的 Fireworks HTML 文件。

  6. （可选）操作完成后，选择“插入后删除文件”将 HTML 文件移到回收站（在 Windows 中）或将其永久删除（在 Mac OS 中）。

    此选项不会影响与 HTML 文件关联的源 PNG 文件。

  7. 单击“确定”将 HTML 代码连同它的相关图像、切片和 JavaScript 一起插入到 Dreamweaver 文档中。

复制 Fireworks HTML 代码以便在 Dreamweaver 中使用

在将 Fireworks HTML 代码复制到剪贴板时，与该 Fireworks 文档关联的所有 HTML 和 JavaScript 代码都会复制到 Dreamweaver 文档中，图像导出到您指定的位置，Dreamweaver 会将包含文档相关链接的 HTML 更新到这些图像。

注意:

此方法仅适用于 Dreamweaver。它不能用于其它 HTML 编辑器。

  1. 在 Fireworks 中将 HTML 复制到剪贴板，然后将其粘贴到 Dreamweaver 文档中。

注意:

还可以在 Dreamweaver 中打开导出的 Fireworks HTML 文件，然后只将所需的部分手动复制并粘贴到另一个 Dreamweaver 文档中。

更新导出到 Dreamweaver 的 Fireworks HTML

注意:

在处理导出到 Dreamweaver 的 HTML 时，“自由导入导出 HTML”提供许多好处。（请参阅关于自由导入导出 HTML。）

  1. 在 Fireworks 中对 PNG 文档进行更改。

  2. 选择“文件”>“更新 HTML”。

  3. 定位到包含要更新的 HTML 的 Dreamweaver 文件，然后单击“打开”。

  4. 定位到要放置已更新图像文件的文件夹，然后单击“打开”。

    Fireworks 更新 Dreamweaver 文档中的 HTML 和 JavaScript 代码。Fireworks 还导出与 HTML 相关的已更新图像并将这些图像放在指定的目标文件夹中。

    注意:

    如果 Fireworks 找不到适合更新的 HTML 代码，您可以选择将新的 HTML 代码插入到 Dreamweaver 文档中。Fireworks 在文档开头放置新代码的 JavaScript 部分，在文档结尾放置 HTML 表格或图像链接。

将 Fireworks 文件导出到 Dreamweaver 库

库项目是站点根文件夹中名为“Library”的文件夹中的 HTML 文件的一部分。库项目在 Dreamweaver 的“资源”面板中显示为类别。在 Dreamweaver 中，库项目可简化对常用网站组件的编辑和更新。您可以将库项目（带 .lbi 扩展名的文件）从“资源”面板中拖到网站中的任何页面。

不能在 Dreamweaver 文档中直接编辑库项目；只能编辑主库项目。然后，可以在整个网站中放置该主库项目时让 Dreamweaver 更新它的每个副本。Dreamweaver 库项目与 Fireworks 元件非常相似；对主库 (LBI) 文档所做的更改在整个网站的所有该库的实例中都会反映出来。

注意:

Dreamweaver 库项目不支持弹出菜单。

  1. 选择“文件”>“导出”。

  2. 从“导出”弹出菜单中选择“Dreamweaver 库”。

    在您的 Dreamweaver 站点中创建名为 Library的文件夹，作为文件的保存位置。名称区分大小写。

    注意:

    除非将导出的文件保存到 Library 文件夹，否则 Dreamweaver 不会将其识别为库项目。

  3. 键入一个文件名。

  4. （可选）如果图像包含切片，请选择切片选项。

  5. 选择“将图像放入子文件夹”以选择一个单独的文件夹来保存图像。

  6. 单击“保存”。

在 Dreamweaver 中编辑 Fireworks 文件

“自由导入导出 HTML”功能将 Fireworks 和 Dreamweaver 紧密集成在一起。它使您可以在一个应用程序中进行更改，并在另一个应用程序中完整地反映这些更改。

关于自由导入导出 HTML

Fireworks 识别并保留在 Dreamweaver 中对文档所做的大多数类型的编辑，包括更改的链接、编辑的图像映射、HTML 切片中编辑的文本和 HTML 以及在 Fireworks 和 Dreamweaver 之间共享的行为。Dreamweaver 中的“属性”检查器帮助识别文档中由 Fireworks 生成的图像、表格切片和表格。

Fireworks 支持大多数类型的 Dreamweaver 编辑。但是，在 Dreamweaver 中对表格结构进行较大的更改可能会在两个应用程序之间产生不可调和的差异。在对表格布局进行重大更改时，请使用 Dreamweaver 的启动和编辑功能在 Fireworks 中编辑表格。

注意:

利用 Fireworks 技术，Dreamweaver 可提供基本的图像编辑功能，以便在不使用外部图像编辑应用程序的情况下对图像进行修改。Dreamweaver 的图像编辑功能仅适用于 JPEG 和 GIF 图像文件格式。

编辑放置在 Dreamweaver 中的 Fireworks 图像

注意:

在 Dreamweaver 中编辑 Fireworks 图形之前，请做一些准备工作。有关详细信息，请参阅设置启动和编辑选项。

  1. 在 Dreamweaver 中，选择“窗口”>“属性”以打开“属性”检查器。

  2. 执行下列操作之一：

    • 选择所需的图像。（“属性”检查器将选区识别为 Fireworks 图像并显示该图像的已知 PNG 源文件的名称。）然后在“属性”检查器中单击“编辑”。

    • 按住 Ctrl（在 Windows 中）或 Command（在 Mac OS 中）并双击要编辑的图像。

    • 右键单击（在 Windows 中）或按住 Control 并单击（在 Mac OS 中）所需的图像，然后从上下文菜单中选择“使用 Fireworks 编辑”。

  3. 如果出现提示，请指定是否为放置的图像定位源 Fireworks 文件。

  4. 在 Fireworks 中编辑图像。

    您应用的编辑保留在 Dreamweaver 中。

  5. 单击“完成”以使用当前优化设置导出图像，更新 Dreamweaver 使用的 GIF 或 JPEG 文件，在选择了 PNG 源文件时还保存该源文件。

    注意:

    当您从 Dreamweaver 的“站点”面板中打开某个图像时，适用于该图像类型的默认编辑器（在 Dreamweaver 的“首选参数”中设置）将打开该文件。当从此位置打开图像时，Fireworks 不会打开原始 PNG 文件。若要使用 Fireworks 集成功能，请从 Dreamweaver 文档窗口中打开图像。

编辑放置在 Dreamweaver 中的 Fireworks 表格

注意:

在 Dreamweaver 中编辑 Fireworks 表格之前，请做一些启动和编辑的准备工作。有关详细信息，请参阅设置启动和编辑选项。

  1. 在 Dreamweaver 中，选择“窗口”>“属性”以打开“属性”检查器。

  2. 执行下列操作之一在文档窗口中打开源 PNG 文件：

    • 在表格内部单击，然后单击状态栏中的 TABLE 标签选择整个表格。（“属性”检查器将选区识别为 Fireworks 表格，并显示该表格的已知 PNG 源文件的名称。）然后在“属性”检查器中单击“编辑”。

    • 选择表格中的图像，然后在“属性”检查器中单击“编辑”。

    • 右键单击（在 Windows 中）或按住 Control 并单击（在 Mac OS 中）图像，然后从上下文菜单中选择“使用 Fireworks 编辑”。

  3. 在 Fireworks 中进行编辑。

    Dreamweaver 识别并保留在 Fireworks 中应用于表格的所有编辑。

  4. 编辑完表格后，在文档窗口中单击“完成”。

    表格的 HTML 和图像切片文件将使用当前的优化设置导出，放置在 Dreamweaver 中的表格将被更新，而 PNG 源文件将被保存。

    注意:

    如果您把另一个表格嵌套到由 Fireworks 生成的原始表格中并试图在 Dreamweaver 中使用“自由导入导出编辑”来编辑表格，则可能会收到 Dreamweaver 错误信息。有关详细信息，请参阅 Adobe 网站上的“技术说明 19231”。

关于支持和不支持的 Dreamweaver 行为

如果将单个未切割的 Fireworks 图形插入到 Dreamweaver 文档中并应用 Dreamweaver 行为，则在 Fireworks 中打开并编辑该图形时，它的顶部会出现一个切片。该切片最初是不可见的，这是因为在打开并编辑应用了 Dreamweaver 行为的单个未切割图形时，切片被自动关闭。通过从“层”面板的“网页层”打开切片的可见性可以查看切片。

在 Fireworks 中查看附加了 Dreamweaver 行为的切片的属性时，“属性”检查器中的“链接”文本框可能显示 javascript:;。删除此文本没有什么影响。如果需要，可以在此文本上键入一个 URL，返回到 Dreamweaver 时，该行为仍保持不变。

当您使用 Dreamweaver 中的“自由导入导出 HTML”时，Fireworks 支持服务器端文件格式（如 CFM 和 PHP）。

Dreamweaver 支持在 Fireworks 中应用的所有行为，包括变换图像和按钮所需的行为。

注意:

Dreamweaver 库项目不支持弹出菜单。

Fireworks 在启动和编辑会话期间支持以下 Dreamweaver 行为：

  • 简单变换图像

  • 交换图像

  • 恢复交换图像

  • 设置状态栏文本

  • 设置导航栏图像

  • 弹出菜单

注意:

Fireworks 不支持非本机行为（包括服务器端行为）。

优化放置在 Dreamweaver 中的 Fireworks 图像和动画

更改放置在 Dreamweaver 中的 Fireworks 图像的优化设置

  1. 在 Dreamweaver 中选择图像，然后执行下列操作之一：

    • 选择“命令”>“优化图像”。

    • 在“属性”检查器中单击“优化”按钮。

    • 右键单击（在 Windows 中）或按住 Control 单击（在 Mac OS 中），并从弹出菜单中选择“在 Fireworks 中优化”。

  2. 如果出现提示，请指定是否打开所放置图像的 Fireworks 源文件。

  3. 在“导出预览”对话框中进行编辑：

    • 若要编辑优化设置，请单击“选项”选项卡。

    • 若要编辑所导出图像的大小和区域，请单击“文件”选项卡。如果在 Fireworks 中更改了图像尺寸，则当返回到 Dreamweaver 时，您必须在“属性”检查器中重设图像的大小。

    • 若要编辑图像的动画设置，请单击“动画”选项卡。

  4. 在完成图像编辑后，单击“确定”以导出图像，在 Dreamweaver 中更新图像，然后保存此 PNG。

    如果更改了图像格式，Dreamweaver 的链接检查器将提示您更新对该图像的引用。

更改动画设置

如果打开并优化的是 GIF 动画文件，您还可以编辑动画设置。“导出预览”对话框中的动画选项类似于 Fireworks“状态”面板中的可用选项。

注意:

若要编辑 Fireworks 动画中的图形元素，必须打开和编辑 Fireworks 动画。

设置启动和编辑选项

为了有效地使用“自由导入导出 HTML”，应先做一些准备工作，比如在 Dreamweaver 中将 Fireworks 设置为主图像编辑器，在 Fireworks 中指定启动和编辑首选参数以及在 Dreamweaver 中定义本地站点。

将 Fireworks 设置为 Dreamweaver 的主外部图像编辑器

Dreamweaver 为自动启动特定的应用程序来编辑特定的文件类型提供了首选参数。若要使用 Fireworks 的启动和编辑功能，请确保在 Dreamweaver 中将 Fireworks 设置为 GIF、JPEG 和 PNG 文件的主编辑器。

注意:

只有从 Dreamweaver 启动 Fireworks 有问题时，才需要设置此首选参数。

  1. 在 Dreamweaver 中，选择“编辑”>“首选参数”，然后选择“文件类型/编辑器”。

  2. 在“扩展名”列表中，选择网页图像文件扩展名（.gif、.jpg 或 .png）。

  3. 在“编辑器”列表中选择“Fireworks”。如果 Fireworks 不在该列表中，则单击加号 (+) 按钮，在硬盘上找到 Fireworks 应用程序，然后单击“打开”。

    Dreamweaver 首选参数
    Dreamweaver 首选参数

  4. 单击“设为主要”。

  5. 重复第 2 步至第 4 步，将 Fireworks 设为其它网页图像文件类型的主编辑器。

设置 Fireworks 源文件的启动和编辑首选参数

Fireworks 的启动和编辑首选参数使您可以指定从其它应用程序打开 Fireworks 文件时源 PNG 文件的处理方式。

仅当您打开并优化的图像不是 Fireworks 表格的一部分并且不包含源 PNG 文件的正确设计说明路径时，Dreamweaver 才会识别 Fireworks 启动和编辑首选参数。在其它所有情况下（包括启动和编辑 Fireworks 图像的所有情况），Dreamweaver 都会自动打开源 PNG 文件，如果找不到，它会提示您定位该源文件。

  1. 在 Fireworks 中，选择“编辑”>“首选参数”（在 Windows 中）或“Fireworks”>“首选参数”（在 Mac OS 中）。

  2. 单击“启动和编辑”类别，然后根据需要设置选项。

    有关详细信息，请参阅启动和编辑首选参数。

关于设计说明和源文件

每当您将 Fireworks 文件从保存的 PNG 源文件导出到 Dreamweaver 站点时，Fireworks 都会写出一份包含该 PNG 文件有关信息的设计说明。当您从 Dreamweaver 内打开并编辑 Fireworks 图像时，Dreamweaver 会使用设计说明来定位该文件的源 PNG。为获得最佳效果，请始终在 Dreamweaver 站点中保存 Fireworks 的源 PNG 文件和导出文件。这样可确保任何共享该站点的用户在从 Dreamweaver 内启动 Fireworks 时都能找到源 PNG。

使用“文件管理”按钮传输站点文件

“文件管理”按钮位于文档窗口顶部，使用此按钮可以轻松地访问文件传输命令。如果文档驻留在 Dreamweaver 站点文件夹中，并且该站点可以访问远程服务器，则可以使用此按钮。为了 Fireworks 能够将文件夹识别为站点，请使用 Dreamweaver 中的“管理站点”对话框将目标文件夹（或包含文件夹）定义为站点的本地根文件夹。

注意:

在 Fireworks 中使用存回和取出选项之前，请先选择文档所在的 Dreamweaver 站点的“启用文件存回和取出”选项。

获取

将文件的远程版本复制到本地站点，并使用远程副本覆盖本地文件。

取出

将文件取出，并使用远程副本覆盖本地文件。

上传

将文件的本地版本复制到远程站点，并使用本地副本覆盖远程文件。

存回

将本地文件存回，并使用本地副本覆盖远程文件。

撤消取出

撤消取出本地文件并将其存回，并使用远程副本覆盖本地文件。

注意:

只有当文档驻留于定义了远程服务器的 Dreamweaver 站点文件夹中时，才会在 Fireworks 中启用“文件管理”命令。Fireworks“文件管理”命令只能用于使用本地/网络和 FTP 传输方法的站点中驻留的文件。对于位于使用 SFTP 或第三方传输方法（如 SourceSafe、WebDAV 和 RDS）的站点中的文件，不能从 Fireworks 内将这些文件传输到远程服务器和从远程服务器中传输它们。