師友會電子報第 91 期 - 軟體操作小撇步

【探索Dreamweaver 8 的CSS 樣式面板】

一般人在進行文書編排時會用樣式集去定義大標題/次標題/內文等等常用的樣式，這樣之後建置的內容就可以直接套用，不用一行行去定字型顏色大小什麼的，省了很多時間。CSS 在DRAMWEAVER裡就是像這樣一個功能角色，它可以是針對一個網頁文件作樣式設定，也可以做成獨立的樣式檔，讓各網頁共同去套用。一個網站總是有很多頁面，而每一樣的文字排版最好是風格一樣的，這樣才會會有整體的專業感，所以，本期來做個ＣＳＳ的初步講解，讓您的網頁製作專業能力馬上加值哦！

一、	當第一次開啟「CSS 樣式」面板後，使用者可能會有些困惑，可以很明顯發現 Dreamweaver 8 的變更。「CSS 樣式」面板有兩個模式：「全選」和「正在」，好難理解啊！不過其實是非常簡單反而顯得難懂。「全選」模式會顯示一份清單，其中列出影響整個頁面的樣式，也就是這份網頁所有的CSS 樣式。「正在」模式則是顯示滑鼠指標所點選的元素的 CSS 樣式。「全選」模式：「CSS 樣式」面板的「全選」模式會顯示頁面所有可用規則，不論這些規則定義在頁面標頭，或是定義在頁面的連結式或匯入式個別樣式表。規則會根據定義位置分開顯示：定義在文件檔頭中的規則顯示在 <樣式> 底下，而定義在樣式表中的規則出現在樣式表名稱底下。注意: 行內樣式(定義在標籤本身之內的樣式)不會在「全選」模式中，不過會在「正在」模式中於適當情況下顯示。

二、	「正在」模式：在「正在」模式中，「CSS 樣式」面板包含下列顯示：「選取範圍摘要」、「規則」和「屬性」。圖中選取了頁面左側的左字「Cuisine」後，可在「CSS樣式」面板中「正在」模式中觀看使用到的CSS樣式。

三、	當我將插入點置於重新定義的文字時，便會在「選取範圍摘要」中顯示所使用到的CSS樣式。而在上圖中點選了「選取範圍摘要」中的color，則在「規則」類別中即會顯示影響目前選取範圍的重疊顯示規則。如再點選「規則」類中navigation，則會在「屬性」類別會顯示影響選取範圍的屬性。