了解如何在“代码”视图中工作并充分利用 Dreamweaver 的编码功能。
在 Dreamweaver 中使用代码有多种方式。
您可以使用"新建文档"对话框打开新的代码文件,然后开始输入代码。
Dreamweaver 还提供了一套强大的编辑工具,使浏览和更改代码的过程变得流畅。
使用“插入”面板插入代码
当您单击图标时,代码会立即显示在您的页面中,或者出现对话框请求更多信息以完成代码。
“插入”面板提供的按钮的数目和类型取决于当前文档的类型。 同时还取决于您正使用“代码”视图还是“设计”视图。
结合使用 Emmet 工具包和 Dreamweaver
Emmet 是一个插件,可用于快速编码并生成 HTML 和 CSS 代码。
在 Dreamweaver 的“代码”视图或“代码检查器”中使用 Emmet 缩写,然后按 Tab 键将这些缩写展开为 HTML 标记或 CSS。
HTML 缩写将在 HTML 和 PHP 页面中展开。 CSS 缩写在 CSS、LESS、SASS、SCSS 页面中展开,或在 HTML 页面的 style 标记内展开。
以下几个示例演示如何在“代码”视图中使用 Emmet 缩写。 有关详细信息和参考,请参阅 Emmet 文档。
Dreamweaver 目前支持 Emmet 1.2.2 缩写。
示例 1:使用 Emmet 插入 HTML 代码
要快速添加带有三个元素的无序列表的 HTML 代码,请打开 HTML 文件并在<body></body>内的"代码"视图中键入以下 Emmet 缩写:
div>(ul>li*3>{Lorem Ipsum})+p*4>lorem
现在,确保光标正好位于 Emmet 缩写后面,然后按 Tab 展开缩写。 或者,选择整个缩写,然后按 Enter 键。
缩写展开为以下代码:
<div>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit。Saepe,voluptatum,perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel。</p>
<p>Ipsa,distinctio,eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque?Suscipit rem asperiores excepturi sapiente enim architecto esse。</p>
<p>Harum,ad porro molestiae corporis natus aut non fugit。Recusandae,reprehenderit,voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos。</p>
<p>Dignissimos,molestiae,quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum!Dolorum、dolore、pariatur、incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>
示例 2:使用 Emmet 插入 CSS 代码
要插入带供应商前缀的边框半径 CSS 代码,请打开您的 CSS 文件并在一个类中键入以下 Emmet 缩写:
-bdrs
按 Tab 键时,缩写会展开为以下代码:
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
使用代码注释
注释 是您在 HTML 代码中插入的描述性文本,用来解释该代码或提供其他信息。 注释文本只在“代码”视图中出现,不会显示在浏览器中。
向代码添加注释
要添加注释,请先键入注释文本。 然后,您可以将光标放在插入点处,并从工具栏中单击"插入"图标以打开"应用注释"子菜单。
您也可以选择文本,然后将其设为注释。 选择的文本会被包装在注释块中。
您可以使用各种语法选项添加注释。 选择相应语法,然后 Dreamweaver 将为您插入标签。 您只需输入注释文本即可。
您还可以使用 Ctrl+/(在 Windows 上)或 Cmd+/(在 Mac 上)键盘快捷键添加注释。
如果您在未选中任何文本的情况下使用键盘快捷键,则注释将应用于当前行。 如果您选择文本并使用键盘快捷键,注释将应用于选择的文本。
从代码中删除注释
要删除代码注释,请选择该代码,然后单击工具栏中的“删除”注释图标。您也可以使用 Ctrl-/(在 Windows 上)或 Cmd-/(在 Mac 上)键盘快捷键来删除注释。
切换代码注释
要在代码视图中切换显示和隐藏注释,只需在 Windows 上按 Ctrl+/,或在 Mac 上按 Cmd+/(针对选定的注释或行)。
使用多个光标在多个位置添加或更改文本
使用 Dreamweaver 的多光标功能在多个位置添加光标,或选择多个代码部分并同时编辑这些部分。
复制和粘贴以及查找和替换操作不适用于多个光标或多个选择。
添加多个光标或多个选择
您可以根据需求以不同方式添加多个光标。
如果您想在多个位置添加相同的文本而不替换任何现有文本,请添加多个光标。
如果要替换现有文本,则可进行多个选择。 您可以选择连续的文本行或不连续的文本行,或者两者都选择,然后向其添加光标。
要在连续行的同一列上添加多个光标或多个选择:
按住 Alt 键,然后单击以垂直拖动。 当您垂直拖动时,会向您拖过的每一行添加光标。
若要选择连续文本行,请按住 Alt 键并沿对角线方向拖动。 当您对角拖动时,Dreamweaver 会在该选择内选择一个矩形文本块。
要快速添加光标或在选择中包含多行,请使用 Shift-Alt-Up 或 Down 键盘快捷键。
在多个位置添加光标(或选定文本)后,继续开始键入。
如果您有多个光标,则会添加新文本。
如果您已在多行文本中选择了内容,则所选文本会被您输入的新文本替换。
要在不同列的跨行位置添加多个光标:
要向不连续的文本行添加光标,只需按住 Ctrl 键,然后单击要放置光标的不同行。
要选择不连续的文本行,请选择一些文本,然后按住 Ctrl 键(Windows)或 Cmd 键(Mac),继续进行进一步选择。
要在每行的开头/结尾添加光标:
选择多行文本并按向左或向右箭头键。
要在选择的前面或后面行中添加光标:
按 Shift+Alt+Up/Down 键,然后按右箭头键。
要选择连续和不连续的文本行:
您可以结合这些技巧在单个选择内同时选择连续和分离的文本行。
首先选择不连续的文本行,然后按 Ctrl-Alt(在 Windows 上)或 Cmd-Alt(在 Mac 上)并拖动,以向现有的多个选择添加一组行。
使用“快捷文档”获取 Dreamweaver 中的 CSS 相关帮助
在 Dreamweaver 中处理 CSS、LESS 或 SCSS 文件时,您可以快速获取有关 CSS 属性或值的更多信息。
将光标放置在属性或值内,然后按 Ctrl + K,Dreamweaver 会打开来自 Web Platform Docs 项目的文档。
您可以同时打开多个内联编辑器和文档查看器。
要关闭单个内联编辑器或文档查看器,请点击左上角的"X"或在快速文档处于焦点时按 Escape。
要关闭所有内联编辑器和文档,请将光标放回主代码编辑器中,然后按 Escape。
分析代码\n
Dreamweaver 支持对 HTML、CSS 和 JavaScript 进行 linting(分析代码以查找潜在错误)。
“输出”面板中会列出通过 linting 检测到的错误和警告。 有关详细信息,请参阅使用 linting 检查代码。
此外,Dreamweaver 还会在错误行的行号列快速显示错误预览。 行号以红色显示,表示该行包含错误,当您将鼠标悬停在上面时,会显示错误的简要描述。
注意:仅会显示该行中的第一个错误。 如果行中仅包含警告,则会显示警告的说明信息。 如果行中既包含警告,又包含错误,则仅显示错误的说明信息。
使用“环绕标签”将文本包含在标签中
在“代码”视图中使用“环绕标签”以使用某个标签环绕特定文本行。 在设计视图或实时视图中,您可以使用此功能将对象包装在标记中。
在代码视图中选择文本或在设计视图中选择对象,然后在键盘上按 Ctrl+T。
此时会显示一个弹出窗口,让您从多个 HTML 标记中选择。
从菜单中选择一个标记。
如果您正在“代码”视图中工作,则将使用该标签环绕所选文本。 如果您在设计视图或实时视图中工作,选定的对象会被包装在该标记中。
使用编码上下文菜单编辑代码
使用 Dreamweaver 的上下文菜单快速编辑代码。
要访问此上下文菜单,请右键单击(在 Windows 上)或按住 Command 单击(在 Mac 上)。 以下选项可供您使用:
快速编辑
单击此选项可进入“快速编辑”模式。 在此模式下,Dreamweaver 提供上下文特定的内联代码和工具,可让您快速获取所需的代码片段。 有关更多信息,请参阅快速编辑。
剪切、复制、粘贴
单击这些选项可快速剪切、复制和粘贴文本,而无需访问"编辑"菜单。
查找和替换、查找下一个、查找上一个
单击这些选项可快速查找和替换文本,而无需访问"查找"菜单。
创建新代码片段
使用此选项可创建可保存以供将来重用的代码片段。 选择该代码,然后单击“创建新代码片段”以将所选代码设为代码片段。 有关详细信息,请参阅使用代码片段。
打开相关文件
右键单击链接/脚本标记,然后单击打开相关文件以打开该文件。
附加样式表
将现有 CSS 样式表附加到页面。
选定内容
"选择"子菜单包含多种代码编辑选项,您可以对选定的代码段使用这些选项,如切换行注释和块注释、展开和折叠选择、将内联 CSS 转换为规则、移动 CSS 规则和打印代码。
代码导航器
单击此选项可导航到相关的代码源,例如内部和外部 CSS 规则、服务器端包含、外部 JavaScript 文件、父模板文件、库文件和 iframe 源文件。 有关详细信息,请参阅导航到相关代码。
代码提示工具
"代码提示工具"子菜单可让您轻松使用拾色器、URL 浏览器和字体列表工具。
缩进代码块
在代码视图或代码检查器中编写和编辑代码时,您可以更改选定代码块或行的缩进色阶,将其向右或向左移动一个制表符的位置。
缩进所选的代码块
- 按 Tab 或
- 按 Ctrl+],或
- 选择“编辑”>“缩进代码”。
取消缩进所选代码 块
- 按 Shift+Tab,或
- 按 Ctrl+[,或
- 选择“编辑”>“凸出代码”。
导航到相关代码
代码导航器可显示与页面上特定选定内容相关的代码源列表。 使用代码导航器导航到相关的代码源,例如内部和外部 CSS 规则、服务器端包含、外部 JavaScript 文件、父模板文件、库文件和 iframe 源文件。 在代码导航器中单击某一链接时,Dreamweaver 将打开包含相关代码片段的文件。 如果启用该文件,则该文件将显示在相关文件区域。 如果未启用相关的文件,则 Dreamweaver 将在“文档”窗口中将所选文件作为单独的文档打开。
当单击代码导航器中的 CSS 规则时,Dreamweaver 直接将您转到该规则。 如果该规则在文件内部,则 Dreamweaver 会在“拆分”视图中显示该规则。 如果该规则位于外部 CSS 文件中,则 Dreamweaver 会打开该文件并在主文档上方的相关文件区域中显示该文件。
您可以从设计、代码和拆分视图以及代码检查器中访问代码导航器。
有关 Dreamweaver 工程团队关于使用代码导航器的视频概述,请参阅 www.adobe.com/go/dw10codenav。
有关使用实时视图、相关文件和代码导航器的视频教程,请参阅 www.adobe.com/go/lrvid4044_dw。
打开“代码导航器”
Alt+单击 (Windows) 或 Command+Option+单击 (Macintosh) 页面上的任意位置。代码导航器显示指向影响您单击区域的代码 的链接。
在代码导航器的外部单击以将其关闭。
您还可以通过单击代码
导航器指示器
来打开代码导航器。当鼠标
空闲 2 秒后,此
指示器会出现在页面上插入点附近。
使用代码导航器导航到代码
从您感兴趣的页面区域打开代码导航器。
单击要转到的代码片断。
代码导航器根据文件对相关的代码源分组并按字母顺序列出文件。 例如,假设三个外部文件中的 CSS 规则影响文档中的选定内容。 在这种情况下,“代码导航器”会列出这三个文件以及与选定内容相关的 CSS 规则。 对于与给定内容相关的 CSS,“代码导航器”功能类似于“当前”模式中的“CSS 样式”面板。
当鼠标悬停在指向 CSS 规则的链接上方时,代码导航器将显示该规则中属性的工具提示。 当您想要区分许多共享同一名称的规则时,这些工具提示很有用。
禁用“代码导航器”指示器
打开代码导航器。
选择右下角的“禁用指示器”。
在代码导航器的外部单击以将其关闭。
要重新启用代码导航器指示器,请按 Alt+单击 (Windows) 或 Command+Option+单击 (Macintosh) 来打开代码导航器并取消选择"禁用指示器"选项。
转到 JavaScript 或 VBScript 函数
在代码视图和代码检查器中,您可以查看代码中所有 JavaScript 或 VBScript 函数的列表,并跳转到其中任何一个函数。
在“代码”视图中,右键单击 (Windows) 或按住 Control 单击 (Macintosh)“代码”视图中的任何位置,然后从上下文菜单中选择“函数”子菜单。
“设计”视图中不显示“函数”子菜单。
代码中的所有 JavaScript 或 VBScript 函数都会显示在子菜单中。
若要以字母顺序查看列出的函数,请在“代码”视图中按住 Ctrl 右键单击 (Windows) 或按住 Option 和 Control 单击 (Macintosh),然后选择“函数”子菜单。
- 在代码检查器中,单击工具栏中的"代码导航"按钮 ({ })。
提取 JavaScript
JavaScript Extractor (JSE) 删除 Dreamweaver 文档中的所有或大多数 JavaScript,将其导出到外部文件并将该外部文件链接到您的文档。 JSE 也可以删除代码中的事件处理函数(如 onclick 和 onmouseover),然后以非干扰方式将与这些处理函数关联的 JavaScript 附加到您的文档。
使用 JavaScript 提取器之前,请注意以下限制:
JSE 不提取文档正文中的脚本标记(但 Spry Widget 除外)。 将这些脚本外置可能导致异常结果。 默认情况下,Dreamweaver 会在“将 JavaScript 外置”对话框中列出这些脚本,但不会选择这些脚本进行提取。 (如果需要,可以手动选择这些脚本。)
JSE 不从 .dwt(Dreamweaver 模板)文件的可编辑区域、模板实例的非可编辑区域或 Dreamweaver 库项目中提取 JavaScript。
在使用“将 JavaScript 外置并以非干扰方式进行附加”选项提取 JavaScript 后,不能再在“行为”面板中编辑 Dreamweaver 行为。 Dreamweaver 不能用以非干扰方式附加的行为检查和填充“行为”面板。
一旦关闭页面后,您无法撤消更改。 但只要您保留在同一个编辑会话中,就可以撤消更改。 选择“编辑”>“撤消将 JavaScript 外置”可以撤消更改。
某些复杂的页面可能不能正常工作。 从正文中具有 document.write() 和使用全局变量的页面中提取 JavaScript 时应当小心。
有关 Dreamweaver 工程团队对 Dreamweaver 中 JavaScript 支持的视频概述,请参阅 www.adobe.com/go/dw10javascript。
使用 JavaScript Extractor:
打开包含 JavaScript 的页面。
单击"工具">"外部化 JavaScript"。
在"外部化 JavaScript"对话框中,如有必要请编辑默认\n选择。
如果您希望 Dreamweaver 将任何 JavaScript 移动到外部文件\n并在当前文档中引用该文件,请选择"仅外部化 JavaScript"。此选项\n会在文档中保留事件处理程序(如 onclick 和 onload),\n并在"行为"面板中保持行为可见。
如果您希望 Dreamweaver 1) 将 JavaScript 移动到外部文件并\n在当前文档中引用它,以及 2) 从 HTML 中移除事件处理程序\n并在运行时使用 JavaScript 插入它们,请选择"外部化 JavaScript 并进行非强制性附加"。当您\n选择此选项时,您将无法再在"行为"\n面板中编辑行为。
在"编辑"列中,取消选择您不想要\n进行的任何编辑,或选择 Dreamweaver 默认未选择的编辑。
默认情况下,\nDreamweaver 会列出但不选择以下\n编辑:
文档开头包含 document.write() 或 document.writeln() 调用的脚本块。
文档开头包含与 EOLAS 处理代码相关的函数\n签名的脚本块,已知此代码使用 document.write()。
文档正文中的脚本块,除非这些块\n仅包含 Spry 构件或 Spry数据集构造函数。
Dreamweaver 会自动为还没有 ID 的元素分配 ID。如果您不喜欢这些 ID,可以通过编辑 ID 文本框来更改它们。
单击“确定”。
摘要对话框提供提取的摘要。查看提取内容并单击“确定”。
保存该页面。
Dreamweaver 将创建一个 SpryDOMUtils.js 文件和另一个包含所提取的 JavaScript 的文件。 Dreamweaver 会将 SpryDOMUtils.js 文件保存在站点之中的 SpryAssets 文件夹中,并将另一个文件保存在从中提取 JavaScript 的页面所在的同一级别。 在上传原始页面时,不要忘记将这两个相关文件上传到 Web 服务器。
快速编辑
Dreamweaver 中的快速编辑模式不会用大量面板和图标来整乱您的编码环境,而是将上下文特定的代码和工具内联放置,让您能够快速访问所需的代码部分。
您可以通过以下方式进入快速编辑模式:
- 右键单击代码片段,然后从显示的上下文菜单中选择"快速编辑"
- 按 Ctrl + E(在 Windows 上)或 Cmd+E(在 Mac 上)
使用“快速编辑”模式处理 HTML 文件
在 HTML 文件中,将光标置于类或 ID 属性(名称或值)内或标签名称中。 “快速编辑”将向您显示项目中匹配的所有 CSS、SCSS 和 LESS 规则。 您可以直接内联编辑这些规则,无需离开 HTML 文件的上下文。
当多个规则匹配时,使用右侧的列表在它们之间导航(或使用 Alt-Up/Down)。
要直接从内联编辑器创建 CSS 规则,请单击"新建规则"或按 Ctrl-Alt-N(在 Windows 上)或 Cmd-Opt-N(在 Mac 上)。
使用“快速编辑”模式处理 JavaScript 文件
在 JavaScript 文件中,将光标置于函数名称上。 快速编辑会显示函数正文(即使它存在于由 require() 语句引用的其他文件中)。
在 CSS、SCSS 或 LESS 文件中使用快速编辑模式
当您将光标置于颜色值中并调出快速编辑时,您可以访问拾色器并快速修改 CSS 代码中使用的颜色。
在 CSS、LESS 或 SCSS 文件中,将光标置于 cubic-bezier() 或 steps() 过渡时序函数上,快速编辑会显示图形化过渡曲线编辑器。
预定义计时功能 ease、ease-in、ease-out、ease-in-out、step-start 和 step-end 也是有效的起始点。
重构代码
代码重构是重构现有计算机代码而不更改其外部行为的过程,以便代码变得更易读、更可维护、更易于理解和调试。 当您在代码中有重复的代码、长方法或大类时,会使用它。 由于函数较小且替换正确,调试代码可节省时间。
通过 JavaScript 重构,您可以重命名功能并设置变量的范围,以便在定义变量的代码块内调用它。
代码重构现在仅在 .js 文件中可用。
重构 JavaScript
您可以在 html、php 和 javascript 文档类型中重构代码。 在 Dreamweaver 中右键单击代码区域时,下拉菜单中会显示重构选项。重构包含以下选项:
- 重命名
- 提取到变量
- 提取到函数
- 包装在 Try Catch 中
- 包装在 Condition 中
- 转换为箭头函数
- 创建 Getter/Setter
要了解每个重构选项的功能,请参阅以下部分:
重命名
重命名用于更改 JavaScript 代码中变量名称或函数名称的所有匹配项。 不需要通过单击和拖拽选择变量来进行重构。
执行以下步骤在 JavaScript 中重命名:
突出显示或将文本光标放在需要更改的代码中。
右键单击选定的文本,然后选择重构 > 重命名。您也可以在 Windows 操作系统上使用Ctrl + Alt + R键盘快捷键,或在 macOS 上使用Command + option + R 键盘快捷键来重命名。
屏幕上出现一个多光标视图,允许您更改变量的所有匹配项。 多传感器改进会选择当前选择的下一个匹配项。 Retype 一个 唯一的变量或功能名称来替换当前名称。
提取到变量
使用“提取到变量”可通过选择一个表达式并右键单击它,用 JavaScript 中的变量、本地变量或常量替换表达式。 然后,选择“重构”>“提取到变量”。 您也可以在 Windows 操作系统上使用Ctrl + Alt + V,在 macOS 上使用Cmd + Alt + V。
提取到函数
使用“提取到函数”可替换参数中的函数调用中的表达式。 新参数的默认值可以在功能正文内初始化或通过功能调用传递。
执行以下步骤来使用提取到功能进行重构:
在 JavaScript 中选择任何表达式或一组 表达式。
右键单击,并选择重构 > 提取到功能。您也可以在 Windows 操作系统上使用Ctrl + Alt + M,或在 Mac 操作系统上使用Cmd + Alt + M。
从屏幕上显示的弹出菜单中选择目标范围以提取功能。
输出因所选目标范围而异。 例如,目标范围可以是构造函数、选定的类或全局功能。
提取到功能的特性包括:
- 它根据选择或提取范围内可用的标识符识别要传递的参数。
- 它根据在选择中值发生更改的标识符识别要从功能返回的返回参数。
- 它还会创建一个 具有唯一名称的功能。
以下屏幕快照根据所选的相应目标范围显示输出。
包装在 Try Catch 中
对编译程序后显示为错误的代码块中的异常使用“包装在 Try Catch 中”。 此函数将代码块包装在 Try Catch 块中。 此代码块在执行项目群时被标记为异常。
选择代码或将光标放在代码处,右键单击,然后选择 重构 > 包装在 Try Catch 中。如果您将光标放在某个位置,则会找到周围的语句,否则会检查代码是否包含语句。如果有语句,则会将代码包装在 Try Catch 块中。
包装在 Condition 中
使用 包装在条件中 将代码中的表达式仅针对特定条件进行编译。
在代码中选择一个表达式,右键单击,然后选择 重构 > 包装在条件中。
转换为箭头函数
箭头功能是一个表达式,它没有自己的功能表达式,例如 this、arguments、super 或 new.target。这些功能表达式适用于非方法表达式,不能用作构造函数。
将光标放在功能中,右键单击,然后选择 重构 > 转换为箭头功能。
- 如果选择的语句有 1 个参数,则参数结构显示为 param => {statements}。
- 如果选择的语句有 0 个或超过 1 个参数(例如 param (param1, param2)),则参数结构显示为 param (param1, param2) => {statements}。
创建 Getter/Setter
在 JavaScript 中,可以使用 setter 来执行指定属性需要更改的函数。 Setter 通常与 getter 一起使用来创建一种伪属性。 您无法为具有实际值的属性创建设置器。
将光标放在对象表达式的会员处,右键单击,然后选择 重构 > 创建获取器/设置器。
疑难解答提示
下表为屏幕上显示的相应错误消息提供故障排除提示,这些错误是由于代码选择不正确导致的:
|
功能名称 |
错误消息 |
故障排除提示 |
|---|---|---|
|
重命名 |
在给定位置没有表达式 |
将光标放在变量或函数名称之上或之前。 |
|
提取到变量 |
选择不形成表达式 |
在重构代码之前,在代码中选择一个表达式。 |
|
提取到函数 |
选定的块应表示语句集或表达式 |
确保选择具有一组语句或表达式的块。 |
|
包装在 Try Catch 中 |
选择要包装在 Try Catch 块中的有效代码 |
确保在应用 Try Catch 重构选项之前选择任何代码。 |
|
包装在 Condition 中 |
选择要包装在 Condition 块中的有效代码 |
确保在应用“包装在 Condition 中”重构选项之前选择表达式。 |
|
转换为箭头函数 |
将光标放在函数表达式内 |
确保在应用重构选项之前将光标放在函数表达式中。 |
|
创建 Getter/Setter |
将光标放在对象表达式的成员上 |
确保在应用“创建 getter/setter”重构选项之前将光标放在对象表达式的成员上。 |
查找和替换文本
您可以使用 Dreamweaver 的查找和替换功能来搜索您的地点或文件夹中的任何类型的文本、代码或空白。
您可以搜索整个标记,或可以将搜索限制为仅限设计视图中呈现的文本或仅限代码。
您还可以将强大的模式匹配算法(正则表达式)用于高级查找和替换操作。
找到文本后,您可以选择用指定的文本、代码或空格替换它。
如需更多信息,请参阅查找和替换文本。
在"代码"视图中预览图像和颜色
插入图像和颜色的相关代码后,您可以直接在"代码"视图中预览它们。
图像预览
将鼠标悬停在任意图像 URL 上,即可在“代码”视图中查看该图像的预览。 您可以预览以下任意形式引用的图像:
- url();
- data-uri()
- img 标记的 Src 属性值
Dreamweaver 还会显示远程托管图像的图像预览。
如果 Dreamweaver 无法显示远程路径的预览,将显示"无法加载图像"消息。
您可以预览以下图像类型:
- JPEG
- JPG
- PNG
- GIF
- SVG
颜色预览\n
将鼠标悬停在颜色值上,即可在“代码”视图中预览该颜色。 支持的格式包括:
- 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);
- 预定义颜色名称,例如 Olive、Teal、red。
颜色预览适用于所有文档类型中的上述颜色格式。
右键单击某个值并选择快速编辑以打开拾色器并选择其他颜色。
要禁用图像和颜色的预览,请取消选中"查看">"代码视图选项">"资源预览"选项。
打印代码
您可以打印代码以便离线编辑、\n存档或分发。