《網(wǎng)頁(yè)的美化》教案

1、網(wǎng)頁(yè)的美化教學(xué)設(shè)計(jì)教材版本青島版課 題網(wǎng)頁(yè)的美化學(xué) 校 龍子心中學(xué)授課教師楊斌課 型新授課授課班級(jí)初二（1）班 課 時(shí)1課程綱要依據(jù)本節(jié)課的定位在于“熟練掌握”的程度上，旨在讓學(xué)生通過對(duì)網(wǎng)頁(yè)的美化的學(xué)習(xí)，了解掌握美化網(wǎng)頁(yè)的方法、步驟，熟練掌握美化網(wǎng)頁(yè)的操作，提高審美意識(shí)，激發(fā)學(xué)生對(duì)網(wǎng)頁(yè)制作進(jìn)行更深入的學(xué)習(xí)和研究的興趣。教材分析結(jié)合本校學(xué)生和教學(xué)環(huán)境的特點(diǎn)，深入地領(lǐng)會(huì)由青島出版社出版的初中信息技術(shù)（八年級(jí)）教材的編寫意圖，設(shè)計(jì)了制作“情感小屋”網(wǎng)站的主題活動(dòng)，制作“情感小屋”網(wǎng)站。學(xué)情分析初二學(xué)生已經(jīng)學(xué)習(xí)了很多信息技術(shù)基礎(chǔ)知識(shí)，并且具備了一定的操作計(jì)算機(jī)、上網(wǎng)搜索、編輯圖象的能力。通過前幾周的學(xué)

2、習(xí)，學(xué)生對(duì)網(wǎng)站制作有了初步的認(rèn)識(shí)，并建立了站點(diǎn)，制作了首頁(yè)，而且還通過表格歸整了網(wǎng)頁(yè)中的各元素，使網(wǎng)頁(yè)趨于整潔。但是，由于制作的網(wǎng)頁(yè)中還未有設(shè)置背景、背景音樂、Flash動(dòng)畫、字幕等元素，還顯得單調(diào)。他們希望能夠通過學(xué)習(xí)新的知識(shí)，進(jìn)一步美化他們制作的網(wǎng)頁(yè)。教 學(xué)目 標(biāo)了解美化網(wǎng)頁(yè)的常用方法，理解美化網(wǎng)頁(yè)對(duì)提高網(wǎng)站質(zhì)量的作用。學(xué)會(huì)在網(wǎng)頁(yè)中設(shè)置背景、音樂、Flash動(dòng)畫和滾動(dòng)字幕。提高審美意識(shí)，善于發(fā)現(xiàn)美，美化生活從自身做起。教學(xué)重點(diǎn)在網(wǎng)頁(yè)中設(shè)置背景、音樂、Flash動(dòng)畫和滾動(dòng)字幕。教學(xué)難點(diǎn)在網(wǎng)頁(yè)中設(shè)置音樂、Flash動(dòng)畫。教學(xué)方法講授法、自主學(xué)習(xí)法、任務(wù)驅(qū)動(dòng)法、實(shí)驗(yàn)探究法等教學(xué)資源計(jì)算機(jī)及多媒體

3、網(wǎng)絡(luò)教室系統(tǒng)、FrontPage2003軟件等板書設(shè)計(jì)網(wǎng)頁(yè)的美化一、美化網(wǎng)頁(yè)的作用二、美化網(wǎng)頁(yè)的方法三、美化網(wǎng)頁(yè)的流程四、具體操作：1. 插入背景音樂2. 設(shè)置網(wǎng)的背景3. 設(shè)置表格的背景4. 插入Flash動(dòng)畫5. 插入滾動(dòng)字幕時(shí)間（分）教 學(xué) 內(nèi) 容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖21233831363161 11（課前2分鐘預(yù)備）對(duì)比提問：（2分鐘） 觀看圖片：未精心布置的房間與布置后的房間、丑女與美女提問：你更喜歡哪一個(gè)？為什么？（更喜歡后者，因?yàn)楹笳吒p心悅目，“養(yǎng)眼”，美）觀看網(wǎng)頁(yè)：未經(jīng)美化的網(wǎng)頁(yè)與美化后的網(wǎng)頁(yè)（index.htm , school.htm , Domain.htm , N

4、eighbor.htm）提問：你更喜歡哪一個(gè)？（更喜歡后者，因?yàn)榍罢呦鄬?duì)比較單調(diào)，瀏覽后者使人“耳目一新”）引入新課：（1分鐘）我們這節(jié)課就來學(xué)習(xí)并自己動(dòng)手操作一下如何從前者變成后者，如何使網(wǎng)頁(yè)更加具有美感。使網(wǎng)頁(yè)更加漂亮的過程就是“網(wǎng)頁(yè)的美化”。講授新課：（38分鐘） 網(wǎng)頁(yè)的美化一、美化網(wǎng)頁(yè)的作用通過剛才的比較，相信同學(xué)們已經(jīng)對(duì)美化網(wǎng)頁(yè)的作用有了一定的認(rèn)識(shí)，現(xiàn)在我們?cè)賮砜匆恍┚W(wǎng)站，加深了解。展示一些比較優(yōu)秀的網(wǎng)站。（百度視頻、新浪、網(wǎng)易、搜狐、秘密花園等）二、美化網(wǎng)頁(yè)的方法一般都用哪些方法美化網(wǎng)頁(yè)呢？ 插入背景音樂聽到自己喜歡的音樂，可以讓我們消除疲勞，在網(wǎng)頁(yè)上設(shè)置背景音樂，也可以讓瀏覽者心

5、曠神怡。展示無背景音樂和有背景音樂的Index.htm網(wǎng)頁(yè)。 設(shè)置網(wǎng)頁(yè)背景在制作網(wǎng)頁(yè)時(shí)，為網(wǎng)頁(yè)加上背景顏色或背景圖片，可以讓網(wǎng)頁(yè)更加美觀、生動(dòng)活潑、更能襯托網(wǎng)頁(yè)的主題。展示無背景與有背景的Index.htm網(wǎng)頁(yè)。 設(shè)置表格的背景我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)的過程中有時(shí)也需要對(duì)網(wǎng)頁(yè)中某一局部的背景顏色進(jìn)行設(shè)置，以達(dá)到強(qiáng)化有關(guān)內(nèi)容的效果。對(duì)比無表格背景與有表格背景的Index.htm網(wǎng)頁(yè)。 插入Flash動(dòng)畫我們?yōu)g覽網(wǎng)頁(yè)時(shí)，會(huì)看到很多廣告形式的動(dòng)畫。在網(wǎng)站設(shè)計(jì)中，如果在我們自己的網(wǎng)頁(yè)上也能插入幾個(gè)Flash動(dòng)畫，肯定會(huì)使網(wǎng)頁(yè)增色不少。對(duì)比無Flash與有Flash動(dòng)畫的Index.htm網(wǎng)頁(yè)。5. 插入滾動(dòng)字幕

6、在網(wǎng)頁(yè)設(shè)計(jì)中，我們也會(huì)采取各種方式讓文字或圖片動(dòng)起來，以吸引瀏覽者的注意力。為了讓一些純文本的內(nèi)容（如標(biāo)題）更醒目，一般通過改變字體、字號(hào)、顏色或產(chǎn)生動(dòng)態(tài)效果的方法來實(shí)現(xiàn)。其中效果最好的當(dāng)屬在網(wǎng)頁(yè)中使用滾動(dòng)字幕。展示無滾動(dòng)字幕與有滾動(dòng)字幕的index網(wǎng)頁(yè)。三、美化網(wǎng)頁(yè)的流程 確定主題（基調(diào)）思考：網(wǎng)站“情感小屋”的基調(diào)，是凝重的，還是輕松的？ 搜集素材（音樂、圖片、Flash動(dòng)畫） 加工素材（剪裁音樂，修改圖片、動(dòng)畫，制作圖形、動(dòng)畫） 選擇美化網(wǎng)頁(yè)工具FrontPage2003軟件 美化網(wǎng)頁(yè)（插入所需元素）四、美化網(wǎng)頁(yè)將全班分成兩組，一組同學(xué)完成任務(wù)一，二組同學(xué)完成任務(wù)二。任務(wù)一：設(shè)置網(wǎng)頁(yè)背景

7、、表格背景自主學(xué)習(xí)：瀏覽教學(xué)網(wǎng)站（1）設(shè)置網(wǎng)頁(yè)背景；（2）設(shè)置表格背景。設(shè)置D:情感小屋School.htm的網(wǎng)頁(yè)背景為D:素材背景9.jpg，表格背景設(shè)置為顏色RGB(cc,99,ff)。并保存，預(yù)覽。完成了任務(wù)一的同學(xué)完成任務(wù)二。任務(wù)二：設(shè)置單元格背景、設(shè)置背景音樂自主學(xué)習(xí)：瀏覽教學(xué)網(wǎng)站（1）設(shè)置表格背景；（2）插入背景音樂。設(shè)置D:情感小屋Neighbor.htm的單元格背景如圖所示，背景音樂為D:素材友誼地久天長(zhǎng).mid。并保存，預(yù)覽。完成了任務(wù)二的同學(xué)完成任務(wù)一。學(xué)生演示操作：任務(wù)一或任務(wù)二。總結(jié)：提醒同學(xué)們?cè)诓僮鲿r(shí)要注意：1. 先打開要編輯的網(wǎng)頁(yè)；2. 設(shè)置表格背景必須確保光標(biāo)在該

8、表格中；3. 設(shè)置單元格背景必須確保光標(biāo)在該單元格中；4. 看清是編輯狀態(tài)還是預(yù)覽狀態(tài)；5. 保存時(shí)注意圖片、音樂的存放位置。（挑選該班學(xué)生易出錯(cuò)的方面提醒）讓學(xué)生再整改。任務(wù)三：添加滾動(dòng)字幕、Flash動(dòng)畫、設(shè)置單元格背景 自主學(xué)習(xí)：瀏覽教學(xué)網(wǎng)站（1）設(shè)置表格的背景；（2）插入滾動(dòng)字幕；（3）插入Flash動(dòng)畫。為D:情感小屋Domain.htm添加滾動(dòng)字幕“海內(nèi)存知已，天涯若比鄰”；插入Flash動(dòng)畫D:素材月亮之上.swf；設(shè)置純文字單元格的背景色如下圖所示。學(xué)生演示操作：任務(wù)三?？偨Y(jié)：提醒同學(xué)們?cè)诓僮鲿r(shí)要注意：1. 準(zhǔn)備素材時(shí)要分文件夾放置（imamges , sound , swf）

9、；2. Flash影片屬性的“透明”屬性；3. 字幕的表現(xiàn)方式、連續(xù)次數(shù)。拓展探究：根據(jù)我們所學(xué)到的知識(shí)，看看能否將主頁(yè)中的Banner加動(dòng)畫效果，結(jié)果如下圖。素材：（）D:素材rain.swf；（）D:素材banner3.png。（注意空中雨滴，水上波紋àrain.swf動(dòng)畫）提示：可以瀏覽學(xué)習(xí)網(wǎng)站拓展探究五、改名，復(fù)制：將“D:情感小屋”文件夾改名為“情感小屋網(wǎng)頁(yè)的美化”，并將該文件夾復(fù)制到自己的網(wǎng)盤中。（因?yàn)閷W(xué)生機(jī)都安裝了還原卡，所以必須保存在網(wǎng)盤中，以后才可以繼續(xù)制作。）總結(jié)歸納：（1分鐘）網(wǎng)頁(yè)的美化一、美化網(wǎng)頁(yè)的作用二、美化網(wǎng)頁(yè)的方法三、美化網(wǎng)頁(yè)的流程四、具體操作：1. 插

10、入背景音樂2. 設(shè)置網(wǎng)的背景3. 設(shè)置表格的背景4. 插入Flash動(dòng)畫5. 插入滾動(dòng)字幕課后作業(yè)：（1分鐘）美化“情感小屋”其他網(wǎng)頁(yè)的Banner及導(dǎo)般欄，如index.htm中樣式。組織展示提問導(dǎo)入新課板書講授展示講解展示講解展示講解展示講解展示講解展示講解播放講解布置任務(wù)巡視指導(dǎo)組織演示總結(jié)提醒布置任務(wù)巡視指導(dǎo)組織演示總結(jié)提醒提出問題布置任務(wù)播放總結(jié)歸納布置作業(yè)就坐安靜觀看思考回答聽講觀察思考記憶觀看記憶觀看記憶觀看記憶觀看記憶觀看記憶觀看記憶思考互動(dòng)回答接受任務(wù)學(xué)習(xí)動(dòng)手操作演示操作整改網(wǎng)頁(yè)接受任務(wù)學(xué)習(xí)動(dòng)手操作演示操作接受任務(wù)學(xué)習(xí)動(dòng)手操作討論探究改名復(fù)制觀看回憶聽講梳理聽講記錄組織課堂設(shè)置情景引起學(xué)生興趣為引入新課做鋪墊引出新課內(nèi)容白板文字顯示教學(xué)整體結(jié)構(gòu)演示直觀體驗(yàn)演示直觀體驗(yàn)演示直觀體驗(yàn)演示直觀體驗(yàn)演示直觀體驗(yàn)演示直觀體驗(yàn)了解美化網(wǎng)頁(yè)的流程培養(yǎng)自主學(xué)習(xí)能力培養(yǎng)表達(dá)能力培養(yǎng)反思意識(shí)培養(yǎng)自主學(xué)習(xí)能力培養(yǎng)表達(dá)能力探究學(xué)習(xí)鞏固記憶探究學(xué)習(xí)復(fù)制到自己網(wǎng)盤中以備以后繼續(xù)制作對(duì)知識(shí)點(diǎn)進(jìn)行梳理繼續(xù)完成主