DreamWeaver中應用CSS樣式表的幾種情況

發表於2018-05-04

一、 去除超級連結的下劃線以及在超級連結上實現滑鼠懸停變色:

在預設情況下,用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"子選單中,你將可以在此網頁中應用這些樣式。

相關文章