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

《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》教學(xué)設(shè)計(jì)課程名稱：授課年級(jí)：授課學(xué)期：教師姓名：年月日課題名稱第2章初識(shí)HTML5計(jì)劃課時(shí)6課時(shí)教學(xué)引入近年來(lái)，HTML5成為互聯(lián)網(wǎng)行業(yè)的熱門技術(shù)，它改變了Web應(yīng)用的開發(fā)方式，在PC端和移動(dòng)端都得到廣泛應(yīng)用。作為網(wǎng)頁(yè)設(shè)計(jì)和制作人員，應(yīng)該順應(yīng)時(shí)代潮流，掌握HTML5的相關(guān)技術(shù)。本章將從HTML5的優(yōu)勢(shì)、基本結(jié)構(gòu)、標(biāo)簽概述、文本控制標(biāo)簽、圖像標(biāo)簽等知識(shí)著手，詳細(xì)講解HTML5的相關(guān)內(nèi)容。教學(xué)目標(biāo)使學(xué)生了解HTML5的優(yōu)勢(shì)，能夠?qū)ζ鋬?yōu)勢(shì)進(jìn)行歸納總結(jié)使學(xué)生了解HTML5的基本結(jié)構(gòu)，能夠區(qū)分HTML5和XHTML的結(jié)構(gòu)差異使學(xué)生了解標(biāo)簽的分類，能夠闡述單標(biāo)簽和雙標(biāo)簽的差異使學(xué)生熟悉標(biāo)簽的關(guān)系，能夠設(shè)置具有嵌套和并列關(guān)系的標(biāo)簽使學(xué)生掌握標(biāo)簽屬性的用法，能夠?yàn)闃?biāo)簽添加對(duì)應(yīng)的屬性使學(xué)生熟悉HTML5頭部相關(guān)標(biāo)簽，能夠歸納頭部各類標(biāo)簽的作用使學(xué)生掌握HTML文本控制標(biāo)簽的用法，能夠使用不同類型的標(biāo)簽定義文本使學(xué)生掌握HTML圖像標(biāo)簽的用法，能夠在網(wǎng)頁(yè)中定義圖像教學(xué)重點(diǎn)標(biāo)簽的屬性頁(yè)面格式化標(biāo)簽文本格式化標(biāo)簽常見圖像格式插入圖像教學(xué)難點(diǎn)HTML實(shí)體教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過程第一、二課時(shí)（HTML5的優(yōu)勢(shì)、HTML5的基本結(jié)構(gòu)、標(biāo)簽的分類、標(biāo)簽間的關(guān)系、標(biāo)簽的屬性、HTML5頭部相關(guān)標(biāo)簽）復(fù)習(xí)鞏固教師通過提問等方式了解學(xué)生的學(xué)習(xí)情況，對(duì)吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。通過直接導(dǎo)入的方式講解新課作為HTML的最新版本，HTML5是HTML的延續(xù)。HTML5經(jīng)歷了舊版本HTML和XHTML的發(fā)展，從某種意義上說(shuō)，它是HTML標(biāo)準(zhǔn)更新和規(guī)范過程的產(chǎn)物。本節(jié)課將針對(duì)HTML5的優(yōu)勢(shì)、基本結(jié)構(gòu)等內(nèi)容進(jìn)行講解。新課講解知識(shí)點(diǎn)1-HTML5的優(yōu)勢(shì)教師通過展示PPT的方式講解HTML5的優(yōu)勢(shì)。兼容性合理性易用性知識(shí)點(diǎn)2-HTML5的基本結(jié)構(gòu)教師通過展示PPT的方式講解HTML5的基本結(jié)構(gòu)。HTML1.0的基本結(jié)構(gòu)基本結(jié)構(gòu)中標(biāo)簽的含義HTML5的基本結(jié)構(gòu)知識(shí)點(diǎn)3-標(biāo)簽的分類教師通過展示PPT的方式講解標(biāo)簽的分類。單標(biāo)簽雙標(biāo)簽注釋標(biāo)簽知識(shí)點(diǎn)4-標(biāo)簽間的關(guān)系教師通過展示PPT的方式講解標(biāo)簽間的關(guān)系。嵌套關(guān)系并列關(guān)系知識(shí)點(diǎn)5-標(biāo)簽的屬性教師通過展示PPT以及代碼演示的方式講解標(biāo)簽的屬性。HTML標(biāo)簽設(shè)置屬性的基本語(yǔ)法示例代碼演示標(biāo)簽屬性的用法知識(shí)點(diǎn)6-HTML5頭部相關(guān)標(biāo)簽教師通過展示PPT的方式講解HTML5頭部相關(guān)標(biāo)簽。（1）<title>標(biāo)簽（2）<meta>標(biāo)簽歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過課后題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。布置作業(yè)教師通過高校教輔平臺(tái)（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第三、四課時(shí)（頁(yè)面格式化標(biāo)簽、文本格式化標(biāo)簽、HTML實(shí)體、常見圖像格式、插入圖像、階段案例——制作新聞頁(yè)面）復(fù)習(xí)鞏固教師通過提問等方式了解學(xué)生的學(xué)習(xí)情況，對(duì)吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。通過直接導(dǎo)入的方式導(dǎo)入新課無(wú)論網(wǎng)頁(yè)內(nèi)容如何豐富，文字始終都是網(wǎng)頁(yè)中最基本的元素之一。為了使文字排版整齊、結(jié)構(gòu)清晰，HTML5中提供了一系列文本控制標(biāo)簽，方便對(duì)文字進(jìn)行樣式設(shè)置。如標(biāo)題標(biāo)簽<h1>~<h6>、段落標(biāo)簽<p>等。本節(jié)課將對(duì)不同類型文本控制標(biāo)簽進(jìn)行詳細(xì)講解。新課講解知識(shí)點(diǎn)1-頁(yè)面格式化標(biāo)簽教師通過展示PPT以及代碼演示的方式講解頁(yè)面格式化標(biāo)簽。標(biāo)題標(biāo)簽段落標(biāo)簽水平線標(biāo)簽換行標(biāo)簽知識(shí)點(diǎn)2-文本格式化標(biāo)簽教師通過展示PPT的方式講解文本格式化標(biāo)簽。常用的文本格式化標(biāo)簽通過一個(gè)案例來(lái)演示文本格式化標(biāo)簽的用法知識(shí)點(diǎn)3-HTML實(shí)體教師通過展示PPT的方式講解常用的特殊字符及HTML實(shí)體。知識(shí)點(diǎn)4-常見圖像格式教師通過展示PPT的方式講解常見圖像格式。GIFPNGJPEG知識(shí)點(diǎn)5-插入圖像教師通過展示PPT以及代碼演示的方式講解插入圖像。圖像標(biāo)簽的語(yǔ)法格式常用的<img>標(biāo)簽屬性通過代碼演示不同屬性的作用知識(shí)點(diǎn)6-階段案例——制作新聞頁(yè)面教師通過實(shí)操的方式演示新聞頁(yè)面的制作。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺(tái)（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第五、六課時(shí)（上機(jī)練習(xí)）上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程