编写和编辑代码

Dreamweaver CS5 允许开发人员在“代码”视图中编写代码时，使用 Joomla、Drupal、Wordpress 或其它框架来查看 PHP 代码提示。若要显示这些代码提示，首先需要使用“站点特定的代码提示”对话框创建一个配置文件。

1. 确保您处于“代码”视图中（视图 > 代码）。

2. 确定插入点在代码中的位置，或选择一个代码块。

3. 单击编码工具栏中的一个按钮，或从工具栏的弹出菜单中选择一个菜单项。  

   若要了解每个按钮的功能，请将鼠标指针定位于按钮上直至出现工具提示。默认情况下编码工具栏中将显示以下按钮：

   打开的文档

   列出打开的文档。选择了一个文档后，它将显示在“文档”窗口中。

   显示代码导航器

   显示代码导航器。

   折叠整个标签

   折叠一组开始和结束标签之间的内容（例如，位于 <table> 和 </table> 之间的内容）。您必须将插入点放置在开始或结束标签中，然后单击“折叠整个标签”按钮折叠该标签。

   通过将插入点放在开始或结束标签中，然后在按住 Alt (Windows) 或 Option (Macintosh) 的同时单击“折叠整个标签”按钮，您还可以折叠整个标签外部的代码。此外，在按住 Ctrl 的同时单击此按钮可禁用“智能折叠”，这样 Dreamweaver 就不会调整它在整个标签外部折叠的内容。

   折叠选定

   折叠所选代码。

   通过在按住 Alt (Windows) 或 Option (Macintosh) 的同时单击“折叠选定内容”按钮，您也可以折叠所选部分外部的代码。此外，在按住 Ctrl 的同时单击此按钮可禁用“智能折叠”，这样，您就可以准确地折叠所选内容，而不会被 Dreamweaver 篡改。

   扩展全部

   还原所有折叠的代码。

   选择父标签

   选择您放置了插入点的那一行的内容及其两侧的开始和结束标签。如果您反复单击此按钮且您的标签是对称的，则 Dreamweaver 最终将选择最外面的 html 和 /html 标签。

   平衡大括弧

   选择您放置了插入点的那一行的内容及其两侧的圆括号、大括号或方括号。如果您反复单击此按钮且两侧的符号是对称的，则 Dreamweaver 最终将选择该文档最外面的大括号、圆括号或方括号。

   行号
   

   使您可以在每个代码行的行首隐藏或显示数字。

   高亮显示无效代码

   用黄色高亮显示无效的代码。

   信息栏中的“语法错误警报”

   启用或禁用页面顶部提示您出现语法错误的信息栏。当 Dreamweaver 检测到语法错误时，语法错误信息栏会指定代码中发生错误的那一行。此外，Dreamweaver 会在“代码”视图中文档的左侧突出显示出现错误的行号。默认情况下，信息栏处于启用状态，但仅当 Dreamweaver 检测到页面中的语法错误时才显示。

   应用注释

   使您可以在所选代码两侧添加注释标签或打开新的注释标签。

   • “应用 HTML 注释”将在所选代码两侧添加 <!-- 和 -->，如果未选择代码，则打开一个新标签。

   • “应用 // 注释”将在所选 CSS 或 JavaScript 代码每一行的行首插入 //，如果未选择代码，则单独插入一个 // 标签。

   • “应用 /* */”将在所选 CSS 或 JavaScript 代码两侧添加 /* 和 */。

   • “应用 ' 注释”适用于 Visual Basic 代码。它将在每一行 Visual Basic 脚本的行首插入一个单引号，如果未选择代码，则在插入点插入一个单引号。

   • 如果在处理 ASP、ASP.NET、JSP、PHP 或 ColdFusion 文件时选择了此“应用服务器注释”选项，则 Dreamweaver 会自动检测正确的注释标签并将其应用到所选内容。

   删除注释

   删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。

   环绕标签

   在所选代码两侧添加选自“快速标签编辑器”的标签。

   最近的代码片断

   使您可以从“代码片断”面板中插入最近使用过的代码片断。

   移动或转换 CSS

   使您可以将 CSS 移动到另一位置，或将内联 CSS 转换为 CSS 规则。

   缩进代码

   将选定内容向右移动。

   凸出代码

   将选定内容向左移动。

   格式化源代码

   将先前指定的代码格式应用于所选代码，如果未选择代码，则应用于整个页面。也可以通过从“格式化源代码”按钮中选择“代码格式设置”来快速设置代码格式首选参数，或通过选择“编辑标签库”来编辑标签库。

   编码工具栏上提供的按钮数量取决于“文档”窗口中“代码”视图的大小。若要查看所有可用按钮，请调整“代码”视图窗口的大小或单击编码工具栏底部的展开箭头。

   您还可以编辑编码工具栏以显示更多按钮（例如“自动换行”、“隐藏字符”和“自动缩进”）或隐藏您不想使用的按钮。但是，要使用该功能，您必须对生成工具栏的 XML 文件进行编辑。有关更多信息，请参见“扩展 Dreamweaver”。

   注：在“查看”菜单中可以使用用于查看隐藏字符的选项（“查看”>““代码”视图选项”>“隐藏字符”），但它不是编码工具栏中的默认按钮。

1. 确定插入点在代码中的位置。

2. 在“插入”面板中选择适当的类别。

3. 单击“插入”面板中的一个按钮，或者从“插入”面板中的弹出菜单中选择一个项目。

   在您单击一个图标时，代码可以立即出现在您的页面中，或者显示一个对话框，要求您提供完成该代码所需的更多信息。

   若要了解每个按钮的功能，请将鼠标指针定位于按钮上直至出现工具提示。“插入”面板提供的按钮的数目和类型取决于当前文档的类型。同时还取决于您正使用“代码”视图还是“设计”视图。

   尽管“插入”面板提供常用标签的集合，但这一集合并不是很全面。若要从更全面的标签集合中进行选择，请使用“标签选择器”。

1. 确定插入点在代码中的位置，右键单击 (Windows) 或在按住 Control 的同时单击 (Macintosh)，然后选择“插入标签”。  

   即会显示“标签选择器”。左窗格包含支持的标签库的列表，右窗格显示选定标签库文件夹中的各个标签。

2. 从标签库选择标签类别，或者展开该类别并选择一个子类别。

3. 从右窗格中选择一个标签。

4. 若要在“标签选择器”中查看该标签的语法和用法信息，则单击“标签信息”按钮。如果有可用信息，会显示关于该标签的信息。

5. 若要在“参考”面板中查看该标签的相同信息，请单击 <?> 图标。如果有可用信息，会显示关于该标签的信息。

6. 若要将选定标签插入代码中，请单击“插入”。

   如果该标签出现在右窗格中并带有尖括号（例如，<title></title>），那么它不会要求其它信息就立即插入到文档的插入点。

   如果该标签确实需要其它信息，则会出现标签编辑器。

7. 如果标签编辑器打开，则输入其它信息并单击“确定”。

8. 单击“关闭”按钮。

1. 从“代码”视图或其它应用程序中复制代码。

2. 将插入点直接置于“代码”视图中，然后选择“编辑”>“粘贴”。

1. 右键单击 (Windows) 或在按住 Control 的同时单击 (Macintosh)“代码”视图中的标签或“设计”视图中的对象，然后从弹出菜单中选择“编辑标签”。（此对话框的内容根据所选的标签有所变化。）

2. 指定或编辑该标签的属性，然后单击“确定”。  

   若要获得与标签编辑器内的标签有关的详细信息，请单击“标签信息”。

1. 在“代码”视图中，选择一些代码然后右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh)。

2. 选择“所选区域”子菜单，并选择以下选项之一：

   折叠选定

   折叠所选代码。

   折叠外部所选

   折叠所选代码外部的所有代码。

   扩展所选

   展开所选代码片断。

   折叠整个标签

   折叠一组开始和结束标签之间的内容（例如，位于 <table> 和 </table> 之间的内容）。

   折叠外部完整标签

   折叠一组开始和结束标签外部的内容（例如，位于 <table> 和 </table> 外部的内容）。

   扩展全部

   还原所有折叠的代码。

   应用 HTML 注释

   在所选代码两侧添加 <!-- 和 -->，如果未选择代码，则打开一个新标签。

   应用 /* */ 注释

   将在所选 CSS 或 JavaScript 代码两侧添加 /* 和 */。

   应用 // 注释

   在所选 CSS 或 JavaScript 代码每一行的行首插入 //，或如果未选择代码，则单独插入一个 // 标签。

   应用 ' 注释

   将在每一行 Visual Basic 脚本的行首插入一个单引号，或如果未选择代码，则在插入点插入一个单引号。

   应用服务器注释

   添加到所选代码的两侧。如果在处理 ASP、ASP.NET、JSP、PHP 或 ColdFusion 文件时选择了此“应用服务器注释”选项，则 Dreamweaver 会自动检测正确的注释标签并将其应用到所选内容。

   应用反斜杠注释 Hack

   在所选 CSS 代码两侧添加注释标签，这将使 Internet Explorer 5 for Macintosh 忽略此代码。

   应用 Caio Hack

   在所选 CSS 代码两侧添加注释标签，这将使 Netscape Navigator 4 忽略此代码。

   删除注释

   删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。

   删除反斜杠注释 Hack

   删除所选 CSS 代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。

   删除 Caio Hack

   删除所选 CSS 代码的注释标签。如果选定内容包含嵌套注释，则只会删除外部注释标签。

   将制表符转换为空格

   将选定内容中的每一制表符转换为与“代码格式”首选参数中设置的“制表符大小”值相等的空格数。

   将空格转换为制表符

   将选定内容中的空格串转换成制表符。具有与制表符大小相等的空格数的每一串空格被转换成一个制表符。

   缩进

   缩进选定内容，将其向右移动。

   凸出

   将选定内容向左移动。

   删除所有标签

   删除选定内容中的所有标签。

   将行转换为表

   用不带属性的 table 标签来括起选定内容。

   添加换行符

   在选定内容的每行末尾添加 br 标签。

   转换成大写

   将选定内容（包括标签和属性的名称和值）中的所有字母转换成大写。

   转换成小写

   将选定内容（包括标签和属性的名称和值）中的所有字母转换成小写。

   将标签转换成大写

   将选定内容中的所有标签和属性名称及属性值转换成大写。

   将标签转换成小写

   将选定内容中的所有标签和属性名称及属性值转换成小写。

1. 在“设计”视图中，选择服务器语言标签可见图标。

2. 在属性检查器中，单击“编辑”按钮。

3. 对标签代码进行更改，然后单击“确定”。

代码导航器可显示与页面上特定选定内容相关的代码源列表。使用代码导航器导航到相关的代码源，例如内部和外部 CSS 规则、服务器端包含、外部 JavaScript 文件、父模板文件、库文件和 iframe 源文件。在代码导航器中单击某一链接时，Dreamweaver 将打开包含相关代码片断的文件。如果启用该文件，则该文件将显示在相关文件区域。如果未启用相关的文件，则 Dreamweaver 将在“文档”窗口中将所选文件作为单独的文档打开。

当单击代码导航器中的 CSS 规则时，Dreamweaver 直接将您转到该规则。如果该规则在文件内部，则 Dreamweaver 会在“拆分”视图中显示该规则。如果该规则位于外部 CSS 文件中，则 Dreamweaver 会打开该文件并在主文档上方的相关文件区域中显示该文件。

可以从“设计”、“代码”和“拆分”视图以及代码检查器访问代码导航器。

1. 在“代码”视图（“查看”>“代码”）或代码检查器（“窗口”>“代码检查器”）中查看文档。

2. 执行下列操作之一：

   • 在“代码”视图中，右键单击 (Windows) 或按住 Control 单击 (Macintosh)“代码”视图中的任何位置，然后从上下文菜单中选择“函数”子菜单。

     “设计”视图中不显示“函数”子菜单。

     代码中的所有 JavaScript 或 VBScript 函数都会显示在子菜单中。

     若要以字母顺序查看列出的函数，请在“代码”视图中按住 Ctrl 右键单击 (Windows) 或按住 Option 和 Control 单击 (Macintosh)，然后选择“函数”子菜单。

   • 在“代码”检查器中，请在工具栏上单击“代码导航”按钮 ({ })。

3. 选择某个函数名称以跳转至代码中的该函数。

JavaScript Extractor (JSE) 删除 Dreamweaver 文档中的所有或大多数 JavaScript，将其导出到外部文件并将该外部文件链接到您的文档。JSE 也可以删除代码中的事件处理函数（如 onclick 和 onmouseover），然后以非干扰方式将与这些处理函数关联的 JavaScript 附加到您的文档。

使用 JavaScript Extractor 之前应了解它的以下限制：

• JSE 不提取文档正文中的脚本标记（但 Spry Widget 除外）。将这些脚本外置可能导致异常结果。默认情况下，Dreamweaver 会在“将 JavaScript 外置”对话框中列出这些脚本，但不会选择这些脚本进行提取。（如果需要，可以手动选择这些脚本。）

• JSE 不从 .dwt（Dreamweaver 模板）文件的可编辑区域、模板实例的非可编辑区域或 Dreamweaver 库项目中提取 JavaScript。

• 在使用“将 JavaScript 外置并以非干扰方式进行附加”选项提取 JavaScript 后，不能再在“行为”面板中编辑 Dreamweaver 行为。Dreamweaver 不能用以非干扰方式附加的行为检查和填充“行为”面板。

• 一旦关闭页面后，您无法撤消更改。但只要您保留在同一个编辑会话中，就可以撤消更改。选择“编辑”>“撤消将 JavaScript 外置”可以撤消更改。

• 某些非常复杂的页面可能不能正常工作。从正文中具有 document.write() 和使用全局变量的页面中提取 JavaScript 时应当小心。

使用 JavaScript Extractor：

1. 打开包含 JavaScript 的页面（例如 Spry 页）。

2. 选择“命令”>“将 JavaScript 外置”。

3. 在“将 JavaScript 外置”对话框中，根据需要编辑默认选定范围。

   • 如果希望 Dreamweaver 将任何 JavaScript 移动到外部文件并在当前文档中引用该文件，请选择“仅将 JavaScript 外置”。此选项将事件处理函数（如 onclick 和 onload）保留在文档中，并使行为在“行为”面板中保持可见。

   • 如果希望 Dreamweaver 1) 将 JavaScript 移动到外部文件并在当前文档中引用该文件；2) 从 HTML 中删除事件处理函数并在运行时使用 JavaScript 插入这些事件处理函数，请选择“将 JavaScript 外置并以非干扰方式进行附加”。选择此选项后，不能再在“行为”面板中编辑行为。

   • 在“编辑”列中，取消选择任何不希望进行的编辑，或者选择默认情况下 Dreamweaver 未选择的编辑。

     默认情况下，Dreamweaver 列出但不 选择以下编辑：

     • 文档头中包含 document.write() 或 document.writeln() 调用的脚本块。

     • 文档头中包含与已知使用 document.write() 的 EOLAS 处理编码相关的函数签名的脚本块。

     • 文档正文中的脚本块，除非这些块仅包含 Spry Widget 或 Spry 数据集构造函数。

   • Dreamweaver 会自动为没有 ID 的元素指定 ID。如果您不喜欢这些 ID，可以通过编辑 ID 文本框进行更改。

4. 单击“确定”。

   摘要对话框提供提取内容的摘要。查看提取内容并单击“确定”。

5. 保存该页面。

Dreamweaver 将创建一个 SpryDOMUtils.js 文件和另一个包含所提取的 JavaScript 的文件。Dreamweaver 会将 SpryDOMUtils.js 文件保存在站点之中的 SpryAssets 文件夹中，并将另一个文件保存在从中提取 JavaScript 的页面所在的同一级别。在上传原始页面时，不要忘记将这两个相关文件上传到 Web 服务器。

1. 打开要在其中搜索内容的文档，或在“文件”面板中选择文档或文件夹。

2. 选择“编辑”>“查找和替换”。

3. 指定要在其中搜索内容的文件，然后指定要执行的搜索类型以及要搜索的文本或标签。此外，还可以指定替换文本。然后单击某个“查找”按钮或“替换”按钮。

4. 单击“关闭”按钮。

5. 若要再次搜索而不显示“查找和替换”对话框，请按 F3 (Windows) 或 Command+G (Macintosh)。

1. 在“代码”视图中打开一个页面。

2. 选择“文件”>“打印代码”。

3. 指定打印选项，然后单击“确定”(Windows) 或“打印”(Macintosh)。