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

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

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

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

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