新增功能概述

搜索

上次更新日期：

Dreamweaver CC 2014 版的最新更新包含与 Extract 的集成，可协助您在 Dreamweaver 中直接通过 PSD 复合建立移动和桌面网站。新的实时参考线更便于您准确地放置和重新排列 HTML 元素，经过增强的实时视图编辑可实时更改。

本文介绍了这些新增功能和其他多项增强功能，并提供指向更多帮助和学习资源的链接。

Adobe Dreamweaver CC 2014.1.1（2015 年 2 月版）

全新欢迎屏幕

您是第一次使用 Dreamweaver？您用过 Dreamweaver 并且想要丰富您的知识？您想知道以前的版本与当前版本相比发生了哪些变化？无论您是初学者还是有经验的用户，或者想评估 Dreamweaver 的新版本，现在，您都可以在欢迎屏幕上获取所有必要的学习资源。

Dreamweaver CC 2014 版的最新更新在欢迎屏幕上提供了对视频（包括新增功能）、动手教程、技巧与技术等更多内容的快速访问。

注意:

这个全新的欢迎屏幕只能由采用英语区域设置的用户使用。对于采用其他区域设置的用户，将在 Dreamweaver CC 2014.1 中显示欢迎屏幕和新增功能教程。

Extract 面板的增强功能

现在，当您从 Extract 面板拖动图像时，实时视图中会出现实时参考线和元素快速视图图标。这些可视化助理可帮助您快速准确地将图像放置在所需位置。

实时视图编辑的增强功能

拖放元素

现在您可以通过拖动关联的标签名称在实时视图中移动元素。当您将鼠标悬停在标签名称上时，会出现手形光标，指示该元素可以拖动。您可以在实时参考线的帮助下放置拖动的元素，实时参考线可以直观地指示元素被放下后的位置。

选取框选区

现在，您可以通过在标签（选取框选区）内的任意位置单击并拖动，来选择标签内的文本、图像或其他元素。选取框选区可帮助您方便地选择标签内的多个元素。

注意:

实时视图中的选取框选区只支持浏览器支持的那些操作。

元素显示增强功能

元素显示现在显示提示文本“类/ID”，以清楚地指示可以指定类或 ID。

此外，当您单击“＋”时，将会保存在元素显示中所做的更改。也可以按 Enter 或 Return 来保存更改，就像在 Dreamweaver 早期版本中的操作一样。

新的代码视图主题

代码视图中新增了 10 个颜色主题：

RecognEyes
Havenjark
Solarized Dark
Solarized Light
Wombat
Monaki
Schuss
Tango
Cool Light
Roboticket

有关“代码视图”主题的详细信息，请参阅设置“代码视图”的颜色主题。

CSS Designer 增强功能

此更新包含 CSS Designer 用户界面的几处更改以及“显示集合”复选框默认设置的一处更改。

启动时，默认情况下选中“显示集合”复选框，并且对此选项所做的更改将在各个 Dreamweaver 会话之间保留下来。例如，如果您取消选中此选项，下一个 Dreamweaver 会话将保留该设置，将该选项显示为未选中状态。

以下是用户界面中发生的变化：

在添加属性时，CSS Designer 面板会滚动：当您单击“属性”部分的“+”时，该面板会滚动，以便“添加属性”行差不多位于“属性”面板的中央。如果“属性”部分太小，面板将滚动以便在该部分的底部显示“添加属性”行。
背景突出显示：当焦点位于“添加新属性”文本框中，行以灰色背景突出显示。
“+”和“-”按钮的位置：原来出现在 CSS Designer 面板各部分（源、选择器、媒体查询和属性）中的“+”和“-”按钮现在从左侧移到最右侧，以使它们更显眼。
“自定义”类别现在称为“更多”。

实时视图的远程调试

现在，您可以使用 Google Chrome 开发人员工具在实时视图中远程调试已打开的 Dreamweaver 文档。在 Google Chrome 中，您可以通过执行以下步骤激活并使用端口 5471：

通过执行以下命令启动 Dreamweaver：
- Windows：<installation_path> -enableRemoteDebugging
- Mac：打开 <installation_path> --args -enableRemoteDebugging
注意：请在 args 前键入两个连字符
当指示端口 5471 已激活且可用于调试的对话框出现时，请单击“确定”。

Dreamweaver 已启动。

在对话框中单击“确定”以启动 Dreamweaver
打开您想在实时视图中进行调试的文档。
若要开始调试，请打开 Google Chrome 并浏览到 localhost:5471。将显示 Dreamweaver 中指向所有已打开文档的链接列表。

注意：由于新版欢迎屏幕和 Extract 面板使用 Chromium Embedded Framework (CEF)，您还将看到与这些功能相关的条目。

您现在可以使用 Google Chrome 开发人员工具调试所需文档了。
若要停止调试并在正常模式下打开 Dreamweaver，请退出 Dreamweaver 并再次启动该应用程序。

其他增强功能

重置首选参数工作流程的变化

现在，当您使用键盘快捷方式重置首选参数时，Dreamweaver 会在“Adobe Dreamweaver CC 2014.1 Backups”文件夹中创建首选参数备份。在 Windows 和 Mac 上，将自动在与原来的 Dreamweaver 首选参数文件夹所在的同一文件夹中创建此文件夹。

备份文件夹的完整路径显示在“重置首选参数”对话框中。

动态文档视图模式的变化

默认情况下，PHP、CFM 和 ASP 等动态文档不再在代码视图中打开。它们在与上一个关闭的文档或上一个处于焦点状态的文档相同的模式（代码/实时视图/拆分）中打开。

Adobe Dreamweaver CC 2014.1（2014 年 10 月版）

Dreamweaver 中的 Extract

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

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

在 Creative Cloud 上直接访问您的 PSD 文件以及在协作文件夹中与您共享的 PSD 文件
上下文代码提示可供轻松定义 CSS 中的字体、颜色和渐变
支持拖放，以便从 PSD 图层创建图像标记
将样式直接粘贴到“实时”视图中（例如 CSS Designer 和元素显示）

Dreamweaver 中的默认工作区（名为“Extract”）在左侧显示 Extract 面板，可协助您快速开始使用。在 Dreamweaver 首次启动时，Extract 面板将显示简单的教程，协助您了解 Extract 的工作流程。您可以单击“开始使用”，开始使用 Extract。

有关 Dreamweaver 中的 Extract 工作流程的详细信息，请参阅 Dreamweaver 与 Extract 的集成。

64 位体系结构

64 位版本的 Dreamweaver 现已推出并支持 32 位版本所支持的所有相同功能。利用此新增功能，现在您可以从 Adobe Creative Cloud 应用程序下载以下 Dreamweaver 版本：

操作系统	默认安装位置	Application Preferences 文件夹
32 位 Windows	C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1	%appdata%/Adobe/Adobe Dreamweaver CC 2014.1
64 位 Windows	C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1	%appdata%/Adobe/Adobe Dreamweaver CC 2014.1
64 位 Mac	/Applications/Adobe Dreamweaver CC 2014.1	~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

常见问题解答

64 位应用程序能否在 32 位版本的 Windows 上运行？- 否
能否在同一台 Windows 计算机上同时安装 32 位和 64 位版本？- 不能
如何检查我的系统运行的是 32 位还是 64 位版本的 Dreamweaver？
- Windows：启动 Dreamweaver。打开“任务管理器”并搜索 Dreamweaver 进程。如果启动的 Dreamweaver 版本是 64 位，则此进程的名称为“Dreamweaver.exe”。如果启动的 Dreamweaver 版本是 32 位，则此进程的名称为“Dreamweaver.exe *32”。
- Mac：打开“活动监视器”，然后转到“视图”>“列”>“种类”。在“活动监视器”中搜索“Dreamweaver”并注意“种类”列。如果 Dreamweaver 是 64 位，则“种类”列指示“64 位”。

安装 Dreamweaver 64 位版本

确保计算机运行的是 64 位操作系统：

若要检查计算机是否是 64 位，请按照以下文章中描述的步骤操作：
- Windows：http://support.microsoft.com/kb/827218
- Mac：http://support.apple.com/kb/ht3696
从 Creative Cloud 下载 Dreamweaver 64 位版本并安装该版本。

实时视图的增强功能

实时参考线

实时参考线是实时视图中的视觉反馈，在以下情况下指示可插入元素的位置：

从“插入”面板拖放时
从“资源”面板拖放时
在实时视图中拖动（移动）元素。

注意:

流体网格文档不支持实时参考线。

在放置元素之前，当您将鼠标悬停在页面中的不同元素上时，将会出现实时参考线。它们可以出现在悬停元素的上面、下面、左侧或右侧。

上面和下面 - 当鼠标悬停在所有类型的元素/标签（内联标签除外）上时出现。将鼠标悬停在元素的上半部分（顶部）时，参考线将出现在悬停元素的上方。将鼠标悬停在元素的下半部分（底部）时，指南将出现在悬停元素的下方。

左侧和右侧 — 当鼠标悬停在内联标签（如 <a>、<span>）上或悬停在设置了“浮动属性”的标签上时出现。

精确插入结构元素

可以使用元素快速视图与实时参考线将 HTML 元素更精确地插入到文档结构中。

如果在放置元素之前暂停一段时间，将会出现元素快速视图图标 (</>)。当您将鼠标悬停在该图标上时，将会打开元素快速视图，您可以将该元素放置在元素快速视图内。

“实时视图”中的上下文菜单

现在可在实时视图中使用右键单击上下文菜单剪切、复制、粘贴和删除元素。还可使用实时视图中的上下文菜单重复元素或选择父标签或子标签。

注意:

还可在实时视图中使用键盘快捷键（例如，Windows 中 Ctrl+x、Ctrl+c、Ctrl+v、Ctrl+d 和 Delete 键）。

首先，在实时视图中选择一个元素以查看“元素显示”。然后，在标签区域内右键单击以查看上述上下文菜单选项。选项只在标签级别起作用。

“元素显示”的更改

现在，您不仅可以将选择器用于元素，还可在所需的 CSS 源中创建选择器，并使用元素显示分配媒体查询。当您键入不存在于任何样式表中的选择器并按下 Enter 时，元素显示将提供选项，以便选择 CSS 源和媒体查询。

如果您不希望选择 CSS 源或媒体查询，请按 Esc 取消选项。

现在，您还可以右键单击某个已应用的选择器，转到相应的代码（“转到代码”选项），或粘贴已复制的样式（“粘贴样式”选项）。

注意:

“转到代码”选项显示是否将同一选择器添加到多个媒体查询的子选项。“粘贴样式”选项显示所复制的选择器是伪选择器或复合选择器的子选项。

在“实时视图”中移动元素

现在，Dreamweaver 支持在实时视图中移动元素（标签级别）。您可以在实时视图中选择一个元素并将它拖放到任何其他位置。

单击要移动的元素，在出现“元素显示”（元素周围的蓝色边框）之后，拖动元素。在初始化“拖动”时，鼠标光标会变化以指示元素已可供移动。
参考元素（要相对其位置来放置拖动元素的元素）将以蓝色边框突出显示。实时参考线（绿色）指示相对于参考元素的可能放置位置。

注意:

在实时视图中只能移动静态元素。无法移动动态内容标签（例如 PHP）。

实时视图中的键盘导航

Dreamweaver 现在支持使用键盘导航页面元素，以便为习惯使用键盘的用户提供方便并加快 Web 设计过程。您可以使用：

使用向上和向下箭头键在页面元素中导航。实时视图中的键盘导航有助于轻松访问嵌套和封装元素。
使用 Tab 键遍历“元素显示”中的选择器。

有关详细信息，请参阅“实时视图”中的键盘导航。

实时视图中的快速标签编辑器

现在，在实时视图中按下 Ctrl+T (Windows) 或 Cmd+T (Mac)，可为所选定的元素启动快速标签编辑器。快速标签编辑器有三种状态：“Edit Tag”（编辑标签）、“Wrap Tag”（环绕标签）和“Insert HTML”（插入 HTML）。使用 Ctrl/Cmd + T，可以在这些状态之间进行切换。

Dreamweaver 工作区的更改

文档工具栏的更改

文档工具栏经过修改，使用起来更简单。

设计视图和实时视图选项被合并为单一控件（下拉菜单）。

Dreamweaver CC（2014 年 10 月版）中的设计和实时视图选项 — Dreamweaver CC 最新更新（2014 年 10 月版）中的设计和实时视图选项

“文档标题”字段现已移至属性检查器。

Dreamweaver CC（2014 年 10 月版）中的“文档”工具栏 — Dreamweaver CC 最新更新（2014 年 10 月版）中的“文档”工具栏

在 Dreamweaver CC（2014 年 10 月版）中，“文档标题”字段已移至属性检查器 — 在 Dreamweaver CC 最新更新（2014 年 10 月版）中，“文档标题”字段已移至属性检查器

“检查”和“实时代码”按钮被图标取代。

Dreamweaver CC（2014 年 10 月版）中的“实时代码”和“检查”图标 — 最新更新 (Dreamweaver CC 2014 年 10 月版）中的“实时代码”和“检查”图标

“后退”、“前进”和“刷新”选项组合到地址栏中并放置在“文档”工具栏的中心位置。

Dreamweaver CC（2014 年 10 月版）中包含“后退”、“前进”和“刷新”选项的地址栏 — Dreamweaver CC 最新更新（2014 年 10 月版）中包含“后退”、“前进”和“刷新”选项的地址栏

“在浏览器中预览/调试”、“实时视图”选项和“文件管理”图标组合在一起并放在“文档”工具栏的右侧。

Dreamweaver CC（2014 年 10 月版）中的“在浏览器中预览/调试”、“实时视图”选项和“文件管理”图标 — Dreamweaver CC 最新更新（2014 年 10 月版）中的“在浏览器中预览/调试”、“实时视图”选项和“文件管理”图标

默认工作区的变更

可结合 Dreamweaver 使用的现成工作区变更如下：

代码
设计
提取

现在的默认工作区为 Extract。这个工作区在左侧显示 Extract 面板，在右侧显示网页。在 Dreamweaver 首次启动时，Extract 面板将显示简单的教程，协助您了解 Extract 的工作流程。单击“开始使用”，即可开始使用 Extract。

现在，HTML 文档的默认视图是拆分视图，水平拆分显示实时视图和代码视图。默认情况下，在完整代码视图中打开如下动态文件。拆分视图时，这些文档将在设计视图和代码视图中显示。

PHP
PHP 模板 (Example.dwt.php)
ASP
ASP 模板 (Example.dwt.asp)
JSP
JSP 模板 (Example.dwt.jsp)
CFM
CFM 模板 (Example.dwt.php)

HTML 文档的默认视图显示“实时视图和代码视图” — HTML 文档的默认视图显示实时视图和代码视图

提示：要切换至设计视图，请单击“实时”旁的下拉列表，然后单击“设计”。要将水平拆分变为垂直拆分，请选择“查看”>“垂直拆分”。实时/设计视图现在显示在左侧。要让实时/设计视图显示在右侧，请取消选择“查看”>“实时视图在左”或“设计视图在左”。

现在，Dreamweaver 记忆为 HTML 文档选择的实时视图状态，然后将同一视图应用于以后打开的所有 HTML 文档。例如，假设 HTML1 是您首次打开的文档。文档视图在代码视图和实时视图之间拆分。假定您将这个文档的视图更改为完整实时视图。然后，您打开的下一个文档（假设为 HTML2）将在完整实时视图中显示。

流体网格文档的更改

支持实时视图编辑

早期版本的 Dreamweaver CC 在实时视图中引入了新的编辑功能。在此版本中，实时视图中的这些编辑功能也可用于流体网格文档。在实时视图中编辑可加快流体网页的开发工作，因为您可以在同一视图中即时编辑和预览更改。

以下功能可帮助您在实时视图中编辑流体网格文档：

现在还可使用“元素快速视图”使流体网格文档的 HTML DOM 结构可视化。

注意：无法通过流体网格布局中的元素快速视图，复制、粘贴、重复或重新排列 HTML 元素。

用于查看和编辑流体网格文档的用户界面已更改，以适应实时视图中的编辑功能。现在，当您选择流体网格文档中的某个元素时，“元素显示”将与其它控件（如“隐藏元素”和“开始新行”）一起显示。

Dreamweaver CC（2014 年 10 月版）中结合“元素显示”的流体网格选项 — Dreamweaver CC 最新更新（2014 年 10 月版）中结合“元素显示”的流体网格选项

此外，流体网格文档现在将直接在实时视图中打开。您将无法再在设计视图中查看或编辑流体网格文档。

有关流体网格文档的详细信息，请参阅使用流体网格布局的响应式设计。

插入工作流程的更改

流体网格文档的“插入”对话框现在包含“位置助手”。位置助手让您将插入的元素放置在处于“焦点”状态的元素之前、之后或嵌套在其内部（在实时视图中）。有关插入流体网格元素的详细信息，请参阅插入流体网格元素。

“管理隐藏的元素”选项的更改

“管理隐藏的元素”选项（文档工具栏中的眼形按钮）被移至流体网格文档的上下文菜单中。

若要管理隐藏的元素，请右键单击流体网格页面并选择“管理隐藏的元素”以查看隐藏的元素。若要隐藏这些元素，可以单击 HUD 中的“眼睛”图标。

Dreamweaver CC（2014 年 10 月版）中鼠标右键单击菜单内的“管理隐藏的元素”选项 — Dreamweaver CC 最新更新（2014 年 10 月版）中鼠标右键菜单内的“管理隐藏元素”选项

用于代码视图的现成颜色主题

现在，您可以为代码视图选择以下随时可用的颜色主题之一：

经典（默认，与之前版本的 Dreamweaver 相同）
Raven
Slate
Blanche
Geneva

使用代码颜色首选参数为代码视图指定主题。通过为背景、前景和隐藏字符选择不同的颜色方案，您可以自定义主题。

对于列出的每个文档类型，可以自定义不同类别的标签和代码元素（例如与表单相关的标签或 JavaScript 标识符）的颜色。例如，将 Raven 主题应用于所有文档类型时，您可以选择只对 HTML 文档中与表单相关的标签使用蓝色。

单击“应用”时将会保存主题中的所有自定义设置，自定义主题将可用于所有 Dreamweaver 会话。

注意:

可使用“首选参数”中的“同步设置”选项，使自定义的代码主题在不同 Dreamweaver 实例之间保持同步。有关详细信息，请参阅与 Creative Cloud 同步 Dreamweaver 设置。

有关详细信息，请参阅设置“代码视图”颜色主题。

代码视图与实时视图同步

代码视图与实时视图同步使您能够在实时视图中即时预览对代码所做的更改。与之前版本的 Dreamweaver 不同，不必单击“刷新”即可在实时视图中预览更改。

在以下工作流程中可以看到代码视图与实时视图同步的实际运用（当焦点位于代码视图中时）：

文本操作，例如，剪切/复制/粘贴/删除、撤消/还原。
当焦点位于代码视图中时移动元素快速视图中的元素。
在代码视图中打字。
元素快速视图中的删除/复制/拷贝/粘贴操作（右键单击选项）。
属性检查器中的操作，例如，更改文本格式（粗体/斜体），更改类、ID、格式、页面属性，以及应用字体。
使用代码视图中的代码提示添加/删除类或 ID。
从“插入”面板将元素（例如，Div、图像、超链接和结构元素）插入到代码视图。
在 <style> 标签中添加/编辑 CSS 样式。
编辑 CSS 文件中的代码。

注意:

JavaScript 代码中的任何更改都需要完全刷新或重新加载页面，所做的更改才能在实时视图中反映出来。

实时视图中的“资源”面板

“资源”面板（“窗口”>“资源”）现已可在实时视图中使用。使用“资源”面板，可以轻松管理以下任务：

从“资源”面板的预览窗格或列表视图拖动或插入资源（图像、URL、颜色或媒体）。

注意：只能在 Mac 上从预览窗格拖动资源。

复制颜色值并将该值粘贴到 Dreamweaver 中的任何文本字段（如 CSS Designer 属性、代码视图、拾色器），甚至粘贴到其他应用程序（如记事本）。

注意:

由于脚本、模板和库类别在代码视图中所起的作用更大，因此实时视图的“资源”面板中已将它们隐藏起来。
在这个 Dreamweaver CC 版本中，Flash 和影片类别被合并为一个称为“媒体”的单一类别。

有关如何使用“资源”面板的详细说明，请参阅使用资源。

新的起始页模板

Dreamweaver 现在包含响应快速的起始页新模板，可帮助您更快地开始使用响应快速的网站。可以在“新建文档”对话框中选择以下模板之一（“文件”>“新建”>“起始页模板”）：

关于页面
博客文章
电子商务
电子邮件
组合

当您在“新建文档”对话框中选择模板并单击“创建”时，Dreamweaver 会提示您保存新文档。通过保存文档，可创建模板的副本，以后可以对其进行自定义以满足您的需要。

启动时重置首选参数

排查 Dreamweaver 问题有时需要删除包含所有自定义设置的首选参数文件夹。在此版本之前，您必须手动导航到计算机上的首选参数文件夹并将其删除。此版本提供了一个一键式选项，可以使用对话框删除首选参数：

通过在启动 Dreamweaver 时按住以下快捷键，可以打开“重置首选参数”对话框：

(Win) Windows 键 + Ctrl + Shift
(Mac) Cmd + Option + Shift

注意:

巧妙地使用“重置首选参数”选项。当您重置首选参数和设置时，工作区、键盘快捷键、扩展和应用程序首选参数的所有自定义设置将丢失。

在 Mac 系统中，同时按下 Cmd + Option + Shift 不放，同时启动 Dreamweaver（通过单击 Dock 中的 Dreamweaver 图标）。

在 Windows 系统中，请执行以下步骤：

转到安装文件夹，找到 Dreamweaver.exe，然后单击该文件。
同时按下 Windows 键+ Ctrl + Shift 键不放，并双击 Dreamweaver.exe。

务必按住上述快捷键，即使在出现用户帐户控制 (UAC) 对话框时也要按住。

其他增强功能

同步设置的更改

现在，您可以使用“首选参数”对话框，从 Dreamweaver 的早期版本中导入之前保存在 Creative Cloud 上的设置。从云端导入的设置将覆盖所有本地设置，并将在 Dreamweaver 下次启动时应用。

此外，从此版本开始，除了在以前版本中同步的设置以外，还将与 Creative Cloud 同步以下设置：

新添加的代码颜色主题
Mac 上的应用程序栏和应用程序框架设置

CSS Designer 变更

Dreamweaver 的这个版本包含对 CSS Designer 用户体验的诸多改进。CSS Designer 面板还包含实践体验，协助您快速开始处理工作流程。

欢迎屏幕的变更

现在，欢迎屏幕中的网站模板被起始页模板所取代。您可以在“新建文档”中访问网站模板（“文件”>“新建”）。

jQuery 版本更新

现在，Dreamweaver 包含经过更新的 jQuery 库如下：

jQuery - 1.8.3 至 jQuery - 1.11.1
jQuery UI - 1.9.2 至 jQuery UI - 1.10.4

jQuery 起始页已删除。

PhoneGap 更新

Dreamweaver CC 2014 版的最新更新（2014 年 10 月版）及更高版本不支持将 Dreamweaver 直接集成 PhoneGap Build 以打包应用程序。

但是，您可以直接访问在线 PhoneGap Build 服务并使用最新功能更新，以便将您的 Web 应用程序作为本地移动应用程序打包。

登录到您的帐户