- Dreamweaver CC網頁設計從入門到精通（微課精編版）
- 前端科技
- 2859字
- 2019-12-09 14:39:23
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）【縮進代碼】按鈕
和【凸出代碼】按鈕
：單擊這兩個按鈕可以縮進和凸出代碼顯示，以便實現對代碼格式進行版式美化，增強代碼的可讀性。