優(yōu)質(zhì)課展臺(tái)

2012年10月底，江南大學(xué)舉辦的“國(guó)培計(jì)劃”高中信息技術(shù)教師研修班在無錫市天一中學(xué)開課，聽了由夏燕萍和馬暢兩位老師上的兩節(jié)《理解動(dòng)態(tài)HTML》的同題異構(gòu)課。兩位老師的教學(xué)方式各有千秋，在同一教學(xué)內(nèi)容的處理方面顯現(xiàn)了各自的特點(diǎn)，我們又邀請(qǐng)了湖南的張葵老師為此次同課異構(gòu)的兩節(jié)課做了點(diǎn)評(píng)。

● 教材分析

《理解動(dòng)態(tài)HTML》是教育科學(xué)出版社出版的高二選修《網(wǎng)絡(luò)技術(shù)應(yīng)用》第五章第二節(jié)。第四章是“建設(shè)主題網(wǎng)站”，本章所學(xué)的技術(shù)正好能夠用在主題網(wǎng)站上，可以使網(wǎng)頁更加生動(dòng)活潑，具備更豐富、更個(gè)性化的交互功能。本章的第一節(jié)《認(rèn)識(shí)動(dòng)態(tài)網(wǎng)頁》主要闡述了“動(dòng)態(tài)HTML”、“動(dòng)態(tài)網(wǎng)頁”的概念以及“動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的比較”等問題，并且教會(huì)學(xué)生使用FrontPage自帶的“動(dòng)態(tài)HTML效果”來實(shí)現(xiàn)一些簡(jiǎn)單的網(wǎng)頁特效。本節(jié)課的內(nèi)容分為兩部分，分兩課時(shí)來上。第一課時(shí)主要介紹動(dòng)態(tài)HTML的核心技術(shù)，著重講解客戶端腳本語言和JavaScript的概念，以及使用JavaScript腳本的兩種方式。第二課時(shí)則是介紹CSS層疊樣式表的概念和三種使用方式，為第三節(jié)《應(yīng)用動(dòng)態(tài)HTML》的教學(xué)做好鋪墊。

● 學(xué)生分析

通過第四章以及本章第一節(jié)的學(xué)習(xí)，學(xué)生已經(jīng)對(duì)網(wǎng)頁、HTML標(biāo)記語言及動(dòng)態(tài)HTML等概念有了比較清晰的認(rèn)識(shí)，也掌握了基本的網(wǎng)頁設(shè)計(jì)技能。為了承前啟后，并且激發(fā)學(xué)生的興趣，本節(jié)課提供了兩個(gè)主題網(wǎng)站，請(qǐng)學(xué)生為其添加動(dòng)態(tài)效果。由于是借班上課，主題網(wǎng)站是筆者的學(xué)生做的，開課班的學(xué)生對(duì)網(wǎng)站內(nèi)容不完全熟悉，操作起來稍有難度。學(xué)生一般會(huì)對(duì)網(wǎng)頁代碼產(chǎn)生畏難情緒，而本節(jié)課的重點(diǎn)并不在JavaScript腳本語言上，只要求學(xué)生能在網(wǎng)頁源代碼中識(shí)別JavaScript腳本，并能將腳本代碼插入到網(wǎng)頁的適當(dāng)位置即可。因此，對(duì)知識(shí)與技能的要求并不高，但要將腳本運(yùn)用得恰到好處，對(duì)學(xué)生的技術(shù)運(yùn)用能力有一定的挑戰(zhàn)。

● 教學(xué)目標(biāo)

知識(shí)與技能目標(biāo)：初步了解動(dòng)態(tài)HTML的三個(gè)核心技術(shù)；理解客戶端腳本語言和JavaScript的概念；學(xué)會(huì)在HTML中嵌入JavaScript腳本，并能做適當(dāng)修改；學(xué)會(huì)建立JavaScript腳本文件，并能在網(wǎng)頁中調(diào)用；能夠根據(jù)網(wǎng)頁的內(nèi)容、風(fēng)格選擇適當(dāng)?shù)木W(wǎng)頁特效。

過程與方法目標(biāo)：通過半成品加工掌握J(rèn)avaScript腳本的使用方法；通過學(xué)習(xí)網(wǎng)站，學(xué)會(huì)自主學(xué)習(xí)，掌握知識(shí)及技能；通過作品交流，培養(yǎng)表達(dá)、交流和鑒賞能力。

情感態(tài)度與價(jià)值觀目標(biāo)：通過網(wǎng)頁欣賞和制作，培養(yǎng)發(fā)現(xiàn)美、欣賞美和創(chuàng)造美的意識(shí)和能力；通過學(xué)習(xí)和應(yīng)用客戶端腳本，培養(yǎng)嚴(yán)謹(jǐn)、細(xì)致的學(xué)習(xí)習(xí)慣，體驗(yàn)技術(shù)的魅力和價(jià)值，提高學(xué)習(xí)興趣；通過作品交流，增進(jìn)同學(xué)間互動(dòng)，學(xué)會(huì)分享和傾聽，體驗(yàn)成功喜悅和同學(xué)友誼。

● 教學(xué)重、難點(diǎn)

重點(diǎn)：客戶端腳本和JavaScript的概念，網(wǎng)頁中使用JavaScript腳本的兩種方法。

難點(diǎn)：動(dòng)態(tài)HTML和客戶端腳本的概念，JavaScript腳本代碼的識(shí)別及修改。

● 教學(xué)策略

本節(jié)課采用基于學(xué)習(xí)網(wǎng)站的自主學(xué)習(xí)方式，引導(dǎo)學(xué)生主動(dòng)探索動(dòng)態(tài)HTML的奧秘，理解客戶端腳本語言及JavaScript代碼的概念，學(xué)會(huì)在網(wǎng)頁中運(yùn)用JavaScript腳本的兩種方式，并運(yùn)用到練習(xí)網(wǎng)站中，最后通過作品交流來分享技術(shù)和成果。在新課導(dǎo)入中，以兩個(gè)有趣的動(dòng)態(tài)網(wǎng)頁為例，揭示動(dòng)態(tài)HTML的三大核心技術(shù)，用以激發(fā)學(xué)生興趣。在知識(shí)要點(diǎn)中，教師簡(jiǎn)明扼要地介紹了相關(guān)概念和技術(shù)要領(lǐng)。在學(xué)習(xí)活動(dòng)中，教師循序漸進(jìn)地安排了三個(gè)任務(wù)，分別是嵌入JS腳本、自選腳本及調(diào)用JS文件的練習(xí)。在作品交流中，教師要求學(xué)生介紹并演示自己在練習(xí)網(wǎng)站中所用的JS效果，分享練習(xí)感受，并推薦其他學(xué)生的作品。

● 教學(xué)過程

1.情境導(dǎo)入（5分鐘）

師：請(qǐng)同學(xué)們打開瀏覽器，訪問學(xué)習(xí)網(wǎng)站http：//192.168.1.100/，使用學(xué)號(hào)登錄網(wǎng)站。打開左側(cè)“新課導(dǎo)入”欄目，查看兩個(gè)動(dòng)態(tài)網(wǎng)頁實(shí)例及技術(shù)揭秘，并驗(yàn)證。

學(xué)生登錄網(wǎng)站并訪問相應(yīng)網(wǎng)頁。學(xué)生打開實(shí)例一：Happy halloween（萬圣節(jié)快樂），如圖1，網(wǎng)頁一中會(huì)彈出兩個(gè)對(duì)話框，還能用鼠標(biāo)讓南瓜圖片跳舞。查看網(wǎng)頁一的源代碼，查找關(guān)鍵詞“Script”和“Document”。學(xué)生打開實(shí)例二：Slide Bar（網(wǎng)頁調(diào)色板），如圖2，可以移動(dòng)網(wǎng)頁二中的三個(gè)滑塊，實(shí)現(xiàn)調(diào)色板功能。查看網(wǎng)頁二的源代碼，找到關(guān)鍵詞“Script”、“Document”及“Style”。

教師解釋關(guān)鍵詞的含義，引入動(dòng)態(tài)HTML的三大核心技術(shù)：客戶端腳本（Script）、文檔對(duì)象模型（DOM）和層疊樣式表（Style）。

2.新知導(dǎo)學(xué)及學(xué)習(xí)活動(dòng)（35分鐘）

（1）新知導(dǎo)學(xué)

教師打開教學(xué)網(wǎng)頁“知識(shí)要點(diǎn)”，解釋動(dòng)態(tài)HTML的三大核心技術(shù)。教師強(qiáng)調(diào)：我們今天主要學(xué)習(xí)客戶端腳本的使用方法，不要求大家編寫腳本，只要學(xué)會(huì)如何把已有的JavaScript腳本運(yùn)用到網(wǎng)頁中。因此，這節(jié)課奉行的就是“拿來主義”，關(guān)鍵是怎么拿及怎么放。教師介紹JavaScript腳本的使用方法一：嵌入法。

（2）活動(dòng)一：在練習(xí)網(wǎng)站的歡迎頁index.htm上彈出對(duì)話框

學(xué)生打開學(xué)習(xí)網(wǎng)站的“資源鏈接”欄目，在兩個(gè)練習(xí)網(wǎng)站（幾米漫畫或狼的世界）中任選一個(gè)下載到本地機(jī)的D盤，解壓縮并打開網(wǎng)站首頁index.htm，按照要求完成學(xué)習(xí)活動(dòng)。

教師提醒學(xué)生：不會(huì)時(shí)可以觀看教師的操作演示，出現(xiàn)錯(cuò)誤時(shí)可以求助教師和同學(xué)。教師及時(shí)分析學(xué)生中常見的錯(cuò)誤：缺少結(jié)束標(biāo)記；單詞拼寫錯(cuò)誤；標(biāo)點(diǎn)符號(hào)使用了全角字符或者輸入錯(cuò)誤。

設(shè)計(jì)意圖：提供兩個(gè)練習(xí)網(wǎng)站的目的，是希望學(xué)生學(xué)以致用。兩個(gè)網(wǎng)站一個(gè)以漫畫為主題，主色調(diào)是白色的，另一個(gè)是以狼為主題，主色調(diào)為黑色。學(xué)生可以選擇一個(gè)感興趣的網(wǎng)站，將本節(jié)課所學(xué)的技術(shù)運(yùn)用到網(wǎng)頁中，體現(xiàn)出一定的個(gè)性和創(chuàng)造性，獲得一點(diǎn)樂趣和成就感。活動(dòng)一沒有提供現(xiàn)成的代碼，要求學(xué)生自己根據(jù)學(xué)習(xí)網(wǎng)頁的提示，在網(wǎng)頁中輸入代碼。這樣才能讓學(xué)生充分暴露操作中的問題，加深對(duì)嵌入法和