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