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

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

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

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

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

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

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

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