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

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

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

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

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

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

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

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

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

9、式，再再單擊按按鈕，即可刪刪除該CSS樣式。4.應(yīng)用CSS樣式設(shè)置好CSS樣式后，標(biāo)簽CSS樣式和偽偽類CSS樣式會(huì)自自動(dòng)應(yīng)用用到相應(yīng)應(yīng)的HTML標(biāo)簽和偽偽類上，而類CSS樣式需要要手動(dòng)應(yīng)應(yīng)用到需需要的網(wǎng)網(wǎng)頁(yè)元素素上。將將類CSS樣式應(yīng)用用到網(wǎng)頁(yè)頁(yè)元素上上主要有有3種方法：使用網(wǎng)頁(yè)頁(yè)元素的的快捷菜菜單使用CSS樣式的快快捷菜單單使用網(wǎng)頁(yè)頁(yè)元素的的【屬性】面板8.2.2典型案例例為表格應(yīng)應(yīng)用CSS樣式案例目標(biāo)標(biāo)本案例利利用CSS樣式對(duì)5.1.2節(jié)中制作作的“我我的課程程表”網(wǎng)網(wǎng)頁(yè)進(jìn)行行樣式設(shè)設(shè)置，以以美化網(wǎng)網(wǎng)頁(yè)。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樣式操作步驟驟具體操作作步驟請(qǐng)請(qǐng)教師參參照軟件件和書(shū)中中內(nèi)容進(jìn)進(jìn)行講解解。8.2.2典型案例例為表格應(yīng)應(yīng)用CSS樣式案例小結(jié)結(jié)本案例練練習(xí)用CSS樣式對(duì)表表格進(jìn)行行修飾，從中可可以看出出：CSS樣式是統(tǒng)統(tǒng)一多個(gè)個(gè)網(wǎng)頁(yè)風(fēng)風(fēng)格的工工具，使使用得當(dāng)當(dāng)可使網(wǎng)網(wǎng)頁(yè)制作作事半功功倍而且且效果協(xié)協(xié)調(diào)統(tǒng)一一。在一一些大型型網(wǎng)站中中，所有有頁(yè)面的的風(fēng)格是是一致的的，但各各個(gè)欄目目之間有有一些小小的差別別，在制制作好一一個(gè)欄目目的CSS樣式文件件后，再再稍微修修改一下下即可。8.3上機(jī)練習(xí)習(xí)8.3.1“再別康康橋”網(wǎng)網(wǎng)頁(yè)頁(yè)面面屬性設(shè)設(shè)置8.3.2“再別康康橋”網(wǎng)網(wǎng)頁(yè)其他他樣式的的設(shè)置及及應(yīng)用用8.3.1“再別康康橋”網(wǎng)網(wǎng)頁(yè)頁(yè)面面屬性設(shè)設(shè)置本練習(xí)對(duì)對(duì)“再別別康橋”網(wǎng)頁(yè)進(jìn)進(jìn)行頁(yè)面面屬性設(shè)設(shè)置。8.3.1“再別康康橋”網(wǎng)網(wǎng)頁(yè)頁(yè)面面屬性設(shè)設(shè)置操作思路路：設(shè)置頁(yè)面面背景。設(shè)置頁(yè)面面默認(rèn)字字體（默默認(rèn)字體體的顏色色要參照照背景圖圖像的顏顏色進(jìn)行行設(shè)置）。設(shè)置鏈