Extract 与 Dreamweaver 集成，让 Web 设计人员和开发人员能够在编码环境中直接应用设计信息，并提取 Web 优化资源。Extract 提供了完整独立的解决方案，可供从 PSD 复合中提取样式信息和资源，无需频繁地在 Photoshop 和 Dreamweaver 之间来回切换。

利用 Dreamweaver 中的 Extract 面板，您可以提取 CSS、图像、字体、颜色、渐变和度量值，直接添加到网页中。除了这些主要的 Extract 功能外，Dreamweaver 还提供以下独特的功能：

  • 在 Creative Cloud 上直接访问您的 PSD 文件以及在协作文件夹中与您共享的 PSD 文件

  • 上下文代码提示可供轻松定义 CSS 中的字体、颜色和渐变

  • 支持拖放，以便从 PSD 图层创建图像标记

  • 将样式直接粘贴到实时视图中（例如 CSS Designer 和元素显示）      

Extract 快速入门      

设置 Extract 首选参数      

提取 CSS        

复制文本      

提取图像      

提取尺寸      

提取字体、颜色和渐变      

Extract 快速入门                                  

Dreamweaver 中的 Extract 让您可以在 Dreamweaver 的 Extract 面板中直接访问 PSD 文件。请阅读以下主题，了解更多有关 Extract 面板和工作区的内容以及在 Extract 面板中加载 PSD 文件的信息：

Extract 面板和工作区                                  

Extract 工作区旨在协助您有效地结合 Dreamweaver 使用 Extract。在此工作区中，Extract 面板显示在左侧，您的网页以拆分视图（“实时视图”和“代码视图”）显示在右侧。您可以通过拖动、停靠、折叠或展开面板来自定义工作区以满足您的需要。还可以保存自定义的工作区以供将来使用。

注意:如果您意外关闭 Extract 面板，请使用键盘快捷键 - Ctrl + K (Win)、Cmd + K (Mac)，或选择“窗口”>“Extract”重新打开面板。


Extract 面板和工作区

在第一次启动 Dreamweaver 时，Extract 面板会显示一个交互式教程，帮助您开始处理工作流程。可以使用位于面板顶部的下拉列表在不同的教程之间切换。

使用本教程后，您可以单击“入门”，开始在 Dreamweaver 中使用 Extract。Extract 面板会以缩略图视图形式显示 Creative Cloud 帐户中的文件夹和 PSD 文件。这些文件是从您的桌面上传或同步的文件，或是通过 Creative Cloud 上的协作文件夹与您共享的文件。

Extract 面板显示 Creative Cloud 中保存的 PSD 文件

要重新启动教程，请单击面板右上角的弹出菜单，然后选择“启动教程”。

将 PSD 文件上传到 Creative Cloud                                    

您可以单击 Extract 面板中的“上传 PSD”图标，将 PSD 文件上传到您的 Creative Cloud。如果 PSD 复合是由另一个人或其他团队开发，则您可以在 Creative Cloud 中共享它们。然后，您可通过直接登录 Creative Cloud 或通过 Dreamweaver 中的 Extract 面板下载文件以及将其上传到帐户。

在 Extract 面板中打开 PSD 文件                                    

在 Extract 面板中单击所需 PSD 文件的缩略图图像。如果打开某个 PSD 文件的更新版本后，它在 Creative Cloud 中变为可用，则在 Extract 面板中重新加载该 PSD 文件。为此，请单击该 PSD 文件的名称，或单击右上角弹出菜单中的“重新加载 PSD”。要返回缩略图视图并选择另一个文件，请在面板的左上角单击 Creative Cloud 图标。

要放大视图以仔细查看设计，请更改 Extract 面板顶部的缩放级别或使用 Alt +/-。使用“图层”选项卡或“图层复合”下拉列表可以显示或隐藏 PSD 文件中的元素。

您现在已经完成了将 PSD 复合转换到网站的所有准备工作。

设置 Extract 首选项                                  

使用 Extract 首选项，您可以指定必须以哪种默认文件格式提取图像，以及在 Extract 面板中显示的默认字体单位。

    • 选择“编辑”>“首选参数”(Win) 或“Dreamweaver”>“首选参数”(Mac)。

    • 在“类别”列表中选择 Extract。

    • （可选）更改要在 Extract 面板中显示的字体单位，然后指定“基本字体大小”。

      Extract 的首选项


    • （可选）更改必须以哪种默认格式来提取图像。

    • （可选）单击“清除缓存”以删除因使用 Extract 而缓存的数据。

    • 单击“应用”，然后关闭“首选项”对话框。

    • 要查看 Extract 面板中的更改，请重新加载 PSD（弹出菜单 >“重新加载 PSD”）。

      Extract 面板中的“重新加载 PSD”选项

从 PSD 文件中提取 CSS                                  

您可以复制 PSD 复合中元素的所有或特定 CSS 属性，并直接将这些样式粘贴到 CSS Designer、实时视图中的元素显示中，或直接粘贴到您的代码中（CSS 源或 HTML 文档）。

然后，您在 PSD 复合中选择的元素的 CSS 属性会自动填充到代码提示。如果希望使用编码，则您可以使用这些代码提示将 CSS 属性提取到代码中。

    • 在 Extract 面板中（“窗口”>“Extract”），单击所需的 PSD 文件。PSD 的缩略图视图会展开，允许您清楚地查看复合。

    • 在 PSD 文件中，请单击所需的元素或资产。将出现一个弹出窗口，显示该元素的 CSS 属性列表，并提供选项供您选择和复制。

      Extract 面板中的“复制 CSS”选项

      要复制 CSS，请选择要复制的属性，然后单击“复制 CSS”。

    • 使用以下方法之一将 CSS 粘贴到您的文档中：

      • 将 CSS 粘贴到 CSS Designer 中，右键单击所需的选择器，然后单击“粘贴样式”。

      • 要使用 Element Display 粘贴 CSS，右键单击一个选择器，然后单击“粘贴样式”。

      • 要在代码中粘贴 CSS，请在需要的位置放置插入点，单击鼠标右键，然后单击“粘贴”。

要使用代码提示提取 CSS，请执行以下步骤：

    • 打开附加到文档的 CSS 源或者切换到 HTML 文档的代码视图。

    • 在 Extract 面板中，单击所需的 PSD 文件，然后单击复合中的所需元素。

    • 在您的文档中，请在代码中需要的位置放置插入点。

    • 开始键入 CSS 属性的名称，以便查看那些包含 PSD 复合中选定元素的 CSS 属性的代码提示。单击所需的 CSS 属性以插入到代码中。

      显示 PSD 文件中某个元素的 CSS 属性的代码提示

    • 如需提取多个 CSS 属性，请在 Extract 弹出面板中选择所需的属性。然后，在代码提示中，单击“Insert Selected”（插入选定属性）。

      批量插入 CSS 属性

从 PSD 文件复制文本                                    

只需一次单击，即可将 PSD 复合中的文本或内容插入网页。如需在 Extract 面板中从 PSD 复合复制文本，请选择一个文本元素并单击“Copy Text”（复制文本）。文本会被复制到剪贴板。然后就可将文本粘贴到所需的任意位置。

Extract 面板中的“复制文本”选项

提取文本后，您还可提取与文本相关联的属性，如字体和颜色。

从 PSD 文件中提取图像                                    

您可以直接将 PSD 复合中的任何图层从 Extract 面板拖放到网页实时视图中的精确位置。实时视图中的可视化助理（如动态辅助线和元素快速视图图标）可帮助拖动和放置元素。如果在放置元素之前暂停一段时间，将会出现元素快速视图图标 (</>)。当您将鼠标悬停在 </> 图标上时，将会打开元素快速视图，您可以将该元素放置在元素快速视图内。如果您希望使用编码，则可以使用上下文代码提示并提取图像。代码提示允许您将颜色和渐变提取为图像。

在插入提取的图像之前，Dreamweaver 会显示图像名称，您可以对其进行编辑。默认情况下，图像会保存在站点根文件夹中。如果希望在自定义位置保存图像，则可以在文件名中包括完整目录路径。

注意：如果正在将图像提取到一个不属于已定义站点的文档，则该图像将被提取到该文档所在的目录。对于未保存的文档，将会提示您先保存该文档。

    • 在 Extract 面板中，请单击要从中下载图像的 PSD 文件。

    • 单击 PSD 文件中的所需图像。

      注意:使用 Extract 面板中的“图层”选项卡和“图层复合”下拉列表可以显示或隐藏 PSD 复合中的图像。如果图像包含多个图层，您可以选择图像的单个图层来进行提取。

      注意此代码提示会在工作区右侧的“代码视图”中弹出。

    • 要导入多个图像，请按住 Shift 或 Command 键并单击所需的图像。所选的图像将提取为单一图像。

    • 执行以下操作之一：

      • 在单击图像时出现的弹出窗口中，单击 。指定路径、文件名、文件格式、缩放系数（如果需要），并单击“保存”。

      使用“提取资产”图标提取图像

      • 将图像拖放到文档的“实时视图”。“实时视图”中显示的实时参考线可以帮助您定位图像。

      当您放开图像时，Dreamweaver 会显示该图像的名称。您不仅可以编辑图像的名称，还可以编辑其扩展名，按 Enter 可以保存该图像。默认情况下，图像保存在站点根文件夹中。要将图像保存在自定义位置，请一起输入路径和文件名。

      在 Extract 面板中拖动图像时的文件名和扩展名编辑选项

      • 当单击该图像时，将会填充 Dreamweaver 中的上下文代码提示。在 HTML 文档或 CSS 文档的“代码视图”中，将光标置于插入点。在键入背景图像属性名称或 <img> 标记后，此选定图像的名称会显示在代码提示中。选择图像，修改该名称和扩展名（如果需要），然后按 Enter。

      默认情况下，图像会保存在站点根文件夹中。要将图像保存在自定义位置，请一起输入自定义文件路径和文件名。

      使用代码提示提取图像

从 PSD 文件中提取度量值                                  

使用 Extract 面板，可以轻松查看和提取 PSD 复合中任何两个元素之间的度量值。

    • 在 Extract 面板中的 PSD 文件中，请按住 Shift 键或 Command 键单击所需的元素。

      Extract 面板显示两个元素之间的水平距离和垂直距离。

      Extract 面板中的度量值

    • 单击所需值将其复制到剪贴板。

    • 将该值粘贴到所需的任意位置，例如，粘贴到 CSS Designer 的 CSS 属性中或者粘贴到代码中。

从 PSD 文件提取字体、颜色和渐变                                    

使用 Extract 面板，您可以提取字体、颜色或渐变等 CSS 属性，用于您的 PSD 复合中。

    • 在 Extract 面板中，单击“样式”。

    • 要提取字体，请在“字体”部分执行以下操作。

        • 扩展所需字体类型。

          要了解有关字体的更多信息，请单击 Adobe Typekit 图标（）。

        • 单击要复制的格式和大小，在显示的弹出窗口中，单击“复制 CSS”。Extract 会标记那些使用了您点击过的字体、格式和大小的文本元素。

          提取字体

          注意:您可以在 Extract 首选项中将字体的单位更改为“em”或“rem”（“首选项”>“Extract”）。在 Extract 面板右上角的弹出菜单中单击“重新加载 PSD”可以看到这些更改。

        • 将 CSS 粘贴到所需的任意位置，例如，粘贴到代码中或粘贴到 CSS Designer 中。

    • 要提取颜色，请在“颜色”部分执行以下操作：

        • 单击所需的颜色色板。Extract 会标记使用选定颜色的元素。

          注意：使用拾色器，也可以从 PSD 复合选择其他颜色。

        • 在单击色板时出现的弹出窗口中，选择所需的颜色模型（“RGB”、“Hex”或“HSL”），然后复制颜色（Ctrl+c、Cmd+c）值。

          提取颜色

        • 将颜色值粘贴到所需的任意位置，例如，粘贴到代码中或粘贴到 CSS Designer 中。

    • 要提取渐变，请在“渐变”部分单击渐变色板。在显示的弹出窗口中，单击“复制 CSS”。将 CSS 粘贴到所需的任意位置，例如，粘贴到代码中或粘贴到 CSS Designer 中。

      提取渐变

      在首选参数中选择的供应商前缀（“首选参数”>“CSS 样式”）将与渐变一起粘贴。如果提取径向渐变，则插入相应 CSS 时不带供应商前缀，因为不支持径向渐变。


,