HTML5 CSS3網(wǎng)頁設(shè)計與制作（第2版）教案-教學(xué)設(shè)計 第3章 初識CSS3

《HTML5+CSS3網(wǎng)頁設(shè)計與制作（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：年月日課題名稱第3章初識CSS3計劃課時6課時教學(xué)引入隨著網(wǎng)頁制作技術(shù)的不斷發(fā)展，HTML5屬性樣式的簡單應(yīng)用已經(jīng)無法滿足網(wǎng)頁設(shè)計的需求。但使用CSS能夠在不改變原有HTML結(jié)構(gòu)的情況下，實現(xiàn)更加豐富的樣式效果。例如更多樣的字體、更絢麗的圖形和動畫等，這極大地滿足了網(wǎng)頁設(shè)計的需求。本章主要講解CSS3的基礎(chǔ)知識。教學(xué)目標(biāo)使學(xué)生了解結(jié)構(gòu)與表現(xiàn)分離的含義，能夠闡述結(jié)構(gòu)與表現(xiàn)分離的作用使學(xué)生了解CSS3的優(yōu)勢，能夠闡述CSS3的優(yōu)勢使學(xué)生熟悉CSS3樣式規(guī)則，能夠按照CSS樣式規(guī)則正確編寫CSS樣式代碼使學(xué)生掌握CSS樣式的引入方式，能夠在網(wǎng)頁中引入CSS樣式使學(xué)生掌握CSS基礎(chǔ)選擇器的用法，能夠使用CSS基礎(chǔ)選擇器設(shè)置不同的網(wǎng)頁樣式使學(xué)生掌握CSS文本樣式屬性的用法，能夠在網(wǎng)頁中設(shè)置字體樣式屬性和文本外觀屬性使學(xué)生掌握CSS復(fù)合選擇器的用法，能夠使用CSS復(fù)合選擇器設(shè)置不同的網(wǎng)頁樣式使學(xué)生熟悉CSS層疊性和繼承性，能夠運用CSS的層疊性和繼承性優(yōu)化代碼結(jié)構(gòu)使學(xué)生熟悉CSS優(yōu)先級規(guī)則，能夠區(qū)分復(fù)合選擇器權(quán)重的大小教學(xué)重點引入CSS樣式CSS基礎(chǔ)選擇器字體樣式屬性文本外觀屬性CSS復(fù)合選擇器教學(xué)難點CSS復(fù)合選擇器CSS層疊性和繼承性CSS優(yōu)先級教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過程第一、二課時（結(jié)構(gòu)與表現(xiàn)分離、CSS3的優(yōu)勢、CSS樣式規(guī)則、引入CSS樣式表、CSS基礎(chǔ)選擇器、字體樣式屬性、文本外觀屬性）復(fù)習(xí)鞏固教師通過提問等方式了解學(xué)生的學(xué)習(xí)情況，對吸收不好的知識點進行再次鞏固講解。通過直接導(dǎo)入的方式講解新課使用HTML標(biāo)簽屬性設(shè)置網(wǎng)頁樣式具有很大的局限性，因為所有的屬性都是寫在標(biāo)簽中，既不能統(tǒng)一為同一種的標(biāo)簽設(shè)置樣式，也不利于后期批量修改樣式。為了更方便地維護網(wǎng)頁代碼，我們需要使用CSS實現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。接下來，本節(jié)課將從結(jié)構(gòu)與表現(xiàn)分離入手，帶大家認(rèn)識CSS。新課講解知識點1-結(jié)構(gòu)與表現(xiàn)分離教師通過展示PPT的方式講解結(jié)構(gòu)與表現(xiàn)分離。講解結(jié)構(gòu)與表現(xiàn)分離的好處。展示CSS嵌入HTML的效果。知識點2-CSS3的優(yōu)勢教師通過展示PPT的方式講解CSS3的優(yōu)勢。節(jié)約成本。提高性能。知識點3-CSS樣式規(guī)則教師通過展示PPT的方式講解CSS樣式規(guī)則。講解設(shè)置CSS樣式的具體語法規(guī)則。講解CSS代碼結(jié)構(gòu)的特點。CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫，而聲明不區(qū)分大小。若有多個聲明，則必須用英文狀態(tài)下的分號“;”隔開，最后一個聲明后的分號可以省略。如果屬性的屬性值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的引號。在編寫CSS代碼時，為了增強代碼的可讀性，可使用注釋語句進行介紹說明。在CSS代碼中空格是不被解析的，大括號及分號前后的空格可有可無。知識點4-引入CSS樣式表教師通過展示PPT以及代碼的方式講解引入CSS樣式表。講解行內(nèi)式、內(nèi)部式、外部式和導(dǎo)入式的語法規(guī)則。針對四種引入方式，分別通過代碼的形式演示其用法。知識點5-CSS基礎(chǔ)選擇器教師通過展示PPT以及代碼演示CSS基礎(chǔ)選擇器。講解標(biāo)簽選擇器、類選擇器、id選擇器、通配符選擇器的語法規(guī)則。針對四種基礎(chǔ)選擇器，分別以代碼的形式演示其用法知識點6-字體樣式屬性教師通過展示PPT以及代碼演示的方式講解字體樣式屬性。（1）介紹CSS字體樣式屬性的作用。（2）講解font-size屬性、font-family屬性、font-weight屬性、font-variant屬性、font-style屬性、font屬性、@font-face的作用、屬性值及含義。（3）通過代碼的方式演示設(shè)置不同屬性的效果。知識點7-文本外觀屬性教師通過展示PPT以及代碼演示的方式講解文本外觀屬性。（1）介紹CSS字體文本外觀屬性的作用。（2）講解color屬性、letter-spacing屬性、word-spacing屬性、line-height屬性、text-transform屬性、text-decoration屬性、text-align屬性、text-indent屬性、white-space屬性、text-shadow屬性、text-overflow屬性、word-wrap屬性的作用、屬性值及含義。（3）通過代碼的方式演示設(shè)置不同屬性的效果。歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過課后題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第三、四課時（CSS復(fù)合選擇器、CSS層疊性和繼承性、CSS優(yōu)先級、階段案例——制作活動通知頁面）復(fù)習(xí)鞏固教師通過提問等方式了解學(xué)生的學(xué)習(xí)情況，對吸收不好的知識點進行再次鞏固講解。通過直接導(dǎo)入的方式導(dǎo)入新課書寫CSS樣式表時，可以使用CSS基礎(chǔ)選擇器選取需要設(shè)置樣式的標(biāo)簽。但是在實際網(wǎng)站開發(fā)中，一個頁面可能包含大量的標(biāo)簽，僅使用CSS基礎(chǔ)選擇器是遠(yuǎn)遠(yuǎn)不夠的。為了實現(xiàn)更強大、更方便的選取功能，CSS提供了復(fù)合選擇器，復(fù)合選擇器由兩個或多個基礎(chǔ)選擇器以不同的方式組合而成，用于更精確的選取需要設(shè)置樣式的標(biāo)簽。本節(jié)課將介紹幾種常用的復(fù)合選擇器。新課講解知識點1-CSS復(fù)合選擇器教師通過展示PPT以及代碼演示的方式講解CSS復(fù)合選擇器。講解交集選擇器、后代選擇器、并集選擇器的作用。通過代碼演示不同類型選擇器的用法。知識點2-CSS層疊性和繼承性教師通過展示PPT以及代碼演示的方式講解CSS層疊性和繼承性。講解層疊性和繼承性的含義通過代碼演示如何利用層疊性和繼承性簡化代碼。知識點3-CSS優(yōu)先級教師通過展示PPT以及代碼演示的方式講解CSS優(yōu)先級。講解CSS優(yōu)先級的規(guī)則講解影響CSS樣式的其他因素繼承樣式的權(quán)重為0行內(nèi)式CSS樣式優(yōu)先權(quán)重相同時，CSS樣式遵循就近優(yōu)先使用!important命令賦予CSS樣式最高的優(yōu)先級（3）通過代碼演示CSS優(yōu)先級對樣式的影響知識點4-階段案例——制作活動通知頁面教師通過實操的方式演示新聞頁面的制作。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第五、六課時（上機練習(xí)）上機練習(xí)主要針對