Dreamweaver CC 2014 新版包括实时视图和 CSS Designer 的若干增强功能,可帮助您轻松创建和更新 Web 和移动内容。新的元素快速视图功能可帮助你快速查看、导航和编辑 HTML 标记。

本文介绍了这些新增功能和其他多项增强功能,并提供指向更多帮助和学习资源的链接。

元素快速视图

使用新元素快速视图,快速视图为静态和动态内容呈现交互式 HTML 树,在文档中查看标记。在 HTML 树中修改静态内容结构。 

元素快速视图
元素快速视图

元素快速视图(“视图”>“元素快速视图”)旨在加快开发过程。在 Dreamweaver 的早期版本中,要在实时视图中高亮显示 HTML 元素,切换至代码视图并编辑元素。编辑后,再次切换回实时视图,以便预览更改。现在,有了元素快速视图功能,您可以在单一易读的视图中看到页面中的所有要素,并编辑静态内容。

有关详细信息,请参阅元素快速视图

实时视图中新增的编辑功能

实时视图中检查和更改任意 HTML 元素的性质,并预览其外观,而无需刷新。  

快速属性检查器

现在,实时视图可显示页面中的 HTML 元素的属性检查器。基于您选择的 HTML 元素,您可以通过快速属性检查器直接在实时视图中编辑属性或文本。

用于编辑图像属性的快速 PI
用于编辑图像属性的快速 PI

设置文本格式的实时视图 PI
设置文本格式的快速 PI

有关详细信息,请参阅快速视图属性检查器

元素显示

借助新的元素显示,您现在可以将 HTML 元素与实施视图中的类和 ID 直接关联在一起。“元素显示”提示您有助于您快速查看和选择所需选项的可用类和 ID。

用于编辑类和 ID 的元素显示
用于编辑类和 ID 的“元素显示”

有关详细信息,请参阅将 HTML 元素与类和 ID 相关联

实时文本编辑

现在可直接在实时视图中编辑文本并预览更改,不再需要在不同视图之间切换。

在实时视图中双击文本元素以进入编辑模式。有关详细信息,请参阅直接在“实时视图”中编辑文本

直接在实时视图中编辑文本。实时文本编辑。
直接在实时视图中编辑文本

实时视图属性检查器

属性检查器现在可用于实时视图,这样您可以在不用切换到“设计”或“代码”视图的情况下就可以快速编辑您的页面。

有关详细信息,请参阅“实时视图”属性检查器

实时视图属性检查器
实时视图属性检查器

实时插入

在此版本中,可以使用“插入”面板将 HTML 元素直接插入实时视图。元素是实时插入的,无需切换模式。您还可以即时预览更改。 

有关详细信息,请参阅“实时视图”中直接插入元素

从“插入”面板拖放到实时视图
从“插入”面板拖放到实时视图

CSS Designer 增强

改进边框控件的用户界面

选项卡式控件协助您以简便直观的方式设置所有四项边框属性。

  • 选项卡式控件可避免同时查看所有值,以免混淆。
  • 直观友好的图标让初学者也能轻松掌握。
  • 两套图标表示“未设置/已删除”和“停用”状态。
  • 一站式“所有边框”选项卡可同时设置所有边框属性。
  • 计算的行指导您在检查时进入最适当的选项卡。 
Dreamweaver CC 2014 版之前的边框控件属性
Dreamweaver CC 2014 版之前的边框控件属性

Dreamweaver CC 2014 版的边框控件属性
Dreamweaver CC 2014 版的边框控件属性

有关详细信息,请参阅设置边框属性

复制粘贴样式

您现在可以将一个选择器中的样式复制粘贴到其他选择器中了。您可以复制所有样式或仅复制布局、文本和边框等特定类别的样式。

右键单击某个选择器并选择可用的选项:

使用 CSS Designer 复制样式
使用 CSS Designer 复制样式

  • 如果选择器没有样式,则“复制”和“复制所有样式”处于禁用状态。
  • 对于无法编辑的远程站点,“粘贴样式”处于禁用状态。但是,“复制”和“复制所有
    样式”都可以使用。
  • 在某个选择器上部分存在的粘贴样式(重叠)可以使用。所有选择器的
    Union 均已粘贴。
  • 复制粘贴样式也适用于 CSS 文件的不同连接 – 导入、链接、内联
    样式。

快速编辑文本框

Dreamweaver 现在包含快速编辑文本框,可供您为边距、填充、边框和边框半径等属性指定速记代码。这项更改针对喜欢指定代码而不是使用鼠标或键盘来指定属性的用户。 

快速编辑文本框
快速编辑文本框

指定属性
指定属性

强化自定义属性工作流程

以往,要在 CSS Designer 的“属性”窗格中单击“+”来添加“其他”(或自定义)属性。现在,属性末尾提供一组文本框(属性名和值)。这些文本框让您能够直接输入属性名和值,而不必单击 +。

若要添加自定义属性附加行,请按 Tab

“其他”属性组的名称将更改为“自定义”。

用于添加属性名称和值的文本框
用于添加属性名称和值的文本框

键盘快捷键

现在可使用键盘快捷键,添加或删除 CSS 选择器和属性。还可以在属性窗格的属性组之间导航。  

快捷键 工作流程
Ctrl + Alt +[Shift =] 添加选择器(如果控件位于选择器部分)
Ctrl + Alt+ S 添加选择器(如果控件在应用程序的任意位置)
Ctrl + Alt +[Shift =] 添加属性(如果控件位于属性部分)
Ctrl + Alt+ P 添加属性(如果控件在应用程序的任意位置)
Select + Delete 如果已选定选择器,删除选择器
Ctrl + Alt + (PgUp/PgDn) 在属性子窗格中,在各部分之间跳转

更具体/较不具体的选择器

在此版本中,Dreamweaver 会在您添加选择器时提供最多三个(或更少的)规则提示。可以使用向上/向下箭头键,使其更为具体或较不具体。

更具体/较不具体的选择器
更具体/较不具体的选择器

滚动至类别

以往,当在 CSS Designer 中单击“属性”窗格顶部的“背景”“其他”类别时,这些类别在窗格中“可见”。这些类别并未真正显示在窗格顶部。

现在,“背景”“其他”类别(重命名为“自定义”)将在单击时显示在窗格顶部。

滚动至类别
滚动至类别

支持使用身份文件进行 SFTP 连接

Dreamweaver CC 2014 版可以让您通过 SFTP 使用专用-公用密钥对和身份密钥(有或无密码短语)连接到 Publishing Server。使用 Dreamweaver 的这个增强功能,您的 Web 托管服务提供商选择范围会变得更加宽广 — 您可以订阅任何要求您使用专有-公共密钥对进行身份验证的任何范围提供商。

注意:

Dreamweaver 仅支持 OpenSSH 密钥文件。

有关详细信息,请参阅 SFTP 连接

撤消/还原增强

之前,要撤消/还原在 CSS Designer 面板中执行的操作,必须单击(相关文件中的)CSS 文件,然后撤消/还原相应的操作。 

随着撤消/还原功能得到新的增强,现在可以直接从文档的实时视图或从 CSS Designer 面板中撤消/还原操作。然后,这些更改在相关联的 CSS 文件中自动得到反映。为了让您觉察到相关文件已更改,受影响文件的选项卡将在一段时间内(约八秒)突出显示。

  • 当您从 CSS Designer 面板中撤消/还原一项动作时,实时视图将自动刷新。
  • 当使用源代码编辑文档并从实时视图中撤消更改时,显示屏幕切换至拆分视图,且相关的源代码成为焦点。

所有撤消/还原行动均在 HTML 文档级别加以记录。这意味着,对 CSS 文件的任何手动更改都可以从任何相关文件中撤消。例如,假设 style1.css 和 style2.css 与 index.html 相关。如果您在 style1.css 中为 .h1 添加样式,然后从 style2.css 中执行撤消,.h1 则会从 style1.css 中删除。  

注意:

若要撤消/还原 JavaScript 文件中的更改,请切换至相应的 JS 文件,然后执行撤消/还原。

对 Business Catalyst 和 PhoneGap Build 工作流程的更改

Business Catalyst 和 PhoneGap Build 现在可以作为 Dreamweaver 的插件使用。现在,先安装 Business Catalyst 和 PhoneGap Build 作为扩展,然后继续像以前一样使用这些服务。

要安装 Business Catalyst 和 PhoneGap Build 扩展,请转到“管理”>“浏览插件”,然后搜索扩展并安装。

访问 Dreamweaver 扩展的更改

您现在可以使用 Adobe Creative Cloud 查看和安装 Dreamweaver 扩展。扩展现在称为“插件”。

要浏览 Adobe Creative Cloud 插件,请单击“窗口”>“浏览 Dreamweaver 中的插件”。Adobe Creative Cloud 插件页面随即显示。 

“窗口”>“Dreamweaver CC 13.0 中的扩展”
“窗口”>“Dreamweaver CC 13.0 中的扩展”

“窗口”>“浏览 Dreamweaver CC 2014 版中的插件”
“窗口”>“浏览 Dreamweaver CC 2014 版中的插件”

有关安装插件的详细信息,请参阅插件

同步设置的更改

使用 Dreamweaver 中的同步设置功能,您可以将设置与您的计算机和 Creative Cloud 上的 Dreamweaver 实例同步。Dreamweaver CC 2014 版会自动检测您是否启用了早期版本 Dreamweaver 中的同步设置,并可让您导入 Creative Cloud 的这些设置。

在安装后第一次启动 Dreamweaver CC 2014 版时,将显示以下对话框:

导入同步设置
导入同步设置

  • 要导入存储在 Creative Cloud 上的设置,请单击导入同步设置

注意:此选项稍后将不可用。

  • 要将当前 Dreamweaver 实例中的设置与 Creative Cloud 同步,请单击同步本地
  • 若要自动同步设置,请选择始终自动同步设置
  • 要查看高级同步设置选项,请单击“高级”

从 Dreamweaver 直接提交错误/功能请求

现在可以直接从 Dreamweaver 中访问 Wishlist 表单和错误报告表单 -“帮助”>“提交错误/功能请求”。

在“帮助”菜单中提交错误/功能请求
在“帮助”菜单中提交错误/功能请求

帮助中心

通过全新推出的 Help Center,了解如何使用新增功能,如何在 Dreamweaver 中处理常见任务。 

与以往版本不同,您现在可以轻松地在首次启动 Dreamweaver 时查找新增功能和有效工作流程。您还可随时跳过新增功能教程或禁用应用程序内的帮助消息。如有必要,也可以重新启用。

新增功能概览

现在,Dreamweaver 包括随最新版本一同发布的新增功能简要概览。
除了还介绍新增功能之外,这项教程还会引导您浏览视频库,
观看新增功能的实际应用。


在您启动 Dreamweaver 时,就将显示新增功能概览或简要教程选项。您也可选择跳过教程,转到欢迎画面,以便继续工作。

注意:当您安装或更新 Dreamweaver,或删除首选参数并重新启动 Dreamweaver 时,将显示新增功能概览。

新增功能教程
新增功能教程

以下是新增功能教程显示内容的概要:

  • 欢迎消息。还将询问您之前是否使用过 Dreamweaver CC,以便相应地定制体验。
  • 逐项功能的介绍和简要说明(也可选择跳过教程)。
  • 视频库包含与新增功能相关的视频。

视频库

新增功能教程结束时,将显示视频库,其中包含与
新增功能相关的视频。当您将鼠标悬停在缩览图上时,将显示
有关视频的简要说明。

视频库
视频库

注意:

您在使用 Dreamweave 时可随时访问新增功能教程和视频库
。若要访问,请转到“帮助”菜单或“欢迎”屏幕,并单击所需选项。

应用程序内消息

现在,在您处理项目时,Dreamweaver 可为您提供提示,提高工作效率。
这些提示旨在协助您
以更加高效的方式完成当前任务。

提示的显示基于特定的“触发器”。例如,当您在任何视图中单击“标签”
选择器
或右键单击某个元素进行检查时,将显示“元素
快速视图”提示。元素快速视图是一项全新功能,将协助您以比以往其他方法
更为简便的方式查看和编辑 HTML 标记(触发器)。

一旦您根据所提供的建议执行行动后,应用程序内提示将不会为
同一触发器再次显示。但是,此提示还为所辨别到的其他
触发器再次显示。

您可通过“首选参数”,禁用应用程序内消息的显示。有关详细
信息,请参阅禁用或重置应用程序内和产品内消息

应用程序内消息示例:

元素快速视图

触发器:

  • 单击标签选择器(所有视图)
  • 任一元素的实时+ 检查或右键单击 + 检查

消息:

元素快速视图消息
元素快速视图消息

类和 ID 的实时视图属性检查器 

触发器:

  • 设计视图中使用 PI 编辑 ID

消息:

实时视图消息
实时视图消息

产品内消息

Dreamweaver 与 Creative Cloud 上的许多其他应用程序完美整合,
而产品内消息则为您介绍此类整合工作流程。通过使用这些
工作流程,您可以更为充分地利用 Adobe Creative Cloud 及其产品和服务。

产品内消息将根据所辨别的“触发器”显示。例如,当
试图使用 CSS 过渡时,“Edge Animate”工作流程通过
产品内消息提出建议。

产品内消息包含对您在特定场景中可供使用的备选(或更佳)
工作流程的简短描述。它还包含视频缩览图,您
可单击以观看介绍工作流程的视频。“告诉我更多”按钮将您链接
至提供更多信息的文章/博客。

当所识别的触发器出现时,产品内消息仅显示一次。

注意:

若要再次查看消息,您可以在“首选参数”中重置应用程序内帮助设置。
有关详细信息,请参阅禁用或重置应用程序内和产品内消息

产品内消息示例: 

Edge Animate

触发器:

  • 单击“CSS 过渡”,然后单击 +

消息:

Edge Animate 消息
Edge Animate 消息

Parfait

触发器:

  • “插入图像”>“编辑图像设置”

消息:

编辑图像设置
编辑图像设置

禁用或重置应用程序内和产品内消息

转到“首选参数”> “辅助功能”对话框,并执行下列操作:

  • 若要禁用消息,请取消选中“显示应用程序内帮助”复选框。

如果您重新启用消息,之前
显示过的消息将不再显示。只有先前未显示过的
消息才会显示。

  • 若要查看先前已显示的消息,请单击“重置”
禁用提示。禁用应用程序内消息。
禁用或重置应用程序内帮助的首选参数

“帮助”菜单的更改

“帮助”菜单现已重新进行了组织,通过它可以快速访问新增功能教程、视频库、帮助和学习资源,并可提交错误/功能请求表单。

Dreamweaver CC 2014 之前的“帮助”菜单
Dreamweaver CC 2014 版之前的“帮助”菜单

Dreamweaver CC 2014 中的“帮助”菜单
Dreamweaver CC 2014 版中的“帮助”菜单

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略