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

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

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

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

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

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

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

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

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

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

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