使用Dreamweaver快捷編輯網頁標籤
作者:Eve Cole
更新時間:2009-06-01 01:02:43
不知各位是否有手寫程式碼的習慣。例如:要在一個儲存格插入一段CSS程式碼,或是一段Javascript程式碼,怎麼做才比較快速又方便呢?
雖然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裡看不到效果,請用瀏覽器預覽。
還有另一種方法,也許你會喜歡。選擇視窗→標籤檢查器當你選擇某一個標籤後,這裡會顯示目前選擇標籤的所有屬性。也可以很快地在這裡進行編輯。這裡輸入的屬性不用包含引號,編輯後依回車確定。
這裡我們只將方法告訴大家,希望大家能從中受益。