美化網(wǎng)頁-優(yōu)秀公開課

課題：美化網(wǎng)頁（一）教材版本電子工業(yè)出版社課題《美化網(wǎng)頁（一）》學(xué)校隆德二中授課教師李新霞課型新授課授課班級(jí)初三課時(shí)1課程綱要依據(jù)本節(jié)課的定位在于“熟練掌握”的程度上，旨在讓學(xué)生通過對(duì)《美化網(wǎng)頁》的學(xué)習(xí)，了解掌握美化網(wǎng)頁的方法、步驟，熟練掌握美化網(wǎng)頁的操作，提高審美意識(shí)，激發(fā)學(xué)生對(duì)網(wǎng)頁制作進(jìn)行更深入的學(xué)習(xí)和研究的興趣。教材分析結(jié)合本校學(xué)生和教學(xué)環(huán)境的特點(diǎn)，深入地領(lǐng)會(huì)教材的編寫意圖，設(shè)計(jì)了制作“寧夏風(fēng)光”網(wǎng)站的主題活動(dòng)，制作“寧夏風(fēng)光”網(wǎng)站。學(xué)情分析初三學(xué)生已經(jīng)學(xué)習(xí)了很多信息技術(shù)基礎(chǔ)知識(shí)，并且具備了一定的操作計(jì)算機(jī)、上網(wǎng)搜索、編輯圖像的能力。通過前幾周的學(xué)習(xí)，學(xué)生對(duì)網(wǎng)站制作有了初步的認(rèn)識(shí)，并建立了站點(diǎn)，制作了首頁，而且還通過表格歸整了網(wǎng)頁中的各元素，使網(wǎng)頁趨于整潔。但是，由于制作的網(wǎng)頁中還未有設(shè)置背景、背景音樂、Flash動(dòng)畫、字幕等元素，還顯得單調(diào)。他們希望能夠通過學(xué)習(xí)新的知識(shí)，進(jìn)一步美化他們制作的網(wǎng)頁。教學(xué)目標(biāo)①了解美化網(wǎng)頁的常用方法，理解美化網(wǎng)頁對(duì)提高網(wǎng)站質(zhì)量的作用。②學(xué)會(huì)在網(wǎng)頁中設(shè)置背景。③提高審美意識(shí)，善于發(fā)現(xiàn)美，美化生活從自身做起。教學(xué)重點(diǎn)在網(wǎng)頁中設(shè)置背景。教學(xué)難點(diǎn)在網(wǎng)頁中設(shè)置音樂。教學(xué)方法講授法、自主學(xué)習(xí)法、任務(wù)驅(qū)動(dòng)法、實(shí)驗(yàn)探究法等教學(xué)資源計(jì)算機(jī)及多媒體網(wǎng)絡(luò)教室系統(tǒng)板書設(shè)計(jì)網(wǎng)頁的美化一、美化網(wǎng)頁的作用二、美化網(wǎng)頁的方法三、美化網(wǎng)頁的流程四、具體操作時(shí)間教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖2123383136316（課前2分鐘預(yù)備）對(duì)比提問：（2分鐘）觀看圖片：未精心布置的房間與布置后的房間。提問：你更喜歡哪一個(gè)？為什么？（更喜歡后者，因?yàn)楹笳吒p心悅目，“養(yǎng)眼”，美）觀看網(wǎng)頁：未經(jīng)美化的網(wǎng)頁與美化后的網(wǎng)頁

（,,,）提問：你更喜歡哪一個(gè)？（更喜歡后者，因?yàn)榍罢呦鄬?duì)比較單調(diào)，瀏覽后者使人“耳目一新”）引入新課：（1分鐘）我們這節(jié)課就來學(xué)習(xí)并自己動(dòng)手操作一下如何從前者變成后者，如何使網(wǎng)頁更加具有美感。使網(wǎng)頁更加漂亮的過程就是“美化網(wǎng)頁”。講授新課：（38分鐘）美化網(wǎng)頁一、美化網(wǎng)頁的作用通過剛才的比較，相信同學(xué)們已經(jīng)對(duì)美化網(wǎng)頁的作用有了一定的認(rèn)識(shí)，現(xiàn)在我們?cè)賮砜匆恍┚W(wǎng)站，加深了解。展示一些比較優(yōu)秀的網(wǎng)站。（百度視頻、新浪、網(wǎng)易、搜狐等）二、美化網(wǎng)頁的方法一般都用哪些方法美化網(wǎng)頁呢？⒈插入背景音樂聽到自己喜歡的音樂，可以讓我們消除疲勞，在網(wǎng)頁上設(shè)置背景音樂，也可以讓瀏覽者心曠神怡。展示無背景音樂和有背景音樂的網(wǎng)頁。⒉設(shè)置網(wǎng)頁背景在制作網(wǎng)頁時(shí)，為網(wǎng)頁加上背景顏色或背景圖片，可以讓網(wǎng)頁更加美觀、生動(dòng)活潑、更能襯托網(wǎng)頁的主題。展示無背景與有背景的網(wǎng)頁。⒊設(shè)置表格的背景我們?cè)谠O(shè)計(jì)網(wǎng)頁的過程中有時(shí)也需要對(duì)網(wǎng)頁中某一局部的背景顏色進(jìn)行設(shè)置，以達(dá)到強(qiáng)化有關(guān)內(nèi)容的效果。對(duì)比無表格背景與有表格背景的網(wǎng)頁。⒋插入Flash動(dòng)畫我們?yōu)g覽網(wǎng)頁時(shí)，會(huì)看到很多廣告形式的動(dòng)畫。在網(wǎng)站設(shè)計(jì)中，如果在我們自己的網(wǎng)頁上也能插入幾個(gè)Flash動(dòng)畫，肯定會(huì)使網(wǎng)頁增色不少。對(duì)比無Flash與有Flash動(dòng)畫的網(wǎng)頁。5.插入滾動(dòng)字幕在網(wǎng)頁設(shè)計(jì)中，我們也會(huì)采取各種方式讓文字或圖片動(dòng)起來，以吸引瀏覽者的注意力。為了讓一些純文本的內(nèi)容（如標(biāo)題）更醒目，一般通過改變字體、字號(hào)、顏色或產(chǎn)生動(dòng)態(tài)效果的方法來實(shí)現(xiàn)。其中效果最好的當(dāng)屬在網(wǎng)頁中使用滾動(dòng)字幕。展示無滾動(dòng)字幕與有滾動(dòng)字幕的index網(wǎng)頁。三、美化網(wǎng)頁的流程⒈確定主題（基調(diào)）思考：網(wǎng)站“寧夏風(fēng)光”的基調(diào)，是凝重的，還是輕松的？⒉搜集素材（音樂、圖片、Flash動(dòng)畫）⒊加工素材（剪裁音樂，修改圖片、動(dòng)畫，制作圖形、動(dòng)畫）⒋選擇美化網(wǎng)頁工具——DW⒌美化網(wǎng)頁（插入所需元素）四、美化網(wǎng)頁將全班分成兩組，一組同學(xué)完成任務(wù)一，二組同學(xué)完成任務(wù)二。任務(wù)一：設(shè)置網(wǎng)頁背景、表格背景自主學(xué)習(xí)：瀏覽教學(xué)網(wǎng)站——（1）設(shè)置網(wǎng)頁背景；（2）設(shè)置表格背景。設(shè)置D:\寧夏風(fēng)光\的網(wǎng)頁背景為D:\素材\背景，表格背景設(shè)置為顏色RGB(cc,99,ff)。并保存，預(yù)覽。完成了任務(wù)一的同學(xué)完成任務(wù)二。任務(wù)二：設(shè)置單元格背景自主學(xué)習(xí)：瀏覽教學(xué)網(wǎng)站——（1）設(shè)置表格背景；（2）插入背景音樂。設(shè)置D:\寧夏風(fēng)光\的單元格背景，并保存，預(yù)覽。完成了任務(wù)二的同學(xué)完成任務(wù)一。學(xué)生演示操作：任務(wù)一或任務(wù)二。總結(jié)：提醒同學(xué)們?cè)诓僮鲿r(shí)要注意：1.先打開要編輯的網(wǎng)頁；2.設(shè)置表格背景必須確保光標(biāo)在該表格中；3.設(shè)置單元格背景必須確保光標(biāo)在該單元格中；4.看清是編輯狀態(tài)還是預(yù)覽狀態(tài)；5.保存時(shí)注意圖片的存放位置。（挑選該班學(xué)生易出錯(cuò)的方面提醒）讓學(xué)生再整改。任務(wù)三：Flash動(dòng)畫自主學(xué)習(xí)：學(xué)生演示操作：任務(wù)三?？偨Y(jié)：提醒同學(xué)們?cè)诓僮鲿r(shí)要注意：1.準(zhǔn)備素材時(shí)要分文件夾放置（imamges,swf）；2.Flash影片屬性的“透明”屬性；拓展探究：根據(jù)我們所學(xué)到的知識(shí)，看看能否將主頁中的Banner加動(dòng)畫效果，結(jié)果如下圖。素材：（１）D:\素材\；（２）D:\素材\。（注意空中雨滴，水上波紋動(dòng)畫）提示：可以瀏覽學(xué)習(xí)網(wǎng)站——拓展探究五、改名，復(fù)制：將“D:\寧夏風(fēng)光”文件夾改名為“寧夏風(fēng)光—網(wǎng)頁的美化”，并將該文件夾復(fù)制到自己的網(wǎng)盤中。（因?yàn)閷W(xué)生機(jī)都安裝了還原卡，所以必須保存在網(wǎng)盤中，以后才可以繼續(xù)制作。）總結(jié)歸納：（1分鐘）網(wǎng)頁的美化一、美化網(wǎng)頁的作用二、美化網(wǎng)頁的方法三、美化網(wǎng)頁的流程四、具體操作：課后作業(yè)：（1分鐘）美化“寧夏風(fēng)光”其他網(wǎng)頁。展示提問導(dǎo)入新課板書講授展示講解展示講解展示講解展示講解展示講解展示講解播放講解布置任務(wù)巡視指導(dǎo)組織演示總結(jié)提醒布置任務(wù)巡視指導(dǎo)組織演示總結(jié)提醒布置作業(yè)觀看思考回答聽講觀察思考記憶觀看記憶觀看記憶觀看記憶觀看記憶觀看記憶觀看記憶思考互動(dòng)回答接受任務(wù)學(xué)習(xí)動(dòng)手操作演示操作整改網(wǎng)頁接受任務(wù)學(xué)習(xí)動(dòng)手操