1.4 使用编码工具
HTML语言主要包括各种标签和属性，结构比较简洁，但要全面掌握这么多标签和属性比较费时，不过使用Dreamweaver CC强大的编码工具，只要用户熟悉并掌握代码编写的方法，然后借助Dreamweaver CC辅助工具完全能够掌握HTML语言及网页编程。
1.4.1 快速标签编辑器
【快速标签编辑器】就是让用户在【设计】视图窗口中直接对HTML标签进行编写，不需切换到HTML【代码】视图编辑单独的HTML标签。
打开【快速标签编辑器】的方法非常简单。首先，切换到【设计】视图下，将光标定位在编辑区中，选择【修改】｜【快速标签编辑器】命令，或者按Ctrl+T快捷键即可，如图1.29所示，即可在光标位置显示【编辑标签】文本框，然后可以在其中修改选定的标签内容，如图1.30所示。
图1.29 选择【快速标签编辑器】命令
图1.30 快速标签编辑器
【快速标签编辑器】有【插入HTML】【编辑标签和】【绕标签】3种状态，打开编辑器后可按Ctrl+T快捷键进行状态切换，如图1.31所示。在编辑区不同的选择状态下，会打开另外两种不同状态的【快速标签编辑器】。
图1.31 不同状态下的【快速标签编辑器】
无论是哪种状态的标签编辑器，用户都可以拖拉编辑器左侧的灰色区域来改变标签编辑器在文档编辑区中的位置。【快速标签编辑器】的使用方法和在【代码】视图中输入代码的方法相同，这里就不再重复。
1．插入HTML模式
如果用户没有选择任何对象，打开【快速标签编辑器】时，【快速标签编辑器】就会以插入HTML模式启动，如图1.32所示。此时编辑器中只显示一对尖括号，提示用户输入标签以及标签属性。
图1.32 【快速标签编辑器】的插入模式
当关闭【快速标签编辑器】后，输入的HTML代码就被添加到文件窗口中插入点所在位置。如果用户在【快速标签编辑器】中只输入了起始标签，而未输入结束标签，则Dreamweaver CC会自动补上结束标签，进行标签封闭，避免出现错误。
2．编辑标签模式
当用户在窗口中选择了一个完整的HTML标签，包括起始标签、结束标签、标签包含的内容，启动【快速标签编辑器】时就会自动进入编辑标签模式，如图1.33所示。
图1.33 【快速标签编辑器】的编辑标签模式
选择完整的标签内容，最有效的方法是利用文件窗口左下角的快速标签选择器。标签选择器上所对应的标签，则可以在文件窗口中选中该标签及其标签间的内容。
3．环绕标签模式
当用户在窗口中只选择了标签内的内容，而未选择任何标签，那么打开【快速标签编辑器】时会自动进入环绕标签模式，如图1.34所示。环绕标签模式与插入HTML模式有着明显的区别，它只能输入单个标签，并且在关闭编辑器后，Dreamweaver会自动在所选择内容的前后加上起始标签和结束标签。
图1.34 【快速标签编辑器】的环绕标签模式
1.4.2 代码片断
在【代码片断】面板中存储着大量的HTML、JavaScript、ASP和JSP等类型的代码片断，利用这些代码片断可以减小代码编写的工作量。
选择【窗口】｜【代码片断】命令，打开【代码片断】面板，在【名称】列表框中选择要插入的代码片断，然后单击【插入】按钮，即可将选择的代码片断插入页面中，如图1.35所示。用户也可以快速从【代码片断】面板的代码列表中拖曳代码片段到编辑窗口。
图1.35 插入代码片断
【拓展】
在编写代码中，如果觉得一段代码经常使用，不妨使用【代码片断】面板创建一个自己的代码片断，以便重复使用。
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为test.html。
第2步，在【代码片断】面板中单击【新建代码片断文件夹】按钮
，新建一个文件夹，如图1.36所示。
图1.36 新建文件夹
第3步，单击【新建代码片断】按钮
，打开【代码片断】对话框，如图1.37所示。
图1.37 【代码片断】对话框
第4步，在【代码片断】对话框中输入片断代码，并设置好名称和描述信息，单击【确定】按钮即可。也可以在打开的网页中选中重复使用的代码片段，然后单击【新建代码片断】按钮，打开【代码片断】对话框，此时所选代码会自动填写在【插入代码】文本框中。
第5步，如果要编辑或删除某个代码片断，单击【代码片断】面板底部的【编辑代码片断】按钮
或【删除】按钮
即可。
1.4.3 代码浏览器
按住Alt键，使用鼠标单击文档编辑窗口中任意标签，Dreamweaver CC会自动打开【代码浏览器】面板，在该面板中显示当前标签及其上级标签中所受影响的CSS选择器，以及每个选择器所在样式表，如图1.38所示。
图1.38 代码浏览器
通过这种方式，用户可以快速了解每个标签的CSS样式代码及其位置。如果右击文档中某个标签，从弹出的快捷菜单中选择【代码浏览器】命令，也可以打开【代码浏览器】面板。