資源描述：
《dreamweaver基礎(chǔ)教程—使用dreamweaver設(shè)計css樣式》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、使用Dreamweaver設(shè)計CSS樣式使用Dreamweaver設(shè)計CSS樣式Dreamweaver對于CSS技術(shù)的支持始于2002年的MX版本（6.0版本號），最初Dreamweaver?僅把CSS作為設(shè)置字體樣式的一個輔助工具，新建CSS樣式也被歸為【文本】菜單項下。在新世紀最初的幾年里，大家對于CSS技術(shù)的認識還是比較膚淺的，僅視其為一種雕蟲小技。到了2004?年，當時的Macromedia公司逐漸意識到CSS技術(shù)的重要性，并在2005?年推出的Dreamweaver?0版本中完全升級對CSS技術(shù)的支持。此時，CSS在網(wǎng)頁布局中的實踐應(yīng)用，以及各種支持CSS技術(shù)的工具也
2、雨后春筍般地冒出來。自從Adobe并購Macromedia公司之后，Adobe把支持CSS技術(shù)作為Dreamweaver?升級的核心，因此在Dreamweaver?CS3、Dreamweaver?CS4等版本中都會看到一個相對成熟的CSS技術(shù)應(yīng)用環(huán)境。不管是可視化操作環(huán)境，還是CSS編碼環(huán)境，與目前各種Web設(shè)計工具相比較，Dreamweaver?都應(yīng)該算是最優(yōu)秀的。很多高手排斥用Dreamweaver編寫CSS樣式，認為可視化操作多此一舉。但是Dreamweaver?所提供的環(huán)境對于初學(xué)者來說絕對是不可缺少的：一是手腳并用（可視化操作和代碼輸入）能夠提高開發(fā)速度；二是借助可視
3、化環(huán)境能夠直觀、準確地預(yù)覽效果、排查錯誤；三是貼心的輔助工具幫助你節(jié)省大量寶貴時間。因此，本章將詳細講解如何使用Dreamweaver?來開發(fā)CSS樣式表，以提高CSS編碼的速度和質(zhì)量。1從【CSS樣式】面板開始Dreamweaver?從0版本開始把散亂的CSS技術(shù)支持功能集成到【CSS樣式】面板中，從而為設(shè)計師節(jié)省了大量寶貴時間，所以本節(jié)也從【CSS樣式】面板開始走入Dreamweaver?世界。1.1?認識【CSS樣式】面板啟動Dreamweaver，需要新建一個網(wǎng)頁文檔，然后選擇【窗口】
4、【CSS樣式】菜單命令，就會打開【CSS樣式】面板，如圖1所示?！綜SS樣式】面板包
5、含的所有功能可以使用一句話來概括：一個全能菜單、兩種顯示模式、三種屬性視圖、四個操作按鈕。l一個全能菜單：CSS樣式操作的所有功能都可以在面板菜單中找到。單擊面板右上角的下拉菜單圖標（），將彈出一個下拉菜單，該菜單顯示了所有CSS操作功能。實際上，Dreamweaver?的所有面板都擁有這樣一個全能菜單。當在面板中找不到所需要的操作按鈕時，去面板菜單選擇是一個不錯的方法。l兩種顯示模式：所謂顯示模式就是顯示已定義樣式的方式，包括【全部】和【正在】兩種模式。在面板的頂部有兩個按鈕（），單擊可以在這兩種模式間進行來回159網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通切換。n【全部】模式將顯示當前
6、文檔中全部樣式，包括外部樣式、內(nèi)部樣式和行內(nèi)樣式，如圖2所示。n【正在】模式將顯示當前對象或選中內(nèi)容所定義的樣式，如圖1所示。圖1【CSS樣式】面板和正在模式圖2【CSS樣式】的全部模式l三種屬性視圖：所謂屬性視圖就是顯示屬性列表的方式。在【CSS樣式】面板底部左側(cè)并列顯示三個按鈕（），它們分別對應(yīng)顯示類別視圖（）、顯示列表視圖（）和只顯示設(shè)置屬性（）。具體說明如下。n【顯示類別視圖】：把CSS屬性按類進行歸類，這樣按類選擇屬性，設(shè)置的樣式會層次清晰，適合初學(xué)者使用，如圖3所示。n【顯示列表視圖】：把所有CSS屬性按字母順序進行排序顯示，設(shè)置樣式時能夠模糊檢索，快速找到所需要的
7、屬性，適合初步入門用戶使用，如圖4所示。圖3顯示類別視圖圖4顯示列表視圖n【只顯示設(shè)置屬性】：僅顯示已經(jīng)定義的屬性列表，不再顯示所有CSS屬性，設(shè)置樣式時簡單快捷，避免干擾，適合熟練CSS的用戶使用，如圖5所示。l四個操作按鈕：在【CSS樣式】面板底部右側(cè)并列顯示四個按鈕（），它們分別對應(yīng)附加樣式表（）、新建CSS規(guī)則（）、編輯樣式（）和刪除CSS屬性（）。具體說明如下。160使用Dreamweaver設(shè)計CSS樣式n附加樣式表：單擊該按鈕可以打開【鏈接外部樣式表】對話框，如圖6所示，在該對話框中設(shè)置要導(dǎo)入的外部樣式表文件、導(dǎo)入方式（如鏈接到文檔還是導(dǎo)入到文檔）和樣式表的媒體類
8、型（即在什么環(huán)境中有效），從而實現(xiàn)把外部樣式表導(dǎo)入到當前文檔中。n新建CSS規(guī)則：單擊該按鈕將打開【新圖8.5?只顯示設(shè)置屬性建CSS規(guī)則】對話框，所謂規(guī)則就是CSS樣式的意思。在【新建CSS規(guī)則】對話框中可以設(shè)置樣式的選擇器類型和名稱，以及該樣式存放的位置，如圖7所示。圖6【鏈接外部樣式表】對話框圖7【新建CSS規(guī)則】對話框n編輯樣式：單擊該按鈕可以打開【CSS規(guī)則定義】對話框，如圖8所示，在該對話框中可以快速、直觀地修改樣式的屬性和屬性值，增加或刪除屬性。n刪除CSS屬性：在【CSS樣式
