新增功能
- 设备预览
- 可视媒体查询
- Linting 支持
- Emmet 支持
- CSS 预处理器
- 在“代码”视图中预览
- 新代码段
- Bootstrap 集成
- Bootstrap 初学者模板
- 实时视图中的新菜单
- 支持实时视图中的表格
- 实时视图中的“选择性粘贴”
- 支持实时视图中的 jQuery UI 元素
- 新导航器面板
- HTML 文档中的 SVG 代码提示
变化的内容
- 代码折叠
- CSS Designer 改进
- 测试服务器 - 工作流程改进
- 实时视图中的行为面板
- 重新组织“插入”菜单
设备预览
可视媒体查询
支持 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 的任意行上的代码折叠区域,然后单击折叠图标可折叠代码块。