在设计视图中编辑代码

上次更新日期: 2021年4月27日

使用本主题以了解如何使用属性检查器来在 Adobe Dreamweaver 的设计视图中编辑代码。

Dreamweaver 让您能够直观地\n创建和编辑网页,而无需担心底层的\n源代码,但有时您可能需要编辑\n代码以获得更大的控制权或对网页进行故障排除。Dreamweaver 让您在\n设计视图中工作时编辑某些代码。

本部分是为那些喜欢在设计\n视图中工作,但也希望快速访问代码的用户而设计的。

在设计视图中选择子标签

如果您在\n设计视图中选择包含子标记的对象(例如 HTML 表格),您\n可以通过选择"编辑">\n"选择子项"来快速选择该对象的第一个子标记。

注释

此命令仅在“设计”视图中启用。

例如,<table> 标记通常\n具有 <tr> 子标记。如果您在\n标记选择器中选择 <table> 标记,则可以通过选择\n"编辑">"选择子项"来选择表格中的第一行。Dreamweaver 在标记选择器中选择第一个 <tr> 标记。由于\n<tr> 标记本身具有子标记(即 <td> 标记),\n再次选择"编辑">"选择子项"将选择表格中的第一个\n单元格。

使用属性检查器编辑代码

您可以使用属性检查器来检查和编辑页面上文本或对象的属性。属性检查器中显示的属性通常对应于标记的属性;在属性检查器中更改属性通常与在代码视图中更改相应属性具有相同的效果。

注释

标记\n检查器和属性检查器都允许您查看和编辑\n标记的属性。标记检查器允许您查看和编辑\n与给定标记关联的每个属性。属性检查器仅显示最常见的属性,但提供了更丰富的控件来更改这些属性的值,并允许您编辑某些与特定标记不对应的对象(如表格列)。

在文本中单击或选择页面上的对象。

文本或对象的属性检查器显示在\n文档窗口下方。如果属性检查器不可见,请选择\n"窗口">"属性"。

在属性检查器中对属性进行更改。

使用属性检查器编辑 CFML

使用属性检查器在设计视图中检查和修改 ColdFusion 标记。

在属性检查器中,单击"属性"\n按钮以编辑标记的属性或添加新属性。
如果标记在其开始和结束\n标记之间包含内容,请单击"内容"按钮以编辑内容。

"内容"按钮仅在所选标记不是\n空标记时显示(即,如果它同时具有开始和结束\n标记)。

如果标记包含条件表达式,请在\n"表达式"框中对其进行更改。

快速标签编辑器概述

您使用快速标记编辑器在不离开设计视图的情况下快速检查、插入和编辑 HTML 标记。

如果您在快速标记编辑器中输入无效的 HTML,Dreamweaver 会尝试通过在\n需要的位置插入结束引号和结束尖括号来为您纠正它。

要设置快速标记编辑器选项,请按 Control-T (Windows) 或 Command-T (Macintosh) 打开快速标记编辑器。

快速标签编辑器具有三种模式:

  • 插入 HTML模式用于插入新的 HTML 代码。
  • “编辑标签”模式用于编辑现有标签。
  • 插入 HTML模式用于插入新的 HTML 代码。

  • “编辑标签”模式用于编辑现有标签。

  • “环绕标签”模式用新标签括起当前选定内容。

注释

快速标签编辑器打开时所采用的模式取决于“设计”视图中当前的选定内容。

在所有三种模式中,使用快速标签编辑器的基本过程是相同的:打开编辑器,输入或编辑标签和属性,然后关闭编辑器。

您可以在快速标签编辑器处于活动状态的情况下,通过按 Ctrl+T (Windows) 或 Command+T (Macintosh) 在不同模式间切换。  

使用快速标签编辑器编辑代码

您可以使用快速标签编辑器(“编辑”>“快速标签编辑器”)在不退出“设计”视图的情况下快速插入和编辑 HTML 标签。

插入 HTML 标签

在设计视图中,单击页面以将插入点放置在要插入代码的位置。
按 Ctrl+T (Windows) 或 Command+T (Macintosh)。

快速标签编辑器以“插入 HTML”模式打开。

“插入 HTML”模式下的快速标签编辑器
“插入 HTML”模式下的快速标签编辑器

输入 HTML 标签并按 Enter。

标记将插入到您的代码中,如果适用,还会插入匹配的结束标记。

按 Esc 以在不进行任何更改的情况下退出。

编辑 HTML 标签

在设计视图中选择一个对象。

您也可以从"文档"窗口底部的标记\n选择器中选择要编辑的标记。有关详细信息,\n请参阅 使用标记选择器编辑\n代码

按 Ctrl+T (Windows) 或 Command+T (Macintosh)。

快速标签编辑器以“编辑标签”模式打开。

输入新属性、编辑现有属性,或编辑\n标记的名称。
按 Tab 键从一个属性向前移动到下一个属性;按 Shift+Tab 从一个属性向后移动到上一个属性。
注释

默认情况下,当您\n按 Tab 键或 Shift+Tab 时,更改将应用于文档。

要关闭"快速标记编辑器"并应用所有更改,\n请按 Enter。
若要退出且不再进行任何更改,请按 Esc。

用 HTML 标记包围当前选区

在"设计"视图中选择无格式文本\n或对象。
注释

如果您选择包括开始或结束 HTML 标签的文本或对象,则快速标签编辑器将以“编辑标签”模式打开,而不以“环绕标签”模式打开。

按 Control+T (Windows) 或 Command+T (Macintosh),或者\n单击"属性"检查器中的"快速标记编辑器"按钮。

快速标签编辑器以“环绕标签”模式打开。

输入单个开始标记,如 strong,\n然后按 Enter (Windows) 或 Return (Macintosh)。

标记插入到当前选择的开头,\n匹配的结束标记插入到末尾。

若要退出并且不进行任何更改,请按 Esc。

使用快速标记编辑器中的提示菜单

快速标记编辑器包括一个属性提示菜单,其中列出了您正在编辑或插入的标记的所有有效属性。

您也可以禁用\n提示菜单或调整"快速\n标记编辑器"中菜单弹出前的延迟。

要查看列出标记有效属性的提示菜单,请在快速标记编辑器中编辑属性名称时稍作停顿。此时将显示提示菜单,其中列出了您\n正在编辑的标记的所有有效属性。

同样,要查看\n列出有效标记名称的提示菜单,请在"快速标记编辑器"中输入或编辑\n标记名称时稍作停顿。

注释

"快速标记编辑器"\n代码提示偏好设置由常规代码提示偏好设置控制。\n有关详细信息,请参阅 设置\n代码提示偏好设置

执行下列操作之一:
  • 首先键入一个标签或属性名称。 代码提示菜单中的选择会跳转到以您输入字母\n开头的第一个项目。

  • 使用向上键和向下键选择一项。

  • 使用滚动条查找一项。

按 Enter 键插入选定项目,或双击\n项目以插入它。
要在不插入项目的情况下关闭提示菜单,请按\nEscape 或继续输入。

禁用提示菜单或更改\n其出现前的延迟

选择"编辑">"偏好设置"\n(Windows) 或"Dreamweaver">"偏好设置"(Macintosh)\n并选择"代码提示"。

出现“代码提示首选参数”对话框。

要禁用提示菜单,请取消选择"启用代码提示"\n选项。

使用标签选择器编辑代码

您可以在不退出“设计”视图的情况下使用标签选择器选择、编辑或删除标签。 标签选择器位于“文档”窗口底部的状态栏中并显示一系列标签。

编辑或删除标签

在文档中单击。

应用于插入点的标记显示在标记选择器中。

右键单击 (Windows) 或按住 Control 键单击 (Macintosh) 标记选择器中的标记。
若要编辑标签,请从菜单中选择“编辑标签”。 在快速标记编辑器中进行\n更改。有关更多信息,请参阅使用快速标记编辑器编辑代码
若要删除标签,请从菜单中选择“删除标签”。

选择与标记对应的对象

在文档中单击。

应用于插入点的标记显示在\n标记选择器中。

在标签选择器中单击某标签。

由该标签表示的对象在页面上被选中。

注释

使用此技术选择个体表格行\n(tr 标记)或单元格(td 标记)。

在设计视图中编写和编辑脚本

您可以通过以下方式在代码视图和设计视图中使用客户端 JavaScript 和 VBScript:

  • 为您的页面编写 JavaScript 或 VBScript 脚本\n而无需离开设计视图。

  • 在文档中创建指向外部脚本文件的链接而无需离开设计视图。

  • 编辑脚本\n而无需离开设计视图。

    开始之前,选择"视图">\n"视觉辅助">"不可见元素"以确保脚本\n标记显示在页面上。

写入客户端脚本

将\n插入点放在您想要脚本的位置。

选择“插入”>“HTML”>“脚本”。

在文件选择窗口中选择脚本。

注释

您不需要包括开始和结束脚本标签。

选定的文件中的脚本标签将插入到文档中。

编辑脚本

选择脚本标签。
在属性检查器中,单击“编辑”按钮。

该脚本将显示在“脚本属性”对话框中。

如果您关联到外部脚本文件,该文件会在代码视图中打开,您可以在其中进行编辑。

注释

如果脚本标记之间有代码,即使\n还关联到外部脚本文件,也会打开"脚本属性"对话框。

在"语言"框中,指定 JavaScript 或 VBScript\n作为脚本的语言。
在"类型"弹出菜单中,指定脚本的类型,\n客户端或服务器端。
(可选)在"来源"框中,指定外部关联的\n脚本文件。

单击文件夹图标或“浏览”按钮以选择一个文件,或者键入路径。

编辑脚本并单击“确定”。

在设计视图中编辑 ASP 服务器端脚本

使用 ASP 脚本属性检查器\n在设计视图中检查和修改 ASP 服务器端脚本。

在设计视图中,选择服务器语言标记\n视觉图标。
在 ASP 脚本属性检查器中,单击"编辑"\n按钮。
编辑 ASP 服务器端脚本并单击“确定”。

使用属性检查器编辑页面上的脚本

在属性检查器中,从"语言"弹出菜单中选择\n脚本语言,或在"语言"框中键入语言\n名称。
注释

如果您使用的是 JavaScript 且不确定版本,请选择 JavaScript 而不是 JavaScript1.1 或 JavaScript1.2。

在"类型"弹出菜单中,指定脚本类型,\n客户端或服务器端。

(可选)在“源文件”框中,指定外部链接的脚本文件。 单击文件夹图标以选择该文件,或者键入路径。

单击“编辑”以修改脚本。

使用 JavaScript 行为

您可以使用标记检查器的"行为"选项卡,\n轻松地将 JavaScript(客户端)行为附加到页面元素。\n有关更多信息,请参阅应用 Dreamweaver 内置 JavaScript 行为