在DreamWeaver中應用CSS樣式表技巧兩則
作者：Eve Cole
更新時間：2009-05-31 21:17:47
一、 去除超級連結的底線以及在超級連結上實現滑鼠懸停變色：
在預設情況下，用DreamWeaver設計的網頁中的超級連結都有下劃線，看起來不大美觀。要去除這些討厭的下劃線,很多報刊介紹的方法都是在HTML原始碼中手工加入一段程式碼，其實在DreamWeave中很容易去除連結的下劃線。首先在DreamWeaver的Document Windows中隨便建立一個鏈接，你可以看到這個鏈接會有下劃線。怎樣去除這條下劃線呢？
1.在點選選單列上的"Text"|"CSS Styles"| "Edit Style Sheet…"(或直接按快捷鍵Ctrl+shift+E),調出Edit Style Sheet（編輯樣式表）對話框視窗。
2.點選"New (新建)"，然後在"New Style （新樣式）"對話框中，點選"Use CSS Selector"按鈕。
3.在Selector欄中鍵入a, 然後點OK。
4.隨後彈出"CSS 樣式定義"對話框，在Type類別的decoration(裝飾)中，勾選none，然後點OK，再點Done。你將立刻在Document Windows中發現連結的下劃線已經消失了。那麼又怎樣實現當滑鼠懸停在連結上時連結變色呢？重複上述步驟中的第一、第二步。然後點選Selector旁的下拉箭頭，選擇"a:hover",再點OK。在隨後彈出的"Style definition for a: hover"對話框中，在Type類別的color中任意選擇一種顏色（例如選擇紅色），然後點OK，再點Done便完成了。按F12預覽，將滑鼠放在連結上，該連結是不是變成了紅色？如果在剛才的"Style definition for a: hover"對話框中，在Backgroud（背景）類別裡，選擇backgroud的顏色為綠色，那麼當你把滑鼠放在超級連結上時，不但連結會變成紅色，而且還會有綠色的背景。事實上，透過剛才的CSS 樣式定義對話框，你還可以實現更多的特殊效果，有興趣的朋友不妨去好好琢磨一下。
二、創建可重複使用的外部CSS樣式表用DreamWeaver在某網頁中創建了一種CSS樣式後，如果你要在另外的網頁中應用該樣式，你不必從新創建該CSS樣式，只要你創建了外部CSS樣式表檔（external CSS style sheet），你就可以在今後任意呼叫該樣式表檔中的樣式。為了方便管理，先在網站所在資料夾中，新建一個資料夾，取名為CSS，專門用於放置外部樣式表檔案（其副檔名為css）。
1.在Document Window中按Ctrl+shift+E，調出Edit Style Sheet（編輯樣式表）對話框視窗2、點選"link"。
3.在彈出的Link External Style Sheet(連結外部樣式表)對話框，點BROWSE，找到剛才建立的CSS資料夾。
4.在Select Stylesheet File (選擇樣式表文件)視窗"文件名"欄中，鍵入*.css (*可以為任意名)，請注意，事實上此時在CSS資料夾中並無樣式表文件，在"檔案名稱"欄中鍵入的新名字將成為外部樣式表新檔案的名稱。例如鍵入title.css，,然後點Select | OK。
5.在Edit Style Sheet（編輯樣式表）對話框視窗中，會新增加title.css (link), 雙擊它。
6.在彈出的"title.css"視窗中，點"New"。
7.在"New Style"對話框中，點選"Make Custom Style (class)"按鈕8、在Name欄中鍵入某個名字，如myheadline,點OK。
9.在接下來的"Style definition for .myheadline in title.css"對話框中，進行字體、顏色等各種設置，完成後點OK。如還要建立新的樣式，再點"New",重複剛才的步驟6、7、8、9，最後點"save"| "done",於是title.css這個外部樣式表檔案便創建好了。功能表列上的"TEXT" |"CSS Styles"子選單中將會列出title.css中的所有樣式。如要在其他網頁中呼叫這個title.css，只需重複上述1至3步，然後在Select Stylesheet File視窗"檔案名稱"欄中輸入title.css。點"select"| "ok"| "done", title.css中所有的樣式便會出現在該網頁選單列上的"Text" |"CSS Styles"子選單中，你將可以在此網頁中應用這些樣式。
