DreamweaverCS3網(wǎng)頁設(shè)計培訓(xùn)教程電子教案08

1、第8課 使用層疊樣式美化網(wǎng)頁 本課要點具體要求本課導(dǎo)讀上機練習(xí)本課要點點層疊樣式式的定義義及創(chuàng)建建層疊樣式式的管理理和應(yīng)用用具體要求求了解層疊疊樣式熟悉創(chuàng)建建層疊樣樣式的方方法掌握層疊疊樣式的的管理掌握層疊疊樣式的的應(yīng)用本課導(dǎo)讀讀DreamweaverCS3中默認的的文本字字號都比比較大，需要用用戶自己己手動來來設(shè)置，但逐一一設(shè)置很很麻煩，運用層層疊樣式式就可以以很方便便地對整整個網(wǎng)頁頁中的文文本進行行字體格格式設(shè)置置。另外外，還可可以用層層疊樣式式來創(chuàng)建建十分精精美的表表格線框框等。8.1層疊樣式式的定義義及創(chuàng)建建在設(shè)計網(wǎng)網(wǎng)頁時，常常需需要對網(wǎng)網(wǎng)頁中各各種元素素的屬性性進行設(shè)設(shè)置。一一般來說

2、說，在同同一個網(wǎng)網(wǎng)站的所所有頁面面中，相相同類型型的網(wǎng)頁頁元素應(yīng)應(yīng)該具有有相同的的屬性，。如果果逐一設(shè)設(shè)置會做做許多重重復(fù)的工工作，而而且很容容易出錯錯；當需需要對屬屬性進行行修改時時，也需需要逐一一進行修修改。為為了解決決這個問問題，就就需要使使用CSS（CascadingStyleSheets，即層疊疊樣式表表）來統(tǒng)統(tǒng)一進行行控制。定義CSS樣式后，就可以以把它應(yīng)應(yīng)用到不不同的網(wǎng)網(wǎng)頁元素素中，這這樣，所所有應(yīng)用用該CSS樣式的網(wǎng)網(wǎng)頁元素素就會具具有相同同的屬性性；當修修改該CSS樣式后，所有應(yīng)應(yīng)用該CSS樣式的網(wǎng)網(wǎng)頁元素素的屬性性就會一一同被修修改。8.1層疊樣式式的定義義及創(chuàng)建建8.1.

3、1知識講解解8.1.2典型案例例設(shè)置網(wǎng)頁頁頁面屬屬性8.1.1知識講解解要想在文文檔中使使用CSS樣式，可可以創(chuàng)建建新的CSS樣式，也也可以鏈鏈接或?qū)?dǎo)入文檔檔外部的的CSS樣式。在在創(chuàng)建CSS樣式前，我們先先來了解解一下CSS樣式的定定義。8.1.1知識講解解1.層疊樣式式的定義義2.認識【CSS樣式】面板3.創(chuàng)建層疊疊樣式4.CSS樣式的具具體定義義1.層疊樣式式的定義義CSS是“層疊疊樣式表表”的簡簡稱，通通過CSS可以定制制網(wǎng)頁中中的文本本格式，不僅可可以控制制一個頁頁面的文文本格式式，采用用外部鏈鏈接的方方式還可可以控制制多個頁頁面的文文本格式式。CSS樣式有多多種定義義方式，主要有

4、有標簽CSS樣式、類類CSS樣式和偽偽類CSS樣式3種。2.認識【CSS樣式】面板CSS的創(chuàng)建及及管理基基本上都都是在【CSS樣式】面板中進進行的，下面就就來認識識它。選擇【窗口】【CSS樣式】命令或按按【ShiftF11】組合鍵，打開【CSS樣式】面板。在在該面板板中可進進行新建建、編輯輯、刪除除CSS樣式和鏈鏈接外部部CSS文件等操操作。3.創(chuàng)建層疊疊樣式在【CSS樣式】面板中創(chuàng)創(chuàng)建CSS樣式的具具體操作作步驟如如下：（1）單擊【CSS樣式】面板右上上角的按按鈕鈕，在彈彈出的菜菜單中選選擇【新建】命令，打打開【新建CSS規(guī)則】對話框。（2）在【選擇器類類型】欄中選擇擇所需定定義的樣樣式類型

5、型。（3）在【定義在】欄中可選選擇樣式式的種類類或選擇擇只在當當前文檔檔中應(yīng)用用所選樣樣式。這這里選中中單單選按按鈕，然然后單擊擊【確定】按鈕。（4）打開【保存樣式式表文件件為】對話框。在該對對話框的的【保存在】下拉列表表框中選選擇保存存路徑，在【文件名】文本框中中輸入該該CSS樣式的名名稱。（5）單擊【保存】按鈕，保保存新建建的樣式式表文件件并自動動打開CSS規(guī)則定義義對話框框。（6）在該對對話框中中進行各各項參數(shù)數(shù)設(shè)置，設(shè)置完完成后單單擊【確定】按鈕，系系統(tǒng)會自自動在【CSS樣式】面板中顯顯示出定定義的樣樣式。4.CSS樣式的具具體定義義CSS樣式有8個類別：1）類型2）背景3）區(qū)塊4）方

6、框5）邊框6）列表7）定位8）擴展各類別中中相關(guān)參參數(shù)的具具體含義義請教師師參照軟軟件和書書中內(nèi)容容進行講講解。8.1.2典型案例例設(shè)置網(wǎng)頁頁頁面屬屬性案例目標標網(wǎng)頁頁面面屬性也也是通過過創(chuàng)建層層疊樣式式來實現(xiàn)現(xiàn)對整個個網(wǎng)頁進進行控制制的，下下面就來來設(shè)置網(wǎng)網(wǎng)頁頁面面屬性。8.1.2典型案例例設(shè)置網(wǎng)頁頁頁面屬屬性操作思路路（1）新建一一個空白白文檔并并將所有有要用的的素材復(fù)復(fù)制到保保存網(wǎng)頁頁的位置置。（2）設(shè)置頁頁面屬性性。（3）插入網(wǎng)網(wǎng)頁元素素。8.1.2典型案例例設(shè)置網(wǎng)頁頁頁面屬屬性操作步驟驟具體操作作步驟請請教師參參照軟件件和書中中內(nèi)容進進行講解解。8.1.2典型案例例設(shè)置網(wǎng)頁頁頁面屬屬

7、性案例小結(jié)結(jié)本案例練練習(xí)了網(wǎng)網(wǎng)頁頁面面屬性的的常規(guī)設(shè)設(shè)置，DreamweaverCS3將網(wǎng)頁頁頁面中最最常用的的一些層層疊樣式式集中在在其中，以方便便制作者者進行設(shè)設(shè)置。8.2層疊樣式式的管理理和應(yīng)用用初次創(chuàng)建建的層疊疊樣式可可能不太太符合實實際需要要，此時時可以對對層疊樣樣式進行行編輯。另外，部分層層疊樣式式創(chuàng)建好好后，還還需制作作者手動動進行應(yīng)應(yīng)用。8.2層疊樣式式的管理理和應(yīng)用用8.2.1知識講解解8.2.2典型案例例為表格應(yīng)應(yīng)用CSS樣式8.2.1知識講解解在DreamweaverCS3中，可以以對已創(chuàng)創(chuàng)建的CSS樣式進行行修改和和編輯，也可以以刪除已已創(chuàng)建的的CSS樣式。8.2.1知

8、識講解解1.編輯CSS樣式2.鏈接外部部CSS樣式表文文件3.刪除CSS樣式4.應(yīng)用CSS樣式1.編輯CSS樣式編輯CSS樣式有兩兩種方法法：一種種是在CSS規(guī)則定義義對話框框中進行行修改，另一種種是直接接在【CSS樣式】面板中修修改。2.鏈接外部部CSS樣式表文文件CSS樣式通常常只顯示示在創(chuàng)建建該樣式式的頁面面的【CSS樣式】面板中，通過鏈鏈接可將將其他頁頁面中的的樣式應(yīng)應(yīng)用到當當前頁面面中。鏈鏈接外部部樣式表表的具體體操作步步驟請教教師參照照軟件和和書中內(nèi)內(nèi)容進行行講解。3.刪除CSS樣式如果不再再需要某某個CSS樣式，則則可以將將其刪除除。在【CSS樣式】面板中選選擇要刪刪除的CSS樣

9、式，再再單擊按按鈕，即可刪刪除該CSS樣式。4.應(yīng)用CSS樣式設(shè)置好CSS樣式后，標簽CSS樣式和偽偽類CSS樣式會自自動應(yīng)用用到相應(yīng)應(yīng)的HTML標簽和偽偽類上，而類CSS樣式需要要手動應(yīng)應(yīng)用到需需要的網(wǎng)網(wǎng)頁元素素上。將將類CSS樣式應(yīng)用用到網(wǎng)頁頁元素上上主要有有3種方法：使用網(wǎng)頁頁元素的的快捷菜菜單使用CSS樣式的快快捷菜單單使用網(wǎng)頁頁元素的的【屬性】面板8.2.2典型案例例為表格應(yīng)應(yīng)用CSS樣式案例目標標本案例利利用CSS樣式對5.1.2節(jié)中制作作的“我我的課程程表”網(wǎng)網(wǎng)頁進行行樣式設(shè)設(shè)置，以以美化網(wǎng)網(wǎng)頁。8.2.2典型案例例為表格應(yīng)應(yīng)用CSS樣式操作思路路（1）定義第第1層表格的的邊框和

10、和背景等等屬性。（2）定義第第1層表格的的單元格格屬性。（3）定義第第2層表格的的邊框和和背景等等屬性。（4）定義第第2層表格的的單元格格屬性。8.2.2典型案例例為表格應(yīng)應(yīng)用CSS樣式操作步驟驟具體操作作步驟請請教師參參照軟件件和書中中內(nèi)容進進行講解解。8.2.2典型案例例為表格應(yīng)應(yīng)用CSS樣式案例小結(jié)結(jié)本案例練練習(xí)用CSS樣式對表表格進行行修飾，從中可可以看出出：CSS樣式是統(tǒng)統(tǒng)一多個個網(wǎng)頁風風格的工工具，使使用得當當可使網(wǎng)網(wǎng)頁制作作事半功功倍而且且效果協(xié)協(xié)調(diào)統(tǒng)一一。在一一些大型型網(wǎng)站中中，所有有頁面的的風格是是一致的的，但各各個欄目目之間有有一些小小的差別別，在制制作好一一個欄目目的CSS樣式文件件后，再再稍微修修改一下下即可。8.3上機練習(xí)習(xí)8.3.1“再別康康橋”網(wǎng)網(wǎng)頁頁面面屬性設(shè)設(shè)置8.3.2“再別康康橋”網(wǎng)網(wǎng)頁其他他樣式的的設(shè)置及及應(yīng)用用8.3.1“再別康康橋”網(wǎng)網(wǎng)頁頁面面屬性設(shè)設(shè)置本練習(xí)對對“再別別康橋”網(wǎng)頁進進行頁面面屬性設(shè)設(shè)置。8.3.1“再別康康橋”網(wǎng)網(wǎng)頁頁面面屬性設(shè)設(shè)置操作思路路：設(shè)置頁面面背景。設(shè)置頁面面默認字字體（默默認字體體的顏色色要參照照背景圖圖像的顏顏色進行行設(shè)置）。設(shè)置鏈