高中信息技術(shù)（選修）網(wǎng)絡(luò)技術(shù)應(yīng)用5.2理解動態(tài)HTML教學(xué)設(shè)計(jì)

高中信息技術(shù)（選修）網(wǎng)絡(luò)技術(shù)應(yīng)用5.2理解動態(tài)HTML教學(xué)設(shè)計(jì)《理解動態(tài)HTML》是教育科學(xué)出版社出版的高二選修《網(wǎng)絡(luò)技術(shù)應(yīng)用》第五章的第二小節(jié)的第一課時(shí)，本課時(shí)是在上一節(jié)探索過動態(tài)HTML效果的基礎(chǔ)上，理解、掌握動態(tài)HTML的工作過程，主要是客戶端腳本語言（JavaScript）的理解和應(yīng)用。學(xué)生對使用JavaScript實(shí)現(xiàn)的動態(tài)HTML效果都很感興趣，但是JavaScript的學(xué)習(xí)要經(jīng)歷一個(gè)循序漸進(jìn)的過程，本節(jié)課是理解動態(tài)HTML的第一課，是初步認(rèn)識和體驗(yàn)制作JavaScript的起始篇，因此，學(xué)好本課將為后續(xù)深入學(xué)習(xí)動態(tài)HTML的其他部分知識打下良好的基礎(chǔ)。

一、學(xué)情分析

本節(jié)課的教學(xué)對象是高二學(xué)生。在學(xué)習(xí)本課之前，他們已經(jīng)學(xué)習(xí)了用FrontPage制作網(wǎng)頁的基本方法，能夠制作簡單的網(wǎng)頁，會使用記事本查看網(wǎng)頁的源代碼，了解基本的HTML標(biāo)記語言。因此，在學(xué)習(xí)粘貼JavaScript代碼前，教師先回顧HTML的基本結(jié)構(gòu)，讓學(xué)生對HTML有一個(gè)基本的認(rèn)識。

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

知識與技能目標(biāo)：了解動態(tài)HTML的三大核心技術(shù)；了解什么是客戶端腳本語言；能夠掌握兩種在網(wǎng)頁中加入JavaScript代碼的方法。

過程與方法目標(biāo)：能夠找出一段HTML中的JavaScript語言；能夠修改和添加HTML中的JavaScript語句。

情感態(tài)度與價(jià)值觀目標(biāo)：培養(yǎng)自主探究的意識；能夠體驗(yàn)到JavaScript的制作樂趣；通過自主學(xué)習(xí)網(wǎng)站自主學(xué)習(xí)和探究學(xué)習(xí)，培養(yǎng)發(fā)現(xiàn)問題、解決問題的能力。

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

重點(diǎn)：了解什么是客戶端腳本語言；掌握加入JavaScript代碼的方法。

難點(diǎn)：修改JavaScript代碼。

二、教學(xué)過程

1.引入新課，技術(shù)體驗(yàn)

（1）學(xué)生在上課前打開瀏覽器用自己的姓名學(xué)號登錄，開始玩網(wǎng)頁上的闖關(guān)小游戲。網(wǎng)頁闖關(guān)游戲需要查看網(wǎng)頁的源文件，在代碼中查找下一個(gè)頁面的地址提示。教師觀察學(xué)生玩網(wǎng)頁闖關(guān)游戲，開始上課后停止游戲，并選擇其中一關(guān)網(wǎng)頁，解釋過關(guān)的方法：查看網(wǎng)頁的源代碼找到下一個(gè)頁面的網(wǎng)址，同時(shí)復(fù)習(xí)回顧HTML部分的內(nèi)容。

（2）教師打開一個(gè)樣例網(wǎng)頁（如圖1），這個(gè)樣例網(wǎng)頁也是課前學(xué)生玩的網(wǎng)頁游戲中的頁面，頁面中除了有學(xué)生熟悉的HTML代碼以外，還加入了一些學(xué)生不熟悉的代碼，正是這些代碼使網(wǎng)頁有了一些特殊的功能，能夠與瀏覽者有所交互，從而引出本節(jié)課學(xué)習(xí)的主題：理解動態(tài)HTML，這些代碼正是動態(tài)HTML技術(shù)代表之一的JavaScript代碼。

學(xué)生玩過剛才網(wǎng)頁上簡單的游戲，已對這幾個(gè)網(wǎng)頁的功能有所了解，聽教師解釋這些網(wǎng)頁能具有一些小功能的原因，并對學(xué)習(xí)內(nèi)容產(chǎn)生興趣。

設(shè)計(jì)意圖：通過展示幾個(gè)生動有趣并具有一定交互性的網(wǎng)頁，激發(fā)學(xué)生興趣，為后面的學(xué)習(xí)做鋪墊。

2.探究與發(fā)現(xiàn)

教師控制課堂導(dǎo)學(xué)網(wǎng)站展開活動二，參照打開的頁面說明JavaScript是組成動態(tài)HTML三大核心技術(shù)之一，另外還有兩種：DOM文檔對象模型以及CSS樣式表，本節(jié)課不做討論，并說明本節(jié)課學(xué)習(xí)的重點(diǎn)是JavaScript客戶端腳本語言。

學(xué)生聽教師講解動態(tài)HTML的相關(guān)知識，初步了解三大核心技術(shù)各有什么作用。

設(shè)計(jì)意圖：介紹動態(tài)HTML的核心技術(shù)構(gòu)成，使學(xué)生對整體的知識架構(gòu)有所印象，便于明了今天所學(xué)的知識在整體知識結(jié)構(gòu)中的地位和作用。

3.自主探究學(xué)習(xí)

（1）教師要求學(xué)生打開自主學(xué)習(xí)頁面中的內(nèi)容，包括“客戶端腳本語言”、“什么是JavaScript”、“嵌入使用JavaScript”、“調(diào)用JavaScript文件”，并完成頁面下方的三組練習(xí)：“概念辨析”、“腳本找找看”、“有何大不同”，將自己的答案寫進(jìn)輸入框內(nèi)提交后，可以看到全班學(xué)生所答的內(nèi)容，以便交流。教師可以點(diǎn)擊“曬曬大家的回答”查看全部學(xué)生的答案。

學(xué)生自主學(xué)習(xí)網(wǎng)頁中關(guān)于客戶端腳本語言、JavaScript等相關(guān)知識的說明，理解后回答頁面下方問題。點(diǎn)擊提交按鈕將答案提交至服務(wù)器。

（2）教師匯總學(xué)生答案并點(diǎn)評，引導(dǎo)全班學(xué)生查看所有的回答，對于練習(xí)一的選擇題，選取難度較大學(xué)生錯(cuò)誤較多的題目進(jìn)行講解，加深學(xué)生的概念；練習(xí)二的找腳本，選取有代表性的學(xué)生答案進(jìn)行點(diǎn)評，鼓勵學(xué)生解釋說明自己的答案，教師再提煉學(xué)生的回答以加深印象；練習(xí)三是兩種使用JavaScript方式的比較，依然選擇有代表性的答案，請學(xué)生描述自己的理解，教師加以點(diǎn)評和歸納。

學(xué)生觀察所有回答的頁面，查看別的學(xué)生的答案，并思考其他人的回答是否正確。對發(fā)言的學(xué)生的答案進(jìn)行補(bǔ)充。

設(shè)計(jì)意圖：對于本節(jié)課理論知識部分的內(nèi)容，采用學(xué)生自主學(xué)習(xí)的方式，有利于學(xué)生根據(jù)自身情況掌握學(xué)習(xí)進(jìn)度，避免了教師對于較枯燥的理論知識進(jìn)行過多講解。自學(xué)后有相應(yīng)的練習(xí)題檢驗(yàn)學(xué)生的自學(xué)成果，保證教師對學(xué)生的自學(xué)情況有所掌控。

4.總結(jié)提煉重、難點(diǎn)

教師幫助學(xué)生提煉知識點(diǎn)（如圖2），對比嵌入式使用JavaScript和調(diào)用使用JavaScript文件的區(qū)別，規(guī)范兩種語法的寫法以及各自的優(yōu)點(diǎn)，加深學(xué)生的印象。

設(shè)計(jì)意圖：梳理知識，為后面的綜合練習(xí)提供理論支撐和技術(shù)支持。

5.應(yīng)用與提升

教師將課堂導(dǎo)學(xué)網(wǎng)站展開至活動三，布置學(xué)生完成任務(wù)，任務(wù)內(nèi)容為：從導(dǎo)學(xué)網(wǎng)站下載網(wǎng)頁文件，參考完成稿，對所給的網(wǎng)頁文件添加JavaScript代碼，使其具備鼠標(biāo)跟隨效果、顯示制作人、時(shí)間效果，并嘗試修改JavaScript腳本中鼠標(biāo)跟隨文字的內(nèi)容等。

該任務(wù)中鼠標(biāo)跟隨效果使用嵌入JavaScript代碼方式，學(xué)生查看網(wǎng)頁的源文件，找到JavaScript代碼部分，修改代碼中的鼠標(biāo)跟隨文字內(nèi)容。顯示作者和時(shí)間效果使用的是外部文件調(diào)用方式，學(xué)生須找到外部文件位置，用記事本打開該JS文件，修改其中的內(nèi)容。6.匯總與展示

教師點(diǎn)擊“作品欣賞”，可以點(diǎn)擊每個(gè)學(xué)生的名字打開該學(xué)生所修改的網(wǎng)頁作品，點(diǎn)評說明學(xué)生做得好的地方以及不足之處。學(xué)生跟隨教師觀看其他學(xué)生的作品，互相交流制作、修改網(wǎng)頁的心得體會。

7.課堂小結(jié)、知識回顧

回顧本節(jié)課所學(xué)主要知識，鼓勵表揚(yáng)學(xué)生所做成果，激發(fā)學(xué)生繼續(xù)探索網(wǎng)頁制作的興趣。

三、教學(xué)反思

本節(jié)課是理解動態(tài)HTML的第一課時(shí)，教材中提到動態(tài)HTML技術(shù)的三個(gè)方面、客戶端腳本語言的概念以及什么是JavaScript等幾個(gè)方面的內(nèi)容?？紤]到學(xué)生的接受能力和網(wǎng)頁制作應(yīng)用中的實(shí)際情況，本課時(shí)將JavaScript腳本語言作為重點(diǎn)知識講解，其他方面的知識一帶而過。

在授課過程中，考慮到概念的講解相對枯燥，較難引起學(xué)生的興趣，考慮再三后采用了學(xué)生自主學(xué)習(xí)的方式完成。教師通過導(dǎo)學(xué)網(wǎng)站控制課堂的進(jìn)程，使學(xué)生在教師的控制下循序漸進(jìn)地學(xué)習(xí)。為了檢驗(yàn)學(xué)生自學(xué)的成果，教師設(shè)計(jì)了三種不同類型的練習(xí)，分別對概念、認(rèn)識代碼和兩種引用方式的區(qū)分加以鞏固。通過教師對所有學(xué)生回答的點(diǎn)評和交流使學(xué)生加深印象，最后再將實(shí)際對網(wǎng)頁的操作作為課堂練習(xí)。練習(xí)中也對任務(wù)難度進(jìn)行了分層，從修改代碼中的漢字內(nèi)容到修改外部引用文件的內(nèi)容，再到學(xué)生自己寫出JavaScript代碼實(shí)現(xiàn)彈出警告窗口，這是由易到難的過程，適合不同掌握水平的學(xué)生選擇完成。經(jīng)過實(shí)際的教學(xué)，發(fā)現(xiàn)學(xué)生在這樣的教學(xué)方式下能夠較好地掌握本節(jié)課的重、難點(diǎn)內(nèi)容。

同時(shí)，在實(shí)際的教學(xué)后也發(fā)現(xiàn)，正是由于教師基本控制了整堂課的進(jìn)度和節(jié)奏，使得課堂的靈活性受到局限，沒能滿足少部分接受特別快的學(xué)生對更深層次知識的探索。另外，由于課堂練習(xí)的操作題所用素材是前幾節(jié)網(wǎng)頁制作課上學(xué)生自己動手制作的網(wǎng)頁作品，較為簡單、頁面數(shù)量也較少，這就對于外部引用JS文件實(shí)現(xiàn)網(wǎng)頁動態(tài)效果的主要優(yōu)勢“一處修改，多處聯(lián)動、節(jié)省大量時(shí)間”難以得到體會。若能選取頁面更多的實(shí)例作為修改素材，可能會使學(xué)生更好地理解外部引用文件的這一大優(yōu)勢。

四、點(diǎn)評

在對本章教材深入研究與整體把握的基礎(chǔ)上，結(jié)合學(xué)生的實(shí)際情況，利用教學(xué)網(wǎng)站和學(xué)生自主學(xué)習(xí)網(wǎng)站，通過組織學(xué)生玩游戲、開展闖關(guān)競賽等活動，由淺入深，讓學(xué)生直觀地了解動態(tài)HTML的三大核心技術(shù)，知道客戶端腳本的概念。他們采取讓學(xué)生仔細(xì)觀察、慎密思考、模仿練習(xí)、鞏固提升等措施，依次掌握如何在網(wǎng)頁中找出JavaSript腳本、嵌入JavaSript腳本和調(diào)用JavaSript腳本文件的方法，了解客戶端腳本在DHTML中的作用，從而達(dá)成教學(xué)目標(biāo)?？偨Y(jié)起來，這兩節(jié)課主要特點(diǎn)如下。

1.創(chuàng)設(shè)學(xué)習(xí)情境，激趣導(dǎo)入，喚起學(xué)生強(qiáng)烈的求知欲。動態(tài)HTML中腳本語言的內(nèi)容相對比較枯燥，學(xué)生不感興趣，但其效果是有趣的。兩位教師所上的課的導(dǎo)入環(huán)節(jié)都十分精彩，開始就讓學(xué)生玩游戲、觀察有趣的實(shí)例，讓學(xué)生直觀地了解動態(tài)HTML的魅力，從而激發(fā)學(xué)生學(xué)習(xí)本節(jié)內(nèi)容的濃厚興趣。

2.恰當(dāng)處理教材，利用教學(xué)網(wǎng)站和學(xué)習(xí)網(wǎng)站提高課堂教學(xué)實(shí)效。兩位教師對教材中的術(shù)語和概念進(jìn)行了深入的研究，某些知識在教材的基礎(chǔ)上有了更進(jìn)一步的完善與拓展，同時(shí)精心選擇了學(xué)生感興趣的、多層次、多梯度的JavaSript特效等，利用教學(xué)網(wǎng)站和學(xué)習(xí)網(wǎng)站讓學(xué)生模仿練習(xí)和鞏固練習(xí)，通過自主探究和分組協(xié)作學(xué)習(xí)新知，大大提高了學(xué)習(xí)效率。

3.關(guān)注課前預(yù)設(shè)與學(xué)生學(xué)習(xí)過程，加強(qiáng)對學(xué)生的巡視指導(dǎo)。兩位教師在課前的教學(xué)設(shè)計(jì)中都充分分析了學(xué)生可能出現(xiàn)的問題，并提供處理預(yù)案。在課堂教學(xué)中，能關(guān)注學(xué)生的學(xué)習(xí)過程，對學(xué)生在學(xué)習(xí)中出現(xiàn)的錯(cuò)誤不回避，而是及時(shí)地對學(xué)生進(jìn)行有效的指導(dǎo)。

4.注重對學(xué)生交流與評價(jià)的指導(dǎo)，評價(jià)方式多樣化。在作品交流與展示活動中，教師對展示評價(jià)的流程作了具體的要求，讓學(xué)生在展示與評價(jià)時(shí)有章可循，評價(jià)的方式多樣化，有利于提高學(xué)習(xí)評價(jià)的有效性。

但是兩位教師所上的課仍然有需要改進(jìn)的地方，我建議著重改進(jìn)以下方面。（1）教學(xué)目標(biāo)應(yīng)更