dreamwearcc如何整理格式

2016年11月02日发布的Dreamweaver CC为编码的网页设计师重新设计。 它现在比以前更专注，更高效和更快 - 一个全新的代码编辑器，更直观的用户界面，可选择的黑暗主题和几个增强功能，包括支持新的工作流，如CSS预处理器。

Dreamweaver 2015 界面，小编记得从还是三剑客的时期( Dreamweaver 5版时，还没有CS的版本时代)开始梦想织造者就是这幅经典模样了。

Dreamweaver CC 2017 界面，整合了Adobe开源的Brackets项目，相较经典版的Dreamweaver，事实上几乎完全可以使用开源免费的Brackets，而付费的Dreamweaver缺少Brackets开源的经常更新的插件，相信开源趋势下，有越来越多的用户导向Brackets.

让我们来快速了解下全新改版的Dreamweaver 2017的新功能和增强功能。

重新打造的代码编辑器

多个生产力增强功能已经整合进新版的Dreamweaver中的代码编辑器，使您能够快速高效地完成编码任务。

代码提示可帮助新用户学习HTML，CSS和其他网络标准，并且视觉辅助（如自动缩进，代码着色和可调整大小的字体）有助于减少错误并使代码更易于阅读。

代码提示

Dreamweaver中的代码提示功能得到增强，为选定的代码提供更多有用的信息。

在早期版本的Dreamweaver中，当您键入直角括号时，会得到相关代码的下拉列表。

在新版本中，您不仅获取相关代码，还可以获得其他信息，帮助您快速爬升Dreamweaver本身中的HTML，CSS和其他网络技术。

代码显示增强

现在增强了代码的整体外观，以提高可读性。 你可以看到代码格式化和代码着色的改进。

代码格式化

当您编写代码时，Dreamweaver自动缩进代码以避免错误的手动缩进，并提高可读性。

代码着色

Dreamweaver现在支持针对其他数量的文件类型的代码着色。

代码着色支持现在可用于HTML，JS，CSS，PHP，XML，LESS，Sass，SCSS，SVG，Bash，C，C＃，C ++，clojure，CoffeeScript，Dart，Diff，EJS，Embedded Ruby，Groovy，Handlebars， Haske，Haxe，Java，JSON，Lua，Markdown，Markdown（GitHub），Perl，Properties，Python，RDF Turtle，Ruby，Scala，SQL，Stylus，Text，VB，VBScript，XML和YAML。

您可以直接在代码视图的状态栏中更改不同文件类型的语法高亮显示。

CSS预处理器支持

Dreamweaver现在支持常用的CSS预处理器，如Sass，Less和SCSS，具有完整的代码着色和编译功能，因此您可以节省时间并生成更干净的代码。

在浏览器中实时预览

在浏览器中实时快速预览您的代码更改，而无需手动刷新浏览器。 Dreamweaver现在与您的浏览器连接，因此更改立即显示在您的浏览器，无需重新加载页面。

快速编辑相关代码文件（快速编辑）

要对代码进行快速更改，将光标放在特定的代码片段上，然后使用上下文菜单，或按Ctrl-E（在Windows上）或Cmd-E（在Mac上）访问快速编辑。

Dreamweaver提供特定于上下文的代码选项和内联工具。

快速编辑相关代码，无需打开多个文件或选项卡

上下文内CSS文档（快速文档）

Dreamweaver在代码视图内提供CSS属性的上下文文档。

现在，您不必在Dreamweaver外部导航到网页以学习或引用CSS属性。 要调出CSS帮助，请按Ctrl + K（在Windows上）或Cmd + K（在Mac上）。

多个光标写入和编辑代码

要同时写入多行代码，请使用多光标。

这个功能是一个巨大的生产力助推器，因为你不必多次写同一行代码。

要调用多个光标，您可以：

将光标添加到多个连续线 - 按住Alt键，然后单击垂直拖动。

要在多个不连续行中添加光标 - 按Ctrl键，然后单击要放置光标的不同行。

在多个连续线中选择文本 - 按Alt键并向对角线拖动

要选择多个不连续行中的文本 - 选择一些文本，然后按Ctrl键（Windows）或Cmd键（Mac），并继续进行进一步的选择。

现代用户界面

Dreamweaver重新设计了一个更直观和可定制的界面，更容易访问的菜单和面板，以及一个上下文和可配置的工具栏，只显示您需要的工具。

新界面还提供了从浅到深的四个级别的对比度，因此更容易阅读和编辑代码行。

这里是新用户界面的快照之前和之后。

2015版用户界面

2017版 Dreamweaver CC

菜单，工作区和工具栏中的更改

Dreamweaver的菜单，工具栏和工作空间也在此版本中重新设计。

工作区更改

Dreamweaver界面经过优化，包括以下默认工作区：

• 开发人员工作区

此工作空间极小，默认情况下，仅包括对代码网站的开发人员最重要的面板，例如“文件”和“代码段”面板。

• 标准工作区

此工作空间包括使用代码和设计时所需的一切 - 例如文件，CC库，CSS设计器，插入，DOM，资源和片段面板。

注意:

选择工作区后，可以通过添加或删除面板来对其进行自定义。

以下是Dreamweaver CC 2015和Dreamweaver CC 2017中提供的工作空间差异的摘要。

Dreamweaver CC 2015

• Beginner

• Code

• Default

• Design

• Extract

Dreamweaver CC 2017

• Developer

• Standard

菜单更改

应用程序菜单被修改以删除使用过的菜单项，并将其他菜单项移动到更直观的菜单位置。

工具栏更改

现在，工具栏在所有视图中都很常见。 工具栏仅显示您正在工作的视图所需的工具。

但是，您可以自定义工具栏以显示所需的所需工具集。

状态栏更改

在代码视图中工作时，状态栏现在显示有用的信息。

您现在可以：

• 在INS（插入）和OVR（覆盖）模式之间切换

• 请参阅屏幕底部的行和列号。 这些数字表示放置鼠标的行和列。

• 为不同类型的代码文件选择所需的代码着色。

片段面板更改

片段面板现在拥有一个新的更清洁的外观，并且也被重新设计，使插入片段的过程更容易。

以下图片突出显示了“片段”面板中的主要更改：

在以前的Dreamweaver版本中，您必须使用键盘快捷键插入代码段。

由于以下原因，使用键盘快捷键插入代码段不是一个有效的过程：

• 需要记住非直观的快捷方式

• 可能与产品关键字快捷方式发生冲突

在此版本的Dreamweaver中，您可以使用触发器键来插入代码片段。

触发键是分配给代码片段的用户友好的文本字符串。 例如，对于创建mailto链接的代码片段，您可以键入“mailto”并设置触发器键。

分配触发键后，将光标放在文档中，键入“mailto”，然后按Tab键。 然后，Dreamweaver在文档中插入相关的代码段。

文件面板更改

“文件”面板经过重新设计，使其更简单，更直观。

最简单的是，“文件”面板仅显示计算机中本地文件的列表。 当您在“文件”面板中工作更多时 - 设置站点，设置与远程服务器的连接，启用签入和签出，则“文件”面板中会显示更多选项。

欢迎屏幕和入门体验的更改

当您启动Dreamweaver或关闭所有Dreamweaver文档时，将显示一个新的启动工作区。 您可以通过“开始”工作区方便地访问最近使用的文件，库和启动器模板。

如果您喜欢旧对话框，您仍然可以键入Ctrl / Cmd + O以启动“打开”对话框，或按Ctrl / Cmd + N启动“新建文档”对话框。

为了帮助您快速了解Dreamweaver CC 2017工作区的变化，您可以获得入门体验。 快速浏览自定义体验，您将看到一个适合您的工作空间和主题选项。

实时高亮的“查找和替换”工具栏

新的，不引人注目的“查找和替换”工具栏位于窗口顶部，不会阻止屏幕的任何部分。

与以前版本的Dreamweaver相比，查找和替换通常更快，更高效。 Dreamweaver现在在您在“查找”面板中键入时查找搜索字符串，并突出显示当前文档中的字符串的所有实例。

创意云资产改进

存储，恢复，添加注释以及查看存储在Creative Cloud中的所有资产的版本历史记录，包括Creative Cloud库中的文件，使用CC桌面产品创建的资产和移动项目。

崩溃后自动恢复文件

如果Dreamweaver由于系统错误，断电或其他问题意外关闭，则可以恢复正在编辑的文件中的任何未保存的更改。

比较各版本的主要功能。

更多介绍信息，请查看Adobe官网介绍页面(英文)。

马背岭，专注生产力和效率，欢迎您的关注与分享！