使用 Fireworks 和 Dreamweaver - Dreamweaver 用户指南

返回介绍

使用 Fireworks 和 Dreamweaver

发布于 2019-06-17 字数 11752 浏览 917 评论 0

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

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

插入 Fireworks 图像

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

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

  1. 在 Dreamweaver 文档中,将插入点放在希望图像出现的位置,然后执行下列操作之一:
    • 选择“插入”>“图像”。
    • 在“插入”面板的“常用”类别中,单击“图像”按钮或将其拖动到文档中。
  2. 导航到所需的 Fireworks 导出文件,然后单击“确定”(Windows) 或“打开”(Macintosh)。

    注意:如果 Fireworks 文件不在当前 Dreamweaver 站点中,则将显示一条消息,询问您是否要将此文件复制到根文件夹中。单击“是”。

在 Dreamweaver 中编辑 Fireworks 图像或表格

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

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

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

  1. 在 Dreamweaver 中,如果属性检查器没有打开,请将其打开(“窗口”>“属性”)。
  2. 单击图像或图像切片以选择它。

    如果选择了从 Fireworks 导出的图像,则属性检查器会将所选项识别为 Fireworks 图像或表格,并显示 PNG 源文件的名称。

  3. 若要启动 Fireworks 进行编辑,请执行下列操作之一:
    • 在属性检查器中单击“编辑”。
    • 按住 Ctrl (Windows) 或 Command (Macintosh),同时双击选择的图像。
    • 右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh) 选择的图像,然后从上下文菜单中选择“使用 Fireworks 编辑”。

    注意:如果 Fireworks 找不到源文件,则会提示您定位 PNG 源文件。在处理 Fireworks 源文件时,将更改同时保存在源文件和导出的文件中;否则,只有导出的文件会得到更新。 

  4. 在 Fireworks 中,编辑源 PNG 文件并单击“完成”。

    Fireworks 将更改保存在 PNG 文件中,导出更新的图像(或 HTML 和图像),然后将焦点返回 Dreamweaver。在 Dreamweaver 中,将显示更新的图像或表格。

    有关 Dreamweaver 和 Fireworks 集成的教程,请参阅 www.adobe.com/go/vid0188_cn。

在 Dreamweaver 中优化 Fireworks 图像

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

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

使用 Fireworks 修改 Dreamweaver 图像占位符

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

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

  1. 确保您已经将 Fireworks 设为 PNG 文件的图像编辑器。
  2. 在“文档”窗口中,单击图像占位符以选择它。
  3. 以“从 Dreamweaver 进行编辑”模式启动 Fireworks,方法是执行下列操作之一:
    • 在属性检查器中单击“创建”。
    • 按 Ctrl (Windows) 或 Command (Macintosh),然后双击图像占位符。
    • 右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh) 图像占位符,然后选择“在 Fireworks 中创建图像”。
  4. 使用各种 Fireworks 选项设计图像。

    Fireworks 将识别您在使用 Dreamweaver 中的图像占位符时设置的下列图像占位符设置:图像大小(其与 Fireworks 画布大小相关)、图像 ID(Fireworks 将其用作您创建的源文件和导出文件的默认文档名)以及文本对齐方式。Fireworks 还将识别您在 Dreamweaver 中工作时附加到图像占位符的链接和特定行为(如交换图像、弹出菜单和设置文本)。

    注意:虽然 Fireworks 不会显示已添加到图像占位符的链接,但它们的确会被保留。如果您绘制一个热点并在 Fireworks 中添加一个链接,将不会删除您添加到 Dreamweaver 图像占位符中的链接;但是,如果您剪切 Fireworks 新图像中的切片,则 Fireworks 将在您替换图像占位符时删除 Dreamweaver 文档中的链接。

    Fireworks 不识别以下图像占位符设置:图像对齐方式、颜色、垂直边距和水平边距以及映射。在图像占位符的属性检查器中,这些设置处于禁用状态。

  5. 完成后,请单击“完成”以显示保存提示。
  6. 在“保存位置”文本框中,选择您定义为 Dreamweaver 本地站点文件夹的文件夹。

    如果您在将图像占位符插入 Dreamweaver 文档时已为其命名,则 Fireworks 会使用该名称填充“文件名”框。可以更改此名称。

  7. 单击“保存”保存 PNG 文件。

    将出现“导出”对话框。使用此对话框将图像导出为 GIF 或 JPEG 文件;对于经过切片的图像,则可导出为 HTML 和图像。

  8. 对于“保存位置”,选择 Dreamweaver 本地站点文件夹。

    “名称”框中会自动显示用于 PNG 文件的名称。可以更改此名称。

  9. 对于“另存为类型”,可选择要导出的文件的类型;例如,“仅图像”或“HTML 和图像”。
  10. 单击“保存”保存导出的文件。

    将保存文件,并且焦点将返回 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 中编辑菜单。

  1. 在 Dreamweaver 中,选择包含弹出菜单的 Fireworks 表格,然后在属性检查器中单击“编辑”。

    将在 Fireworks 中打开源 PNG 文件。

  2. 在 Fireworks 中,使用弹出菜单编辑器编辑菜单,然后在 Fireworks 工具栏上单击“完成”。

    Fireworks 会将已编辑的弹出菜单发送回 Dreamweaver。

    如果您在 Fireworks MX 2004 或早期版本中创建了一个弹出菜单,可使用“行为”面板中可用的“显示弹出菜单”对话框在 Dreamweaver 中编辑此弹出菜单。

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

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

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

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

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

  1. 在 Fireworks 中,选择“编辑”>“首选参数”(Windows) 或“Fireworks”>“首选参数”(Macintosh),然后单击“启动和编辑”选项卡 (Windows) 或者从弹出菜单中选择“启动和编辑”(Macintosh)。
  2. 指定在编辑或优化位于外部应用程序中的 Fireworks 图像时要使用的首选参数选项:

    始终使用源 PNG

    自动打开在“设计备注”中定义为所放置图像来源的 Fireworks PNG 文件。源 PNG 文件和对应的已放置图像均会被更新。

    永不使用源 PNG

    无论是否存在源 PNG 文件,均自动打开所放置的 Fireworks 图像。仅会更新所放置的图像。

    启动时询问

    显示一条信息,询问是否打开源 PNG 文件。您还可以从此消息中指定全局性的“启动并编辑”首选参数。

在 Dreamweaver 文档中插入 Fireworks HTML 代码

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

  1. 在 Dreamweaver 文档中,将插入点放置在您要插入 Fireworks HTML 代码的位置。
  2. 执行下列操作之一:
    • 选择“插入”>“图像对象”>“Fireworks HTML”。
    • 在“插入”面板的“常用”类别中,单击“图像”按钮,然后从弹出菜单中选择“插入 Fireworks HTML”。
  3. 单击“浏览”选择一个 Fireworks HTML 文件。
  4. 如果您将来不需要再使用该文件,可选择“插入后删除文件”。选择此选项对于与 HTML 文件关联的源 PNG 文件没有任何影响。

    注意:如果该 HTML 文件位于某个网络驱动器上,它将被永久删除,而不会移动到回收站或垃圾桶。

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

将 Fireworks HTML 代码粘贴到 Dreamweaver 中

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

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

  1. 在 Fireworks 中,选择“编辑”>“复制 HTML 代码”。
  2. 按照向导的指示操作,它将引导您完成导出 HTML 和图像的设置工作。在接到提示时,将您的 Dreamweaver 站点文件夹指定为所导出图像的目标位置。

    向导将图像导出到指定的目标位置并将 HTML 代码复制到剪贴板。

  3. 在 Dreamweaver 文档中,将插入点放置在您要粘贴 HTML 代码的位置,然后选择“编辑”>“粘贴 Fireworks HTML”。

    与您导出的 Fireworks 文件关联的所有 HTML 和 JavaScript 代码将复制到 Dreamweaver 文档中,并且将更新指向图像的所有链接。

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

  1. 在 Fireworks 中,选择“文件”>“导出”。
  2. 将您的 Dreamweaver 站点文件夹指定为导出图像的目标文件夹。
  3. 在“导出”弹出菜单中,选择“HTML 和图像”。
  4. 在“HTML”弹出菜单中,选择“复制到剪贴板”,然后单击“导出”。
  5. 在 Dreamweaver 文档中,将插入点放置在您要粘贴所导出 HTML 代码的位置,然后选择“编辑”>“粘贴 Fireworks HTML”。

    与您导出的 Fireworks 文件关联的所有 HTML 和 JavaScript 代码将复制到 Dreamweaver 文档中,并且将更新指向图像的所有链接。

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

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

  1. 在 Fireworks 中,打开源 PNG 文件并且进行所需的编辑。
  2. 选择“文件”>“保存”。
  3. 在 Fireworks 中,选择“文件”>“更新 HTML”。
  4. 导航到包含要更新的 HTML 的 Dreamweaver 文件,然后单击“打开”。
  5. 导航到要放置更新后的图像文件的目标文件夹,然后单击“选择”(Windows) 或“选择”(Macintosh)。

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

    如果 Fireworks 找不到匹配的待更新 HTML 代码,您可以选择将新的 HTML 代码插入 Dreamweaver 文档。Fireworks 将新代码的 JavaScript 部分放在文档的开头处,将 HTML 表格或图像链接放在末尾处。

创建 Web 相册

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

更多此类内容

  • 关于 Photoshop、Flash 和 Fireworks 集成
  • 使用外部图像编辑器
  • Dreamweaver Fireworks 教程
  • 设置“图像预览”对话框选项
  • 应用“显示弹出菜单”行为

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!