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

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

2、作，而且很容易出錯；當需要對屬性進行修改時，也需要逐一進行修改。為了解決這個問題，就需要使用CSS（Cascading Style Sheets，即層疊樣式表）來統(tǒng)一進行控制。定義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

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

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

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

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

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

8、.應用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層表格的邊框和背景等屬性。（2）定義第1層表格的單元格屬性。（3）定義第2層表格的邊框和背景等屬性。（4）定義第2層表格的

9、單元格屬性。 8.2.2 典型案例為表格應用CSS樣式操作步驟具體操作步驟請教師參照軟件和書中內容進行講解。8.2.2 典型案例為表格應用CSS樣式案例小結本案例練習用CSS樣式對表格進行修飾，從中可以看出：CSS樣式是統(tǒng)一多個網(wǎng)頁風格的工具，使用得當可使網(wǎng)頁制作事半功倍而且效果協(xié)調統(tǒng)一。在一些大型網(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)頁頁面屬性設置操作思路：設置頁面背景。設置頁面默認字體（默認字體的顏色要參照背景圖像的顏色進行設置）