功能摘要 | Dreamweaver CC | 2015 版本

Dreamweaver CC 2015.1、2015.2 和 2015.3 版为您在 Dreamweaver 中设计和构建网站带来了突破性体验。现在可以从 Dreamweaver 内部访问 Creative Cloud 库和 Adobe Stock，以便将 Adobe 桌面和移动应用程序中的设计元素和样式与高质量的图像和视频集成。Creative Cloud 中的协作功能提供了一个从设计人员到开发人员的流畅工作流程。

此版本还包括针对 DOM 面板、响应性 Web 设计、Extract、实时视图编辑以及像您这样的用户提出的其他增强请求而提供的多项增强功能。本文介绍了这些新增功能和增强功能，并提供指向更多帮助和学习资源的链接。

此版本的 Dreamweaver 解决了 Dreamweaver 运行时 Windows 计算机无法进入“睡眠”模式的问题（唤醒定时器问题）。 

有关详细信息，请参阅Dreamweaver 运行时计算机无法睡眠 | Windows。

Adobe Dreamweaver CC 2015.2 （2016 年 3 月版）

DOM 面板增强功能

DOM 面板支持多个选择，并可编辑标签、类和 ID 以及插入新元素，您现在仅通过该面板即可完成大部分网页的布局和设计。

继续阅读，详细了解 DOM 面板的这些增强功能：

• 支持元素多选
• 在 DOM 面板中编辑标签、类和 ID
• 在 DOM 面板中插入元素
• 子节点的可视化反馈

支持 DOM 元素多选

您现在可以在文档的 DOM 面板中选择多个标签，以便同时对多个标签进行编辑或执行其他操作。

• 要想连续选择，请按住 Shift 键并单击 DOM 面板中的标签。
• 要想非连续选择，请按住 Ctrl 键并单击 DOM 面板中的标签。

在 DOM 面板中选择多个元素时：

• 属性检查器和 CSS Designer 处于禁用状态。
• 将会清除页面底部显示的标签层次结构。
• 代码视图中的插入点变为非活动状态。

在 DOM 面板中编辑标签、类和 ID

您现在可以通过在 DOM 面板中双击标签、类和 ID 进行编辑。您还可以添加其他类或 ID，并使用空格来分隔它们。对于未与类或 ID 关联的标签，您可以在双击标签后键入类或 ID 的名称。

在您开始键入标签、类或 ID 名称时显示代码提示。要将提示缩小至类，请以圆点开始键入。要仅在提示中查看 ID，请以井号 (#) 开始键入。

要删除标签，右键单击 DOM 面板中的标签并单击“删除标签”。

在 DOM 面板中插入元素

您现在可以使用 DOM 面板通过以下方式之一将新元素插入到您的网页中：

• 按空格键或单击 DOM 面板中与所需元素相邻的插入图标。在显示的弹出菜单中，单击其中一个选项。要将多个元素包含在一个标签中，请选择所需元素，然后从插入选项中选择“环绕标签”。

• 在“插入”面板中单击所需元素，然后将该元素拖至 DOM 面板。此时显示实时参考线以指示将插入元素的位置。将元素拖至所需位置。

使用 DOM 面板插入标签时，也会插入标签的默认（占位符）文本和必需属性：

• 插入下列任何标签并提交更改时，都会在“代码”、“实时”和“设计”视图中插入默认文本：
  div、header、nav、aside、article、section、footer、h1-h6 以及 hgroup
• 插入 table 标签并提交更改时，会插入一个 3X3 表格。
• 插入 embed 或 img 标签并提交更改时，会出现“选择文件”对话框，提示您选择一个适当的文件。
• 插入 meta 标签并提交更改时，会在代码视图中添加下列代码：<meta name="" content="">
• 插入 figure 标签并提交更改时，会插入带嵌套 figcaption 的 figure 标签。
• 插入 ul 或 ol 标签并提交更改时，会插入带嵌套 li 标签的 ol/ul 标签。

子节点的可视化反馈

在 DOM 面板中选择一个节点时，它的子节点会显示为浅蓝色。

如果已明确选择子节点，则不会突出显示浅蓝色。

防止 Gatekeeper 漏洞的安全增强功能

Gatekeeper 是 Mac OS X 10.7 及更高版本中内置的恶意软件检测功能。此功能会在 Mac 上安装应用程序之前检查它们的有效开发者 ID 签名。但是，Gatekeeper 不会检测或阻止从具有有效签名的应用程序内动态加载的应用程序。如果从未经授权的来源购买 Dreamweaver，则可能会有人利用 Gatekeeper 的这一缺陷在 Dreamweaver 安装包中加入恶意插件。

为了防止任何潜在漏洞，如果是安装在 /Applications 以外的位置，Dreamweaver 现在会提示您确认是否要加载第三方插件。

有关详细信息，请参阅防止潜在的 Gatekeeper 漏洞。

CEF 集成

Dreamweaver 现已与 CEF3 2357 集成。实时视图现在可以呈现 CSS3 3D 过渡、
动画和变形。

有关详细信息，请参阅 CEF 集成。

可视媒体查询的增强功能

使用“视觉媒体查询”栏添加媒体查询时，您现可选择单位 px、em 或 rem。如果以一种单位指定值，然后更改了单位，则该值会自动转换为新选择的单位。

有关详细信息，请参阅可视媒体查询。

CC 库的增强功能

更改为“重新取样”对话框

“图像优化”对话框中的 UI 标签“将大小调整为”已更改为“重新取样至”。

而且，从“CC 库”面板进行图像取样时，图像上会出现微调框，直到图像采样完成。

有关详细信息，请参阅 Dreamweaver 中的 Creative Cloud 库。

从 CC 库提取 Web 优化的 SVG 文件

如果您已在 Creative Cloud 库中保存获得许可的 Adobe Stock 图像，则可以在您的 Dreamweaver 网页中将这些图像提取为 Web 优化的 SVG 文件。当您将图像从“CC 库”面板拖动至您的网页中时，默认情况下这些图像将作为 SVG 文件插入。

如果您要自定义 SVG 文件的属性，则可以在 options.json 文件中编辑首选项。

有关更多信息，请参阅从 CC 库提取 Web 优化的 SVG 文件。

新的起始页模板

在此内部版本中添加了三个新的电子邮件模板：Email-Fluid、Email-Hybrid、Email-Responsive。

要访问这些模板，请转到“文件”>“新建”>“起始页模板”>“电子邮件模板”。

实时视图中表格编辑的增强功能

新的行和列编辑选项

实时视图中的表格现在具备以下编辑选项：

• 使用 Delete/Backspace 键进行删除。
• 使用上下文菜单、“编辑”菜单或键盘快捷方式进行剪切。
• 使用上下文菜单、“编辑”菜单或键盘快捷方式进行复制。
• 使用上下文菜单、“编辑”菜单或键盘快捷方式进行粘贴。
• 使用上下文菜单中的“替换所选单元格”选项复制和替换其他行或列。

要查看这些选项，通过选择表格并单击“元素显示”的 sandwich 图标进入表格格式设置模式。然后，选择所需单元格并右键单击。

在行和列之间导航

您现可使用左右箭头键，在实时视图的表格单元格之间导航。单击表格内的一个单元格，按左箭头键可以转到上一个单元格，按右箭头键可以转到下一个单元格。

欢迎屏幕的变更

在 Dreamweaver 的这一版本中，对欢迎屏幕进行了更改：

Adobe Dreamweaver CC 2015.1（2015 年 11 月版）

与 Creative Cloud 库的集成

借助对 Creative Cloud 库的全新支持，您可以实现协作并共享在其他设计工具（如 Photoshop、Illustrator 或移动应用程序）中创建的图形和颜色主题。您可以随时随地在不同的 Dreamweaver 项目之间浏览、管理和访问所需的创意资源。 

在插入来自 Creative Cloud 库的资源时，您可以选择保留资源和来源之间的链接，从而使您的资源可随时获得更新。

Dreamweaver 中的新 CC 库面板可帮助您查看 Creative Cloud 库中的资源并将这些资源插入您的网页。您可以使用代码提示将资源插入到实时视图或代码视图。

有关详细信息，请参阅 Dreamweaver 中的 Creative Cloud 库。

与 Adobe Stock 的集成

利用与 Adobe Stock 的集成，您可以将免版税图像、矢量图形和视频直接下载到 Creative Cloud 库并直接从 Dreamweaver 中轻松管理和重用 Adobe Stock 内容。

在 Adobe Stock 中查找完美的图像、图形和视频，以便为您的网站赋予对受众吸引力十足的视觉感染力 - 同时您还不必退出 Dreamweaver。

响应性设计的增强功能

• Bootstrap 增强功能
• 可视媒体查询的增强功能

Bootstrap 增强功能

支持 Bootstrap v3.3.5

Dreamweaver 中使用的 Bootstrap 版本已更新至 3.3.5 版。因此，Bootstrap 组件、片段和起始页模板现在都是 3.3.5 版。 

jQuery 版本也已更新至 1.11.3。

复制行和列

除了实时视图中针对 Bootstrap 文档的“添加行”/“添加列”功能外，Dreamweaver 现在还允许您复制行和列。

您可以通过单击出现在右下角的复制图标 () 复制选定行或列。将复制整个行或列及其内容。

Bootstrap 文档创建工作流程的增强功能

无论您是从“新建文档”对话框还是从起始页模板创建 Bootstrap 文档，工作流程现在都是无缝的。不再像之前的 Dreamweaver 版本那样出现“复制相关文件”和“覆盖现有文件”对话框。

当您在某个特定位置创建并保存 Bootstrap 文档时，依赖文件会自动保存在同一位置。

“可视媒体查询”的增强功能

• 突出显示当前断点值
• 添加媒体查询工作流程的增强功能
• 断点编辑的增强功能

突出显示当前断点值

Dreamweaver 现在突出显示与当前视口大小关联的媒体查询，以便您能快速识别它们。媒体查询的断点值以较深色的箭头和深色背景形式突出显示。

添加媒体查询工作流程的增强功能

现在，当您单击“可视媒体查询”栏上的 + 时，Dreamweaver 不会提示您单击 max-width 或 min-width 选项，而是会立即出现用于添加媒体查询的弹出窗口。
 

并且，默认情况下，弹出窗口中的 max-width 选项已选中。它还引入了一个下拉列表，便于您将选项更改为 min-width 或 min-max。 

断点编辑的增强功能

现在，您可以通过双击“可视媒体查询”栏中的断点值来编辑媒体查询值。当您双击断点值时，会显示橙色边框，边框内会出现插入点。

输入新值（以像素为单位）后，按 Enter/Return 提交更改，或按 Escape 放弃更改。

“转到代码”选项中的行号显示

“可视媒体查询”的右键单击上下文菜单中的“转到代码”选项现在显示了代码行号，使您可以轻松关联相应代码。

Extract 的增强功能

• 支持多画板
• 支持提取“投影”
• 处理不支持的图层样式的提示

支持多画板

现在，您可以在 Dreamweaver Extract 面板中使用多个画板打开 PSD 以提取资源。每个画板都显示为图层面板中的一个文件夹。您可以展开或折叠文件夹以显示或隐藏其内容。

要放大到某个特定画板，只需单击画板名称即可。

双击面板标题中的“适合”可缩小画板，并使 PSD 适合当前视图。

支持提取投影

从具有“投影”属性的 PSD 文件中提取 CSS 时，该属性现在会作为 CSS 中的 box-shadow 而被提取。

处理不支持的图层样式的提示

许多情况下，您需要在 PSD 文件中创建多个图层样式，这些样式可以单独运行，但不能协同运行。Extract 会检查此类情况，并为您提供如何处理这些图层样式的建议。

Extract 会检测以下情形：

• 情形 1：多个关于转换为背景颜色的任何属性的实例。例如，在 PSD 文件中定义的两个颜色叠加或两个渐变叠加。
• 情形 2：不透明度低于 100% 的颜色叠加放置在渐变叠加之上，或者为该图层指定一种背景颜色。在这种情况下，很难确定混合生成的颜色。
  
• 情形 3：渐变叠加的不透明度低于 100%，并且已经为该图层指定了背景颜色。在这种情况下，也很难确定混合生成的颜色。
  

如果检测到这些情况，Extract 会在 Extract 面板中的图层缩略图上显示警告图标。图层缩略图弹出窗口以及该图层的 CSS 中会显示以下警告消息：

“本图层包含多个无法在 CSS 中表示的图层样式。使用拾色器或提取图层作为图像。”

此外，如果一种半透明背景颜色叠加在另一种背景颜色上（上述情形 2 和 3），那么所有背景颜色的值都会显示在 CSS 中。然后，您可以提取所需值。

实时视图编辑的增强功能

• 表格编辑的增强功能
• 文本的“快速属性检查器”
• 对图像的快速属性检查器的更改

表格编辑的增强功能

通过单击选择行或列

您现在可以在实时视图中通过单击选择表格的行和列。该视图中引入了一个新的箭头图标（与设计视图中类似），您可以通过单击该图标选择行或列。

拖动选择多个单元格

您现在可以通过拖动选择多个单元格/行/列。点击一个单元格，然后跨多个单元格/行/列进行拖动，即可选中它们。

使用 Delete 键删除行或列

您现在可以通过选择行或列并按 Delete/Backspace 键来删除它们。

文本的快速属性检查器

现在您可以在实时视图中使用文本的快速属性检查器，来快速设置文本格式、缩进文本以及为文本添加超链接。当您单击文本元素（h1-h6、pre 和 p）的 sandwich 图标时，文本的快速属性检查器将会出现。

• 可利用格式选项快速将元素标签更改为以下标签之一：h1-h6、p 和 pre。 
• 链接选项可帮助您超链接文本元素。 
• 粗体和斜体的图标可帮助您将 <strong> 和 <em> 标签添加到文本元素。
• 块引用图标可以帮助您添加或删除文本缩进。系统将会相应地添加标签或从代码中删除标签。
  

在 Bootstrap 文档中，还可利用文本的快速属性检查器来对齐和转换文本元素。

• 对齐：通过应用相应的类，将 Bootstrap 文本元素左对齐、居中对齐、右对齐或两端对齐。
• 转换：通过应用小写、大写或句首字母大写类来更改元素的文本大小写。

对图像的快速属性检查器的更改

图像的快速属性检查器现在包含用于自定义 Bootstrap 文档中的图像的选项。

• 剪切为形状：单击以将图像的角剪切为圆角或缩略图。
• 使图像快速响应：单击以使图像快速响应并进行调整以适合各种屏幕大小。

应用程序内更新

Adobe 会不断提供更新，从而使 Dreamweaver 跟上不断发展的技术。例如，对 Bootstrap 库或起始页模板的更新。

您可以自动或手动下载并安装应用程序内更新。您还可以禁用应用程序内更新，或卸载这些更新并将 Dreamweaver 还原到上一次使用 Adobe Creative Cloud 桌面应用程序安装或更新它的状态。您可以利用“Dreamweaver 首选参数”对话框指定更新、禁用或还原应用程序内更新的模式。

有关应用程序内更新的更多信息，请参阅应用程序内更新。

测试服务器 - 工作流程改进

在上一版本 (Dreamweaver CC 2015) 中，我们引入了自动将文件推送到测试服务器以便实现在实时视图中无缝编辑动态文档的体验。很多用户要求提供禁用此功能的能力，因此我们现在在“站点设置”对话框中引入了新的首选参数。

有关详细信息，请参阅禁用动态文件的自动推送。

基于所选内容的代码折叠

重新引入了针对所选代码块的代码折叠。您现在可以：

• 像在上一版本的 Dreamweaver 一样在标签级别折叠代码，并且/或者：
• 通过选择要折叠的代码部分进行折叠。

单击“-”可折叠代码。要展开折叠的代码部分，请单击“+”。

关于折叠代码的详细信息，请参阅折叠代码。

CSS Designer 增强功能

• 重新排列选择器
  
• CSS Designer 中的窗格可保留自定义大小
• 已禁用 Bootstrap 文件的“属性”面板
• 不推荐使用的 API

重新排列选择器

现在，您可以通过将“选择器”窗格中的选择器拖到窗格中的所需位置来重新排列选择器。

CSS Designer 中的窗格可保留自定义大小

如果您在 CSS Designer 中展开或折叠窗格，窗格的大小在会话中保持不变。“源”和“媒体”窗格会保持自定义大小，直到您再次更改其大小。

Bootstrap 文件的“属性”面板被禁用

在 Bootstrap 文件中，样式在 Bootstrap CSS 文件中定义并设置为只读，CSS Designer 中的“属性”窗格被禁用。

针对活动文档的撤消/还原

撤消和还原操作现在仅限于活动文档。

默认情况下，撤消/还原操作将影响当前处于活动状态的文档和所有相关文件（如关联的 CSS 文件）。当您将撤消操作限制到活动文档时，撤消/还原只会应用于在当前具有焦点的文件中进行的更改。例如，如果是在 HTML 文件中，那么撤消/还原操作只会影响您在 HTML 文件（而非相关的 CSS 文件）中进行的更改。要撤消/还原您在某个相关的 CSS 文件中进行的任何更改，您必须在执行撤消/还原前切换到该 CSS 文件。

如果焦点在实时视图或设计视图中，则撤消/还原只会应用于影响了 HTML 代码的更改。例如，假定您正在实时视图中编辑 Bootstrap 页面。您编辑某些文本，然后调整“可视媒体查询”栏中的媒体查询的大小。您只能撤消文本编辑，而不能撤消媒体查询更改，因为这些更改在相关文件中，而不是在 HTML 文件中。您可以切换到相关 CSS 文件并撤消更改。

要将撤消和还原操作限制到当前文件，请执行以下步骤：

DOM 面板的改进

现在，您可以使用面板中的右键单击上下文菜单，复制文档的 DOM 面板中的一个标签并将其粘贴到另一个文档的 DOM 面板中。

新增功能指南的“重置”选项

在您更新 Dreamweaver 后首次启动时自动显示新增功能指南（功能浮动体和上下文功能提示）。功能浮动体帮助您在新更新中寻找新增功能，上下文功能提示则帮助您发现新的工作流程和功能增强。

在 Dreameaver 的后续启动中，默认情况下禁用这些新增功能指南，不显示它们。如果您要再次看到它们，可以使用 Dreamweaver 首选参数中的“重置”选项。

W3C 验证程序的更新

现在已更新 Dreamweaver 以对 W3C 的 HTML5 使用新验证程序服务：https://validator.w3.org/nu/。旧的验证程序服务 validator.w3.org 现在已过时。

新验证程序服务仅支持以下解析程序：

与上一版本的 Dreamweaver 中一样，如果 Dreamweaver 无法根据文档内容类型或 DTD 识别解析程序，您仍可以指定 Dreamweaver 可挑选的回退解析程序。只更改了与使用新验证程序有关的可用解析程序列表。

有关详细信息，请参阅使用 W3C 验证程序验证文档。

对“资源”面板中的 SVG 文件提供支持

“资源”面板现在列出了 Dreamweaver 站点中所有与当前活动文档相关联的 SVG 资源。与“资源”面板中的任何其他资源一样，您可以对 SVG 资源执行各种操作，例如，在不同文档和站点中编辑、分配 URL 和重新使用资源。

“缩放”选项的更改

Dreamweaver 不再支持使用以下操作在实时视图和设计视图中进行缩放：

Windows：

• 按 Ctrl 并使用鼠标滚轮
• 按 Ctrl 并使用触控板上的滚动条

Mac：

• 按 Cmd 并使用鼠标滚轮
• 按 Cmd 并使用触控板上的滚动条

缩放文档的其他方式并未发生更改：按 Cmd/Ctrl++ 或 Cmd/Ctrl+-，也可以从“视图”>“缩放比率”菜单进行缩放。

“视图”菜单的更改

“代码和实时”/“代码和设计”选项在“视图”菜单中被重命名为“拆分”，且与其在“文档”工具栏中的作用相同。

更快地将 Dreamweaver 设置与 Creative Cloud 同步

通过同步设置功能中的几项性能改进，您可以比以往更快地在 Dreamweaver 实例和 Creative Cloud 之间实现设置同步。 

不推荐使用的 CSS 样式面板和 API

较旧的“CSS 样式”窗格已从 Dreamweaver 中删除，因此，相关的 API 也将删除。

以下基本 API 仍然可用：

• dreamweaver.cssRuleTracker.newRule()

• dreamweaver.cssStylePalette.getStyles()

• dreamweaver.cssStylePalette.editStyleSheet()

• dreamweaver.cssStylePalette.attachStyleSheet()

• dreamweaver.cssStylePalette.getMediaType()

• dreamweaver.cssStylePalette.setMediaType()

• dreamweaver.cssStylePalette.getDisplayStyles()

• dreamweaver.cssStylePalette.setDisplayStyles()

• dreamweaver.cssStylePalette.newStyle()

今后将不再支持下列 API：

• dreamweaver.cssRuleTracker.editSelectedRule()

• dreamweaver.cssRuleTracker.canEditSelectedRule()

• dreamweaver.cssStylePalette.getSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.renameSelectedStyle()

• dreamweaver.cssStylePalette.applySelectedStyle()

• dreamweaver.cssStylePalette.duplicateSelectedStyle()

• dreamweaver.cssStylePalette.deleteSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.canRenameSelectedStyle()

• dreamweaver.cssStylePalette.canDuplicateSelectedStyle()

• dreamweaver.cssStylePalette.canDeleteSelectedStyle()

• dreamweaver.cssStylePalette.canApplySelectedStyle()

• dreamweaver.canDisableSelectedStyle()

• dreamweaver.canEnableAllDisabled()

• dreamweaver.canDeleteAllDisabled()

• dreamweaver.getSelectedStyleIsDisabled()

• dreamweaver.setSelectedStyleIsDisabled()

• dreamweaver.enableAllDisabled()

• dreamweaver.deleteAllDisabled()