任務(wù)9運(yùn)用特殊效果

1、知啊歌網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)單元設(shè)計(jì)淮安信息職業(yè)技術(shù)學(xué)院網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)單元設(shè)計(jì)單元9運(yùn)用特殊效果授課教師：網(wǎng)頁設(shè)計(jì)與制作授課班級：學(xué)時(shí)：8教學(xué)條件實(shí)訓(xùn)室、HBulider或Dreamweaver、投影設(shè)備、廣播軟件、互聯(lián)網(wǎng)絡(luò)教學(xué)素材教材、課件、實(shí)訓(xùn)項(xiàng)目單、授課錄像、案例庫、教學(xué)網(wǎng)站等教學(xué)目標(biāo)設(shè)計(jì)知識(shí)目標(biāo)：(1)掌握CSS3多列布局的方法；(2)掌握CSS3常用的transform轉(zhuǎn)換方法；(3)掌握CSS3中transitions過渡的使用方法；(4)掌握animation動(dòng)畫的使用方法。能力目標(biāo)：(1)能結(jié)合根據(jù)頁面的需要選擇恰當(dāng)?shù)腃SS特效；(2)能根據(jù)表單貝囿效果，設(shè)itCSS3

2、貝囿與動(dòng)回效果，編寫CSS表單的樣式。任務(wù)描述本任務(wù)就是使用HTML冰制作新生報(bào)至ij時(shí)從火車站到信息學(xué)院的交通示意動(dòng)畫效果。教學(xué)內(nèi)容(1) CSS3多列布局的方法；(2) CSS3常用的transform轉(zhuǎn)換方法；(3) CSS3中transitions過渡的使用方法；(4) animation動(dòng)回的使用方法。重點(diǎn)：(1) CSS3多列布局的方法；(2) CSS3常用的transform轉(zhuǎn)換方法；(3) CSS3中transitions過渡的使用方法；(4) animation動(dòng)回的使用方法。難點(diǎn)：(1) CSS3中transitions過渡的使用方法；(2) animation動(dòng)畫的使用方

3、法。任務(wù)分析與實(shí)現(xiàn)(1)任務(wù)分析；(2)任務(wù)實(shí)現(xiàn)代碼。第1頁共5頁教學(xué)過程設(shè)計(jì)9.1多列布局與transform轉(zhuǎn)換方法(學(xué)時(shí)數(shù)：2)主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動(dòng)任務(wù)描述本任務(wù)就是使用HTML冰制作新生報(bào)到時(shí)從火車站到信息學(xué)院的交通示意動(dòng)畫效果。講授法多媒體教師：分析任務(wù)學(xué)生：信息交流知識(shí)講授講解：CSS3多列J布局語法：columns:column-width|column-count;講授法多媒體課件演示教師：講授知識(shí)學(xué)生：邊聽邊練學(xué)生實(shí)踐創(chuàng)建一個(gè)新頁面'實(shí)踐進(jìn)行CSS3多列布局實(shí)驗(yàn)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)知識(shí)講授講解transform簡介語法：tran

4、sform:none|transform-function;常用的transform變形方法：移動(dòng)方法translate。縮放方法scale()講授法多媒體課件演示教師：講授知識(shí)學(xué)生：邊聽邊練學(xué)生實(shí)踐創(chuàng)建一個(gè)新頁面進(jìn)行實(shí)踐變換的移動(dòng)方法translate。、縮放方法scale()。實(shí)驗(yàn)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)知識(shí)講授講解旋轉(zhuǎn)方法rotate()、斜切方法skew()、更改變換的中心點(diǎn)transform-origin講授法多媒體課件演示教師：講授知識(shí)學(xué)生：邊聽邊練學(xué)生實(shí)踐創(chuàng)建一個(gè)新頁面進(jìn)體驗(yàn)旋轉(zhuǎn)方法rotate。、斜切方法skew()、更改變換的中心點(diǎn)transform-orig

5、in。實(shí)驗(yàn)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)課堂總結(jié)多列布局基本的變化方法教師講解多媒體課件演示整理筆記引導(dǎo)創(chuàng)新任務(wù)拓展瀏覽清華大學(xué)網(wǎng)站頁面，人認(rèn)識(shí)HMTL5中的結(jié)構(gòu)標(biāo)簽。教師指導(dǎo)學(xué)生自學(xué)多媒體布置作業(yè)提出要求角網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)單元設(shè)計(jì)淮安信息職業(yè)技術(shù)學(xué)院第2頁共5頁教學(xué)過程設(shè)計(jì)9.23D變換與過渡(學(xué)時(shí)數(shù)：2)主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動(dòng)知識(shí)講授講解變換中的3D變換：認(rèn)識(shí)三維空間rotateX()、rotateY()、rotateZ()函數(shù)3D變形及transform的轉(zhuǎn)換屬性講授法多媒體課件演示教師：講授知識(shí)學(xué)生：邊聽邊練學(xué)生實(shí)踐創(chuàng)建一個(gè)新頁面進(jìn)行transform

6、變形3D變換。實(shí)驗(yàn)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)知識(shí)講授講解transitions過渡：transitions功能介紹、transitions功能介紹：transition-property屬性transition-duration屬性transition-timing-function屬性transition-delay屬性transition復(fù)合屬性講授法多媒體課件演示教師：講授知識(shí)學(xué)生：邊聽邊練學(xué)生實(shí)踐學(xué)生創(chuàng)建一個(gè)新頁面進(jìn)行transitions過渡的設(shè)置方法實(shí)驗(yàn)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)課堂總結(jié)(1)變換中的3D變換(2)transitions過渡教師講解多媒體

7、課件演示整理筆記引導(dǎo)創(chuàng)新任務(wù)拓展瀏覽北京大學(xué)網(wǎng)站頁面，人認(rèn)識(shí)HMTL5中的結(jié)構(gòu)標(biāo)簽教師指導(dǎo)學(xué)生自學(xué)多媒體布置作業(yè)提出要求淮安信息職業(yè)技術(shù)學(xué)院網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)單元設(shè)計(jì)第3頁共5頁教學(xué)過程設(shè)計(jì)9.3animation動(dòng)畫（學(xué)時(shí)數(shù)：2）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動(dòng)知識(shí)講授講解：動(dòng)畫的基本定義與調(diào)用講授法多媒體課件演示教師：講授知識(shí)學(xué)生：邊聽邊練學(xué)生實(shí)踐學(xué)生創(chuàng)建一個(gè)新頁面進(jìn)行體驗(yàn)動(dòng)回的基本定義與調(diào)用。實(shí)驗(yàn)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)知識(shí)講授講解：animation的其他屬性animation-timing-function屬性animation-delay屬性animat

8、ion-iteration-count屬性講授法多媒體課件演示教師：講授知識(shí)學(xué)生：邊聽邊練學(xué)生實(shí)踐創(chuàng)建一個(gè)新頁面進(jìn)行體驗(yàn)animation的其他屬性實(shí)驗(yàn)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)知識(shí)講授講解：animation的其他屬性animation-direction屬性animation-play-state屬性animation-fill-mode屬性animation復(fù)合屬性講授法多媒體課件演示教師：講授知識(shí)學(xué)生：邊聽邊練學(xué)生實(shí)踐創(chuàng)建一個(gè)新頁面分別進(jìn)行體驗(yàn)animation的其他屬性實(shí)驗(yàn)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)項(xiàng)目案例綜合實(shí)例：藝術(shù)照片墻項(xiàng)目教學(xué)法多媒體教師：輔導(dǎo)交流

9、學(xué)生：實(shí)踐練習(xí)課堂總結(jié)動(dòng)畫的基本定義與調(diào)用animation的其他屬性教師講解多媒體課件演示整理筆記引導(dǎo)創(chuàng)新任務(wù)拓展綜合實(shí)例：藝術(shù)照片墻。教師指導(dǎo)學(xué)生自學(xué)多媒體布置作業(yè)提出要求淮安信息職業(yè)技術(shù)學(xué)院角Fs5網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)單元設(shè)計(jì)第4頁共5頁教學(xué)過程設(shè)計(jì)9.4任務(wù)頭施：交通不意圖動(dòng)回效果（學(xué)時(shí)數(shù)：2）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動(dòng)任務(wù)描述本任務(wù)應(yīng)用過渡、動(dòng)畫等效果設(shè)計(jì)完成新生報(bào)到時(shí)從火車站到信息學(xué)院的交通示意圖，整個(gè)動(dòng)畫持續(xù)時(shí)間10秒鐘。任務(wù)驅(qū)動(dòng)教學(xué)法多媒體教師：分析任務(wù)學(xué)生：信息交流任務(wù)分析根據(jù)預(yù)期的動(dòng)回效果，本例的HTML結(jié)構(gòu)小意圖，使用body設(shè)置整體貝囿的背景顏色，使用div作外層容器，使用圖片作為動(dòng)畫的背景，使用內(nèi)層div元素，通過border-raduis實(shí)現(xiàn)圓形，動(dòng)畫的運(yùn)動(dòng)軌跡按照“預(yù)定”軌跡的方向行進(jìn)。任務(wù)驅(qū)動(dòng)教學(xué)法多媒體教師：輔助分析學(xué)生：交流討論任務(wù)計(jì)劃小組討論，將任務(wù)分解任務(wù)驅(qū)動(dòng)教學(xué)法多媒體課件演示教師：輔助分析學(xué)生：交流討論任務(wù)實(shí)施第一步：設(shè)計(jì)HTML結(jié)構(gòu)代碼。第二步：設(shè)置CSS樣式實(shí)現(xiàn)動(dòng)畫效果。任務(wù)驅(qū)動(dòng)教學(xué)法多媒體教師：輔導(dǎo)交流學(xué)生：實(shí)踐練習(xí)任務(wù)匯報(bào)完成任務(wù)后，簡短的交流任務(wù)驅(qū)動(dòng)教學(xué)法多媒體課件演示教師：點(diǎn)評優(yōu)化學(xué)生：匯報(bào)交流課堂總結(jié)綜合使用HTML5動(dòng)畫的基本定義與調(diào)用，運(yùn)