1.4 使用編碼工具

HTML語言主要包括各種標簽和屬性，結構比較簡潔，但要全面掌握這么多標簽和屬性比較費時，不過使用Dreamweaver CC強大的編碼工具，只要用戶熟悉并掌握代碼編寫的方法，然后借助Dreamweaver CC輔助工具完全能夠掌握HTML語言及網頁編程。

1.4.1 快速標簽編輯器

【快速標簽編輯器】就是讓用戶在【設計】視圖窗口中直接對HTML標簽進行編寫，不需切換到HTML【代碼】視圖編輯單獨的HTML標簽。

打開【快速標簽編輯器】的方法非常簡單。首先，切換到【設計】視圖下，將光標定位在編輯區中，選擇【修改】｜【快速標簽編輯器】命令，或者按Ctrl+T快捷鍵即可，如圖1.29所示，即可在光標位置顯示【編輯標簽】文本框，然后可以在其中修改選定的標簽內容，如圖1.30所示。

【快速標簽編輯器】有【插入HTML】【編輯標簽和】【繞標簽】3種狀態，打開編輯器后可按Ctrl+T快捷鍵進行狀態切換，如圖1.31所示。在編輯區不同的選擇狀態下，會打開另外兩種不同狀態的【快速標簽編輯器】。

無論是哪種狀態的標簽編輯器，用戶都可以拖拉編輯器左側的灰色區域來改變標簽編輯器在文檔編輯區中的位置。【快速標簽編輯器】的使用方法和在【代碼】視圖中輸入代碼的方法相同，這里就不再重復。

1．插入HTML模式

如果用戶沒有選擇任何對象，打開【快速標簽編輯器】時，【快速標簽編輯器】就會以插入HTML模式啟動，如圖1.32所示。此時編輯器中只顯示一對尖括號，提示用戶輸入標簽以及標簽屬性。

當關閉【快速標簽編輯器】后，輸入的HTML代碼就被添加到文件窗口中插入點所在位置。如果用戶在【快速標簽編輯器】中只輸入了起始標簽，而未輸入結束標簽，則Dreamweaver CC會自動補上結束標簽，進行標簽封閉，避免出現錯誤。

2．編輯標簽模式

當用戶在窗口中選擇了一個完整的HTML標簽，包括起始標簽、結束標簽、標簽包含的內容，啟動【快速標簽編輯器】時就會自動進入編輯標簽模式，如圖1.33所示。

選擇完整的標簽內容，最有效的方法是利用文件窗口左下角的快速標簽選擇器。標簽選擇器上所對應的標簽，則可以在文件窗口中選中該標簽及其標簽間的內容。

3．環繞標簽模式

當用戶在窗口中只選擇了標簽內的內容，而未選擇任何標簽，那么打開【快速標簽編輯器】時會自動進入環繞標簽模式，如圖1.34所示。環繞標簽模式與插入HTML模式有著明顯的區別，它只能輸入單個標簽，并且在關閉編輯器后，Dreamweaver會自動在所選擇內容的前后加上起始標簽和結束標簽。

1.4.2 代碼片斷

在【代碼片斷】面板中存儲著大量的HTML、JavaScript、ASP和JSP等類型的代碼片斷，利用這些代碼片斷可以減小代碼編寫的工作量。

選擇【窗口】｜【代碼片斷】命令，打開【代碼片斷】面板，在【名稱】列表框中選擇要插入的代碼片斷，然后單擊【插入】按鈕，即可將選擇的代碼片斷插入頁面中，如圖1.35所示。用戶也可以快速從【代碼片斷】面板的代碼列表中拖曳代碼片段到編輯窗口。

【拓展】

在編寫代碼中，如果覺得一段代碼經常使用，不妨使用【代碼片斷】面板創建一個自己的代碼片斷，以便重復使用。

【操作步驟】

第1步，啟動Dreamweaver CC，新建文檔，保存為test.html。

第2步，在【代碼片斷】面板中單擊【新建代碼片斷文件夾】按鈕，新建一個文件夾，如圖1.36所示。

第3步，單擊【新建代碼片斷】按鈕，打開【代碼片斷】對話框，如圖1.37所示。

第4步，在【代碼片斷】對話框中輸入片斷代碼，并設置好名稱和描述信息，單擊【確定】按鈕即可。也可以在打開的網頁中選中重復使用的代碼片段，然后單擊【新建代碼片斷】按鈕，打開【代碼片斷】對話框，此時所選代碼會自動填寫在【插入代碼】文本框中。

第5步，如果要編輯或刪除某個代碼片斷，單擊【代碼片斷】面板底部的【編輯代碼片斷】按鈕或【刪除】按鈕即可。

1.4.3 代碼瀏覽器

按住Alt鍵，使用鼠標單擊文檔編輯窗口中任意標簽，Dreamweaver CC會自動打開【代碼瀏覽器】面板，在該面板中顯示當前標簽及其上級標簽中所受影響的CSS選擇器，以及每個選擇器所在樣式表，如圖1.38所示。

通過這種方式，用戶可以快速了解每個標簽的CSS樣式代碼及其位置。如果右擊文檔中某個標簽，從彈出的快捷菜單中選擇【代碼瀏覽器】命令，也可以打開【代碼瀏覽器】面板。