1、,模塊4 網(wǎng)頁(yè)的樣式設(shè)計(jì),模塊4 網(wǎng)頁(yè)的樣式設(shè)計(jì),認(rèn)識(shí)CSS樣式表。 掌握引用CSS樣式表的方法。 掌握CSS樣式表的應(yīng)用方法。,知識(shí)目標(biāo),模塊4 網(wǎng)頁(yè)的樣式設(shè)計(jì),能理解CSS的作用。 能恰當(dāng)?shù)貞?yīng)用CSS樣式表修飾頁(yè)面。,能力目標(biāo),模塊4 網(wǎng)頁(yè)的樣式設(shè)計(jì),任務(wù)1：認(rèn)識(shí)CSS樣式表。 任務(wù)2：使用CSS修飾頁(yè)面。,具體任務(wù),任務(wù)1 認(rèn)識(shí)CSS樣式表,任務(wù)1 認(rèn)識(shí)CSS樣式表,任務(wù)1 認(rèn)識(shí)CSS樣式表,任務(wù)1 認(rèn)識(shí)CSS樣式表,任務(wù)1 認(rèn)識(shí)CSS樣式表,任務(wù)1 認(rèn)識(shí)CSS樣式表,任務(wù)2 使用CSS修飾頁(yè)面,1.創(chuàng)建和管理CSS樣式,任務(wù)2 使用CSS修飾頁(yè)面,任務(wù)2 使用CSS修飾頁(yè)面,任務(wù)2 使

2、用CSS修飾頁(yè)面,2.編輯CSS樣式 Dreamweaver中提供了8種CSS樣式類別，即類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展。,任務(wù)2 使用CSS修飾頁(yè)面,1）“類型”樣式,任務(wù)2 使用CSS修飾頁(yè)面,下面對(duì)“類型”樣式下的各個(gè)選項(xiàng)進(jìn)行詳細(xì)介紹,任務(wù)2 使用CSS修飾頁(yè)面,2）“背景”樣式,任務(wù)2 使用CSS修飾頁(yè)面,下面對(duì)“背景”樣式下的各個(gè)選項(xiàng)進(jìn)行詳細(xì)介紹。,任務(wù)2 使用CSS修飾頁(yè)面,3）“區(qū)塊”樣式,任務(wù)2 使用CSS修飾頁(yè)面,下面對(duì)“區(qū)塊”樣式下的各個(gè)選項(xiàng)進(jìn)行詳細(xì)介紹,任務(wù)2 使用CSS修飾頁(yè)面,4）“方框”樣式,任務(wù)2 使用CSS修飾頁(yè)面,下面對(duì)“方框”樣式下的各個(gè)選項(xiàng)

3、進(jìn)行詳細(xì)介紹,任務(wù)2 使用CSS修飾頁(yè)面,5）“邊框”樣式,任務(wù)2 使用CSS修飾頁(yè)面,下面對(duì)“邊框”樣式下的各個(gè)選項(xiàng)進(jìn)行詳細(xì)介紹,任務(wù)2 使用CSS修飾頁(yè)面,6）“列表”樣式,任務(wù)2 使用CSS修飾頁(yè)面,下面對(duì)“列表”樣式下的各個(gè)選項(xiàng)進(jìn)行詳細(xì)介紹,任務(wù)2 使用CSS修飾頁(yè)面,7）“定位”樣式,任務(wù)2 使用CSS修飾頁(yè)面,下面對(duì)“定位”樣式下的主要選項(xiàng)進(jìn)行詳細(xì)介紹,任務(wù)2 使用CSS修飾頁(yè)面,8）“擴(kuò)展”樣式,任務(wù)2 使用CSS修飾頁(yè)面,下面對(duì)“擴(kuò)展”樣式下的主要選項(xiàng)進(jìn)行詳細(xì)介紹,任務(wù)2 使用CSS修飾頁(yè)面,任務(wù)2 使用CSS修飾頁(yè)面,任務(wù)2 使用CSS修飾頁(yè)面,1.具體任務(wù),任務(wù)2 使用CSS修飾頁(yè)面,2.實(shí)現(xiàn)步驟,任務(wù)2 使用CSS修飾頁(yè)面,任務(wù)2 使用CSS修飾頁(yè)面,任務(wù)2 使用CSS修飾頁(yè)面,任務(wù)2 使用CSS修飾頁(yè)面,任務(wù)2 使用CSS