工學(xué)一體化課程教學(xué)課頁NO8課程學(xué)習(xí)任務(wù)項(xiàng)目八：利用CSS3制作網(wǎng)頁特效使用學(xué)材任課教師班級(jí)所屬專業(yè)實(shí)施地點(diǎn)實(shí)施日期總課時(shí)周課時(shí)學(xué)材處理采用一體化教學(xué)模式，以學(xué)生為主體，圍繞課程標(biāo)準(zhǔn)、以典型工作任務(wù)展開，知識(shí)點(diǎn)夠用、適用為原則，并配合相關(guān)教輔學(xué)習(xí)資料，同時(shí)根據(jù)學(xué)生特點(diǎn)自行設(shè)計(jì)的課后補(bǔ)充任務(wù)進(jìn)行強(qiáng)化實(shí)踐用。在輔助知識(shí)和技能點(diǎn)學(xué)習(xí)時(shí)加入一些思政元素（安全、心理健康教育等內(nèi)容在網(wǎng)頁內(nèi)容中）。任務(wù)分析本項(xiàng)目利用CSS3的變形、過渡、動(dòng)畫等功能，結(jié)合盒子模型相關(guān)知識(shí)制作一個(gè)“旋轉(zhuǎn)的3D相冊(cè)”頁面。根據(jù)本項(xiàng)目效果可以看出，網(wǎng)頁由一個(gè)大盒子構(gòu)成，其中包含了一個(gè)承載相冊(cè)圖片的容器，結(jié)構(gòu)很簡(jiǎn)單。通過本項(xiàng)目的動(dòng)態(tài)效果（讀者可自行運(yùn)行代碼進(jìn)行查看）可以看出，該3D旋轉(zhuǎn)相冊(cè)在旋轉(zhuǎn)過程中可以看到前、后、左、右、上的圖片，所以在定義樣式時(shí)，首先要定義盒子（box）本身以及承載相冊(cè)的容器（container）的樣式，然后定義容器（container）及鼠標(biāo)懸停時(shí)的旋轉(zhuǎn)動(dòng)畫效果，③接著對(duì)各個(gè)可看到圖片的方向面定義公共樣式（.side），并采用絕對(duì)定位，④最后分別對(duì)各個(gè)可看到圖片的方向面定義變形及旋轉(zhuǎn)效果。值得注意的是，所有關(guān)于動(dòng)畫的樣式定義必須考慮瀏覽器的兼容情況。教學(xué)目標(biāo)（包含知識(shí)與技能、過程與方法、情感態(tài)度與價(jià)值觀等三個(gè)目標(biāo)）知識(shí)與技能：理解過渡屬性，能夠控制過渡時(shí)間、動(dòng)畫快慢等常見過渡效果。掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果。掌握CSS3中的動(dòng)畫，能夠熟練制作網(wǎng)頁中常見的動(dòng)畫效果。過程與方法：1.通過自主探究、小組討論、與老師溝通等制作網(wǎng)頁相關(guān)模塊，培養(yǎng)學(xué)生協(xié)作解決問題的能力和主動(dòng)性以及與人交流合作的能力；2.通過教師對(duì)作品的點(diǎn)評(píng)與反饋，理解CSS定義要點(diǎn)，培養(yǎng)學(xué)生總結(jié)歸納能力。情感態(tài)度與價(jià)值觀：1.學(xué)習(xí)資料中融入思政內(nèi)容，注重加強(qiáng)對(duì)學(xué)生的世界觀、人生觀和價(jià)值觀的教育。2.在制作網(wǎng)頁的過程中，培養(yǎng)學(xué)生探索、創(chuàng)新、實(shí)踐、協(xié)作的職業(yè)素養(yǎng)。3.通過學(xué)習(xí)編寫代碼，培養(yǎng)學(xué)生的信息素養(yǎng)和邏輯思維能力。4.通過整個(gè)項(xiàng)目的完成，讓學(xué)生感受HTML5與CSS3的神奇魅力，培養(yǎng)學(xué)生積極的學(xué)習(xí)態(tài)度。教學(xué)重點(diǎn)教學(xué)難點(diǎn)重點(diǎn)及突出策略：教學(xué)重點(diǎn)：過渡、2D轉(zhuǎn)換、3D轉(zhuǎn)換、動(dòng)畫。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及解決方法：教學(xué)難點(diǎn)：過渡、3D轉(zhuǎn)換、動(dòng)畫。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方法項(xiàng)目教學(xué)，小組討論，一體化教學(xué)教學(xué)條件準(zhǔn)備計(jì)算機(jī)、Dreamweavercs6網(wǎng)頁制作軟件、教學(xué)PPT教學(xué)組織（簡(jiǎn)述并備注每一流程所需課時(shí)）一、明確任務(wù)教師給定任務(wù)，引導(dǎo)學(xué)生思考，明確任務(wù)要求（0.5課時(shí)）二、制定工作計(jì)劃（4課時(shí)）分析任務(wù)后確定以下工作計(jì)劃教師引導(dǎo)學(xué)習(xí)，學(xué)生所需知識(shí)點(diǎn)學(xué)習(xí)；按任務(wù)要求，制定工作計(jì)劃三、計(jì)劃實(shí)施（6課時(shí)）能正確使用所需的知識(shí)：CSS3中的變形屬性、CSS動(dòng)畫等，并按各模塊效果圖進(jìn)行代碼編寫，并實(shí)現(xiàn)效果。四、檢查驗(yàn)收（0.5課時(shí)）檢查任務(wù)完成情況，正確填寫檢查報(bào)告五、總結(jié)反思與評(píng)價(jià)（1課時(shí)）以小組為單位，用演示文稿向全班展示、匯報(bào)制作成果；教師針對(duì)各組任務(wù)工作過程及匯報(bào)情況分別作評(píng)價(jià)；工作過程回顧及總結(jié)。教學(xué)反思教學(xué)實(shí)施（次頁）教學(xué)環(huán)節(jié)教學(xué)內(nèi)容學(xué)生活動(dòng)教師活動(dòng)評(píng)價(jià)點(diǎn)資源用時(shí)一明確工作任務(wù)工作任務(wù)的閱讀與分析；明確工時(shí)、工作內(nèi)容和人員分組；1、接收任務(wù)并進(jìn)行閱讀分析；2、根據(jù)任務(wù)要求進(jìn)行人員分工；3、與小組成員討論網(wǎng)頁中所需效果等要求；1、發(fā)放任務(wù)并說明要求；2、指導(dǎo)各小組進(jìn)行任務(wù)分工；3、察看、記錄學(xué)生小組討論情況及所存問題；4、引導(dǎo)學(xué)生討論所存實(shí)際問題（分工明確性）5.檢查學(xué)生填寫工作頁的正確性1、是否明確任務(wù)、工時(shí)；2、小組任務(wù)分工是否合理；3、對(duì)任務(wù)理解、表達(dá)是否到位；4、工作頁完成是否到位；5、小組積極性。工作任務(wù)0.5課時(shí)二制定工作計(jì)劃CSS3中的變形和移動(dòng)屬性、CSS動(dòng)畫的應(yīng)用方法學(xué)習(xí)設(shè)置各表單元素CSS樣式的方法、步驟及注意事項(xiàng)學(xué)習(xí)選擇合適的CSS選擇器及CSS樣式屬性工作計(jì)劃的制定查閱教輔學(xué)習(xí)CSS3中的變形和移動(dòng)屬性、CSS動(dòng)畫的應(yīng)用案例分析效果圖，劃分模塊結(jié)構(gòu)學(xué)習(xí)跟效果圖各模塊有關(guān)設(shè)計(jì)制作方法討論編寫代碼步驟制定設(shè)計(jì)計(jì)劃1．巡查、記錄學(xué)生查閱教輔自主學(xué)習(xí)情況，并給以必要的引導(dǎo)；2.組織學(xué)生討論，解決遇到的問題、確定編寫代碼的步驟3.指導(dǎo)學(xué)生制定工作計(jì)劃1.描述CSS3中的變形和移動(dòng)屬性、CSS動(dòng)畫的應(yīng)用方法是否準(zhǔn)確2.能否準(zhǔn)確描述CSS3中的變形和移動(dòng)屬性、CSS動(dòng)畫的關(guān)鍵技術(shù)點(diǎn)3.選用標(biāo)記是否合理4.回答問題是否準(zhǔn)確。5.語言表達(dá)是否規(guī)范。工作頁、計(jì)劃表、實(shí)施進(jìn)度表、教輔4課時(shí)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容學(xué)生活動(dòng)教師活動(dòng)評(píng)價(jià)點(diǎn)資源課時(shí)三實(shí)施工作計(jì)劃HTML結(jié)構(gòu)分析根據(jù)效果圖進(jìn)行結(jié)構(gòu)分析樣式分析根據(jù)效果圖進(jìn)行CSS樣式分析搭建結(jié)構(gòu)編寫HTML結(jié)構(gòu)代碼定義樣式利用CSS選擇器，結(jié)合盒子模型相關(guān)屬性定義不同模塊樣式5.調(diào)試網(wǎng)頁效果根據(jù)學(xué)習(xí)到的HTML5用法搭建各模塊框架根據(jù)所學(xué)CSS知識(shí)設(shè)置相應(yīng)模塊樣式效果遇到問題時(shí)小組成員互相討論網(wǎng)頁整體調(diào)試運(yùn)行巡查、記錄學(xué)生在編寫代碼過程中遇到的問題及是否運(yùn)用到位；與學(xué)生交流，討論解決實(shí)施中遇到的小組無法解決的問題；檢查學(xué)生編寫制作的各模塊是否符合效果圖標(biāo)準(zhǔn)，并給予適當(dāng)引導(dǎo)與提示。各模塊框架是否合理；HTML5標(biāo)記應(yīng)用、CSS樣式設(shè)置是否規(guī)范；調(diào)試解決問題的能力；小組協(xié)作解決問題的積極性。工作頁、教輔、圖片素材6課時(shí)四檢查驗(yàn)收根據(jù)效果圖檢查網(wǎng)頁的完成效果是否存在不合理HTML5標(biāo)記使用。按模塊效果逐一驗(yàn)證以小組為單位先檢查與原效果對(duì)比，查找問題小組組長(zhǎng)互查各小組制作情況，填寫驗(yàn)收?qǐng)?bào)告巡查、記錄1．驗(yàn)收單的填寫是否正確2．驗(yàn)收內(nèi)容是否全面3.存在的問題工作頁（含驗(yàn)收?qǐng)?bào)告）0.5課時(shí)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容學(xué)生活動(dòng)教師活動(dòng)評(píng)價(jià)點(diǎn)資源課時(shí)五總結(jié)反思與評(píng)價(jià)個(gè)人、小組評(píng)價(jià)教師評(píng)價(jià)工作過程回顧及總結(jié)評(píng)價(jià)與分析以小組為單位，用演示文稿向全班展示、匯報(bào)制作成果。在展示的過程中，以小組為單位進(jìn)行評(píng)價(jià)規(guī)范撰寫總結(jié)。1）工作的步驟、方法，2）遇到的問題，處理的辦法3）收獲及獲得的途徑。3.完成自我評(píng)價(jià)、小組評(píng)價(jià)，填寫學(xué)習(xí)任