1.3 操作编码环境

Dreamweaver CC在编码环境和可视化环境中均能生成有效的、简洁的代码，支持不同视图环境的快速切换，提升网页设计的用户体验，加快网页开发的速度。

1.3.1 代码提示

Dreamweaver CC具有强大的代码提示功能，通过代码提示，可以在【代码】视图（或代码检查器）中插入和编辑代码。在输入某些字符时，将显示一个列表，列出完成条目所需的建议选项。可以使用该功能插入或编辑代码，或只是查看某一标签的可用属性、某一函数的可用参数或某一对象的可用方法。

【操作步骤】

第1步，启动Dreamweaver CC，新建文档，保存为test.html。

第2步，在文档工具栏中单击【代码】按钮，切换到【代码】视图，在<body>和</body>标签之间单击，把光标定位到页面中，输入左尖括号（<），即可显示标签列表，如图1.16所示。

图1.16 插入标签

第3步，执行下面任一操作。

（1）按Esc键可以关闭该列表框。

（2）用鼠标拖动滚动条可选择不同的标签。

（3）输入标签部分字母，系统会高亮显示拼写相同的标签，然后按Enter键确定即可。

（4）按上下方向键，可以查找合适的标签，然后按Enter键确定即可。

第4步，选择并插入一个标签。

第5步，如果所插入的标签支持属性，则按空格键可以显示该标签允许属性的列表。选择属性并按Enter键，如图1.17所示。

图1.17 插入标签的属性

第6步，输入属性的值，或者该属性只接受某些值，则从该属性允许值的下拉列表中选择一个值。

第7步，想要为该标签添加其他属性，重复前面两个操作步骤即可，确保在一个值及其后引号（"）之间没有空格键。

第8步，在最后的属性值后，为该标签输入右尖括号（>）。

如果要编辑标签，则具体步骤如下。

第1步，若要添加一个属性，将插入点置于标签右尖括号（>）的左侧，并且按空格键以显示该标签所有支持属性的列表。按照前面的说明插入属性及其值。

第2步，若要更改属性、删除属性或添加属性，请按照前面的说明进行操作。

第3步，若要更改属性值、删除属性值或添加属性值，请按照前面的说明进行操作。

【拓展】

选择【编辑】｜【首选项】命令，打开【首选项】对话框，在左侧【分类】列表中选择【代码提示】选项，则【首选项】对话框如图1.18所示。

图1.18 【首选项】对话框中的【代码提示】选项

在该对话框中可以设置是否显示代码提示、代码提示响应速度、提示内容以及在什么条件下自动输入结束标签。

（1）【结束标签】选项组：该选项组中有3个单选按钮。【键入“</”后】表示只有当用户输入结束标签的“</”符号时，系统才会自动补齐与前面相对应的结束标签。在Dreamweaver CC中被设置为默认选项，它的优点是避免输入一个起始标签，系统自动补齐结束标签，避免重代码的出现；【键入起始标签“>”后】表示只要用户输入一个起始标签，系统自动加上一个结束标签，这样会加快输入速度，避免遗忘结束标签输入；【从不】表示不需要系统自动补加结束标签。

（2）【启动代码提示】复选框：选中该复选框，在【代码】视图中输入代码时系统会弹出一个下拉菜单即时提示。选中该复选框后，后面的【延迟】滑块有效，可以设置提示的速度。

（3）【菜单】列表框：在该列表框中可以选择要提示的种类，一般保持默认全选。

（4）单击【标签库编辑器】超链接，可以打开【标签库编辑器】对话框，以便增加或删除标签（也称标签）和属性。

1.3.2 代码格式化

在Dreamweaver CC中，用户可以根据个人习惯设置代码显示格式。选择【编辑】｜【首选项】命令，打开【首选项】对话框，在左侧【分类】列表中选择【代码格式】选项，则【首选项】对话框如图1.19所示。在该对话框中可以详细设置代码显示格式，如缩进大小、制表符大小、换行符类型、标签和属性大小写等。

图1.19 【首选项】对话框中的【代码格式】选项

单击【CSS】按钮，还可以打开【CSS源格式选项】对话框，设置CSS代码的格式标准。

切换到【代码】视图，Dreamweaver默认在窗口的左侧显示一条【编码】工具栏。如果没有显示，可以选择【查看】｜【工具栏】｜【编码】命令，显示【编码】工具栏。

然后单击【格式化源代码】按钮，从弹出的下拉菜单中选择【应用源格式】命令，如图1.20所示。

图1.20 格式化文档代码

执行上述命令之后，Dreamweaver可以快速整理已打开的文档源代码，使其按着一定的代码格式进行显示，当用户编辑或更新一个代码显示混乱的网页文档时，先单击该按钮整理代码格式，会方便代码阅读，整理效果如图1.21所示。

提示：如果选择【将源格式应用于选定内容】命令，则可以对选定代码进行格式化编排整理；选择【代码格式设置】命令，可以打开【首选项】对话框，定义代码格式的显示效果；选择【编辑标签库】命令，会打开【标签库编辑器】对话框，编辑标签格式。

图1.21 格式化文档代码前后效果比较

1.3.3 编码工具栏

图1.22 【编码】工具栏

切换到【代码】视图，Dreamweaver默认在窗口的左侧显示一条【编码】工具栏，如图1.22所示。如果不希望显示【编码】工具栏，可以选择【查看】｜【工具栏】｜【编码】命令，隐藏或者显示【编码】工具栏。

（1）【打开文档】按钮：利用该按钮可以快速在多个文档之间进行切换，这对于Dreamweaver同时打开很多文档时特别有用。有时用户为了在多个已打开的文档中找到某个文件特别麻烦，不过使用【打开文档】按钮就方便、快速多了，如图1.23所示。

图1.23 快速切换打开的文档

（2）【折叠整个标签】按钮：当输入的代码比较多时，为了方便查看代码，可以把一些不需要的标签折叠起来。方法是，把光标置于标签内任何位置（但不要置于内嵌标签内，否则只折叠内嵌标签内容），单击【折叠整个标签】按钮，即可以把该标签折叠起来，折叠时包含其内部的嵌套标签。如果单击该按钮时按住Alt键，则会折叠外部所有标签，如图1.24所示。

图1.24 折叠外部标签

（3）【折叠所选】按钮：在【代码】视图中，选择一段代码，然后单击该按钮可以折叠所选代码。如果单击该按钮时，按住Alt键，则会折叠所有未选择的标签。

（4）【展开全部】按钮：单击该按钮可以展开所有折叠的代码，快捷键为Ctrl+Alt+E。实际用户也可以选择【编辑】｜【代码折叠】命令，在打开的子菜单中选择代码折叠和展开的相关命令。

（5）【选择父标签】按钮：把光标置于一个标签内，单击该按钮会选择该标签。这对于标签相互嵌套比较复杂时，选择标签比较有用。选择父标签的快捷键为Ctrl+[。用户也可以选择【编辑】｜【选择父标签】命令，执行相同的操作。

当用户把光标置于标签内部和标签的标签中，单击【选择父标签】按钮时会选择不同的内容，如图1.25所示。

图1.25 选择父标签

（6）【选择当前代码段】按钮：单击该按钮可以选择网页中的脚本代码段或者CSS代码段等，但不能选择HTML源代码中的标签。

（7）【行号】按钮：单击该按钮可以显示或隐藏【代码】视图左侧的行号。行号能够帮助用户快速查找代码，但它会占用一定的空间，用户可以根据需要随时隐藏或显示行号。

（8）【高亮显示无效代码】按钮：单击该按钮会显示或隐藏当前文档中的无效代码。

（9）【应用注释】按钮：单击该按钮，会弹出一个下拉列表，从中选择一种语言的注释方法。常用注释语法如下：

     <!--
     HTML注释
     -->
     <style type=text/css>
     /*CSS注释*/
     </style>
     <script type="text/jscript">
     //JavaScript注释
     </script>
     <%
     'VBScript注释
     %>

由于服务器会用到不同的语言作为编程语言工具，因此不同语言的注释方式也各不相同。所以在不同服务器环境中才可以使用【应用注释】选项。

（10）【删除注释】按钮：单击该按钮会删除光标所在的注释语法，但不会删除注释内容。此时注释文本会作为普通文本显示出来，所以使用时要慎重。

（11）【环绕标签】按钮：当选择标签或内容时，该按钮有效。单击该按钮会显示【快速标签编辑器】的环绕模式，允许用户输入嵌套标签。

（12）【最近的代码片段】按钮：单击该按钮会弹出一个下拉列表，显示所有最近使用的代码片段，也可以选择【代码片段】面板，允许用户快速插入代码片段。

（13）【移动或转换CSS】按钮：单击该按钮会弹出一个下拉列表。如果在其中选择【将内联CSS转换为规则】选项（如图1.26所示），则会打开【转换内联CSS】对话框（如图1.27所示），然后设置将<body>标签中的内联样式转换为一个规则放在本文档头部区域的<style>标签中，最后转换结果如图1.28所示。此时如果用户选择【移动CSS规则】选项，则会打开【移至外部样式表】对话框，可以将当前规则移至外部样式表文件中。

图1.26 将内联CSS转换为规则

图1.27 【转换内联CSS】对话框

图1.28 把行列样式转换为内部样式表

（14）【缩进代码】按钮和【凸出代码】按钮：单击这两个按钮可以缩进和凸出代码显示，以便实现对代码格式进行版式美化，增强代码的可读性。

上一章目录下一章