1、網(wǎng)頁(yè)設(shè)計(jì)與制作網(wǎng)頁(yè)設(shè)計(jì)與制作第一章第一章 HTML語(yǔ)言基礎(chǔ)語(yǔ)言基礎(chǔ) 2第二章第二章 初識(shí)初識(shí)Dreamweaver 4第三章第三章 創(chuàng)建與應(yīng)用表格創(chuàng)建與應(yīng)用表格 3第四章第四章 使用層和框架布局頁(yè)面使用層和框架布局頁(yè)面 3第五章第五章 CSS樣式與模板的使用樣式與模板的使用 3第六章第六章 行為、庫(kù)和資源管理行為、庫(kù)和資源管理 3第七章第七章 建立動(dòng)態(tài)網(wǎng)站建立動(dòng)態(tài)網(wǎng)站 3 第八章第八章 Flash動(dòng)畫(huà)基礎(chǔ)知識(shí)動(dòng)畫(huà)基礎(chǔ)知識(shí) 3第九章第九章 創(chuàng)建動(dòng)畫(huà)創(chuàng)建動(dòng)畫(huà) 3第十章第十章 使用使用Fireworks編輯網(wǎng)頁(yè)圖像編輯網(wǎng)頁(yè)圖像 31第五章第五章 CSS樣式與模板的使用樣式與模板的使用一、層疊樣式表概

2、述一、層疊樣式表概述1 1、什么是、什么是CSSCSS 層疊樣式表層疊樣式表( (CSS)CSS)是一系列格式設(shè)置規(guī)則，它們是一系列格式設(shè)置規(guī)則，它們控制網(wǎng)頁(yè)內(nèi)容的外觀。使用層疊樣式表可以為部控制網(wǎng)頁(yè)內(nèi)容的外觀。使用層疊樣式表可以為部分文件、整份文件乃至整個(gè)網(wǎng)站定義樣式。分文件、整份文件乃至整個(gè)網(wǎng)站定義樣式。 CSSCSS樣式規(guī)則由兩部分組成：樣式規(guī)則由兩部分組成：選擇器選擇器和和聲明聲明。 選擇器是樣式名稱選擇器是樣式名稱( (如如trtr或或p)p)，而聲明則用于而聲明則用于定義樣式元素。聲明由屬性定義樣式元素。聲明由屬性( (如如color)color)和值和值( (如如red)red)

3、兩部分組成。兩部分組成。 如：如：pfont-sizepfont-size：16px16px；colorcolor：redred 第五章第五章 CSS樣式與模板的使用樣式與模板的使用2 2、 CSSCSS的作用的作用 CSSCSS樣式主要是實(shí)現(xiàn)網(wǎng)頁(yè)中各種元素的準(zhǔn)確定位。樣式主要是實(shí)現(xiàn)網(wǎng)頁(yè)中各種元素的準(zhǔn)確定位。 CSSCSS樣式只需修改一個(gè)文件就可以改變一批網(wǎng)頁(yè)的樣式只需修改一個(gè)文件就可以改變一批網(wǎng)頁(yè)的外觀和格式，并保證在所有瀏覽器和平臺(tái)之間的兼外觀和格式，并保證在所有瀏覽器和平臺(tái)之間的兼容性，使用戶設(shè)計(jì)的網(wǎng)站擁有更少的編碼、更少的容性，使用戶設(shè)計(jì)的網(wǎng)站擁有更少的編碼、更少的頁(yè)數(shù)和更快的下載速度

4、。頁(yè)數(shù)和更快的下載速度。 使用使用CSSCSS樣式可以控制許多使用樣式可以控制許多使用HTMLHTML無(wú)法控制的屬無(wú)法控制的屬性。如：性。如： 指定自定義列表項(xiàng)目符號(hào)；指定自定義列表項(xiàng)目符號(hào)； 指定不同的字體大小和單位指定不同的字體大小和單位( (像素、點(diǎn)數(shù)等像素、點(diǎn)數(shù)等) )； 設(shè)置設(shè)置HTMLHTML卷標(biāo)、段落等的樣式。卷標(biāo)、段落等的樣式。第五章第五章 CSS樣式與模板的使用樣式與模板的使用3 3、 CSSCSS的基本語(yǔ)法的基本語(yǔ)法 在代碼視圖模式中，尋找在代碼視圖模式中，尋找spanspan標(biāo)識(shí)符，就可知道標(biāo)識(shí)符，就可知道是否應(yīng)用了是否應(yīng)用了CSSCSS。 CSSCSS可將原有的可將原有

5、的HTMLHTML卷標(biāo)定義成自己想要的效果，卷標(biāo)定義成自己想要的效果，其基本語(yǔ)法是在卷標(biāo)之后加上符號(hào)，在此符其基本語(yǔ)法是在卷標(biāo)之后加上符號(hào)，在此符號(hào)內(nèi)填入號(hào)內(nèi)填入CSSCSS所設(shè)置的所設(shè)置的HTMLHTML屬性。屬性。 如：如：h2font-sizeh2font-size：16px16px；colorcolor：redred第五章第五章 CSS樣式與模板的使用樣式與模板的使用二、二、 CSSCSS樣式的創(chuàng)建與應(yīng)用樣式的創(chuàng)建與應(yīng)用 DreamweaverDreamweaver擁有自動(dòng)創(chuàng)建樣式的功能，如用戶選擁有自動(dòng)創(chuàng)建樣式的功能，如用戶選定某段文字后，為其設(shè)置字體、字號(hào)和顏色等屬定某段文字后，為

6、其設(shè)置字體、字號(hào)和顏色等屬性后，系統(tǒng)自動(dòng)創(chuàng)建以性后，系統(tǒng)自動(dòng)創(chuàng)建以StyleX (XStyleX (X為數(shù)字序列為數(shù)字序列) )為為名的樣式，且自動(dòng)顯示在屬性面板的名的樣式，且自動(dòng)顯示在屬性面板的“樣式樣式”下下拉列表框中。拉列表框中。 用戶除了可以應(yīng)用用戶除了可以應(yīng)用DreamweaverDreamweaver創(chuàng)建的樣式外，還創(chuàng)建的樣式外，還可以定義自己需要的樣式。可以定義自己需要的樣式。1 1、認(rèn)識(shí)認(rèn)識(shí)“CSSCSS樣式樣式”面板面板 窗口窗口/ /CSSCSS樣式樣式2 2、認(rèn)識(shí)、認(rèn)識(shí)“相關(guān)相關(guān)CSS”CSS”面板面板 窗口窗口/ /標(biāo)簽檢查器標(biāo)簽檢查器/ /相關(guān)相關(guān)CSS(CSS(點(diǎn)擊

7、點(diǎn)擊CSSCSS屬性標(biāo)簽屬性標(biāo)簽) )第五章第五章 CSS樣式與模板的使用樣式與模板的使用3 3、創(chuàng)建、創(chuàng)建CSSCSS樣式樣式 文本文本/ /CSSCSS樣式樣式/ /新建新建 對(duì)話框中選項(xiàng)的說(shuō)明（對(duì)話框中選項(xiàng)的說(shuō)明（P120P120） 示例：創(chuàng)建一個(gè)名為示例：創(chuàng)建一個(gè)名為“test1”test1”的樣式，要求此樣的樣式，要求此樣式的字體為式的字體為“宋體宋體”，顏色為，顏色為# #FF0000FF0000，字號(hào)為字號(hào)為2424像素，背景顏色為像素，背景顏色為#00#00FFFFFFFF。4 4、應(yīng)用類樣式、應(yīng)用類樣式 類樣式是惟一可以應(yīng)用于文檔中任何文本類樣式是惟一可以應(yīng)用于文檔中任何文本

8、( (與控制與控制文本的標(biāo)簽無(wú)關(guān)文本的標(biāo)簽無(wú)關(guān)) )的的CSSCSS樣式類型。與當(dāng)前文檔關(guān)樣式類型。與當(dāng)前文檔關(guān)聯(lián)的所有類樣式都顯示在聯(lián)的所有類樣式都顯示在“CSSCSS樣式樣式”面板中面板中( (樣樣式名稱前有一個(gè)句點(diǎn)式名稱前有一個(gè)句點(diǎn)) )和文本屬性面板的和文本屬性面板的“樣式樣式”下拉列表框中。下拉列表框中。第五章第五章 CSS樣式與模板的使用樣式與模板的使用1 1）應(yīng)用自定義的）應(yīng)用自定義的CSSCSS樣式樣式 屬性面板的屬性面板的“樣式樣式”下拉列表框下拉列表框2 2）刪除自定義的）刪除自定義的CSSCSS樣式樣式 “樣式樣式”下拉列表框中選擇下拉列表框中選擇“無(wú)無(wú)”三、三、 CSS

9、CSS樣式的導(dǎo)出與編輯樣式的導(dǎo)出與編輯1、導(dǎo)出樣式以創(chuàng)建導(dǎo)出樣式以創(chuàng)建CSSCSS樣式表樣式表 用戶可以從文檔中導(dǎo)出樣式以創(chuàng)建新的用戶可以從文檔中導(dǎo)出樣式以創(chuàng)建新的CSSCSS樣式表樣式表。然后，再鏈接到其他文檔以應(yīng)用這些樣式。然后，再鏈接到其他文檔以應(yīng)用這些樣式。 文本文本/ /CSSCSS樣式樣式/ /導(dǎo)出導(dǎo)出2 2、管理、管理CSSCSS樣式樣式 文本文本/ /CSSCSS樣式樣式/ /管理樣式管理樣式第五章第五章 CSS樣式與模板的使用樣式與模板的使用3 3、鏈接和導(dǎo)入外部樣式表、鏈接和導(dǎo)入外部樣式表 可以導(dǎo)入或鏈接到外部樣式表以應(yīng)用那里包含的可以導(dǎo)入或鏈接到外部樣式表以應(yīng)用那里包含的

10、樣式。樣式。 文本文本/ /CSSCSS樣式樣式/ /管理樣式管理樣式/ /附加附加 示例：創(chuàng)建新文檔，并為其鏈接一個(gè)外部樣式示例：創(chuàng)建新文檔，并為其鏈接一個(gè)外部樣式表。表。4 4、編輯、編輯CSSCSS樣式樣式 CSSCSS樣式面板樣式面板 對(duì)文檔內(nèi)的對(duì)文檔內(nèi)的CSSCSS樣式進(jìn)行編輯時(shí)，會(huì)立刻重新樣式進(jìn)行編輯時(shí)，會(huì)立刻重新設(shè)置該設(shè)置該CSSCSS樣式控制的所有文本的格式。樣式控制的所有文本的格式。 編輯外部樣式表會(huì)影響與它鏈接的所有文檔。編輯外部樣式表會(huì)影響與它鏈接的所有文檔。第五章第五章 CSS樣式與模板的使用樣式與模板的使用四、四、 CSSCSS樣式的優(yōu)先順序樣式的優(yōu)先順序(1) (1

11、) 如果將兩種樣式應(yīng)用于同一文本，瀏覽器顯示如果將兩種樣式應(yīng)用于同一文本，瀏覽器顯示這兩種樣式的所有屬性。這兩種樣式的所有屬性。(2) (2) 如果應(yīng)用于同一文本的兩種樣式的屬性發(fā)生沖如果應(yīng)用于同一文本的兩種樣式的屬性發(fā)生沖突（如，一種樣式可能將藍(lán)色指定為文本顏色，突（如，一種樣式可能將藍(lán)色指定為文本顏色，而另一種樣式可能指定紅色作為文本顏色。），而另一種樣式可能指定紅色作為文本顏色。），則瀏覽器顯示最里面的樣式則瀏覽器顯示最里面的樣式( (離文本本身最近的離文本本身最近的樣式樣式) )的屬性。的屬性。第五章第五章 CSS樣式與模板的使用樣式與模板的使用 示例：示例： h1舉例舉例:該段落受自

12、定義樣該段落受自定義樣式式. .BlueBlue和和HTMLHTML標(biāo)簽樣式標(biāo)簽樣式h1h1的控制。的控制。 span class=Red但這個(gè)句子受但這個(gè)句子受. .RedRed樣式控制。樣式控制。/span現(xiàn)在，我們返回到現(xiàn)在，我們返回到. .BlueBlue樣式。樣式。/span 說(shuō)明：為說(shuō)明：為h1h1定義的樣式可以指定所有定義的樣式可以指定所有h1h1段落的字段落的字體、大小和顏色，但應(yīng)用于該段落的自定義體、大小和顏色，但應(yīng)用于該段落的自定義CSSCSS樣式樣式. .BlueBlue將取代將取代h1h1樣式中的顏色設(shè)置。另一個(gè)樣式中的顏色設(shè)置。另一個(gè)自定義自定義CSSCSS樣式樣式.

13、 .RedRed將取代將取代. .BlueBlue，因?yàn)樗挥谝驗(yàn)樗挥? .BlueBlue樣式的內(nèi)部。樣式的內(nèi)部。第五章第五章 CSS樣式與模板的使用樣式與模板的使用五、利用模板（五、利用模板（template）擴(kuò)展名擴(kuò)展名dwtdwt，位于站點(diǎn)根文件夾下的位于站點(diǎn)根文件夾下的templatestemplates文件夾文件夾1. 創(chuàng)建自己的模板創(chuàng)建自己的模板1 1）模板面板）模板面板窗口窗口 / / 資源資源 / / 模板模板 / / 新建模板新建模板2）菜單實(shí)現(xiàn)）菜單實(shí)現(xiàn)文件文件 / 另存為模板另存為模板2. 給網(wǎng)頁(yè)應(yīng)用模板給網(wǎng)頁(yè)應(yīng)用模板1）通過(guò)菜單應(yīng)用模板）通過(guò)菜單應(yīng)用模板文件文件 /

14、 新建新建 / 模板模板第五章第五章 CSS樣式與模板的使用樣式與模板的使用2）通過(guò)模板面板通過(guò)模板面板應(yīng)用應(yīng)用按鈕按鈕網(wǎng)頁(yè)應(yīng)用此模板后，就不能改變此網(wǎng)頁(yè)上的任網(wǎng)頁(yè)應(yīng)用此模板后，就不能改變此網(wǎng)頁(yè)上的任何部件。何部件。3. 修改模板修改模板1）定義模板的可編輯區(qū)域）定義模板的可編輯區(qū)域打開(kāi)要處理的模板打開(kāi)要處理的模板選中一塊作為可編輯區(qū)域的網(wǎng)頁(yè)元素選中一塊作為可編輯區(qū)域的網(wǎng)頁(yè)元素插入插入 / / 模板對(duì)象模板對(duì)象 / / 可編輯區(qū)域可編輯區(qū)域第五章第五章 CSS樣式與模板的使用樣式與模板的使用2 2）刪除可編輯區(qū)域的一般步驟）刪除可編輯區(qū)域的一般步驟 打開(kāi)要處理的模板打開(kāi)要處理的模板修改修改 / / 模板模板 / / 刪除模板標(biāo)記刪除模板標(biāo)記 3）定義模板的可選區(qū)域）定義模板的可選區(qū)域用于設(shè)置選定內(nèi)容是否顯示用于設(shè)置選定內(nèi)容是否顯示打開(kāi)要處理的模板打開(kāi)要處理的模板選中一塊作為可選區(qū)域的網(wǎng)頁(yè)元素選中一塊作為可選區(qū)域的網(wǎng)頁(yè)元素插入插入 / / 模板對(duì)象模板對(duì)象 / / 可選區(qū)域可選區(qū)域在網(wǎng)頁(yè)文件中（在網(wǎng)頁(yè)文件中（ 修改修改 / / 模板屬性模板屬性 ）第五章第五章 CSS樣式與模板的使用樣式與模板的使用4）定義模板的可編輯標(biāo)簽屬性）定義模板的可編輯標(biāo)簽屬性用于修改應(yīng)用了