PAGE8一、教案頭授課標(biāo)題項(xiàng)目4制作家裝行業(yè)產(chǎn)品展示頁面

子項(xiàng)目一過渡

子項(xiàng)目二變形學(xué)時(shí)2地點(diǎn)授課班級課次第17次課授課時(shí)間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學(xué)目標(biāo)能力（技能）目標(biāo)知識目標(biāo)能夠制作過渡和變形效果掌握過渡和變形的制作方法教學(xué)重點(diǎn)制作過渡和變形效果教學(xué)難點(diǎn)制作過渡和變形效果能力訓(xùn)練任務(wù)及案例項(xiàng)目4制作家裝行業(yè)產(chǎn)品展示頁面

子項(xiàng)目一過渡

子項(xiàng)目二變形教學(xué)組織采用分組教學(xué)：在教師提問時(shí)，分組討論預(yù)期成果學(xué)生能完成課上指定任務(wù)，掌握教學(xué)內(nèi)容教學(xué)材料《響應(yīng)式Web開發(fā)教程》作業(yè)作業(yè)七高級應(yīng)用階段案例參考資料《響應(yīng)式Web開發(fā)教程》課后小結(jié)二、教案正頁設(shè)計(jì)要點(diǎn)：1、分教學(xué)準(zhǔn)備、教學(xué)實(shí)施兩大部分設(shè)計(jì)；2、統(tǒng)籌教學(xué)內(nèi)容、教學(xué)實(shí)施過程、方法手段、重難點(diǎn)解決策略、師生活動(dòng)、時(shí)間分配等要素；3、以“科學(xué)設(shè)計(jì)、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學(xué)準(zhǔn)備一、教學(xué)條件：場地：帶有多媒體設(shè)備并可上網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室機(jī)器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學(xué)生完成資料的查找和搜集、指導(dǎo)學(xué)生完成學(xué)習(xí)任務(wù)，完成對學(xué)生的評價(jià)；給學(xué)生做操作演示，糾正學(xué)生在操作過程中不正確的操作。三、學(xué)生特點(diǎn)分析該班學(xué)生聰明好學(xué)，比較喜歡開放、自由的學(xué)習(xí)環(huán)境，但是學(xué)生學(xué)習(xí)的自信心不強(qiáng)，不善于獨(dú)立思考和探索問題.根據(jù)學(xué)生特點(diǎn),通過激發(fā)學(xué)生學(xué)習(xí)興趣,提倡學(xué)習(xí)獨(dú)立思考,帶問題學(xué)習(xí),努力培養(yǎng)學(xué)生自制能力,堅(jiān)定他們的學(xué)習(xí)毅力和自信心,實(shí)現(xiàn)本節(jié)課的重點(diǎn)能力目標(biāo)和素質(zhì)目標(biāo)。四、教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。五、重難點(diǎn)解決策略措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。六、課前準(zhǔn)備1、告知提前1天老師給學(xué)生布置本次課的教學(xué)任務(wù)，學(xué)生以小組為單位，預(yù)習(xí)課程內(nèi)容。2、學(xué)生分組將學(xué)生在教學(xué)中分成學(xué)習(xí)小組，強(qiáng)化學(xué)生的團(tuán)結(jié)合作意識，在每項(xiàng)個(gè)項(xiàng)目結(jié)束時(shí)，分組講解各組所設(shè)計(jì)的作品，讓每個(gè)同學(xué)都得到充分的訓(xùn)練。第二部分：教學(xué)過程（講解transition-property、transition-duration、transition-timing-function、transition-delay、transition屬性）復(fù)習(xí)上節(jié)課內(nèi)容本課時(shí)內(nèi)容學(xué)習(xí)傳統(tǒng)的Web設(shè)計(jì)中，當(dāng)網(wǎng)頁中需要顯示動(dòng)畫或特效時(shí)，需要使用JavaScript腳本或者Flash來實(shí)現(xiàn)。CSS3提供了強(qiáng)大的過渡屬性，它可以在不使用Flash動(dòng)畫或者JavaScript腳本的情況下，為元素從一種樣式轉(zhuǎn)變?yōu)榱硪环N樣式時(shí)添加效果，例如漸顯、漸弱、動(dòng)畫快慢等。那么，在CSS3中，過渡屬性主要包括哪些呢？知識點(diǎn)講解講解“transition-property屬性”（1）教師通過PPT對“transition-property屬性”的概念及作用進(jìn)行講解，指出transition-property屬性用于指定應(yīng)用過渡效果的CSS屬性的名稱。（2）教師對“transition-property屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對“transition-property屬性”的三個(gè)常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）教師指出應(yīng)用“transition-property屬性”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“transition-duration屬性”（1）教師通過PPT對“transition-duration屬性”的概念及作用進(jìn)行講解，指出\o"CSS3transition-duration屬性"transition-duration屬性用于定義過渡效果花費(fèi)的時(shí)間。（2）教師對“transition-duration屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師指出在設(shè)置“過渡”效果時(shí)，必須使用\o"CSS3transition-duration屬性"transition-duration屬性設(shè)置過渡時(shí)間，否則不會產(chǎn)生過渡效果。（4）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“transition-timing-function屬性”（1）教師通過PPT對“transition-timing-function屬性”的概念及作用進(jìn)行講解，指出transition-timing-function屬性規(guī)定過渡效果的速度曲線。（2）教師對“transition-timing-function屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對“transition-timing-function屬性”的常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）教師對比“transition-timing-function屬性”不同屬性值的產(chǎn)生過渡效果的速度曲線，并分析其異同。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“transition-delay屬性”（1）教師通過PPT對“transition-delay屬性”的概念及作用進(jìn)行講解，指出transition-delay屬性規(guī)定過渡效果何時(shí)開始。（2）教師對“transition-delay屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對比“transition-delay屬性”設(shè)置的過渡效果，并分析說明。（4）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“transition屬性”（1）教師對“transition屬性”的概念進(jìn)行講解，指出transition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個(gè)過渡屬性。（2）教師對“transition屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對使用“transition屬性”設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個(gè)過渡屬性進(jìn)行講解，并對比分析其優(yōu)缺點(diǎn)。（4）教師指出應(yīng)用“transition屬性”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：transition屬性。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握如何使用transition-property、transition-duration、transition-timing-function、transition-delay屬性設(shè)置元素的過渡效果。本課時(shí)內(nèi)容學(xué)習(xí)在CSS3之前，如果需要為頁面設(shè)置變形效果，需要依賴于圖片、Flash或JavaScript才能完成。CSS3出現(xiàn)后，通過transform屬性就可以實(shí)現(xiàn)變形效果，。那么，請同學(xué)們討論下：使用transform屬性可以實(shí)現(xiàn)哪幾種變形效果？知識點(diǎn)講解講解“認(rèn)識transform”（1）教師通過PPT對“CSS32D變形和CSS33D變形”產(chǎn)生的背景進(jìn)行介紹。（2）教師對“CSS3變形”能夠?qū)崿F(xiàn)的功能和效果進(jìn)行概述，并分析其優(yōu)缺點(diǎn)。（3）教師對“transform屬性”的基本語法進(jìn)行講解，并使用代碼進(jìn)行演示。（4）教師指出transform-function函數(shù)包括matrix（）、translate（）、scale（）rotate（）和skew（）等，并進(jìn)行簡單介紹。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“2D轉(zhuǎn)換”（1）教師指出使用transform屬性可以實(shí)現(xiàn)2D轉(zhuǎn)換，主要包括：平移、縮放、傾斜和旋轉(zhuǎn)。（2）教師分別對“translate（）方法、scale()方法、skew()方法、rotate()方法”的實(shí)現(xiàn)效果及基本語法格式進(jìn)行講解，并畫出變形效果示意圖。（3）教師分別對“ranslate（）方法、scale()方法、skew()方法、rotate()方法”進(jìn)行講解，演示其具體用法和效果，并對比分析其變形效果的異同。（4）教師指出應(yīng)用“transform屬性”實(shí)現(xiàn)平移、縮放、傾斜和旋轉(zhuǎn)時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“3D轉(zhuǎn)換”（1）教師和學(xué)生互動(dòng)：在上一節(jié)中，我們已經(jīng)學(xué)習(xí)了2D轉(zhuǎn)換，主要包括如何讓元素在平面上進(jìn)行順時(shí)針或逆時(shí)針旋轉(zhuǎn)。其實(shí)，在3D變形中可以讓元素圍繞X軸、Y軸、Z軸進(jìn)行旋轉(zhuǎn)，下面將針對CSS3中的rotateX()、rotateY()函數(shù)進(jìn)行具體講解。（2）教師分別針對“rotateX()、rotateY()、rotate3d()”函數(shù)的基本語法格式及常見參數(shù)進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對比分析“rotateX()、rotateY()、rotate3d()”函數(shù)轉(zhuǎn)換效果的異同，并進(jìn)行分析說明。（4）教師指出應(yīng)用“rotate3d()函數(shù)”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：2D轉(zhuǎn)換、3D轉(zhuǎn)換。易錯(cuò)點(diǎn)：注意區(qū)分2D轉(zhuǎn)換和3D轉(zhuǎn)換的不同。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握通過transform屬性實(shí)現(xiàn)元素的移動(dòng)、傾斜、縮放、翻轉(zhuǎn)等變形效果。一、教案頭授課標(biāo)題項(xiàng)目4制作家裝行業(yè)產(chǎn)品展示頁面

子項(xiàng)目三動(dòng)畫學(xué)時(shí)2地點(diǎn)授課班級課次第18次課授課時(shí)間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學(xué)目標(biāo)能力（技能）目標(biāo)知識目標(biāo)能夠制作動(dòng)畫效果掌握動(dòng)畫的制作方法教學(xué)重點(diǎn)制作常見的過渡效果制作２D轉(zhuǎn)換、３D轉(zhuǎn)換效果教學(xué)難點(diǎn)制作常見的過渡效果制作２D轉(zhuǎn)換、３D轉(zhuǎn)換效果能力訓(xùn)練任務(wù)及案例項(xiàng)目4制作家裝行業(yè)產(chǎn)品展示頁面

子項(xiàng)目三動(dòng)畫教學(xué)組織采用分組教學(xué)：在教師提問時(shí)，分組討論預(yù)期成果學(xué)生能完成課上指定任務(wù)，掌握教學(xué)內(nèi)容教學(xué)材料《響應(yīng)式Web開發(fā)教程》作業(yè)作業(yè)七高級應(yīng)用階段案例參考資料《響應(yīng)式Web開發(fā)教程》課后小結(jié)二、教案正頁設(shè)計(jì)要點(diǎn)：1、分教學(xué)準(zhǔn)備、教學(xué)實(shí)施兩大部分設(shè)計(jì)；2、統(tǒng)籌教學(xué)內(nèi)容、教學(xué)實(shí)施過程、方法手段、重難點(diǎn)解決策略、師生活動(dòng)、時(shí)間分配等要素；3、以“科學(xué)設(shè)計(jì)、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學(xué)準(zhǔn)備一、教學(xué)條件：場地：帶有多媒體設(shè)備并可上網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室機(jī)器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學(xué)生完成資料的查找和搜集、指導(dǎo)學(xué)生完成學(xué)習(xí)任務(wù)，完成對學(xué)生的評價(jià)；給學(xué)生做操作演示，糾正學(xué)生在操作過程中不正確的操作。三、學(xué)生特點(diǎn)分析該班學(xué)生聰明好學(xué)，比較喜歡開放、自由的學(xué)習(xí)環(huán)境，但是學(xué)生學(xué)習(xí)的自信心不強(qiáng)，不善于獨(dú)立思考和探索問題.根據(jù)學(xué)生特點(diǎn),通過激發(fā)學(xué)生學(xué)習(xí)興趣,提倡學(xué)習(xí)獨(dú)立思考,帶問題學(xué)習(xí),努力培養(yǎng)學(xué)生自制能力,堅(jiān)定他們的學(xué)習(xí)毅力和自信心,實(shí)現(xiàn)本節(jié)課的重點(diǎn)能力目標(biāo)和素質(zhì)目標(biāo)。四、教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。五、重難點(diǎn)解決策略措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。六、課前準(zhǔn)備1、告知提前1天老師給學(xué)生布置本次課的教學(xué)任務(wù)，學(xué)生以小組為單位，預(yù)習(xí)課程內(nèi)容。2、學(xué)生分組將學(xué)生在教學(xué)中分成學(xué)習(xí)小組，強(qiáng)化學(xué)生的團(tuán)結(jié)合作意識，在每項(xiàng)個(gè)項(xiàng)目結(jié)束時(shí)，分組講解各組所設(shè)計(jì)的作品，讓每個(gè)同學(xué)都得到充分的訓(xùn)練。第二部分：教學(xué)過程復(fù)習(xí)上節(jié)課內(nèi)容1、在CSS3中，使用transform屬性可以實(shí)現(xiàn)變形效果。下列選項(xiàng)中，能夠?qū)崿F(xiàn)元素縮放的函數(shù)是？本課時(shí)內(nèi)容學(xué)習(xí)使用動(dòng)畫之前必須先定義關(guān)鍵幀，一個(gè)關(guān)鍵幀表示動(dòng)畫過程中的一個(gè)狀態(tài)。在CSS3中，@keyframes規(guī)則用于創(chuàng)建動(dòng)畫。那么，請同學(xué)們討論下：如何使用@keyframes屬性定義動(dòng)畫？知識點(diǎn)講解講解“@keyframes”（1）教師和學(xué)生互動(dòng)：使用動(dòng)畫之前必須先定義關(guān)鍵幀，一個(gè)關(guān)鍵幀表示動(dòng)畫過程中的一個(gè)狀態(tài)。在CSS3中，@keyframes規(guī)則用于創(chuàng)建動(dòng)畫。在@keyframes中規(guī)定某項(xiàng)CSS樣式，就能創(chuàng)建由當(dāng)前樣式逐漸變?yōu)樾聵邮降膭?dòng)畫效果。下面，將對@keyframes屬性進(jìn)行具體講解。（2）教師通過PPT對“@keyframes屬性”的概念及作用進(jìn)行講解，指出@keyframes規(guī)則用于創(chuàng)建動(dòng)畫。（3）教師對“@keyframes屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（4）教師對“@keyframes屬性”包含的參數(shù)含義進(jìn)行說明，并進(jìn)行代碼演示。（5）教師指出應(yīng)用“@keyframes屬性”時(shí)需要注意的問題，并給予解答。（6）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“animation-name屬性”（1）教師通過PPT對“animation-name屬性”的概念及作用進(jìn)行講解，指出animation-name屬性用于定義要應(yīng)用的動(dòng)畫名稱，為@keyframes動(dòng)畫規(guī)定名稱。（2）教師對“animation-name屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對“animation-name屬性”常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“animation-duration屬性”（1）教師通過PPT對“animation-duration屬性”的概念及作用進(jìn)行講解，指出animation-duration屬性用于定義整個(gè)動(dòng)畫效果完成所需要的時(shí)間。（2）教師對“animation-duration屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師指出應(yīng)用“animation-duration屬性”時(shí)需要注意的問題，并給予解答。（4）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“animation-timing-function屬性”（1）教師通過PPT對“animation-timing-function屬性”的概念及作用進(jìn)行講解，指出animation-timing-function用來規(guī)定動(dòng)畫的速度曲線，定義使用哪種方式來執(zhí)行動(dòng)畫效果。（2）教師對“animation-timing-function屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對“animation-timing-function屬性”的常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值動(dòng)畫效果的異同。（4）教師指出應(yīng)用“animation-timing-function屬性”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“animation-delay屬性”（1）教師通過PPT對“animation-delay屬性”的概念及作用進(jìn)行講解，指出animation-delay屬性用于定義執(zhí)行動(dòng)畫效果之前延遲的時(shí)間，即規(guī)定動(dòng)畫什么時(shí)候開始。（2）教師對“animation-delay屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師指出應(yīng)用“animation-delay屬性”時(shí)需要注意的問題，并給予解答。（4）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“animation-iteration-count屬性”（1）教師通過PPT對“animation-iteration-count屬性”的概念及作用進(jìn)行講解，指出animation-iteration-count屬性用于定義動(dòng)畫的播放次數(shù)。（2）教師對“animation-iteration-count屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對“animation-iteration-count屬性”的常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值動(dòng)畫效果的異同。（4）教師指出應(yīng)用“animation-iteration-count屬性”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“animation-direction屬性”（1）教師通過PPT對“animation-direction屬性”的概念及作用進(jìn)行講解，指出animation-direction屬性定義當(dāng)前動(dòng)畫播放的方向。（2）教師對“animation-iteration-count屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對“animation-direction屬性”的常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值動(dòng)畫效果的異同。（4）教師指出應(yīng)用“animation-direction屬性”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“animation屬性”（1）教師對“animation屬性”的概念進(jìn)行講解，指出animation屬性是一個(gè)簡寫屬性，用于在一個(gè)屬性中設(shè)置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六個(gè)動(dòng)畫屬性。（2）教師對“animation屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對使用“animation屬性”同時(shí)設(shè)置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六個(gè)動(dòng)畫屬性進(jìn)行講解，并對比分析其優(yōu)缺點(diǎn)。（4）教師指出應(yīng)用“animation屬性”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：animation屬性。易錯(cuò)點(diǎn)：注意區(qū)分animation相關(guān)屬性的用法。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握如何使用animation相關(guān)屬性定義不同的動(dòng)畫效果。一、教案頭授課標(biāo)題子項(xiàng)目四綜合項(xiàng)目——制作家裝行業(yè)產(chǎn)品展示頁面學(xué)時(shí)2地點(diǎn)授課班級課次第19次課授課時(shí)間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學(xué)目標(biāo)能力（技能）目標(biāo)知識目標(biāo)能夠設(shè)置漸變背景理解漸變屬性的原理教學(xué)重點(diǎn)能夠設(shè)置漸變背景教學(xué)難點(diǎn)能夠設(shè)置漸變背景能力訓(xùn)練任務(wù)及案例子項(xiàng)目四綜合項(xiàng)目——制作家裝行業(yè)產(chǎn)品展示頁面教學(xué)組織采用分組教學(xué)：在教師提問時(shí)，分組討論預(yù)期成果學(xué)生能完成課上指定任務(wù)，掌握教學(xué)內(nèi)容教學(xué)材料《響應(yīng)式Web開發(fā)教程》作業(yè)作業(yè)七高級應(yīng)用階段案例參考資料《響應(yīng)式Web開發(fā)教程》課后小結(jié)二、教案正頁設(shè)計(jì)要點(diǎn)：1、分教學(xué)準(zhǔn)備、教學(xué)實(shí)施兩大部分設(shè)計(jì)；2、統(tǒng)籌教學(xué)內(nèi)容、教學(xué)實(shí)施過程、方法手段、重難點(diǎn)解決策略、師生活動(dòng)、時(shí)間分配等要素；3、以“科學(xué)設(shè)計(jì)、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學(xué)準(zhǔn)備一、教學(xué)條件：場地：帶有多媒體設(shè)備并可上網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室機(jī)器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學(xué)生完成資料的查找和搜集、指導(dǎo)學(xué)生完成學(xué)習(xí)任務(wù)，完成對學(xué)生的評價(jià)；給學(xué)生做操作演示，糾正學(xué)生在操作過程中不正確的操作。三、學(xué)生特點(diǎn)分析該班學(xué)生聰明好學(xué)，比較喜歡開放、自由的學(xué)習(xí)環(huán)境，但是學(xué)生學(xué)習(xí)的自信心不強(qiáng)，不善于獨(dú)立思考和探索問題.根據(jù)學(xué)生特點(diǎn),通過激發(fā)學(xué)生學(xué)習(xí)興趣,提倡學(xué)習(xí)獨(dú)立思考,帶問題學(xué)習(xí),努力培養(yǎng)學(xué)生自制能力,堅(jiān)定他們的學(xué)習(xí)毅力和自信心,實(shí)現(xiàn)本節(jié)課的重點(diǎn)能力目標(biāo)和素質(zhì)目標(biāo)。四、教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。五、重難點(diǎn)解決策略措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。六、課前準(zhǔn)備1、告知提前1天老師給學(xué)生布置本次課的教學(xué)任務(wù)，學(xué)生以小組為單位，預(yù)習(xí)課程內(nèi)容。2、學(xué)生分組將學(xué)生在教學(xué)中分成學(xué)習(xí)小組，強(qiáng)化學(xué)生的團(tuán)結(jié)合作意識，在每項(xiàng)個(gè)項(xiàng)目結(jié)束時(shí)，分組講解各組所設(shè)計(jì)的作品，讓每個(gè)同學(xué)都得到充分的訓(xùn)練。第二部分：教學(xué)過程項(xiàng)目分析4.3.1頁面結(jié)構(gòu)分析頁面結(jié)構(gòu)如圖4-14所示。圖4-14頁面結(jié)構(gòu)圖通過觀察圖4-14，我們發(fā)現(xiàn)頁面的主體結(jié)構(gòu)“產(chǎn)品展示”由“地中海風(fēng)格”“現(xiàn)代簡約風(fēng)格”“歐式風(fēng)格”“中式風(fēng)格”四個(gè)版塊組成。這四個(gè)版塊也構(gòu)成了產(chǎn)品展示的導(dǎo)航欄“地中海風(fēng)格”版塊：需要設(shè)置標(biāo)題標(biāo)記<h1>和無序列表標(biāo)記<ul><li>定義導(dǎo)航欄，需要設(shè)置標(biāo)題標(biāo)記<h2>、段落標(biāo)記<p>、圖像標(biāo)記<img>定義右側(cè)頁面樣式?！艾F(xiàn)代簡約風(fēng)格”“歐式風(fēng)格”“中式風(fēng)格”版塊：需要設(shè)置標(biāo)題標(biāo)記<h2>和段落標(biāo)記<p>，其中，在“中式風(fēng)格”版塊中，還需要設(shè)置圖像標(biāo)記<img>，在“現(xiàn)代簡約風(fēng)格”版塊中，還需要設(shè)置無序列表標(biāo)記<ul><li>嵌套圖像標(biāo)記<img>。4.3.2樣式分析“地中海風(fēng)格”版塊：該版塊是始終不動(dòng)的，需設(shè)置絕對定位?！艾F(xiàn)代簡約風(fēng)格”“歐式風(fēng)格”“中式風(fēng)格”版塊：開始時(shí)隱藏于頁面的左外側(cè)，通過margin-left:-100%設(shè)置，該項(xiàng)目的關(guān)鍵是實(shí)現(xiàn)過渡的動(dòng)畫效果，動(dòng)畫的觸發(fā)事件是選擇導(dǎo)航欄，選中的版塊則產(chǎn)生活動(dòng)。當(dāng)選擇導(dǎo)航欄的選項(xiàng)時(shí)，被選中的版塊margin-left發(fā)生變化，由margin-left:-100%變?yōu)閙argin-left:0%，從而使版塊進(jìn)入頁面。未被選中的版塊自動(dòng)退回左外側(cè)，通過margin-left:-100%設(shè)置實(shí)現(xiàn)。4.4項(xiàng)目實(shí)踐4.4.1制作頁面結(jié)構(gòu)1．制作導(dǎo)航欄1<header>2<h1>產(chǎn)品展示</h1>3<nav>4<aid="link-di"href="#di">地中海風(fēng)格</a>5<aid="link-xian"href="#xian">現(xiàn)代簡約風(fēng)格</a>6<aid="link-ou"href="#ou">歐式風(fēng)格</a>7<aid="link-zhong"href="#zhong">中式風(fēng)格</a>8</nav>9</header>2．制作“地中海風(fēng)格”“現(xiàn)代簡約風(fēng)格”“歐式風(fēng)格”“中式風(fēng)格”版塊1<!--di-->2<divid="di"class="content">3<h2>地中海風(fēng)格</h2>4<p>浪漫柔情地中海風(fēng)格，在家擁有藍(lán)天碧海般感覺</p>5<p>無處不在的浪漫主義氣息和兼容并蓄的文化品位，以其6極具親和力的田園風(fēng)情被不同層次的人們接受。7生性浪漫又崇尚遼闊自然的愜意生活的人們會情不自禁8地愛上地中海。</p>9<imgsrc="img/dizhonghai.jpg"height="250">10</div>11<!--/di-->12<!--xian-->13<divid="xian"class="panel">14<divclass="content">15<h2>現(xiàn)代簡約</h2>16<p>現(xiàn)代簡約，優(yōu)雅高檔，時(shí)尚現(xiàn)代</p>17<ulid="works">18<li><ahref="#"><imgsrc="img/jian1.jpg"height="250"></a></li>19<li><ahref="#"><imgsrc="img/jian2.jpg"height="250"></a></li>20<li><ahref="#"><imgsrc="img/jian3.jpg"height="250"></a></li>21<li><ahref="#"><imgsrc="img/jian4.jpg"height="250"></a></li>22</ul>2324</div>25</div>26<!--/xian-->27<!--ou-->28<divid="ou"class="panel">29<divclass="content">30<h2>歐式風(fēng)格</h2>31<p>大氣、奢華、浪漫是歐式風(fēng)格顯著的特點(diǎn)，32根據(jù)設(shè)計(jì)使用元素的不同，歐式風(fēng)格也能展現(xiàn)出不同的家裝魅力。</p>33<p>將鮮花、波浪這些元素融入客廳空間裝飾中，34通過完美的曲線，精細(xì)的細(xì)節(jié)處理，華麗動(dòng)感，打破了理性的空間之美，35典雅奢華的立體感呼之欲出，是浪漫優(yōu)雅家居生活的美好體現(xiàn)。</p>36</div>37</div>38<!--/ou-->39<!--zhong-->40<divid="zhong"class="panel">41<divclass="content">42<h2>中式風(fēng)格</h2>43<p>低調(diào)奢華中式風(fēng)格</p>44<p>以京城民宅的黑、白、灰色為基調(diào)，45將皇家住宅的紅色作為局部色彩，同一種系列搭配在一起很好看。</p>46<imgsrc="img/zhong.jpg"height="250">47</div>48</div>49<!--/zhong-->4.4.2定義CSS樣式1．定義全局樣式*{margin:0;padding:0;}body{width:100%;background:#b1e583;}2．定義導(dǎo)航欄樣式header{position:absolute;z-index:999;width:250px;top:100px;}headerh1{font-size:30px;font-weight:400;text-transform:uppercase;color:rgba(255,255,255,0.9);text-shadow:0px1px1pxrgba(0,0,0,0.3);padding:20px;background:#000;}nav{margin-top:20px;width:250px;display:block;list-style:none;z-index:3;}nava{color:#444;display:block;background:#fff;background:rgba(255,255,255,0.9);line-height:50px;padding:0px20px;box-shadow:1px1px2pxrgba(0,0,0,0.2);font-size:16px;margin-bottom:2px;text-align:center;text-decoration:none;}nava:hover{background:#ddd;}3．定義“地中海風(fēng)格”“現(xiàn)代簡約風(fēng)格”“歐式風(fēng)格”“中式風(fēng)格”版塊樣式.content{left:350px;top:0px;position:absolute;padding-bottom:30px;}.contenth2{font-size:110px;padding:10px0px20px0px;margin-top:52px;color:#fff;color:rgba(255,255,255,0.9);text-shadow:0px1px1pxrgba(0,0,0,0.3);}.contentp{font-size:18px;line-height:24px;color:#fff;background:black;padding:10px;margin:3px0px;width:640px;}.panel{width:100%;min-height:100%;position:absolute;background-color:#000;margin-left:-100%;z-index:2;-webkit-transition:all.6sease-in-out;-moz-transition:all.6sease-in-out;-o-transition:all.6sease-in-out;-ms-transition:all.6sease-in-out;transition:all.6sease-in-out;}.panel:target{margin-left:0%;background-color:#b1e583;}#di:target~#header#navigation#link-di,#xian:target~#header#navigation#link-xian,#ou:target~#header#navigation#link-ou,#zhong:target~#header#navigation#link-zhong{background:#000;color:#fff;}#works{padding:15px0px;overflow:hidden;width:700px;}#worksli{float:left;list-style:none;padding-right:10px;}#worksimg,.contentimg{box-shadow:1px1px2pxrgba(0,0,0,0.3);padding:12px;background:rgba(255,255,255,0.9);}4.5項(xiàng)目總結(jié)通過本項(xiàng)目的學(xué)習(xí)，讀者能夠理解過渡屬性，能夠控制動(dòng)畫的過渡時(shí)間、動(dòng)畫的展示速度等常見過渡效果，掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果，并掌握CSS3中的動(dòng)畫屬性，能夠熟練制作網(wǎng)頁中常見的動(dòng)畫效果。一、教案頭授課標(biāo)題項(xiàng)目5制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊

子項(xiàng)目一元素的浮動(dòng)屬性float

子項(xiàng)目二元素的清除浮動(dòng)屬性clear學(xué)時(shí)2地點(diǎn)授課班級課次第20次課授課時(shí)間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學(xué)目標(biāo)能力（技能）目標(biāo)知識目標(biāo)能夠?yàn)樵卦O(shè)置浮動(dòng)樣式能夠使用不同方法清除浮動(dòng)理解元素的浮動(dòng)熟悉清除浮動(dòng)的方法教學(xué)重點(diǎn)為元素設(shè)置浮動(dòng)樣式使用不同方法清除浮動(dòng)教學(xué)難點(diǎn)為元素設(shè)置浮動(dòng)樣式使用不同方法清除浮動(dòng)能力訓(xùn)練任務(wù)及案例項(xiàng)目5制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊

子項(xiàng)目一元素的浮動(dòng)屬性float

子項(xiàng)目二元素的清除浮動(dòng)屬性clear教學(xué)組織采用分組教學(xué)：在教師提問時(shí)，分組討論預(yù)期成果學(xué)生能完成課上指定任務(wù)，掌握教學(xué)內(nèi)容教學(xué)材料《響應(yīng)式Web開發(fā)教程》作業(yè)參考資料《響應(yīng)式Web開發(fā)教程》課后小結(jié)PAGE11PAGE1二、教案正頁設(shè)計(jì)要點(diǎn)：1、分教學(xué)準(zhǔn)備、教學(xué)實(shí)施兩大部分設(shè)計(jì)；2、統(tǒng)籌教學(xué)內(nèi)容、教學(xué)實(shí)施過程、方法手段、重難點(diǎn)解決策略、師生活動(dòng)、時(shí)間分配等要素；3、以“科學(xué)設(shè)計(jì)、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學(xué)準(zhǔn)備一、教學(xué)條件：場地：帶有多媒體設(shè)備并可上網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室機(jī)器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學(xué)生完成資料的查找和搜集、指導(dǎo)學(xué)生完成學(xué)習(xí)任務(wù)，完成對學(xué)生的評價(jià)；給學(xué)生做操作演示，糾正學(xué)生在操作過程中不正確的操作。三、學(xué)生特點(diǎn)分析該班學(xué)生聰明好學(xué)，比較喜歡開放、自由的學(xué)習(xí)環(huán)境，但是學(xué)生學(xué)習(xí)的自信心不強(qiáng)，不善于獨(dú)立思考和探索問題.根據(jù)學(xué)生特點(diǎn),通過激發(fā)學(xué)生學(xué)習(xí)興趣,提倡學(xué)習(xí)獨(dú)立思考,帶問題學(xué)習(xí),努力培養(yǎng)學(xué)生自制能力,堅(jiān)定他們的學(xué)習(xí)毅力和自信心,實(shí)現(xiàn)本節(jié)課的重點(diǎn)能力目標(biāo)和素質(zhì)目標(biāo)。四、教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。五、重難點(diǎn)解決策略措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。六、課前準(zhǔn)備1、告知提前1天老師給學(xué)生布置本次課的教學(xué)任務(wù)，學(xué)生以小組為單位，預(yù)習(xí)課程內(nèi)容。2、學(xué)生分組將學(xué)生在教學(xué)中分成學(xué)習(xí)小組，強(qiáng)化學(xué)生的團(tuán)結(jié)合作意識，在每項(xiàng)個(gè)項(xiàng)目結(jié)束時(shí)，分組講解各組所設(shè)計(jì)的作品，讓每個(gè)同學(xué)都得到充分的訓(xùn)練。第二部分：教學(xué)過程（講解元素的浮動(dòng)屬性float、清除浮動(dòng)）復(fù)習(xí)上節(jié)課內(nèi)容一個(gè)盒子的寬（width）和高（height）均為200px，左內(nèi)邊距為50px，同時(shí)盒子有3px的邊框，請問這個(gè)盒子的總寬度是多少？本課時(shí)內(nèi)容學(xué)習(xí)初學(xué)者在設(shè)計(jì)一個(gè)頁面時(shí)，通常會按照默認(rèn)的排版方式，將頁面中的元素從上到下一一羅列，這樣的布局制作出來的頁面看起來呆板、不美觀。其實(shí)，通過元素“浮動(dòng)”可以使頁面中的元素按照左、中、右的結(jié)構(gòu)進(jìn)行排版。那么，什么是“元素的浮動(dòng)”，以及如何設(shè)置元素的浮動(dòng)呢？知識點(diǎn)講解總結(jié)知識點(diǎn)教師和學(xué)生一起總結(jié)在案例中涉及到的知識點(diǎn)，主要包括“元素的浮動(dòng)屬性float”等。講解“元素的浮動(dòng)屬性float”（1）教師通過PPT對網(wǎng)頁中常見的元素浮動(dòng)效果進(jìn)行展示。（2）教師通過PPT對“浮動(dòng)”的概念及基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對“浮動(dòng)”的常用屬性—左浮動(dòng)、右浮動(dòng)進(jìn)行講解，并進(jìn)行代碼演示。（4）教師指出對元素應(yīng)用“浮動(dòng)”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“清除浮動(dòng)”（1）教師對元素的浮動(dòng)會對其他元素產(chǎn)生影響，并進(jìn)行代碼演示。（2）教師對分別對“使用空標(biāo)記清除浮動(dòng)”、“使用overflow屬性清除浮動(dòng)”以及“使用after偽對象清除浮動(dòng)”的方法及應(yīng)用范圍進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對比“使用空標(biāo)記清除浮動(dòng)”、“使用overflow屬性清除浮動(dòng)”以及“使用after偽對象清除浮動(dòng)”的異同，并分析其優(yōu)缺點(diǎn)。（4）教師分別指出清除元素浮動(dòng)時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。說明：在網(wǎng)頁制作時(shí)可適時(shí)停下來，讓學(xué)生自行嘗試。小組之間可以協(xié)作討論，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：元素的浮動(dòng)屬性float、清除浮動(dòng)。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握如何給元素設(shè)置浮動(dòng)屬性，并能夠清除浮動(dòng)元素帶來的影響。本課時(shí)內(nèi)容學(xué)習(xí)當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)，內(nèi)容就會溢出，這時(shí)如果想要規(guī)范溢出內(nèi)容的顯示方式，就需要使用CSS中的overflow屬性。那么，請同學(xué)們討論下：overflow屬性的屬性值有哪些？各個(gè)屬性值有什么作用？知識點(diǎn)講解講解“overflow屬性”（1）教師通過PPT對“overflow屬性”的作用進(jìn)行講解。（2）教師對“overflow屬性”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對“overflow屬性”的四個(gè)常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）教師指出應(yīng)用“overflow屬性”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：overflow屬性。易錯(cuò)點(diǎn)：注意區(qū)分overflow不同屬性值的用法。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握overflow屬性的用法。一、教案頭授課標(biāo)題項(xiàng)目5制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊

子項(xiàng)目三元素的位置定位屬性

子項(xiàng)目四元素的類型轉(zhuǎn)換學(xué)時(shí)2地點(diǎn)授課班級課次第21次課授課時(shí)間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學(xué)目標(biāo)能力（技能）目標(biāo)知識目標(biāo)能夠?yàn)樵卦O(shè)置常見的定位模式掌握元素的定位教學(xué)重點(diǎn)元素的定位教學(xué)難點(diǎn)元素的定位能力訓(xùn)練任務(wù)及案例項(xiàng)目5制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊

子項(xiàng)目三元素的位置定位屬性

子項(xiàng)目四元素的類型轉(zhuǎn)換教學(xué)組織采用分組教學(xué)：在教師提問時(shí)，分組討論預(yù)期成果學(xué)生能完成課上指定任務(wù)，掌握教學(xué)內(nèi)容教學(xué)材料《響應(yīng)式Web開發(fā)教程》作業(yè)參考資料《響應(yīng)式Web開發(fā)教程》課后小結(jié)PAGE5PAGE1二、教案正頁設(shè)計(jì)要點(diǎn)：1、分教學(xué)準(zhǔn)備、教學(xué)實(shí)施兩大部分設(shè)計(jì)；2、統(tǒng)籌教學(xué)內(nèi)容、教學(xué)實(shí)施過程、方法手段、重難點(diǎn)解決策略、師生活動(dòng)、時(shí)間分配等要素；3、以“科學(xué)設(shè)計(jì)、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學(xué)準(zhǔn)備一、教學(xué)條件：場地：帶有多媒體設(shè)備并可上網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室機(jī)器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學(xué)生完成資料的查找和搜集、指導(dǎo)學(xué)生完成學(xué)習(xí)任務(wù)，完成對學(xué)生的評價(jià)；給學(xué)生做操作演示，糾正學(xué)生在操作過程中不正確的操作。三、學(xué)生特點(diǎn)分析該班學(xué)生聰明好學(xué)，比較喜歡開放、自由的學(xué)習(xí)環(huán)境，但是學(xué)生學(xué)習(xí)的自信心不強(qiáng)，不善于獨(dú)立思考和探索問題.根據(jù)學(xué)生特點(diǎn),通過激發(fā)學(xué)生學(xué)習(xí)興趣,提倡學(xué)習(xí)獨(dú)立思考,帶問題學(xué)習(xí),努力培養(yǎng)學(xué)生自制能力,堅(jiān)定他們的學(xué)習(xí)毅力和自信心,實(shí)現(xiàn)本節(jié)課的重點(diǎn)能力目標(biāo)和素質(zhì)目標(biāo)。四、教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。五、重難點(diǎn)解決策略措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。六、課前準(zhǔn)備1、告知提前1天老師給學(xué)生布置本次課的教學(xué)任務(wù)，學(xué)生以小組為單位，預(yù)習(xí)課程內(nèi)容。2、學(xué)生分組將學(xué)生在教學(xué)中分成學(xué)習(xí)小組，強(qiáng)化學(xué)生的團(tuán)結(jié)合作意識，在每項(xiàng)個(gè)項(xiàng)目結(jié)束時(shí)，分組講解各組所設(shè)計(jì)的作品，讓每個(gè)同學(xué)都得到充分的訓(xùn)練。第二部分：教學(xué)過程（講解元素的定位屬性、靜態(tài)定位、相對定位、絕對定位、固定定位、z-index層疊等級屬性）復(fù)習(xí)上節(jié)課內(nèi)容1、下列樣式代碼中，可實(shí)現(xiàn)元素的溢出內(nèi)容被修剪，且被修剪的內(nèi)容不可見的是（）。A、 overflow:visible;B、 overflow:hidden;C、 overflow:auto;D、 overflow:scroll;本課時(shí)內(nèi)容學(xué)習(xí)元素的定位方式包括多種，例如：靜態(tài)定位、相對定位、絕對定位、固定定位等。那么，請同學(xué)們討論下：什么是“相對定位”？相對定位是將元素相對于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對位置。對元素設(shè)置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。知識點(diǎn)講解講解“元素的定位屬性”（1）教師和學(xué)生互動(dòng)：制作網(wǎng)頁時(shí)，如果希望元素出現(xiàn)在某個(gè)特定的位置，就需要使用定位屬性對元素進(jìn)行精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。下面，將進(jìn)行具體講解。（2）教師分別針對“定位模式”和“邊偏移”進(jìn)行詳細(xì)講解。（3）教師對“定位模式”的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（4）教師指出position屬性的四個(gè)常用值，并進(jìn)行分析。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“靜態(tài)定位”（1）教師展示PPT對“靜態(tài)定位”的概念進(jìn)行講解。。（2）教師針對“靜態(tài)定位”進(jìn)行詳細(xì)講解，并進(jìn)行代碼演示。（3）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“相對定位”（1）教師展示PPT對“相對定位”的概念進(jìn)行講解。（2）教師針對“相對定位”進(jìn)行詳細(xì)講解，并進(jìn)行代碼演示。（3）教師分析“相對定位”的用法及顯示效果，對比其和“靜態(tài)定位”的區(qū)別與聯(lián)系。（4）教師指出應(yīng)用“相對定位”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“絕對定位”（1）教師展示PPT對“絕對定位”的概念進(jìn)行講解。（2）教師針對“絕對定位”進(jìn)行詳細(xì)講解，并進(jìn)行代碼演示。（3）教師分析“絕對定位”的用法及顯示效果，對比其和“靜態(tài)定位”以及“相對定位”的區(qū)別與聯(lián)系。（4）教師指出應(yīng)用“絕對定位”時(shí)需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“固定定位”（1）教師展示PPT對“固定定位”的概念進(jìn)行講解。（2）教師針對“固定定位”進(jìn)行詳細(xì)講解，并進(jìn)行代碼演示。（3）教師分析“固定定位”的用法及顯示效果，對比其和“靜態(tài)定位”、“相對定位”以及“絕對定位”的區(qū)別與聯(lián)系。（4）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“z-index層疊等級屬性”（1）教師和學(xué)生互動(dòng)：當(dāng)對多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會發(fā)生重疊，那么，怎樣解決這個(gè)問題呢？（2）教師展示PPT對“z-index層疊等級屬性”的用法進(jìn)行說明。（3）教師針對“z-index層疊等級屬性”進(jìn)行詳細(xì)講解，并進(jìn)行代碼演示。（4）教師指出“z-index層疊等級屬性”需要注意的問題，并給予解答。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：相對定位、絕對定位。易錯(cuò)點(diǎn)：注意區(qū)分相對定位與絕對定位的用法。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握如何使用定位屬性控制元素的位置，以及z-index層疊等級屬性控制元素的堆疊順序。本課時(shí)內(nèi)容學(xué)習(xí)在HTML中，元素分為塊元素和行內(nèi)元素。具體如下：塊元素塊元素在頁面中以區(qū)域塊的形式出現(xiàn)，其特點(diǎn)是，每個(gè)塊元素通常都會獨(dú)自占據(jù)一整行或多整行，可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)記是最典型的塊元素。行內(nèi)元素行內(nèi)元素也稱內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點(diǎn)是，不必在新的一行開始，同時(shí)，也不強(qiáng)迫其他的元素在新的一行顯示。一個(gè)行內(nèi)元素通常會和它前后的其他行內(nèi)元素顯示在同一行中，它們不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。常見的行內(nèi)元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>標(biāo)記是最典型的行內(nèi)元素。知識點(diǎn)講解講解“元素的類型”（1）教師和學(xué)生互動(dòng)：HTML標(biāo)記語言提供了豐富的標(biāo)記，用于組織頁面結(jié)構(gòu)。為了使頁面結(jié)構(gòu)的組織更加輕松、合理，HTML標(biāo)記被定義成了不同的類型，一般分為塊標(biāo)記和行內(nèi)標(biāo)記，也稱塊元素和行內(nèi)元素。下面，我們開始學(xué)習(xí)塊元素和行內(nèi)元素。（2）教師展示PPT對“塊元素和行內(nèi)元素”的概念及特點(diǎn)進(jìn)行說明。（3）教師分別對“塊元素和行內(nèi)元素”進(jìn)行講解，并進(jìn)行代碼演示。（4）教師列舉常見的塊元素和行內(nèi)元素，并對比其不同。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“<span>標(biāo)記”（1）教師和學(xué)生互動(dòng)：在上面的小節(jié)中，我們已經(jīng)學(xué)習(xí)了<div>標(biāo)記，<div>標(biāo)記是典型的塊標(biāo)記。下面，我們學(xué)習(xí)一個(gè)典型的行內(nèi)標(biāo)記—<span>標(biāo)記。（2）教師展示PPT對<span>標(biāo)記的概念及特點(diǎn)進(jìn)行說明。（3）教師對<span>標(biāo)記的使用方法進(jìn)行講解，并進(jìn)行代碼演示。（4）教師對比<span>標(biāo)記和<div>標(biāo)記的異同，并指出使用<span>標(biāo)記布局時(shí)需要注意的問題。（5）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“元素的轉(zhuǎn)換”（1）教師和學(xué)生互動(dòng)：我們知道，網(wǎng)頁是由多個(gè)塊元素和行內(nèi)元素構(gòu)成的盒子排列而成的，而HTML元素分為塊元素和行內(nèi)元素。如果希望行內(nèi)元素具有塊元素的某些特性，例如可以設(shè)置寬高，或者需要塊元素具有行內(nèi)元素的某些特性，例如不獨(dú)占一行排列，那么，需要怎么做呢？其實(shí)，在CSS中使用display屬性可以對元素的類型進(jìn)行轉(zhuǎn)換。（2）教師展示PPT對“display屬性”及其常用的屬性值進(jìn)行展示。（3）教師對“display屬性”的使用方法進(jìn)行講解，并進(jìn)行代碼演示。（4）教師對比“display屬性”不同屬性值顯示的不同效果，并進(jìn)行總結(jié)。（5）教師指出使用“display屬性”轉(zhuǎn)換元素類型時(shí)需要注意的問題，并給與解答。（6）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：元素的轉(zhuǎn)換。易錯(cuò)點(diǎn)：注意區(qū)分行內(nèi)元素和塊元素。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地區(qū)分元素的類型，以及如何進(jìn)行元素的轉(zhuǎn)換等知識點(diǎn)。PAGE4一、教案頭授課標(biāo)題子項(xiàng)目五綜合項(xiàng)目——制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊學(xué)時(shí)2地點(diǎn)授課班級課次第22次課授課時(shí)間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學(xué)目標(biāo)能力（技能）目標(biāo)知識目標(biāo)能夠運(yùn)用浮動(dòng)與定位解決實(shí)際問題掌握浮動(dòng)與定位的方法教學(xué)重點(diǎn)浮動(dòng)與定位的方法教學(xué)難點(diǎn)浮動(dòng)與定位的方法能力訓(xùn)練任務(wù)及案例子項(xiàng)目五綜合項(xiàng)目——制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊教學(xué)組織采用分組教學(xué)：在教師提問時(shí)，分組討論預(yù)期成果學(xué)生能完成課上指定任務(wù)，掌握教學(xué)內(nèi)容教學(xué)材料《響應(yīng)式Web開發(fā)教程》作業(yè)作業(yè)六浮動(dòng)與定位階段案例參考資料《響應(yīng)式Web開發(fā)教程》課后小結(jié)PAGE3PAGE1二、教案正頁設(shè)計(jì)要點(diǎn)：1、分教學(xué)準(zhǔn)備、教學(xué)實(shí)施兩大部分設(shè)計(jì)；2、統(tǒng)籌教學(xué)內(nèi)容、教學(xué)實(shí)施過程、方法手段、重難點(diǎn)解決策略、師生活動(dòng)、時(shí)間分配等要素；3、以“科學(xué)設(shè)計(jì)、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學(xué)準(zhǔn)備一、教學(xué)條件：場地：帶有多媒體設(shè)備并可上網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室機(jī)器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學(xué)生完成資料的查找和搜集、指導(dǎo)學(xué)生完成學(xué)習(xí)任務(wù)，完成對學(xué)生的評價(jià)；給學(xué)生做操作演示，糾正學(xué)生在操作過程中不正確的操作。三、學(xué)生特點(diǎn)分析該班學(xué)生聰明好學(xué)，比較喜歡開放、自由的學(xué)習(xí)環(huán)境，但是學(xué)生學(xué)習(xí)的自信心不強(qiáng)，不善于獨(dú)立思考和探索問題.根據(jù)學(xué)生特點(diǎn),通過激發(fā)學(xué)生學(xué)習(xí)興趣,提倡學(xué)習(xí)獨(dú)立思考,帶問題學(xué)習(xí),努力培養(yǎng)學(xué)生自制能力,堅(jiān)定他們的學(xué)習(xí)毅力和自信心,實(shí)現(xiàn)本節(jié)課的重點(diǎn)能力目標(biāo)和素質(zhì)目標(biāo)。四、教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。五、重難點(diǎn)解決策略措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。六、課前準(zhǔn)備1、告知提前1天老師給學(xué)生布置本次課的教學(xué)任務(wù)，學(xué)生以小組為單位，預(yù)習(xí)課程內(nèi)容。2、學(xué)生分組將學(xué)生在教學(xué)中分成學(xué)習(xí)小組，強(qiáng)化學(xué)生的團(tuán)結(jié)合作意識，在每項(xiàng)個(gè)項(xiàng)目結(jié)束時(shí)，分組講解各組所設(shè)計(jì)的作品，讓每個(gè)同學(xué)都得到充分的訓(xùn)練。第二部分：教學(xué)過程復(fù)習(xí)上節(jié)課內(nèi)容在上一節(jié)中，我們知道HTML元素主要分為塊元素和行內(nèi)元素兩部分，并且通過display屬性可以對元素的類型進(jìn)行轉(zhuǎn)換。那么，請大家回顧下：display屬性常用的屬性值有哪些？并說明其含義。本課時(shí)內(nèi)容學(xué)習(xí)案例講解案例描述本章前幾節(jié)重點(diǎn)講解了元素的浮動(dòng)、定位、以及清除浮動(dòng)。案例分析分析構(gòu)成元素，將其拆解為幾個(gè)部分，分析各部分使用了哪些HTML標(biāo)記及應(yīng)用了哪些CSS樣式。案例實(shí)現(xiàn)教師帶領(lǐng)學(xué)生分步驟地進(jìn)行網(wǎng)頁制作，通過分析效果圖、制作頁面結(jié)構(gòu)、定義CSS樣式等步驟完成頁面的制作，并指出其中需要注意的事項(xiàng)。階段小結(jié)小結(jié)重點(diǎn)：元素的浮動(dòng)、元素的定位、元素的類型與轉(zhuǎn)換。易錯(cuò)點(diǎn)：注意區(qū)分行內(nèi)元素和塊元素的區(qū)別。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，讓學(xué)生再制作一次“網(wǎng)頁焦點(diǎn)圖”。以此使學(xué)生更熟練地運(yùn)用浮動(dòng)和定位進(jìn)行網(wǎng)頁布局，掌握清除浮動(dòng)的幾種常用方法，理解元素的類型與轉(zhuǎn)換。（作品點(diǎn)評）教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評，指出代碼中容易出現(xiàn)bug的地方，并給與解答。一、教案頭授課標(biāo)題項(xiàng)目六制作視頻播放頁面

子項(xiàng)目一嵌入視頻

子項(xiàng)目二嵌入音頻學(xué)時(shí)2地點(diǎn)授課班級課次第23次課授課時(shí)間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學(xué)目標(biāo)能力（技能）目標(biāo)知識目標(biāo)能夠在HTML5頁面中添加視頻、音頻掌握HTML5中視頻、音頻的相關(guān)屬性教學(xué)重點(diǎn)在HTML5頁面中添加視頻、音頻教學(xué)難點(diǎn)在HTML5頁面中添加視頻、音頻能力訓(xùn)練任務(wù)及案例項(xiàng)目八多媒體技術(shù)教學(xué)組織采用分組教學(xué)：在教師提問時(shí)，分組討論預(yù)期成果學(xué)生能完成課上指定任務(wù)，掌握教學(xué)內(nèi)容教學(xué)材料《響應(yīng)式Web開發(fā)教程》作業(yè)參考資料《響應(yīng)式Web開發(fā)教程》課后小結(jié)PAGE4PAGE1二、教案正頁設(shè)計(jì)要點(diǎn)：1、分教學(xué)準(zhǔn)備、教學(xué)實(shí)施兩大部分設(shè)計(jì)；2、統(tǒng)籌教學(xué)內(nèi)容、教學(xué)實(shí)施過程、方法手段、重難點(diǎn)解決策略、師生活動(dòng)、時(shí)間分配等要素；3、以“科學(xué)設(shè)計(jì)、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學(xué)準(zhǔn)備一、教學(xué)條件：場地：帶有多媒體設(shè)備并可上網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室機(jī)器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學(xué)生完成資料的查找和搜集、指導(dǎo)學(xué)生完成學(xué)習(xí)任務(wù)，完成對學(xué)生的評價(jià)；給學(xué)生做操作演示，糾正學(xué)生在操作過程中不正確的操作。三、學(xué)生特點(diǎn)分析該班學(xué)生聰明好學(xué)，比較喜歡開放、自由的學(xué)習(xí)環(huán)境，但是學(xué)生學(xué)習(xí)的自信心不強(qiáng)，不善于獨(dú)立思考和探索問題.根據(jù)學(xué)生特點(diǎn),通過激發(fā)學(xué)生學(xué)習(xí)興趣,提倡學(xué)習(xí)獨(dú)立思考,帶問題學(xué)習(xí),努力培養(yǎng)學(xué)生自制能力,堅(jiān)定他們的學(xué)習(xí)毅力和自信心,實(shí)現(xiàn)本節(jié)課的重點(diǎn)能力目標(biāo)和素質(zhì)目標(biāo)。四、教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。五、重難點(diǎn)解決策略措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。六、課前準(zhǔn)備1、告知提前1天老師給學(xué)生布置本次課的教學(xué)任務(wù)，學(xué)生以小組為單位，預(yù)習(xí)課程內(nèi)容。2、學(xué)生分組將學(xué)生在教學(xué)中分成學(xué)習(xí)小組，強(qiáng)化學(xué)生的團(tuán)結(jié)合作意識，在每項(xiàng)個(gè)項(xiàng)目結(jié)束時(shí)，分組講解各組所設(shè)計(jì)的作品，讓每個(gè)同學(xué)都得到充分的訓(xùn)練。第二部分：教學(xué)過程（講解HTML5多媒體的特性、視頻和音頻編解碼器、多媒體的格式、支持視頻和音頻的瀏覽器）復(fù)習(xí)上節(jié)課內(nèi)容我們學(xué)習(xí)了表單的相關(guān)元素及其屬性和CSS控制表單樣式。那么，表單的屬性都有那些呢？本課時(shí)內(nèi)容學(xué)習(xí)支持視頻和音頻的瀏覽器有哪些？瀏覽器支持版本IE9.0及以上版本Frefox3.5及以上版本Opear10.5及以上版本Chrome3.0及以上版本Safari3.2及以上版本知識點(diǎn)講解講解“HTML5多媒體的特性”（1）教師展示PPT對“HTML5多媒體的特性”進(jìn)行簡單介紹。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解“視頻和音頻編解碼器

”（1）教師展示PPT指出HTML5視頻和音頻編解碼器都有哪些。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解“多媒體的格式”（1）教師通過PPT分別講解“多媒體的格式”中音頻和視頻格式都有哪些。（2）教師展示PPT詳細(xì)介紹每一種音視頻格式。（3）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解“支持視頻和音頻的瀏覽器”（1）教師展示PPT指出支持HTML5視頻和音頻的瀏覽器都有哪些。（2）教師指出實(shí)際工作中，不同瀏覽器視頻的顯示效果有所不同。（3）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：支持視頻和音頻的瀏覽器。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生了解HTML5多媒體的特性、視頻和音頻編解碼器、多媒體的格式以及支持視頻和音頻的瀏覽器。（講解在HTML5中嵌入視頻、在HTML5中嵌入音頻、音視頻中的source元素、調(diào)用網(wǎng)頁多媒體文件）本課時(shí)內(nèi)容學(xué)習(xí)我們知道，在HTML5中通過video元素可嵌入視頻，為了進(jìn)一步優(yōu)化視頻的播放效果，video元素中通常還可以添加一些其他屬性。那么，video元素都有哪些屬性呢？屬性值描述autoplayautoplay當(dāng)頁面載入完成后自動(dòng)播放視頻。looploop視頻結(jié)束時(shí)重新開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。posterurl當(dāng)視頻緩沖不足時(shí)，該屬性值鏈接一個(gè)圖像，并將該圖像按照一定的比例顯示出來。知識點(diǎn)講解講解“在HTML5中嵌入視頻”（1）教師展示PPT對“在HTML5中嵌入視頻”的基本語法格式進(jìn)行講解。（2）教師對“在HTML5中嵌入視頻”的顯示效果通過代碼進(jìn)行演示。（3）教師展示PPT對video元素的常見屬性進(jìn)行詳細(xì)講解。（4）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“在HTML5中嵌入音頻”（1）教師展示PPT對“在HTML5中嵌入音頻”的基本語法格式進(jìn)行講解。（2）教師對“在HTML5中嵌入音頻”的顯示效果通過代碼進(jìn)行演示。（3）教師展示PPT對audio元素的常見屬性進(jìn)行詳細(xì)講解。（4）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“音視頻中的source元素”（1）教師展示PPT對“音視頻中的source元素”的用途進(jìn)行講解。（2）教師展示PPT對“音視頻中的source元素”的基本語法格式進(jìn)行講解。（3）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。講解“調(diào)用網(wǎng)頁多媒體文件”（1）教師概括描述“調(diào)用網(wǎng)頁多媒體文件”的兩種方法。（2）教師展示PPT對調(diào)用指定url地址的互聯(lián)網(wǎng)多媒體文件進(jìn)行講解，比較兩種方法的異同，并指出其優(yōu)缺點(diǎn)。（3）學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：在HTML5中嵌入視頻、在HTML5中嵌入音頻。鞏固練習(xí)鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握在HTML5中嵌入視頻、在HTML5中嵌入音頻、音視頻中的source元素、調(diào)用網(wǎng)頁多媒體文件等知識點(diǎn)。PAGE3PAGE1一、教案頭授課標(biāo)題項(xiàng)目七制作垃圾分類頁面子項(xiàng)目一視口

子項(xiàng)目二簡單媒體查詢學(xué)時(shí)2地點(diǎn)授課班級課次第24次課授課時(shí)間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學(xué)目標(biāo)能力（技能）目標(biāo)知識目標(biāo)能夠運(yùn)用媒體查詢解決實(shí)際問題掌握視口的概念；掌握簡單媒體查詢的方法教學(xué)重點(diǎn)視口、媒體查詢教學(xué)難點(diǎn)媒體查詢能力訓(xùn)練任務(wù)及案例項(xiàng)目七制作垃圾分類頁面子項(xiàng)目一視口

子項(xiàng)目二簡單媒體查詢教學(xué)組織采用分組教學(xué)：在教師提問時(shí)，分組討論預(yù)期成果學(xué)生能完成課上指定任務(wù)，掌握教學(xué)內(nèi)容教學(xué)材料《響應(yīng)式Web開發(fā)教程》作業(yè)參考資料《響應(yīng)式Web開發(fā)教程》課后小結(jié)二、教案正頁設(shè)計(jì)要點(diǎn)：1、分教學(xué)準(zhǔn)備、教學(xué)實(shí)施兩大部分設(shè)計(jì)；2、統(tǒng)籌教學(xué)內(nèi)容、教學(xué)實(shí)施過程、方法手段、重難點(diǎn)解決策略、師生活動(dòng)、時(shí)間分配等要素；3、以“科學(xué)設(shè)計(jì)、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學(xué)準(zhǔn)備一、教學(xué)條件：場地：帶有多媒體設(shè)備并可上網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室機(jī)器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學(xué)生完成資料的查找和搜集、指導(dǎo)學(xué)生完成學(xué)習(xí)任務(wù)，完成對學(xué)生的評價(jià)；給學(xué)生做操作演示，糾正學(xué)生在操作過程中不正確的操作。三、學(xué)生特點(diǎn)分析該班學(xué)生聰明好學(xué)，比較喜歡開放、自由的學(xué)習(xí)環(huán)境，但是學(xué)生學(xué)習(xí)的自信心不強(qiáng)，不善于獨(dú)立思考和探索問題.根據(jù)學(xué)生特點(diǎn),通過激發(fā)學(xué)生學(xué)習(xí)興趣,提倡學(xué)習(xí)獨(dú)立思考,帶問題學(xué)習(xí),努力培養(yǎng)學(xué)生自制能力,堅(jiān)定他們的學(xué)習(xí)毅力和自信心,實(shí)現(xiàn)本節(jié)課的重點(diǎn)能力目標(biāo)和素質(zhì)目標(biāo)。四、教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。五、重難點(diǎn)解決策略措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。六、課前準(zhǔn)備1、告知提前1天老師給學(xué)生布置本次課的教學(xué)任務(wù)，學(xué)生以小組為單位，預(yù)習(xí)課程內(nèi)容。2、學(xué)生分組將學(xué)生在教學(xué)中分成學(xué)習(xí)小組，強(qiáng)化學(xué)生的團(tuán)結(jié)合作意識，在每項(xiàng)個(gè)項(xiàng)目結(jié)束時(shí)，分組講解各組所設(shè)計(jì)的作品，讓每個(gè)同學(xué)都得到充分的訓(xùn)練。第二部分：教學(xué)過程復(fù)習(xí)上節(jié)課內(nèi)容怎樣插入音頻、視頻？本課時(shí)內(nèi)容學(xué)習(xí)隨著顯示屏幕越來越多樣，為了適應(yīng)顯示屏大小，響應(yīng)式設(shè)計(jì)也就應(yīng)運(yùn)而生。那么響應(yīng)式設(shè)計(jì)到底指的是什么呢？響應(yīng)式設(shè)計(jì)是指自動(dòng)識別屏幕寬度并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)，布局和展示的內(nèi)容可能會有所變動(dòng)。也就是說，做一個(gè)網(wǎng)站同時(shí)能兼容多個(gè)終端，為我們大大節(jié)省了資源。當(dāng)我們對移動(dòng)端進(jìn)行頁面適配時(shí)，我們首先應(yīng)該了解到視口，媒體查詢，以及百分比布局。知識點(diǎn)講解講解“視口”視口是用戶網(wǎng)頁的可視區(qū)域，它定義了瀏覽器能顯示內(nèi)容的屏幕區(qū)域。那么PC上的web頁面在移動(dòng)設(shè)備上打開是什么樣子的？在瀏覽器中訪問新浪首頁/，打開chrome開發(fā)者工具，本節(jié)中我們使用chrome自帶的移動(dòng)終端模擬器。點(diǎn)擊模擬器圖標(biāo)，打開chrome開發(fā)者工具中的模擬器，選擇一種手機(jī)型號，查看新浪首頁的手機(jī)視圖可以看到，網(wǎng)頁并沒有超出手機(jī)的屏幕，而是自動(dòng)縮放了。實(shí)際上，手機(jī)瀏覽器會把頁面放入到一個(gè)虛擬的視口（viewport）中，在渲染網(wǎng)頁的時(shí)候，比如它原本是顯示在寬980px的屏幕上的，那同樣的內(nèi)容被壓縮到一個(gè)很小的手機(jī)屏幕上，用戶要花好多時(shí)間放大屏幕，才能看清網(wǎng)頁上的內(nèi)容或與網(wǎng)頁交互。如果我們想要在更小的屏幕上顯示網(wǎng)頁，必須顯式地設(shè)置viewport。現(xiàn)代瀏覽器引進(jìn)了viewport這個(gè)metatag，讓網(wǎng)頁開發(fā)者來控制viewport的大小和縮放。講解“設(shè)置視口”一個(gè)常用的針對移動(dòng)網(wǎng)頁優(yōu)化過的頁面的viewportmeta標(biāo)簽大致如下：<metaname="viewport"content="width=device-width,initial-scale=1.0">在移動(dòng)端布局時(shí)，在meta標(biāo)簽中我們會將width設(shè)置成device-width，device-width一般是表示設(shè)備分辨率的寬度。viewportmeta標(biāo)簽一共有6個(gè)屬性，如表8-1所示：表8-1viewport的屬性說明屬性名稱屬性說明width設(shè)置viewport的寬度，默認(rèn)視口寬度，可以指定的一個(gè)值，或者特殊的值，如device-width為設(shè)備的寬度（單位為縮放為100%時(shí)的CSS的像素）。height設(shè)置viewport的高度，和width相對應(yīng)。initial-scale初始縮放比例，也即是當(dāng)頁面第一次load的時(shí)候縮放比例。maximum-scale允許用戶縮放到的最大比例。minimum-scale允許用戶縮放到的最小比例。user-scalable是否允許用戶進(jìn)行縮放，值為"no"或"yes",no代表不允許，yes代表允許講解“媒體查詢”在上一節(jié)中，我們使用視口來告訴瀏覽器，網(wǎng)頁要怎樣渲染在移動(dòng)端設(shè)備上。這里有一個(gè)問題，移動(dòng)端設(shè)備有各種各樣不同的尺寸，而且不同移動(dòng)端的設(shè)備下，在css文件中，1px所表示的物理像素的大小是不同的，因此通過一套樣式，無法實(shí)現(xiàn)各端的自適應(yīng)?？紤]到用戶在任何設(shè)備上的體驗(yàn)，那么能不