Adobe Dreamweaver CC

Adobe Dreamweaver CC是adobe旗下的可视化网页设计软件，最近adobe cc套装进行了一次年度的更新，Dreamweaver cc这款软件自然也得到了更新。2015版Dreamweaver CC专注于快速响应设计、代码编辑功能的改进、在设备上进行网页预览以及从 Photoshop 复合中批量提取具有多种分辨率的 Web 优化图像。与 Bootstrap 框架的集成可帮助您构建移动优先、快速响应的网站。视觉媒体查询通过让您在各种断点处对您的设计进行可视化和修改，进一步完善了快速响应网页设计的体验。

Dreamweaver新增功能：

设备预览

Dreamweaver 现在可让您在多个设备上同时测试即将发布的正式版网页。您可以查看网页如何在各种外形规格下进行回流，还可以在您的页面上测试交互功能。无需安装任何移动应用程序或将设备物理连接到您的桌面，即可实现所有这些功能！只需使用您的设备扫描自动生成的 QR 代码，并在设备上预览网页。

在桌面上触发的实时检查会反映在所有已连接设备上，可帮助您检查各种元素并按需要调整设计。

有关详细信息，请参阅在多个设备上预览和检查网页。

可视媒体查询

“可视媒体查询”栏可直观显示页面中的媒体查询。这些栏可帮助您可视化不同断点处的网页以及网页组件在不同视口中的回流的差异程度。在不同视口查看页面时，无需影响其他视口的页面设计即可进行特定于某个视口的设计更改。

可视媒体查询的水平行上有 3 栏，每栏表示媒体查询的一个类别：

绿色：包含 max-width 条件的媒体查询

蓝色：同时包含 min-width 和 max-width 条件的媒体查询

紫色：包含 min-width 条件的媒体查询

支持linting代码

在这一新版本的 Dreamweaver 中，现在您可以使用 linting 调试常见错误的代码。Linting 是分析代码以标记代码的潜在错误或可疑用法的过程。Dreamweaver 可以在加载、保存或编辑 HTML、CSS 和 JavaScript 文件时对它们执行 linting。错误和警告将在新的输出面板中列出。

包含 Linting 结果的输出面板

支持 Emmet

您是在 Dreamweaver 中键入多行代码的劲头十足的开发人员吗？使用 Emmet 缩写编写代码可节省时间。这些缩写很容易记住和键入，当您按 Tab 键时它们将会在“代码”视图中展开为完整的代码。

“代码”视图中的预览

如果使用的是“拆分”视图，可在“实时”或“设计”视图中实时查看对图像或颜色所做的任何更改。但是，如果您愿意只使用“代码”视图，则图像仅显示为文件名，这通常很不直观。同样，颜色也仅显示为一组模糊的数字（除非使用了预定义的颜色）。借助此版本的 Dreamweaver，可直接在“代码”视图内快速预览图像和颜色。此功能帮助您从视觉上将图像文件名和颜色格式与所呈现的实际图像或颜色联系起来。由此，可加快做出设计决定的速度并大幅减少开发时间。

“代码”视图也显示错误预览。错误代码的行号高亮显示为红色。将鼠标悬停在行号上时，将显示错误的简要说明。

注：仅显示此行中的第一个错误。如果行中仅包含警告，则会显示警告的说明信息。如果行中既包含警告，又包含错误，则仅显示错误的说明信息。

新代码段

代码段是您可以在项目中反复重用的代码部分。此版本的 Dreamweaver 提供了新增和更新的代码段：

Boostrap_Snippets

CSS_Animation_And_Transitions

CSS_Effects

CSS_Snippets

HTML_Snippets

JavaScript 代码段（更新）

PHP_Snippets

Preprocessor_Snippets

Responsive_Design_Snippets

Bootstrap集成

Bootstrap 是用于开发响应迅速、移动优先网站的最受欢迎的免费 HTML、CSS 和 JavaScript 框架。该框架包括响应迅速的 CSS 和 HTML 模板，这些模板适用于按钮、表格、导航、图像旋转视图以及您可能会在网页上使用的其它元素。还提供了几个可选的 JavaScript 插件，这使只具备基本编码知识的开发人员也能够开发出快速响应的出色网站。

利用 Dreamweaver，您可以创建 Bootstrap 文档，还可编辑使用 Bootstrap 创建的现有网页。您可以从“新建文档”对话框（“起始页模板”>“Bootstrap 模板”）中选择其中一个 Bootstrap 起始页模板，开始设计 Bootstrap 网站。

Bootstrap-代理商

Bootstrap-电子商务

Bootstrap-组合

Bootstrap-产品

Bootstrap-房地产

Bootstrap-简历

您还可以通过“新建文档”对话框（“新建文档”> Bootstrap）创建自定义 Bootstrap 文档。然后，使用 Bootstrap 组件（例如使用 Dreamweaver 中的插入面板添加的折叠控件和旋转视图）逐步构建网站。或者，如果您有 Photoshop 复合，则可以使用 Extract 将图像、字体、样式、文本等导入您的 Bootstrap 文档。

创建 Bootstrap 文档

无论是设计完善的 Bootstrap 文件还是仍在设计中的文件，您都可以在 Dreamweaver 中编辑它们，并且不仅可以编辑代码，还可使用实时视图编辑、可视 CSS Designer、可视媒体查询和 Extract 等可视编辑功能进行设计方面的更改。

注意：您可以在 Dreamweaver 中打开仅使用 Bootstrap 框架（版本 3 及更高版本）创建的网站。

支持在实时视图中编辑表格

您可以使用下面的一个或一组选项轻松、快速地在实时视图中编辑表格：

“元素显示”中的格式设置选项

“修改”>“表格”菜单

注意：实时视图中现已启用“修改”菜单。

实时视图中的新菜单

借助实时视图中提供的以下菜单，实时视图中的编辑功能现在已变得更加完善：

修改

格式

命令

站点

“编辑”和上下文菜单中的“选择性粘贴”选项

支持实时视图中的 jQuery UI 元素

使用插入面板，您现在可以在实时视图中直接插入 jQuery Widget。将所需元素从插入面板中拖到实时视图中，并按住鼠标以使用下列功能之一进行插入：

实时参考线：从插入面板中拖动所需元素后，在您将鼠标悬停在实时视图中的元素上时，这些参考线便会显示。使用实时参考线，您可以将元素插入顶部或底部，或者插入处于“焦点”状态的元素的左侧或右侧。

DOM 图标：在实时参考线显示的同时，DOM 图标会在您暂停时显示。单击图标可在弹出窗口中查看 DOM 结构，并可将元素放置到文档结构中的精确位置。

位置助手：位置助手可帮助您将元素放置在处于“焦点”状态的元素之前、之后或嵌套在其内部（在实时视图中）。

注意:

系统根据您选择插入的元素显示上述功能。

DOM 面板

元素快速视图现已替换为 DOM 面板（“窗口”> DOM）。DOM 面板可提供元素快速视图所提供的所有功能以及更多功能。所有工作区均提供此面板，而且可永久使用，也就是说，您可以同时打开两个文档并打开和访问其 DOM 面板。

借助 DOM 面板，您可以：

从插入面板拖动元素，以将其准确地插入文档结构中。

在文档中拷贝、粘贴、复制、移动或删除结构元素。

借助文档结构，在上下文中查看页面上的任何元素，处于“焦点”状态的元素在 DOM 面板中会突出显示。

有关使用 DOM 面板及使用此面板编辑 HTML 结构的详细信息，请参阅 DOM 面板。

DOM 面板

HTML 文档中的 SVG 代码提示

现在，HTML 文档支持所有 SVG 元素和属性的代码提示。借助这些代码提示，您现在可以在 HTML 文档的代码视图中添加 SVG 元素，就像您在 SVG 文档中添加一样。

技术预览

从此版本开始，Dreamweaver 团队会提供某些功能的预览，以收集客户反馈。根据这些反馈，团队将会进一步改进这些功能，并将其作为 Dreamweaver 的核心功能包含在内。您可以在“首选项”对话框的“技术预览”类别中访问此类功能。

此版本中的预览功能为代码高亮显示。此功能会高亮显示代码视图中任何选定文本的所有匹配项。

要使用此功能，请执行以下步骤：

转到“首选项”>“技术预览”。

启用代码高亮显示。然后，单击“应用并关闭”，以关闭“首选项”对话框。

打开要在其中使用代码高亮显示的文档。您可以在任何类型的文档（例如 HTML、JS、CSS 和 LESS）中使用代码高亮显示。

在代码视图中，双击需要高亮显示的文本（标签、单词或短语）。

在代码视图中，选定文本的所有匹配项均会高亮显示。

您可以使用以下键盘快捷键在高亮显示的文本之间导航：

向前移动：F3 (Win)；Cmd+G (Mac)

向后移动：Shift+F3 (Win)；Cmd+Shift+G (Mac)

使用 showPreview API 自定义代码视图中的预览

在此 Dreamweaver 版本中，您可以生成自定义预览弹出窗口，当您将鼠标悬停在代码视图的代码上时，会显示该弹出窗口。要实现自定义预览，您可以将新的 API、showPreview 和现有的 mm:browsercontrol API 一起使用。例如，您可以使用这些 API，当您将鼠标悬停在一项 JavaScript 功能的名称上时显示该功能所有参数的预览。

变化的内容：

Extract 增强功能

适用于设备的 Extract

支持 % 单位

适用于设备的 Extract

设备不仅能大小各异，而且分辨率也各不相同。您规划的响应快速的网页设计必须适应各个设备上相应呈现的多种分辨率版本的图像。但是，在项目中为所有图像创建众多不同的分辨率版本可能会是一项艰巨的任务。

Dreamweaver 中的 Extract 能够在很大程度上简化这一任务。在 2015 版 Dreamweaver 中提取来自 Photoshop 复合的图像时，您还可以选择提取该图像的不同分辨率版本。Photoshop 中的图像会在提取过程中自动调整为不同的预定义分辨率。

然后，您可以在 JavaScript 或媒体查询中调用这些图像，以便根据用于查看图像的设备来显示图像。例如，对于高密度 Retina 显示屏，您可以使用 2X 版本的图像。

提取图像的多种分辨率版本

支持 % 单位

在 Extract 面板中，除像素之外，您现在还可查看图像的宽度和高度（值以 % 表示）。您还可以查看度量值（以 % 表示）。

当您单击 Extract 面板中的资源时，所显示的弹出窗口会为您提供一个在像素和 % 之间进行切换的选项。当您在不同资源中查看度量值时，您在此弹出窗口中选择的单位将会保留。

度量值以 % 表示

实时视图编辑的增强功能

实时视图中的嵌套插入

现在，您可以在实时视图中将元素插入其他元素之中。当您在插入面板、资源面板或实时视图中拖动元素，并将鼠标悬停在页面上的不同元素上时，您会看到嵌套元素的可视化反馈（在参考线之前和之后）。

参考线之前/之后：当您将鼠标悬停在元素顶部和底部的 30% 时。

嵌套可视化反馈：当您将鼠标悬停在元素中部的 40% 时。

可视化反馈，以蓝色阴影高亮显示，用于嵌套插入

直接在“元素显示”中编辑选择器

现在，您只需单击“元素显示”中选择器的名称，即可对其进行编辑。您可以通过单击页面上的任意位置来提交所作的更改。

编码工具栏更改

已删除编码工具栏中与折叠代码相关的以下选项：

折叠整个标签

折叠选定内容

注意：已从右键单击上下文菜单和“编辑”菜单中删除上述选项。

现在可以通过将鼠标悬停在行号上并单击出现的三角形来折叠代码。

此外，下列选项目前不可用于 HTML、CSS 和 JS 文件。

高亮显示无效代码

信息栏中的“语法错误警报”

还可使用 linting 查找代码中的错误，“输出”面板将显示 linting 结果。

CSS Designer 改进

“全部”和“当前”模式

代码提示

媒体查询的颜色编码

其他更改

“全部”和“当前”模式

目前 CSS Designer 提供了两种不同模式，用于查看和编辑 CSS 属性：

“全部”模式：此模式将列出当前文档中的所有 CSS、媒体查询和选择器。而它对“设计”或“实时”视图中的选定内容不敏感。

如果要创建 CSS、媒体查询和选择器，此模式是最佳选择。

“当前”模式：此模式将列出“设计”或“实时”视图中所有选定元素的已计算样式。在 CCS 文件中，如果焦点位于选择器上，则此模式将显示此选择器的属性。

如果要编辑与文档中所选元素关联的选择器的属性，此模式是最佳选择。

CSS Designer 中的所有模式和当前模式

代码提示

Dreamweaver 目前可在 CSS Designer 中显示代码提示（类似于代码视图），用于设置新属性。

注意:

CSS Designer 不提供具有进一步关联操作的选项，如管理字体、拾色器和浏览。

CSS Designer 中的代码提示

媒体查询的颜色编码

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

绿色：包含 max-width 条件的媒体查询

蓝色：同时包含 min-width 和 max-width 条件的媒体查询

紫色：包含 min-width 条件的媒体查询

CSS Designer 中媒体查询的颜色编码

其他更改

“显示集合”选项：目前在首次启动 Dreamweaver 时，将默认选择“属性”部分的“显示集合”复选框。在所有后续 Dreamweaver 会话中都将保留此选项的任何更改（选择或取消选择）。

面板滚动以在中央显示“添加属性”：单击“属性”部分的“+”时，此部分将滚动以在面板中央显示“添加属性”行。如果“属性”部分过小，“添加属性”行将在面板底部显示。

添加新属性时背景高亮显示：当焦点位于“添加新属性”文本框时，行在灰色背景中高亮显示。

“+”和“-”按钮位置的更改：为了增加可见度，将 CSS Designer 面板各窗格中的“+”和“-”按钮从最右侧移动到最左侧。

重命名“自定义”类别：已将“自定义”属性的类别名更改为“更多”。

测试服务器工作流程更改

此版本中的测试服务器工作流程改进旨在让您能够轻松、无缝地利用实时视图中的服务器端代码对文档进行编辑。

服务器设置中的更改

与 Dreamweaver 的早期版本不同，您现在可以指定特定服务器作为测试服务器或远程服务器，但不能同时指定两者。服务器设置用户界面中的复选框已替换为单选按钮，以便实施服务器规范。

如果您将站点导入 Dreamweaver CC 2015，并指定某个服务器同时作为测试服务器和远程服务器，则系统会创建一个重复的服务器条目。然后，将一个标记为远程服务器，将另一个标记为测试服务器。

动态文件的自动推送

打开、创建或保存为动态文档所做的更改时，Dreamweaver 目前会将动态文档自动同步到测试服务器。Dreamweaver 不再针对测试服务器工作流程显示“更新测试服务器”或“推送依赖文件”对话框。

有关详细信息，请参阅设置测试服务器。

Business Catalyst 工作流程的更改

Business Catalyst 扩展已停止使用，无法再用于 Dreamweaver CC 2015 版或更高版本。Dreamweaver CC 2014.1.1 是最后一个兼容 Business Catalyst 扩展的版本。

要将 Business Catalyst 用于 Dreamweaver CC 2015 版和更高版本，请使用 Dreamweaver 中的 SFTP 连接选项。有关详细信息，请参阅 Business Catalyst 文档。

这里是 Business Catalyst 网站有关此更改的官方公告。

其他更改

“插入”面板已重新进行了组织，将“常用”、“布局”和“媒体”类别下的所有选项集合到一个逻辑性更强的类别 -“HTML”。

已删除“帮助”菜单中用于启动这三个类别的简要教程视频和链接。此选项也不可用于非英语区域设置的用户。

已清理页面底部文档栏下拉菜单中的选项 - 现仅有“方向”、“全屏”和“编辑大小”选项可用。