怎樣在Dreamweaver中快速編輯網頁標籤

 手寫代碼，相信還會有人繼續這樣做的，那麼，你們有沒有研究出怎樣才能方便快捷輯網頁標籤呢？

 

雖然Dreamweaver已經為我們提供了程式碼檢視，可是必竟還要手工去尋找，還要來回地切換。雖然也可以用程式碼檢視與編輯檢視並存的方式，但還要佔用一半的螢幕空間，使本來便不大的編輯地區更顯得擁擠。有沒有更好的辦法呢？接下來，學會下面的方法就知道如何提高效率了吧！

 

下面我們以Dreamweaver 8為例，假設大家Dreamweaver面板布局都為預設的布局方式。查看一下屬性面板的上方是否有一行小標籤。（如果您用的不是MX，標籤在狀態列中）例如：你建立一個空白的HTML文檔，上面的小標籤應該為＜body＞。請看下圖：

 

圖上畫紅框的地方，就是我們今天的主角了。我們先看一下“環繞標籤”。在頁面上隨便打入幾個字，選中它們，在右鍵菜單中選擇“環繞標籤”，在彈出的環繞標籤對話方塊中輸入“＜strong＞”（不包括引號），然後斷行符號。之前被選中的文字是不是已經變成粗體了，到原始碼看一下，我們所選中的文字是不是已經被＜strong＞標籤包圍了？大家可以試著再加入其它的一些標籤，如：＜a＞，＜p＞。這裡也可以直接輸入屬性。如：＜p style="color:#CC0000"＞。這裡僅大概說明一下，如有疑問，請查看Dreamweaver的協助。

下面說一下標籤選取器的應用方法。

第一、

我們將游標移動到剛才加粗的文字裡，會發現在＜body＞的後面多了個＜strong＞。這就是說游標所在處的這些文字的外面有＜strong＞的標籤，在＜strong＞標籤外有＜body＞標籤。下面大家再添加一個表格，把游標移動到表格內，看看標籤的結構。相信對HTML有些基礎的朋友都應該很容易理解的。

第二、

假設我們現在要插入一個表格，並將這個表格用CSS來將它下移10個象素。先插入一個表格，然後交游標移動到表格內。這時在標籤選取器上應該可以看到這樣的字樣＜body＞＜table＞＜tr＞＜td＞。然後在table標籤上點滑鼠右鍵，會看到有四個選項。刪除標籤、編輯標籤、設定類、設定ID。

 

刪除標籤：即是將標籤刪除。（有一些特殊的標籤是不能刪除的。例如：＜table＞、＜tr＞、＜td＞、＜body＞...)

編輯標籤：給標籤附加屬性、修改屬性等。

設定類：給這個標籤附予一個類。（即CSS的類別）

設定ID：給這個標籤附予一個ID。（即CSS的ID）

第三、

在這裡，我們選擇編輯標籤，然後在後面加上屬性style="margin-top:10px"和正常書寫原始碼的方式是一樣的。然後按下斷行符號。就完成了編輯。如果在Dreamweaver裡看不到效果，請用瀏覽器預覽。

第四、

還有另外一種方法，也許你會喜歡。選擇視窗→標籤檢查器當你選擇某一個標籤後，這裡會顯示出當前選擇標籤的所有屬性。也可以很快地在這裡進行編輯。在這裡輸入的屬性不用包括引號，編輯後按斷行符號確定。