新增功能概述 - 2015 年 5 月

可视媒体查询

支持 linting 代码

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

有关详细信息，请参阅使用 linting 检查代码。

支持 Emmet

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

有关详细信息，请参阅使用 Emmet 插入代码。

CSS 预处理器

“代码”视图中的图像和颜色预览

图像预览

Dreamweaver 现在允许您通过将鼠标悬停在图像 URL 上在“代码”视图中预览图像。

现在已为 <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" /> 之类的远程图像路径启用图像预览。

如果 Dreamweaver 无法显示远程路径的预览，将显示消息“无法加载图像”。

您可以预览以下类型的图像文件：

JPEG
JPG
PNG
GIF
BMP
SVG

在以下情况下，当您将鼠标悬停在 URL 上时，将会显示图像预览：

• url( );
• data-uri( )
• img 标签的 Src 属性值

颜色预览

“代码”视图中的资产预览现在得到进一步改进。Dreamweaver 现在允许您通过将鼠标悬停在颜色值上在“代码”视图中预览颜色。受支持的格式如下：

3 位和 6 位十六进制颜色值：#ff0000；
RGB：rgb(0, 0, 0)；
RGBA：rgba(0, 255, 228,0.5)；
HSL：hsl(120, 100%, 50%)；
HSLA：hsla(120, 60%, 70%, 0.3)；
预定义的颜色名称：橄榄色、蓝绿色、红色等；

新代码段

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

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• JavaScript 代码段（更新）
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

有关使用代码段的信息，请参阅使用代码段。

Bootstrap 集成

现在，您可以在 Dreamweaver 中打开使用 Bootstrap 框架（版本 3 和更高版本）创建的网站并使用代码或可视设计功能编辑网页。Dreamweaver 会识别文件名中包含“bootstrap”的关联 CSS 文件。

您还可以在 Dreamweaver（“插入”面板）内添加 Bootstrap 组件，然后通过方便快速地编辑网格来修改各个视口的设计。

有关详细信息，请参阅使用 Bootstrap 文件。

Bootstrap 初学者模板

Dreamweaver 现在包含 Bootstrap 模板，以帮助您快速开始进行响应迅速的设计。您可以从“新建文档”对话框访问以下 Bootstrap 模板：

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

代码折叠

现在可在 HTML、CSS、LESS、SASS、SCSS、JS、PHP、XML 以及基于标签块的 SVG 文件中使用代码折叠。将鼠标悬停在行号列上时，“代码”视图中行号的旁边将出现一个小三角形，您可以单击该三角形折叠/展开代码块。这一新的代码折叠功能将取代基于所选内容的现有代码折叠功能。

“代码”视图中包含两行以上代码的所有标签块都会出现代码折叠图标（倒三角形）。

复制、剪切、粘贴和拖放操作会保留代码折叠状态。例如，当您复制折叠的代码块时，粘贴操作会将复制的文本作为折叠块粘贴。

HTML 文件中的代码折叠

与之前的代码折叠功能不同，现在折叠的内容将包含结束标记，并以不同于以前的实现的方式呈现。

折叠代码块中显示的字符数现在也有所增加。这有助于您预览折叠的标签块中的初始属性（如果有）。例如，如果折叠的 Div 标签具有 id 和 class 属性，那么折叠的块将如下所示：

在 Windows 上，您可以通过将鼠标悬停在折叠的代码上来预览折叠块内的代码。当折叠块内的代码通过“标签选择器”、“查找和替换”、“转到行”、“元素快速视图”、“实时视图”或“撤消/还原”收到焦点时，折叠块将自动展开。一旦焦点移出代码块，它又会自动折叠。

CSS、LESS、SASS、SCSS 和 JS 文件中的代码折叠

现在 CSS、Less、Sass、SCSS 和 JS 文件中由大括号括起来的代码块也可以折叠。

将鼠标悬停在包含左大括号“{”的任意行上的代码折叠区域。

单击折叠图标可折叠成对大括号之间的内容，并且预览将显示为“{...}”

PHP 文件中的代码折叠

在 PHP 文件中，除 PHP 代码块外，HTML 元素、CSS 和 JS 代码块也可以折叠。

每个以“<?php”开头、以“?>”结尾的 PHP 块都可以折叠。

将鼠标悬停在包含 <?php 的任意行上的代码折叠区域，然后单击折叠图标可折叠代码块。