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

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

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

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

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

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

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

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

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

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