DreamWeaver cs6網頁制作中CSS樣式的應用研究

韓瑩

摘要：DreamWeaver作為網頁三劍客之首，是在網頁制作領域中應用最為廣泛且功能最為強大的工具之一，CSS是控制網頁內容、外觀的格式規則，在近年來的網頁設計領域應用十分廣泛。本文通過簡要分析CSS樣式表的使用方式，研究CSS樣式在DreamWeaver cs6中的實踐操作，給CSS樣式表的靈活運用提供參考借鑒。

關鍵詞：DreamWeaver；cs6；CSS樣式；應用研究

中圖分類號：TP393.09 文獻標識碼：A 文章編號：1007-9416（2017）01-0094-01

伴隨著信息技術的發展，計算機與網絡已經得到普及，網頁制作與網站建設也逐步成為企業或是個人進行宣傳的重要手段，網站建設作為一門涵蓋了動態開發技術、網絡技術以及數據庫技術的交叉學科，對網站建設人才的需求量在逐步增大，而DreamWeaver cs6是目前最常用的網頁制作軟件，CSS樣式則是該軟件控制網頁內容和外觀的主要工具，可以實現對網頁制作中各對象顯示屬性的控制。

1 CSS樣式的具體使用方式

CSS在網頁中的使用方式主要有三種：代碼式、內嵌式和外聯式。其中，代碼式主要通過將一次性樣式寫入代碼中，實現CSS的操作；而內嵌式和外聯式則是通過分別控制一個或多個頁面中元素的樣式表來實現CSS的操作。在實際制作網頁時，也有很多站點會綜合三種方式來滿足網頁建設需要，不同瀏覽器、手持設備、統一瀏覽器的不同版本等需要的CSS解析方式也不相同。由此可見，CSS樣式選擇不是固定的，一定要根據實際情況選擇相應的使用方式[1]。

2 CSS樣式編寫習慣

為了保證站點的壽命，使CSS適用于所有用戶及瀏覽器，開發人員就需要規范自己的CSS樣式編寫習慣。對于代碼式CSS來說，其作用主要是定位頁面元素，或滿足DHTML特效的需求，開發人員應盡量避免或減少使用代碼式CSS。而內嵌式CSS只能控制一個頁面中元素的樣式，一旦出現頁面丟失現象，就會影響整個站點的統一風格，增大頁面體積，耗費較大的應用空間，減慢用戶網頁瀏覽速度，不方便站點的實際使用。所以，開發人員在編寫CSS樣式時應該盡量使用外聯式CSS，保持站點頁面風格的統一，同時也可以一次更新其他相關頁面的外觀，減小站點頁面體積，提高用戶的瀏覽速度。

3 CSS樣式表在DreamWeaver cs6中的創建

3.1 創建樣式表

DreamWeaver cs6中外部CSS樣式表創建過程為：命名樣式表→選擇儲存位置→Text→CSS style→New style sheet→New style sheet file；也可以編輯或重新定義現存的樣式表。接著，將剛剛創建的CSS樣式表附加到頁面（模板）上：點擊附加樣式表（Attach style sheet），連接（link）或導入（import）先前創建或選擇好的CSS樣式表。

3.2 利用屬性檢查器切換CSS模式

屬性檢查器是DreamWeaver cs6中切換CSS模式的工具。屬性檢查器會在缺省情況下將原始HTML模式中的字體標簽顯示出來，這時，其下拉菜單旁會有小的“A”標識，點擊此標識就能將字體標簽變為當前狀態下可以使用的各個CSS樣式表，再次點擊小“A”可以切換成原來的HTML模式字體標簽[2]。

4 DreamWeaver cs6提供的CSS樣式表的直接利用

4.1 CSS樣式表的調用方式

DreamWeaver cs6中已經包含有部分制作完成的樣式表，方便新用戶使用和體驗CSS樣式表功能。一般情況下，新用戶可以通過“點擊菜單→選擇File→點擊NewCSS style sheets”的操作順序找到所有可以使用的DreamWeaver cs6提供的CSS列表。需要注意的是，在使用時一定要遵循上文所述的編寫習慣，選擇標有“Accessible”的CSS樣式表，并將其附加到文檔中。

4.2 時間樣式表的設計方法

由于DreamWeaver cs6已經提供了一些可被直接利用的CSS樣式表，因此，用戶可以更清晰、直觀的認識到頁面設計視圖的整體效果。在用戶創建樣式表時，可以通過同時使用連接（link）、導入（import）兩種方式來開發站點，實現不同樣式表外觀的自由切換，使CSS樣式表的創建、實際運用更加便捷、高效。

4.3 變換網頁鏈接

通過建立CSS樣式表可以達到文字鏈接變換效果，使之擁有更加美觀的動態效果。一般情況下，文本超鏈接會有下劃線，要消除下劃線需要遵循以下步驟：新建CSS樣式表→僅對該文檔→使用CSS選擇器→選擇a： link→確定。創建結束后要點擊CSS樣式表選項“分類” →修飾→無，也可以根據自己的需要選擇其他修飾。

5 結語

綜上所述，CSS樣式可以實現對網頁內容、外觀的靈活控制，但在實際運用中，開發人員要遵循外聯式CSS編寫習慣來創建樣式表以縮小站點體積，統一站點風格；同時可以用連接（link）、導入（import）兩種方式來實現樣式表的自由切換，方便站點網頁建設的總體把控。

參考文獻

[1]聶玉成.淺談Dreamweaver網頁制作中CSS樣式的應用技巧[J].職業技術，2010（1）：94.

[2]閻月.運用Dreamweaver的CSS樣式制作動態下拉菜單[J].遼寧師專學報（自然科學版），2014（1）：28-30.