網(wǎng)設(shè)計(jì)與制作課時(shí)說(shuō)課稿省公開課一等獎(jiǎng)全國(guó)示范課微課金獎(jiǎng)?wù)n件

課程名稱：《網(wǎng)頁(yè)設(shè)計(jì)與制作》

項(xiàng)目三：精品課程網(wǎng)站

任務(wù)四：《DIV+CSS布局技術(shù)及應(yīng)用》

說(shuō)課人：王慧敏1/29內(nèi)容選取與組織課程目標(biāo)課程定位課程介紹2/29課程定位崗位關(guān)鍵領(lǐng)域課程綜合性實(shí)踐性操作性課程介紹課程目標(biāo)網(wǎng)站設(shè)計(jì)與制作能力、團(tuán)體協(xié)作能力、溝通能力、分析處理問(wèn)題能力、項(xiàng)目實(shí)施能力內(nèi)容選取組織以教學(xué)仿真項(xiàng)目和企業(yè)實(shí)際項(xiàng)目為載體重構(gòu)和序化教學(xué)內(nèi)容

3/29課程教學(xué)內(nèi)容選取與安排編號(hào)知識(shí)模塊安排1網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)2網(wǎng)站觀賞3網(wǎng)站規(guī)劃與設(shè)計(jì)4網(wǎng)站效果圖設(shè)計(jì)5網(wǎng)頁(yè)色彩搭配網(wǎng)頁(yè)布局6網(wǎng)頁(yè)動(dòng)畫設(shè)計(jì)7頁(yè)面布局與編輯8HTML語(yǔ)言9CSS層疊樣式表10DIV+CSS網(wǎng)頁(yè)布局11模版與庫(kù)應(yīng)用12網(wǎng)站行為13表單應(yīng)用14靜態(tài)網(wǎng)站動(dòng)態(tài)化15動(dòng)態(tài)網(wǎng)站制作16課程設(shè)計(jì)（項(xiàng)目實(shí)訓(xùn)）項(xiàng)目一書法家莊輝個(gè)人網(wǎng)站項(xiàng)目二電子信息工程系迎評(píng)網(wǎng)站項(xiàng)目三精品課程網(wǎng)站項(xiàng)目四武威旅游網(wǎng)

項(xiàng)目五佳佳商城用戶及留言管理系統(tǒng)4/29課時(shí)說(shuō)課項(xiàng)目三：精品課程網(wǎng)任務(wù)四：DIV+CSS布局技術(shù)及應(yīng)用5/29提要6/29課時(shí)定位任務(wù)名稱職業(yè)素質(zhì)及能力培養(yǎng)課時(shí)數(shù)項(xiàng)目三：精品課程網(wǎng)站建設(shè)網(wǎng)站前期策劃及策劃書編寫溝通能力、策劃能力、文檔能力2網(wǎng)站效果圖設(shè)計(jì)、切片導(dǎo)出及動(dòng)畫設(shè)計(jì)藝術(shù)素養(yǎng)、Photoshop設(shè)計(jì)動(dòng)畫制作能力、創(chuàng)新創(chuàng)意能力4DIV+CSS網(wǎng)頁(yè)布局技術(shù)基礎(chǔ)知識(shí)DIV+CSS網(wǎng)頁(yè)布局技術(shù)、團(tuán)體協(xié)作、項(xiàng)目實(shí)施能力3DIV+CSS布局技術(shù)及應(yīng)用6JavaScript腳本代碼融合JavaScript腳本代碼應(yīng)用能力4使用模版完善靜態(tài)網(wǎng)站掌握網(wǎng)站模板使用方法2應(yīng)用行為增強(qiáng)網(wǎng)頁(yè)動(dòng)態(tài)效果掌握網(wǎng)站行為使用方法2項(xiàng)目總結(jié)與評(píng)價(jià)具備檢驗(yàn)、判斷能力、語(yǔ)言表示能力、責(zé)任意識(shí)27/29教學(xué)目標(biāo)專業(yè)能力：1.掌握單行單列布局、二列布局、三列布局結(jié)構(gòu)應(yīng)用。2.掌握DIV+CSS布局應(yīng)用與技巧。方法能力：1.能獨(dú)立進(jìn)行信息篩選與加工。2.能獨(dú)立制訂、實(shí)施工作計(jì)劃。3.含有分析問(wèn)題、處理問(wèn)題能力。社會(huì)能力：1.含有溝通能力及團(tuán)體協(xié)作精神。2.含有創(chuàng)新能力。8/29教學(xué)內(nèi)容利用DIV+CSS技術(shù)布局制作精品課程網(wǎng)站主頁(yè)。重點(diǎn)掌握DIV+CSS布局應(yīng)用與技巧，熟練CSS語(yǔ)法規(guī)則。難點(diǎn)深入了解布局精華——盒子模型以及怎樣靈活、簡(jiǎn)練應(yīng)用。教學(xué)內(nèi)容9/2910/29項(xiàng)目教學(xué)法1直觀演示法活動(dòng)探究法任務(wù)驅(qū)動(dòng)法小組討論法宏觀：微觀11/29啟發(fā)式教學(xué)方法利用多媒體輔助教學(xué)12/29以學(xué)生為主體，以培養(yǎng)學(xué)生自主學(xué)習(xí)能力為出發(fā)點(diǎn)，讓學(xué)生在學(xué)習(xí)中發(fā)覺(jué)問(wèn)題、分析問(wèn)題、處理問(wèn)題。主要應(yīng)用以下方法：自主探究法、總結(jié)反思法13/29項(xiàng)目導(dǎo)向任務(wù)驅(qū)動(dòng)教師展示任務(wù)效果教師提出任務(wù)目標(biāo)教師引導(dǎo)、處理疑難問(wèn)題展示與評(píng)價(jià)布置課后拓展練習(xí)學(xué)生自主探究14/29一任務(wù)效果展示15/29二提出任務(wù)目標(biāo)1、復(fù)習(xí)什么是CSS盒子模型？盒子屬性？（引導(dǎo)、討論）提升自學(xué)興趣，被動(dòng)——主動(dòng)深入明確本節(jié)課要實(shí)現(xiàn)目標(biāo)，設(shè)置四個(gè)問(wèn)題來(lái)分析、討論采取DIV+CSS布局技術(shù)制作精品課程網(wǎng)站主頁(yè)16/29提升自學(xué)興趣，被動(dòng)——主動(dòng)深入明確本節(jié)課要實(shí)現(xiàn)目標(biāo)，做到有放矢2.在網(wǎng)頁(yè)中，一個(gè)div盒子是怎樣定義？（回想）<divid=“盒子名稱”></div>二提出任務(wù)目標(biāo)17/29#left#right提升自學(xué)興趣，被動(dòng)——主動(dòng)深入明確本節(jié)課要實(shí)現(xiàn)目標(biāo)，做到有放矢3.生活中盒子有很多，同理，一張網(wǎng)頁(yè)中盒子也有很多(如圖)，這些盒子是怎樣放置到網(wǎng)頁(yè)中？(引導(dǎo)、討論）經(jīng)過(guò)插入多個(gè)DIV二提出任務(wù)目標(biāo)#header#footer18/29四個(gè)問(wèn)題層層遞進(jìn)，既復(fù)習(xí)了上節(jié)課重點(diǎn)內(nèi)容，也為下面學(xué)生自主探究打下堅(jiān)實(shí)基礎(chǔ)，幫助學(xué)生把握本節(jié)課重、難點(diǎn)。4.精品課程網(wǎng)站主頁(yè)是由許多盒子組成，這些盒子是怎樣放置到網(wǎng)頁(yè)中？又是怎樣把它擺放得有模有樣？(引導(dǎo)、討論）經(jīng)過(guò)插入多個(gè)DIV,經(jīng)過(guò)控制盒子外觀CSS樣式表二提出任務(wù)目標(biāo)19/29三學(xué)生自主探究1.學(xué)生分析精品課程網(wǎng)站主頁(yè)布局。教師為主導(dǎo)學(xué)生為主體#header#main_left#right_top_kcjs#right_top_jcjs

#right_jxzy#right_jx#footer20/292.依據(jù)分析，學(xué)生畫出布局草圖。教師為主導(dǎo)學(xué)生為主體#header#main_left#right_top_kcjs#right_top_jcjs

#right_jxzy#right_jx#footer三學(xué)生自主探究21/293.依據(jù)繪制草圖，在網(wǎng)頁(yè)制作軟件中放這些盒子<divid=“header”></div><divid=“main”><divid=“main_left></div><divid=“main_right><divid=“right_top><divid=“right_top_kcjs”></div><divid=“right_top_jcjs”></div></div><divid=“right_jxzy”></div><divid=“right_jx”></div></div></div><divid=“footer”></div>教師為主導(dǎo)學(xué)生為主體先堆到一起再說(shuō)！三學(xué)生自主探究22/294.在網(wǎng)頁(yè)制作軟件中怎樣將這些盒子放置到適當(dāng)位置？Css樣式表——盒子擺整齊了！

教師為主導(dǎo)學(xué)生為主體#header#main_left#right_top_kcjs#right_top_jcjs#right_jxzy#right_jx#footer三學(xué)生自主探究23/29四引導(dǎo)、分析、討論、處理疑難問(wèn)題教師：引導(dǎo)、分析、處理、演示學(xué)生：分析、討論、練習(xí)講練結(jié)合教師有糾錯(cuò)學(xué)生有反思、有總結(jié)、有提升24/29五展示與評(píng)價(jià)作品展示、（最符合結(jié)果）評(píng)價(jià)自信感、成就感、責(zé)任心以工作任務(wù)為根本，以學(xué)生為主體，以教師為主導(dǎo)，融“教、學(xué)、做、評(píng)”為一體。25/29六課后拓展練習(xí)

主頁(yè)效果圖二級(jí)頁(yè)面效果圖鞏固本節(jié)課內(nèi)容培養(yǎng)動(dòng)腦