2015 版 Dreamweaver CC 专注于快速响应设计、代码编辑功能的改进、在设备上进行网页预览以及从 Photoshop 复合中批量提取具有多种分辨率的 Web 优化图像。与 Bootstrap 框架的集成可帮助您构建移动优先、快速响应的网站。视觉媒体查询通过让您在各种断点处对您的设计进行可视化和修改,进一步完善了快速响应网页设计的体验。
此版本还包括实时视图和 CSS Designer 中编辑功能的若干增强。本文介绍了这些新增功能和增强功能,并提供指向更多帮助和学习资源的链接。

Dreamweaver CC 2015 年版的修补程序于 7 月份发布,可使 Dreamweaver 利用 Adobe Creative Cloud 桌面应用程序中指定的代理服务器设置。有关更多信息,请参阅指定代理服务器设置。
Dreamweaver 现在可让您在多个设备上同时测试即将发布的正式版网页。您可以查看网页如何在各种外形规格下进行回流,还可以在您的页面上测试交互功能。无需安装任何移动应用程序或将设备物理连接到您的桌面,即可实现所有这些功能!只需使用您的设备扫描自动生成的 QR 代码,并在设备上预览网页。
有关详细信息,请参阅在多台设备上预览和检查网页。
“可视媒体查询”栏可直观显示页面中的媒体查询。这些栏可帮助您可视化不同断点处的网页以及网页组件在不同视口中的回流的差异程度。在不同视口查看页面时,无需影响其他视口的页面设计即可进行特定于某个视口的设计更改。
可视媒体查询的水平行上有 3 栏,每栏表示媒体查询的一个类别:
绿色:包含 max-width 条件的媒体查询
蓝色:同时包含 min-width 和 max-width 条件的媒体查询
紫色:包含 min-width 条件的媒体查询

有关详细信息,请参阅“可视媒体查询”。
在这一新版本的 Dreamweaver 中,现在您可以使用 linting 调试常见错误的代码。Linting 是分析代码以标记代码的潜在错误或可疑用法的过程。Dreamweaver 可以在加载、保存或编辑 HTML、CSS 和 JavaScript 文件时对它们执行 linting。错误和警告将在新的输出面板中列出。
有关详细信息,请参阅使用 linting 检查代码。

您是在 Dreamweaver 中键入多行代码的劲头十足的开发人员吗?使用 Emmet 缩写编写代码可节省时间。这些缩写很容易记住和键入,当您按 Tab 键时它们将会在“代码”视图中展开为完整的代码。
有关详细信息,请参阅使用 Emmet 插入代码。
如果使用的是“拆分”视图,可在“实时”或“设计”视图中实时查看对图像或颜色所做的任何更改。但是,如果您愿意只使用“代码”视图,则图像仅显示为文件名,这通常很不直观。同样,颜色也仅显示为一组模糊的数字(除非使用了预定义的颜色)。借助此版本的 Dreamweaver,可直接在“代码”视图内快速预览图像和颜色。此功能帮助您从视觉上将图像文件名和颜色格式与所呈现的实际图像或颜色联系起来。由此,可加快做出设计决定的速度并大幅减少开发时间。
有关详细信息,请参阅在“代码”视图中预览图像和颜色。


“代码”视图也显示错误预览。错误代码的行号高亮显示为红色。将鼠标悬停在行号上时,将显示错误的简要说明。
注:仅显示此行中的第一个错误。如果行中仅包含警告,则会显示警告的说明信息。如果行中既包含警告,又包含错误,则仅显示错误的说明信息。
有关使用代码段的信息,请参阅使用代码段。
此外,您现在还可以利用云同步功能使代码段在所有 Dreamweaver 安装中保持最新。有关将代码段与 Creative Cloud 和您的其他 Dreamweaver 安装同步的信息,请参阅将 Dreamweaver 设置与 Creative Cloud 同步。
Bootstrap 是用于开发响应迅速、移动优先网站的最受欢迎的免费 HTML、CSS 和 JavaScript 框架。该框架包括响应迅速的 CSS 和 HTML 模板,这些模板适用于按钮、表格、导航、图像旋转视图以及您可能会在网页上使用的其他元素。还提供了几个可选的 JavaScript 插件,这使只具备基本编码知识的开发人员也能够开发出快速响应的出色网站。
利用 Dreamweaver,您可以创建 Bootstrap 文档,还可编辑使用 Bootstrap 创建的现有网页。您可以从“新建文档”对话框(“起始页模板”>“Bootstrap 模板”)中选择其中一个 Bootstrap 起始页模板,开始设计 Bootstrap 网站。
您还可以通过“新建文档”对话框(“新建文档”> Bootstrap)创建自定义 Bootstrap 文档。然后,使用 Bootstrap 组件(例如使用 Dreamweaver 中的插入面板添加的折叠控件和旋转视图)逐步构建网站。或者,如果您有 Photoshop 复合,则可以使用 Extract 将图像、字体、样式、文本等导入您的 Bootstrap 文档。

无论是设计完善的 Bootstrap 文件还是仍在设计中的文件,您都可以在 Dreamweaver 中编辑它们,并且不仅可以编辑代码,还可使用实时视图编辑、可视 CSS 设计器、可视媒体查询和 Extract 等可视编辑功能进行设计方面的更改。
注意:
对于使用早于版本 3 的 Bootstrap 框架创建的网站,用于隐藏和取消隐藏元素以及编辑行和列(添加、调整大小或偏移)的可视化编辑工具在 Dreamweaver 中不可用。
有关详细信息,请参阅使用 Bootstrap 文件。
有关详细信息,请参阅调整表格大小与设置表格和单元格格式。
注意:
系统根据您选择插入的元素显示上述功能。
有关详细信息,请参阅直接在“实时视图”中插入元素。
元素快速视图现已更改为 DOM 面板(“窗口”> DOM)。DOM 面板可提供元素快速视图所提供的所有功能以及更多功能。所有工作区均提供此面板,而且可永久使用,也就是说,您可以同时打开两个文档并打开和访问其 DOM 面板。
借助 DOM 面板,您可以:
- 从插入面板拖动元素,以将其准确地插入文档结构中。
- 在文档中拷贝、粘贴、复制、移动或删除结构元素。
- 借助文档结构,在上下文中查看页面上的任何元素,处于“焦点”状态的元素在 DOM 面板中会突出显示。
有关使用 DOM 面板及使用此面板编辑 HTML 结构的详细信息,请参阅 DOM 面板。

从此版本开始,Dreamweaver 团队会提供某些功能的预览,以收集客户反馈。根据这些反馈,团队将会进一步改进这些功能,并将其作为 Dreamweaver 的核心功能包含在内。您可以在“首选参数”对话框的“技术预览”类别中访问此类功能。
此版本中的预览功能为代码高亮显示。此功能会高亮显示代码视图中任何选定文本的所有匹配项。
您可以使用以下键盘快捷键在高亮显示的文本之间导航:
- 选择下一个匹配项:F3 (Win);Cmd+G (Mac)
- 选择上一个匹配项:Shift + F3 (Win);Cmd + Shift + G (Mac)
在此 Dreamweaver 版本中,您可以生成自定义预览弹出窗口,当您将鼠标悬停在代码视图的代码上时,会显示该弹出窗口。要实现自定义预览,您可以将新的 API、showPreview 和现有的 mm:browsercontrol API 一起使用。例如,您可以使用这些 API,当您将鼠标悬停在一项 JavaScript 功能的名称上时显示该功能所有参数的预览。
有关详细信息,请参阅 Dreamweaver API 参考:“代码”视图功能。
在 Dreamweaver 的早期版本中,必须先在“代码”视图中选择代码块,然后再将其折叠。在本版本及更高版本中,只需将鼠标悬停在行号上并单击出现的三角形即可折叠代码块。
代码折叠基于标签块且可用于 HTML、CSS、LESS、Sass、SCSS、JS、PHP、XML 和 SVG 文件。
复制、剪切、粘贴和拖放操作均保留代码折叠状态。例如,复制已折叠的代码块时,粘贴操作会将复制的文本粘贴为折叠块。
有关详细信息,请参阅折叠代码。
设备不仅能大小各异,而且分辨率也各不相同。您规划的响应快速的网页设计必须适应各个设备上相应呈现的多种分辨率版本的图像。但是,在项目中为所有图像创建众多不同的分辨率版本可能会是一项艰巨的任务。
Dreamweaver 中的 Extract 能够在很大程度上简化这一任务。在 2015 版 Dreamweaver 中提取来自 Photoshop 复合的图像时,您还可以选择提取该图像的不同分辨率版本。Photoshop 中的图像会在提取过程中自动调整为不同的预定义分辨率。
有关详细信息,请参阅从 PSD 文件中提取图像。



现在,您可以在实时视图中将元素插入其他元素之中。当您在插入面板、资源面板或实时视图中拖动元素,并将鼠标悬停在页面上的不同元素上时,您会看到嵌套元素的可视化反馈(在参考线之前和之后)。
- 参考线之前/之后:当您将鼠标悬停在元素顶部和底部的 30% 时。
- 嵌套可视化反馈:当您将鼠标悬停在元素中部的 40% 时。

目前 CSS Designer 提供了两种不同模式,用于查看和编辑 CSS 属性:
- “全部”模式:此模式将列出当前文档中的所有 CSS、媒体查询和选择器。而它对“设计”或“实时视图”中的选定内容不敏感。
如果要创建 CSS、媒体查询和选择器,此模式是最佳选择。
- “当前”模式:此模式将列出“设计”或“实时视图”中所有选定元素的已计算样式。在 CCS 文件中,如果焦点位于选择器上,则此模式将显示此选择器的属性。


CSS Designer 面板中的媒体查询现已对颜色进行了编码以匹配“可视媒体查询”。

如果您打开一个站点或导入在早期版本的 Dreamweaver 中创建的站点的设置,并指定某个服务器同时作为测试服务器和远程服务器,则系统会创建一个重复的服务器条目。然后,将一个标记为远程服务器(使用 _remote 后缀),将另一个标记为测试服务器(使用 _testing 后缀)。
打开、创建或保存为动态文档所做的更改时,Dreamweaver 目前会将动态文档自动同步到测试服务器。Dreamweaver 不再针对测试服务器工作流程显示“更新测试服务器”或“推送依赖文件”对话框。
有关详细信息,请参阅动态文件的自动推送。
Business Catalyst 扩展已停止使用,无法再用于 Dreamweaver CC 2015 版或更高版本。Dreamweaver CC 2014.1.1 是最后一个兼容 Business Catalyst 扩展的版本。
要将 Business Catalyst 用于 Dreamweaver CC 2015 版和更高版本,请使用 Dreamweaver 中的 SFTP 连接选项。有关详细信息,请参阅 Business Catalyst 文档。
这里是 Business Catalyst 网站有关此更改的官方公告。