《網(wǎng)頁制作》模塊4網(wǎng)頁的樣式設(shè)計

1、目錄目錄模塊模塊4 網(wǎng)頁的樣式設(shè)計網(wǎng)頁的樣式設(shè)計目錄目錄模塊模塊4 網(wǎng)頁的樣式設(shè)計網(wǎng)頁的樣式設(shè)計認(rèn)識CSS樣式表。掌握引用CSS樣式表的方法。掌握CSS樣式表的應(yīng)用方法。知識目標(biāo)知識目標(biāo)目錄目錄模塊模塊4 網(wǎng)頁的樣式設(shè)計網(wǎng)頁的樣式設(shè)計能理解CSS的作用。能恰當(dāng)?shù)貞?yīng)用CSS樣式表修飾頁面。能力目標(biāo)能力目標(biāo)目錄目錄模塊模塊4 網(wǎng)頁的樣式設(shè)計網(wǎng)頁的樣式設(shè)計任務(wù)1：認(rèn)識CSS樣式表。任務(wù)2：使用CSS修飾頁面。具體任務(wù)具體任務(wù)目錄目錄CSS基礎(chǔ)(1)(2)(3)(4)引用CSS樣式表CSS規(guī)則CSS樣式的類型4.1.1任務(wù)分析任務(wù)分析任務(wù)任務(wù)1 認(rèn)識認(rèn)識CSS樣式表樣式表目錄目錄4.1.2相關(guān)知識相關(guān)

2、知識1.CSS基礎(chǔ)基礎(chǔ)通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表示形式分離。除設(shè)置HTML元素樣式外，還可以使用CSS控制Web頁面中塊級元素的格式和定位。對塊級元素進行操作的方法實際上就是使用CSS進行頁面布局設(shè)置的方法。任務(wù)任務(wù)1 認(rèn)識認(rèn)識CSS樣式表樣式表目錄目錄2.CSS規(guī)則規(guī)則CSS規(guī)則由兩個主要部分構(gòu)成，即選擇器和一條或多條聲明。選擇器是需要改變樣式的元素，每條聲明由一個屬性和一個值組成，屬性和值之間用冒號分開。任務(wù)任務(wù)1 認(rèn)識認(rèn)識CSS樣式表樣式表目錄目錄3.CSS樣式的類型樣式的類型在Dreamweaver中可以定義以下樣式類型任務(wù)任務(wù)1 認(rèn)識認(rèn)識CSS樣式表樣式表

3、(1) (2) (3)類樣式類樣式HTML標(biāo)簽標(biāo)簽樣式樣式高級樣式高級樣式目錄目錄4.引用引用CSS樣式表樣式表CSS規(guī)則可以位于以下位置任務(wù)任務(wù)1 認(rèn)識認(rèn)識CSS樣式表樣式表 (1) (2) (3)外部外部CSS樣式表樣式表內(nèi)部或嵌入式內(nèi)部或嵌入式CSS樣式表樣式表內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式目錄目錄任務(wù)任務(wù)1 認(rèn)識認(rèn)識CSS樣式表樣式表4.1.3任務(wù)小結(jié)任務(wù)小結(jié)CSS是網(wǎng)頁設(shè)計中一項很重要的技術(shù)，了解CSS的特性、掌握CSS的類型和引用方式是正確使用CSS的基本要求。目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面4.2.1任務(wù)分析任務(wù)分析要能正確、恰當(dāng)?shù)卦陧撁嬷羞\用CSS樣式，需要掌握以下內(nèi)容(2

4、)掌握掌握以下內(nèi)容以下內(nèi)容(1)(3)創(chuàng)建和管理CSS樣式編輯CSS樣式應(yīng)用和刪除CSS樣式目錄目錄4.2.2相關(guān)知識相關(guān)知識1.創(chuàng)建和管理CSS樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄2.編輯CSS樣式Dreamweaver中提供了8種CSS樣式類別，即類型、背景、區(qū)塊、方框、邊框、列表、定位和擴展。類型背景區(qū)塊方框邊框列表定位擴展CSS樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄1）“類型”樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄下面對“類型”樣式下的各

5、個選項進行詳細(xì)介紹任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面“類型”樣式Font-familyLine-heightFont-sizeText-decorationFont-styleColorFont-weightFont-variantText-transform目錄目錄2）“背景”樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄下面對“背景”樣式下的各個選項進行詳細(xì)介紹。任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面Background-color（背景顏色)Background-image（背景圖像）Background-repeatBackground-position（X）和Ba

6、ckground-position（Y）Background-attachment目錄目錄3）“區(qū)塊”樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄下面對“區(qū)塊”樣式下的各個選項進行詳細(xì)介紹任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面Word-spacing（單詞間距）Letter-spacing（字母間距）Vertical-align（垂直對齊）Text-align（文本對齊）Text-indent（文字縮進）White-space（空格）Display（顯示）區(qū)塊樣式目錄目錄4）“方框”樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄下面對“方框”樣式下的各個選項進行詳細(xì)介紹任

7、務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面Width（寬）和Height（高）Float（浮動）Clear（清除）Margin（邊距）Padding（填充）目錄目錄5）“邊框”樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄下面對“邊框”樣式下的各個選項進行詳細(xì)介紹任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面 (1) (2) (3)Style（類型）（類型）Width（寬度）（寬度）Color（顏色）（顏色）目錄目錄6）“列表”樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄下面對“列表”樣式下的各個選項進行詳細(xì)介紹任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面 (1) (2) (3)Li

8、st-style-typeList-style-imageList-style-Position目錄目錄7）“定位”樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄下面對“定位”樣式下的主要選項進行詳細(xì)介紹任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面Placement（放置）Position（位置）Clip（剪輯）Z-Index（Z軸）Overflow（溢出）Visibility（可見性）“定位定位”樣式樣式目錄目錄8）“擴展”樣式任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄下面對“擴展”樣式下的主要選項進行詳細(xì)介紹任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面 (1) (2) (3)分

9、頁分頁Cursor（光標(biāo)）（光標(biāo)）Filter（過濾器）（過濾器）目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面3.應(yīng)用和刪除應(yīng)用和刪除CSS樣式樣式應(yīng)用應(yīng)用CSS樣式樣式刪除刪除CSS樣式樣式目錄目錄4.2.3任務(wù)實施任務(wù)實施任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面1.具體任務(wù)目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面2.實現(xiàn)步驟目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面目錄目錄任務(wù)任務(wù)2 使用使用CSS修飾頁面修飾頁面4.2.4任務(wù)小結(jié)任務(wù)小結(jié)通過本任務(wù)可以練習(xí)創(chuàng)建、應(yīng)用樣式規(guī)則，創(chuàng)建、鏈接外部樣式表等操作，CSS樣式文件作用強大，是網(wǎng)頁設(shè)計中必不可少的知識，使用外部樣式表文件可以極大地提高網(wǎng)頁制作效率和質(zhì)量，應(yīng)熟練掌握。目錄目錄思考與練習(xí)思考與練習(xí)1.如果要使一個網(wǎng)站的風(fēng)格統(tǒng)一并便于更新，在使用CSS時最好使用（）樣式。A.內(nèi)部B.外部C.相對D.嵌入2.下列（）是定義樣式表的正確