Dreamweaver CC 2015 年版的修补程序于 7 月份发布,可使 Dreamweaver 利用 Adobe Creative Cloud 桌面应用程序中指定的代理服务器设置。有关更多信息,请参阅指定代理服务器设置。
了解有关在多个设备上预览网页、Bootstrap 集成、代码视图改进以及 Dreamweaver 中其他多项增强功能的信息。
2015 版 Dreamweaver CC 专注于快速响应设计、代码编辑功能的改进、在设备上进行网页预览以及从 Photoshop 复合中批量提取具有多种分辨率的 Web 优化图像。与 Bootstrap 框架的集成可帮助您构建移动优先、快速响应的网站。视觉媒体查询通过让您在各种断点处对您的设计进行可视化和修改,进一步完善了快速响应网页设计的体验。
此版本还包括实时视图和 CSS Designer 中编辑功能的若干增强。本文介绍了这些新增功能和增强功能,并提供指向更多帮助和学习资源的链接。
Dreamweaver CC 2015 年版的修补程序于 7 月份发布,可使 Dreamweaver 利用 Adobe Creative Cloud 桌面应用程序中指定的代理服务器设置。有关更多信息,请参阅指定代理服务器设置。
Dreamweaver 现在可让您在多个设备上同时测试即将发布的正式版网页。您可以查看网页如何在各种外形规格下进行回流,还可以在您的页面上测试交互功能。无需安装任何移动应用程序或将设备物理连接到您的桌面,即可实现所有这些功能!只需使用您的设备扫描自动生成的 QR 代码,并在设备上预览网页。
在桌面上触发的实时检查会反映在所有已连接设备上,并帮助您检查各种元素并按需要调整设计。
有关详细信息,请参阅在多台设备上预览和检查网页。
“可视媒体查询”栏可直观显示页面中的媒体查询。这些栏可帮助您可视化不同断点处的网页以及网页组件在不同视口中的回流的差异程度。在不同视口查看页面时,无需影响其他视口的页面设计即可进行特定于某个视口的设计更改。
可视媒体查询的水平行上有 3 栏,每栏表示媒体查询的一个类别:
有关详细信息,请参阅“可视媒体查询”。
在这一新版本的 Dreamweaver 中,现在您可以使用 linting 调试常见错误的代码。Linting 是分析代码以标记代码的潜在错误或可疑用法的过程。Dreamweaver 可以在加载、保存或编辑 HTML、CSS 和 JavaScript 文件时对它们执行 linting。错误和警告将在新的输出面板中列出。
有关详细信息,请参阅使用 linting 检查代码。
您是在 Dreamweaver 中键入多行代码的劲头十足的开发人员吗?使用 Emmet 缩写编写代码可节省时间。这些缩写很容易记住和键入,当您按 Tab 键时它们将会在“代码”视图中展开为完整的代码。
有关详细信息,请参阅使用 Emmet 插入代码。
如果使用的是“拆分”视图,可在“实时”或“设计”视图中实时查看对图像或颜色所做的任何更改。但是,如果您愿意只使用“代码”视图,则图像仅显示为文件名,这通常很不直观。同样,颜色也仅显示为一组模糊的数字(除非使用了预定义的颜色)。借助此版本的 Dreamweaver,可直接在“代码”视图内快速预览图像和颜色。此功能帮助您从视觉上将图像文件名和颜色格式与所呈现的实际图像或颜色联系起来。由此,可加快做出设计决定的速度并大幅减少开发时间。
有关详细信息,请参阅在“代码”视图中预览图像和颜色。
“代码”视图也显示错误预览。错误代码的行号高亮显示为红色。将鼠标悬停在行号上时,将显示错误的简要说明。
注:仅显示此行中的第一个错误。如果行中仅包含警告,则会显示警告的说明信息。如果行中既包含警告,又包含错误,则仅显示错误的说明信息。
代码段是您可以在项目中反复重用的代码部分。此版本的 Dreamweaver 提供了新增和更新的代码段:
有关使用代码段的信息,请参阅使用代码段。
此外,您现在还可以利用云同步功能使代码段在所有 Dreamweaver 安装中保持最新。有关将代码段与 Creative Cloud 和您的其他 Dreamweaver 安装同步的信息,请参阅将 Dreamweaver 设置与 Creative Cloud 同步。
Bootstrap 是用于开发响应迅速、移动优先网站的最受欢迎的免费 HTML、CSS 和 JavaScript 框架。该框架包括响应迅速的 CSS 和 HTML 模板,这些模板适用于按钮、表格、导航、图像旋转视图以及您可能会在网页上使用的其他元素。还提供了几个可选的 JavaScript 插件,这使只具备基本编码知识的开发人员也能够开发出快速响应的出色网站。
利用 Dreamweaver,您可以创建 Bootstrap 文档,还可编辑使用 Bootstrap 创建的现有网页。您可以从“新建文档”对话框(“起始页模板”>“Bootstrap 模板”)中选择其中一个 Bootstrap 起始页模板,开始设计 Bootstrap 网站。
您还可以通过“新建文档”对话框(“新建文档”> Bootstrap)创建自定义 Bootstrap 文档。然后,使用 Bootstrap 组件(例如使用 Dreamweaver 中的插入面板添加的折叠控件和旋转视图)逐步构建网站。或者,如果您有 Photoshop 复合,则可以使用 Extract 将图像、字体、样式、文本等导入您的 Bootstrap 文档。
无论是设计完善的 Bootstrap 文件还是仍在设计中的文件,您都可以在 Dreamweaver 中编辑它们,并且不仅可以编辑代码,还可使用实时视图编辑、可视 CSS 设计器、可视媒体查询和 Extract 等可视编辑功能进行设计方面的更改。
对于使用早于版本 3 的 Bootstrap 框架创建的网站,用于隐藏和取消隐藏元素以及编辑行和列(添加、调整大小或偏移)的可视化编辑工具在 Dreamweaver 中不可用。
有关详细信息,请参阅使用 Bootstrap 文件。
您可以使用下面的一个或一组选项轻松、快速地在实时视图中编辑表格:
有关详细信息,请参阅调整表格大小与设置表格和单元格格式。
借助实时视图中提供的以下菜单,实时视图中的编辑功能现在已变得更加完善:
使用插入面板,您现在可以在实时视图中直接插入 jQuery Widget。将所需元素从插入面板中拖到实时视图中,并按住鼠标以使用下列功能之一进行插入:
系统根据您选择插入的元素显示上述功能。
有关详细信息,请参阅直接在“实时视图”中插入元素。
元素快速视图现已更改为 DOM 面板(“窗口”> DOM)。DOM 面板可提供元素快速视图所提供的所有功能以及更多功能。所有工作区均提供此面板,而且可永久使用,也就是说,您可以同时打开两个文档并打开和访问其 DOM 面板。
借助 DOM 面板,您可以:
有关使用 DOM 面板及使用此面板编辑 HTML 结构的详细信息,请参阅 DOM 面板。
现在,HTML 文档支持所有 SVG 元素和属性的代码提示。借助这些代码提示,您现在可以在 HTML 文档的代码视图中添加 SVG 元素,就像您在 SVG 文档中添加一样。
从此版本开始,Dreamweaver 团队会提供某些功能的预览,以收集客户反馈。根据这些反馈,团队将会进一步改进这些功能,并将其作为 Dreamweaver 的核心功能包含在内。您可以在“首选参数”对话框的“技术预览”类别中访问此类功能。
此版本中的预览功能为代码高亮显示。此功能会高亮显示代码视图中任何选定文本的所有匹配项。
要使用此功能,请执行以下步骤:
转到“首选参数”>“技术预览”。
启用代码高亮显示。然后,单击“应用并关闭”,以关闭“首选参数”对话框。
打开要在其中使用代码高亮显示的文档。您可以在任何类型的文档(例如 HTML、JS、CSS 和 LESS)中使用代码高亮显示。
在代码视图中,双击需要高亮显示的文本(标签、单词或短语)。
在代码视图中,选定文本的所有匹配项均会高亮显示。
您可以使用以下键盘快捷键在高亮显示的文本之间导航:
在此 Dreamweaver 版本中,您可以生成自定义预览弹出窗口,当您将鼠标悬停在代码视图的代码上时,会显示该弹出窗口。要实现自定义预览,您可以将新的 API、showPreview 和现有的 mm:browsercontrol API 一起使用。例如,您可以使用这些 API,当您将鼠标悬停在一项 JavaScript 功能的名称上时显示该功能所有参数的预览。
有关详细信息,请参阅 Dreamweaver API 参考:“代码”视图功能。
在 Dreamweaver 的早期版本中,必须先在“代码”视图中选择代码块,然后再将其折叠。在本版本及更高版本中,只需将鼠标悬停在行号上并单击出现的三角形即可折叠代码块。
代码折叠基于标签块且可用于 HTML、CSS、LESS、Sass、SCSS、JS、PHP、XML 和 SVG 文件。
复制、剪切、粘贴和拖放操作均保留代码折叠状态。例如,复制已折叠的代码块时,粘贴操作会将复制的文本粘贴为折叠块。
与之前的代码折叠功能不同,现在 HTML 文件中的折叠内容包含结束标记且以不同的方式呈现。此外,折叠代码块中显示的字符数现在也有所增加。这有助于您预览初始属性(如果有)。
有关详细信息,请参阅折叠代码。
设备不仅能大小各异,而且分辨率也各不相同。您规划的响应快速的网页设计必须适应各个设备上相应呈现的多种分辨率版本的图像。但是,在项目中为所有图像创建众多不同的分辨率版本可能会是一项艰巨的任务。
Dreamweaver 中的 Extract 能够在很大程度上简化这一任务。在 2015 版 Dreamweaver 中提取来自 Photoshop 复合的图像时,您还可以选择提取该图像的不同分辨率版本。Photoshop 中的图像会在提取过程中自动调整为不同的预定义分辨率。
然后,您可以在 JavaScript 或媒体查询中调用这些图像,以便根据用于查看图像的设备来显示图像。例如,对于高密度 Retina 显示屏,您可以使用 2X 版本的图像。
有关详细信息,请参阅从 PSD 文件中提取图像。
在 Extract 面板中,除像素之外,您现在还可查看图像的宽度和高度(值以 % 表示)。您还可以查看度量值(以 % 表示)。
当您单击 Extract 面板中的资源时,所显示的弹出窗口会为您提供一个在像素和 % 之间进行切换的选项。当您在不同资源中查看度量值时,您在此弹出窗口中选择的单位将会保留。
现在,您可以在实时视图中将元素插入其他元素之中。当您在插入面板、资源面板或实时视图中拖动元素,并将鼠标悬停在页面上的不同元素上时,您会看到嵌套元素的可视化反馈(在参考线之前和之后)。
现在,您只需单击“元素显示”中选择器的名称,即可对其进行编辑。您可以通过单击页面上的任意位置来提交所作的更改。
目前 CSS Designer 提供了两种不同模式,用于查看和编辑 CSS 属性:
如果要创建 CSS、媒体查询和选择器,此模式是最佳选择。
Dreamweaver 目前可在 CSS 设计器中显示代码提示(类似于代码视图),用于设置新属性。
CSS Designer 面板中的媒体查询现已对颜色进行了编码以匹配“可视媒体查询”。
此版本中的测试服务器工作流程改进旨在让您能够轻松、无缝地利用实时视图中的服务器端代码对文档进行编辑。
与 Dreamweaver 的早期版本不同,您现在可以指定特定服务器作为测试服务器或远程服务器,但不能同时指定两者。服务器设置用户界面中的复选框已替换为单选按钮,以便实施服务器规范。
如果您打开一个站点或导入在早期版本的 Dreamweaver 中创建的站点的设置,并指定某个服务器同时作为测试服务器和远程服务器,则系统会创建一个重复的服务器条目。然后,将一个标记为远程服务器(使用 _remote 后缀),将另一个标记为测试服务器(使用 _testing 后缀)。
打开、创建或保存为动态文档所做的更改时,Dreamweaver 目前会将动态文档自动同步到测试服务器。Dreamweaver 不再针对测试服务器工作流程显示“更新测试服务器”或“推送依赖文件”对话框。
有关详细信息,请参阅动态文件的自动推送。
Business Catalyst 扩展已停止使用,无法再用于 Dreamweaver CC 2015 版或更高版本。Dreamweaver CC 2014.1.1 是最后一个兼容 Business Catalyst 扩展的版本。
要将 Business Catalyst 用于 Dreamweaver CC 2015 版和更高版本,请使用 Dreamweaver 中的 SFTP 连接选项。有关详细信息,请参阅 Business Catalyst 文档。
这里是 Business Catalyst 网站有关此更改的官方公告。
登录到您的帐户