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

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

2、作，而且很容易出錯；當(dāng)需要對屬性進(jìn)行修改時，也需要逐一進(jìn)行修改。為了解決這個問題，就需要使用CSS（Cascading Style Sheets，即層疊樣式表）來統(tǒng)一進(jìn)行控制。定義CSS樣式后，就可以把它應(yīng)用到不同的網(wǎng)頁元素中，這樣，所有應(yīng)用該CSS樣式的網(wǎng)頁元素就會具有相同的屬性；當(dāng)修改該CSS樣式后，所有應(yīng)用該CSS樣式的網(wǎng)頁元素的屬性就會一同被修改。 8.1 層疊樣式的定義及創(chuàng)建 8.1.1 知識講解8.1.2 典型案例設(shè)置網(wǎng)頁頁面屬性 8.1.1 知識講解要想在文檔中使用CSS樣式，可以創(chuàng)建新的CSS樣式，也可以鏈接或?qū)胛臋n外部的CSS樣式。在創(chuàng)建CSS樣式前，我們先來了解一下CSS

3、樣式的定義。 8.1.1 知識講解1.層疊樣式的定義 2.認(rèn)識【CSS樣式】面板 3.創(chuàng)建層疊樣式 4.CSS樣式的具體定義 1.層疊樣式的定義 CSS是“層疊樣式表”的簡稱，通過CSS可以定制網(wǎng)頁中的文本格式，不僅可以控制一個頁面的文本格式，采用外部鏈接的方式還可以控制多個頁面的文本格式。 CSS樣式有多種定義方式，主要有標(biāo)簽CSS樣式、類CSS樣式和偽類CSS樣式3種。2.認(rèn)識【CSS樣式】面板 CSS的創(chuàng)建及管理基本上都是在【CSS樣式】面板中進(jìn)行的，下面就來認(rèn)識它。 選擇【窗口】【CSS樣式】命令或按【ShiftF11】組合鍵，打開【CSS樣式】面板。在該面板中可進(jìn)行新建、編輯、刪除C

4、SS樣式和鏈接外部CSS文件等操作。 3.創(chuàng)建層疊樣式 在【CSS樣式】面板中創(chuàng)建CSS樣式的具體操作步驟如下：（1）單擊【CSS樣式】面板右上角的 按鈕，在彈出的菜單中選擇【新建】命令，打開【新建CSS規(guī)則】對話框。（2）在【選擇器類型】欄中選擇所需定義的樣式類型。（3）在【定義在】欄中可選擇樣式的種類或選擇只在當(dāng)前文檔中應(yīng)用所選樣式。這里選中 單選按鈕，然后單擊【確定】按鈕。（4）打開【保存樣式表文件為】對話框。在該對話框的【保存在】下拉列表框中選擇保存路徑，在【文件名】文本框中輸入該CSS樣式的名稱。（5）單擊【保存】按鈕，保存新建的樣式表文件并自動打開CSS規(guī)則定義對話框。（6）在該對

5、話框中進(jìn)行各項(xiàng)參數(shù)設(shè)置，設(shè)置完成后單擊【確定】按鈕，系統(tǒng)會自動在【CSS樣式】面板中顯示出定義的樣式。 4.CSS樣式的具體定義CSS樣式有8個類別 ： 1）類型 2）背景 3）區(qū)塊 4）方框 5）邊框 6）列表 7）定位 8）擴(kuò)展 各類別中相關(guān)參數(shù)的具體含義請教師參照軟件和書中內(nèi)容進(jìn)行講解。8.1.2 典型案例設(shè)置網(wǎng)頁頁面屬性 案例目標(biāo)網(wǎng)頁頁面屬性也是通過創(chuàng)建層疊樣式來實(shí)現(xiàn)對整個網(wǎng)頁進(jìn)行控制的，下面就來設(shè)置網(wǎng)頁頁面屬性。 8.1.2 典型案例設(shè)置網(wǎng)頁頁面屬性操作思路（1）新建一個空白文檔并將所有要用的素材復(fù)制到保存網(wǎng)頁的位置。（2）設(shè)置頁面屬性。（3）插入網(wǎng)頁元素。 8.1.2 典型案例設(shè)置

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

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

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

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