課程名稱：網(wǎng)頁設(shè)計(jì)與制作主備人：審核人：第7頁網(wǎng)頁設(shè)計(jì)與制作教案（第16周）專業(yè)課程學(xué)習(xí)任務(wù)使用CSS美化和布局網(wǎng)頁任務(wù)6掌握以Div標(biāo)簽規(guī)劃區(qū)塊綜合實(shí)戰(zhàn)—設(shè)置區(qū)塊和方框樣式制作文字介紹課時6教學(xué)對象授課時間設(shè)計(jì)者一、學(xué)習(xí)任務(wù)分析1．了解CSS美化和布局網(wǎng)頁。2．教材中的知識與案例均是從實(shí)際工作中精選而來，具有很強(qiáng)的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實(shí)、語言淺顯易懂，并配以精美的素材圖片。二、學(xué)情分析對于剛剛接觸網(wǎng)頁設(shè)計(jì)的學(xué)生，思想活躍，有探索新知識的強(qiáng)烈心理，專業(yè)課的學(xué)習(xí)，除需要一定專業(yè)基礎(chǔ)外，還需要學(xué)生具有很強(qiáng)的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習(xí)的方法，讓學(xué)生了解所學(xué)的內(nèi)容。三、學(xué)習(xí)目標(biāo)知識目標(biāo)：掌握以Div標(biāo)簽規(guī)劃區(qū)塊。能力目標(biāo)：學(xué)會掌握以Div標(biāo)簽規(guī)劃區(qū)塊。素質(zhì)目標(biāo)：做人要講誠信，不能在誠信中有缺失，讓本該要合作的人遠(yuǎn)離你。懂得了做事不是靠嘴，而是要靠自己辛勤的付出和努力。要學(xué)會與人分享，在團(tuán)隊(duì)中不要以為自己是最牛的，要學(xué)會謙虛、學(xué)會謙讓。四、教學(xué)策略重點(diǎn)難點(diǎn)：重點(diǎn)：了解CSS樣式；難點(diǎn)：掌握以Div標(biāo)簽規(guī)劃區(qū)塊。教學(xué)方法：演示案例教學(xué)法。教學(xué)模式：分組討論，集中點(diǎn)評，共同提高。五、教學(xué)環(huán)境及資源準(zhǔn)備教學(xué)環(huán)境：多媒體實(shí)訓(xùn)室課前準(zhǔn)備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認(rèn)真設(shè)計(jì)教案、課件和教學(xué)過程。六、教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計(jì)意圖情景描述上課，同學(xué)們好?。ㄏ嗷柡茫。?S管理組織教學(xué)。課前3分鐘：同學(xué)們像百花叢中的小蜜蜂，忙碌著采集知識的花粉，釀制著智慧善良和擔(dān)當(dāng)?shù)南闾鸬拿?。諸惡無作，眾善奉行。不僅今天要遵守，即使七老八十也要遵守；不僅我們要遵守，一切善良上進(jìn)的人都要遵守！復(fù)習(xí)提問：一、對于CSS樣式大家都了解哪些？7S管理組織教學(xué)、統(tǒng)計(jì)出勤；課前3分鐘教育；進(jìn)行復(fù)習(xí)提問，讓學(xué)生進(jìn)入思考狀態(tài)。以小組為團(tuán)體回答，并加分。使學(xué)生注意力集中積極思考，積極回答問題。7S管理形成習(xí)慣，鞏固知識，增強(qiáng)團(tuán)隊(duì)意識。引導(dǎo)問題網(wǎng)頁的大體制作完畢后，剩余的美化及進(jìn)一步的布局會讓網(wǎng)頁看起來更加的漂亮大氣，能夠完成這方面的工作，一個網(wǎng)頁基本就算完成了，而這一點(diǎn)恰恰是小艾最缺失的，所以她專門找到了同事凱程，想讓他好好為自己講一講關(guān)于美化和細(xì)致布局方面的知識，凱程非常細(xì)致的為小艾解說了關(guān)于網(wǎng)頁中CSS樣式及布局網(wǎng)頁方面的知識。CSS樣式是網(wǎng)頁排版的重要核心，它讓設(shè)計(jì)師從頁面效果的困擾中得到解脫。雖然它是一套代碼，但是在Dreamweaver的環(huán)境下，使用CSS不需要記憶代碼及寫程序，只要從對話框中設(shè)置即可。精美的網(wǎng)頁離不開CSS技術(shù)。采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。使用CSS樣式可以制作出更加復(fù)雜和精巧的網(wǎng)頁，網(wǎng)頁的維護(hù)和更新也更加容易和方便。本章主要介紹DIV與CSS概念、CSS樣式的基本概念和語法、CSS樣式設(shè)置和CSS定位。本次項(xiàng)目將會針對CSS樣式的各種類型及應(yīng)用范圍做解說，讓各位可以熟悉CSS功能的應(yīng)用。好了，下面我們就一起來進(jìn)行學(xué)習(xí)和進(jìn)步吧！引出本節(jié)重點(diǎn)內(nèi)容，注意培養(yǎng)學(xué)生的觀察力和注意力。學(xué)生跟隨老師的講解和啟發(fā)進(jìn)入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學(xué)生分小組思考。相關(guān)知識介紹任務(wù)6掌握以Div標(biāo)簽規(guī)劃區(qū)塊現(xiàn)今的網(wǎng)站內(nèi)容越來越多元化，想要讓很多信息都可以在首頁中就可以找到，那么網(wǎng)頁區(qū)塊的規(guī)劃就顯得格外重要。透過網(wǎng)頁區(qū)外的劃分，再分配網(wǎng)頁內(nèi)容，這樣網(wǎng)頁看起來會比較有條理，才不會雜亂無章。要規(guī)劃區(qū)塊，Dreamweaver提供了Div標(biāo)簽的功能，可以讓設(shè)計(jì)師替網(wǎng)頁定義區(qū)塊，同時為不同的區(qū)塊個別設(shè)置樣式。這一小節(jié)就針對Div標(biāo)簽的插入方式、大小、背景色或網(wǎng)頁組件插入方式等內(nèi)容，為各位做說明?；顒?掌握編修D(zhuǎn)iv標(biāo)簽的CSS樣式在“Div標(biāo)簽”中加入“CSS樣式”后，如果需要修改或添加任何的屬性，都可以通過“CSS設(shè)計(jì)器”面板來編修，只要更改數(shù)值或添加選項(xiàng)即可，例如改變背景顏色，如圖所示?；顒?掌握為Div區(qū)塊加入圓角、漸變色、陰影在“Dreamweaver”中，通過“CSS設(shè)計(jì)器”面板，也可以輕松為規(guī)劃的“Div”區(qū)塊加入圓角效果或任一邊圓角，還可以輕松加入漸變色的區(qū)塊或區(qū)塊陰影。設(shè)置圓角輸入點(diǎn)放在“contentleft”中，選擇切換到“邊框”，設(shè)置“圓角值”為60，選擇“實(shí)時預(yù)覽”可以看到效果，如圖所示。設(shè)置漸變輸入點(diǎn)放在“contentleft”中，選擇切換到“背景”，按下“gradient”的色塊，在彈出的漸變色設(shè)置界面中設(shè)置漸變的兩個顏色，選擇“實(shí)時預(yù)覽”可以看到效果，如圖所示。區(qū)塊陰影輸入點(diǎn)放在“contentleft”中，選擇切換到“背景”，設(shè)定陰影的位移值、模糊半徑值、顏色，選擇“實(shí)時預(yù)覽”可以看到效果，如圖所示。課件設(shè)疑，引起注意，牢牢抓住和吸引學(xué)生探究新知識的心理。講練結(jié)合，突出實(shí)操能力培養(yǎng)。跟隨老師進(jìn)入思考分析狀態(tài)。認(rèn)真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學(xué)生掌握知識點(diǎn)。提高學(xué)生操作能力。分組討論組織學(xué)生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項(xiàng)目評分指標(biāo)標(biāo)準(zhǔn)分評分儀態(tài)舉止是否得體0.5準(zhǔn)備準(zhǔn)備是否充分0.5語言聲音是否洪亮、表達(dá)是否準(zhǔn)確0.5小組配合組分工是否明確，配合是否默契0.5小計(jì)2分配小組長任務(wù)。通過引導(dǎo)問題，學(xué)生進(jìn)行分析、思考。各個小組分配任務(wù)進(jìn)行討論問題。達(dá)到培養(yǎng)學(xué)生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學(xué)找出問題并由小組代表進(jìn)行解答。展示并解答問題。學(xué)生展示討論成果，回答問題。鍛煉學(xué)生表達(dá)能力和儀表。鍛煉學(xué)生表達(dá)能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計(jì)中的注意事項(xiàng)，并由教師點(diǎn)評總結(jié)設(shè)計(jì)注意事項(xiàng)，并分組點(diǎn)評各組優(yōu)缺點(diǎn)?？偨Y(jié)點(diǎn)評設(shè)計(jì)情況，并歸納知識點(diǎn)。學(xué)生總結(jié)所學(xué)知識，積極回答問題。學(xué)生掌握知識。布置作業(yè)一、了解創(chuàng)建CSS樣式外部鏈接布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學(xué)習(xí)。培養(yǎng)學(xué)生學(xué)習(xí)能力。便于下次課進(jìn)行。七、教學(xué)評價設(shè)計(jì)通過小組自我評價、小組評價、教師評價完成對小組進(jìn)行評價，教師和組長對成員進(jìn)行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進(jìn)行成績綜合評定。評價項(xiàng)目評價指標(biāo)標(biāo)準(zhǔn)分自我評價