新增功能概述 - 2015 年 5 月

新增功能

  • 设备预览
  • 可视媒体查询
  • 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 的任意行上的代码折叠区域,然后单击折叠图标可折叠代码块。

 Adobe

更快、更轻松地获得帮助

新用户?

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上