Dreamweaver CS3網(wǎng)頁設計培訓教程電子教案

第8課運用層疊款式美化網(wǎng)頁本課要點詳細要求本課導讀上機練習本課要點層疊款式的定義及創(chuàng)建層疊款式的管理和運用詳細要求了解層疊款式熟習創(chuàng)建層疊款式的方法掌握層疊款式的管理掌握層疊款式的運用本課導讀 DreamweaverCS3中默許的文本字號都比較大，需求用戶本人手動來設置，但逐一設置很費事，運用層疊款式就可以很方便地對整個網(wǎng)頁中的文本進展字體格式設置。另外，還可以用層疊款式來創(chuàng)建非常精巧的表格線框等。8.1層疊款式的定義及創(chuàng)建 在設計網(wǎng)頁時，經(jīng)常需求對網(wǎng)頁中各種元素的屬性進展設置。普通來說，在同一個網(wǎng)站的一切頁面中，一樣類型的網(wǎng)頁元素應該具有一樣的屬性，。假設逐一設置會做許多反復的任務，而且很容易出錯；當需求對屬性進展修正時，也需求逐一進展修正。為理處理這個問題，就需求運用CSS〔CascadingStyleSheets，即層疊款式表〕來一致進展控制。定義CSS款式后，就可以把它運用到不同的網(wǎng)頁元素中，這樣，一切運用該CSS款式的網(wǎng)頁元素就會具有一樣的屬性；當修正該CSS款式后，一切運用該CSS款式的網(wǎng)頁元素的屬性就會一同被修正。8.1層疊款式的定義及創(chuàng)建 8.1.1知識講解 8.1.2典型案例——設置網(wǎng)頁頁面屬性8.1.1知識講解 要想在文檔中運用CSS款式，可以創(chuàng)建新的CSS款式，也可以鏈接或導入文檔外部的CSS款式。在創(chuàng)建CSS款式前，我們先來了解一下CSS款式的定義。8.1.1知識講解 1.層疊款式的定義 2.認識【CSS款式】面板 3.創(chuàng)建層疊款式4.CSS款式的詳細定義

1.層疊款式的定義CSS是“層疊款式表〞的簡稱，經(jīng)過CSS可以定制網(wǎng)頁中的文本格式，不僅可以控制一個頁面的文本格式，采用外部鏈接的方式還可以控制多個頁面的文本格式。CSS款式有多種定義方式，主要有標簽CSS款式、類CSS款式和偽類CSS款式3種。2.認識【CSS款式】面板CSS的創(chuàng)建及管理根本上都是在【CSS款式】面板中進展的，下面就來認識它。選擇【窗口】→【CSS款式】命令或按【Shift＋F11】組合鍵，翻開【CSS款式】面板。在該面板中可進展新建、編輯、刪除CSS款式和鏈接外部CSS文件等操作。3.創(chuàng)建層疊款式在【CSS款式】面板中創(chuàng)建CSS款式的詳細操作步驟如下：〔1〕單擊【CSS款式】面板右上角的按鈕，在彈出的菜單中選擇【新建】命令，翻開【新建CSS規(guī)那么】對話框?！?〕在【選擇器類型】欄中選擇所需定義的款式類型。〔3〕在【定義在】欄中可選擇款式的種類或選擇只在當前文檔中運用所選款式。這里選中單項選擇按鈕，然后單擊【確定】按鈕?！?〕翻開【保管款式表文件為】對話框。在該對話框的【保管在】下拉列表框中選擇保管途徑，在【文件名】文本框中輸入該CSS款式的稱號。〔5〕單擊【保管】按鈕，保管新建的款式表文件并自動翻開CSS規(guī)那么定義對話框?！?〕在該對話框中進展各項參數(shù)設置，設置完成后單擊【確定】按鈕，系統(tǒng)會自動在【CSS款式】面板中顯示出定義的款式。4.CSS款式的詳細定義 CSS款式有8個類別：1〕類型 2〕背景 3〕區(qū)塊4〕方框 5〕邊框 6〕列表7〕定位 8〕擴展各類別中相關參數(shù)的詳細含義請教師參照軟件和書中內(nèi)容進展講解。8.1.2典型案例——設置網(wǎng)頁頁面屬性案例目的 網(wǎng)頁頁面屬性也是經(jīng)過創(chuàng)建層疊款式來實現(xiàn)對整個網(wǎng)頁進展控制的，下面就來設置網(wǎng)頁頁面屬性。8.1.2典型案例——設置網(wǎng)頁頁面屬性操作思緒〔1〕新建一個空白文檔并將一切要用的素材復制到保管網(wǎng)頁的位置?！?〕設置頁面屬性?！?〕插入網(wǎng)頁元素。8.1.2典型案例——設置網(wǎng)頁頁面屬性操作步驟 詳細操作步驟請教師參照軟件和書中內(nèi)容進展講解。8.1.2典型案例——設置網(wǎng)頁頁面屬性案例小結 本案例練習了網(wǎng)頁頁面屬性的常規(guī)設置，DreamweaverCS3將網(wǎng)頁頁面中最常用的一些層疊款式集中在其中，以方便制造者進展設置。8.2層疊款式的管理和運用 初次創(chuàng)建的層疊款式能夠不太符合實踐需求，此時可以對層疊款式進展編輯。另外，部分層疊款式創(chuàng)建好后，還需制造者手動進展運用。8.2層疊款式的管理和運用 8.2.1知識講解 8.2.2典型案例——為表格運用CSS款式8.2.1知識講解 在DreamweaverCS3中，可以對已創(chuàng)建的CSS款式進展修正和編輯，也可以刪除已創(chuàng)建的CSS款式。8.2.1知識講解 1.編輯CSS款式 2.鏈接外部CSS款式表文件 3.刪除CSS款式 4.運用CSS款式

1.編輯CSS款式 編輯CSS款式有兩種方法：一種是在CSS規(guī)那么定義對話框中進展修正，另一種是直接在【CSS款式】面板中修正。2.鏈接外部CSS款式表文件 CSS款式通常只顯示在創(chuàng)建該款式的頁面的【CSS款式】面板中，經(jīng)過鏈接可將其他頁面中的款式運用到當前頁面中。鏈接外部款式表的詳細操作步驟請教師參照軟件和書中內(nèi)容進展講解。3.刪除CSS款式 假設不再需求某個CSS款式，那么可以將其刪除。在【CSS款式】面板中選擇要刪除的CSS款式，再單擊按鈕，即可刪除該CSS款式。

4.運用CSS款式設置好CSS款式后，標簽CSS款式和偽類CSS款式會自動運用到相應的HTML標簽和偽類上，而類CSS款式需求手動運用到需求的網(wǎng)頁元素上。將類CSS款式運用到網(wǎng)頁元素上主要有3種方法：運用網(wǎng)頁元素的快捷菜單運用CSS款式的快捷菜單運用網(wǎng)頁元素的【屬性】面板8.2.2典型案例——為表格運用CSS款式案例目的 本案例利用CSS款式對5.1.2節(jié)中制造的“我的課程表〞網(wǎng)頁進展款式設置，以美化網(wǎng)頁。8.2.2典型案例——為表格運用CSS款式操作思緒〔1〕定義第1層表格的邊框和背景等屬性?！?〕定義第1層表格的單元格屬性?！?〕定義第2層表格的邊框和背景等屬性。〔4〕定義第2層表格的單元格屬性。8.2.2典型案例——為表格運用CSS款式操作步驟 詳細操作步驟請教師參照軟件和書中內(nèi)容進展講解。8.2.2典型案例——為表格運用CSS款式案例小結 本案例練慣用CSS款式對表格進展修飾，從中可以看出：CSS款式是一致多個網(wǎng)頁風格的工具，運用得當可使網(wǎng)頁制造事半功倍而且效果協(xié)調(diào)一致。在一些大型網(wǎng)站中，一切頁面的風格是一致的，但各個欄目之間有一些小的差別，在制造好一個欄目的CSS款式文件后，再略微修正一下即可。8.3上機練習8.3.1“再別康橋〞網(wǎng)頁頁面屬性設置8.3.2“再別康橋〞網(wǎng)頁其他款式的設置及應用8.3.1“再別康橋〞網(wǎng)頁頁面屬性設置 本練習對“再別康橋〞網(wǎng)頁進展頁面屬性設置。8.3.1“再別康橋〞網(wǎng)頁頁面屬性設置操作思緒：設置頁面背景。設置頁面默許字體〔默許字體的顏色要參照背景圖像的顏色進展設置