《理解動態HTML》教學設計（二）

● 教材分析

《理解動態HTML》是教育科學出版社出版的高二選修《網絡技術應用》第五章的第二小節的第一課時，本課時是在上一節探索過動態HTML效果的基礎上，理解、掌握動態HTML的工作過程，主要是客戶端腳本語言（JavaScript）的理解和應用。學生對使用JavaScript實現的動態HTML效果都很感興趣，但是JavaScript的學習要經歷一個循序漸進的過程，本節課是理解動態HTML的第一課，是初步認識和體驗制作JavaScript的起始篇，因此，學好本課將為后續深入學習動態HTML的其他部分知識打下良好的基礎。

● 學情分析

本節課的教學對象是高二學生。在學習本課之前，他們已經學習了用FrontPage制作網頁的基本方法，能夠制作簡單的網頁，會使用記事本查看網頁的源代碼，了解基本的HTML標記語言。因此，在學習粘貼JavaScript代碼前，教師先回顧HTML的基本結構，讓學生對HTML有一個基本的認識。

● 教學目標

知識與技能目標：了解動態HTML的三大核心技術；了解什么是客戶端腳本語言；能夠掌握兩種在網頁中加入JavaScript代碼的方法。

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

情感態度與價值觀目標：培養自主探究的意識；能夠體驗到JavaScript的制作樂趣；通過自主學習網站自主學習和探究學習，培養發現問題、解決問題的能力。

● 教學重、難點

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

難點：修改JavaScript代碼。

● 教學過程

1.引入新課，技術體驗

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

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

學生玩過剛才網頁上簡單的游戲，已對這幾個網頁的功能有所了解，聽教師解釋這些網頁能具有一些小功能的原因，并對學習內容產生興趣。

設計意圖：通過展示幾個生動有趣并具有一定交互性的網頁，激發學生興趣，為后面的學習做鋪墊。

2.探究與發現

教師控制課堂導學網站展開活動二，參照打開的頁面說明JavaScript是組成動態HTML三大核心技術之一，另外還有兩種：DOM文檔對象模型以及CSS樣式表，本節課不做討論，并說明本節課學習的重點是JavaScript客戶端腳本語言。

學生聽教師講解動態HTML的相關知識，初步了解三大核心技術各有什么作用。

設計意圖：介紹動態HTML的核心技術構成，使學生對整體的知識架構有所印象，便于明了今天所學的知識在整體知識結構中的地位和作用。

3.自主探究學習

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

學生自主學習網頁中關于客戶端腳本語言、JavaScript等相關知識的說明，理解后回答頁面下方問題。點擊提交按鈕將答案提交至服務器。

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

學生觀察所有回答的頁面，查看別的學生的答案，并思考其他人的回答是否正確。對發言的學生的答案進行補充。

設計意圖：對于本節課理論知識部分的內容，采用學生自主學習的方式，有利于學生根據自身情況掌握學習進度，避免了教師對于較枯燥的理論知識進行過多講解。自學后有相應的練習題檢驗學生的自學成果，保證教師對學生的自學情況有所掌控。

4.總結提煉重、難點

教師幫助學生提煉知識點（如圖2），對比嵌入式使用JavaScript和調用使用JavaScript文件的區別，規范兩種語法的寫法以及各自的優點，加深學生的印象。

設計意圖：梳理知識，為后面的綜合練習提供理論支撐和技術支持。

5.應用與提升

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

該任務中鼠標跟隨效果使用嵌入JavaScript代碼方式，學生查看網頁的源文件，找到JavaScript代碼部分，修改代碼中的鼠標跟隨文字內容。顯示作者和時間效果使用的是外部文件調用方式，學生須找到外部文件位置，用記事本打開該JS文件，修改其中的內容。

6.匯總與展示

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

7.課堂小結、知識回顧

回顧本節課所學主要知識，鼓勵表揚學生所做成果，激發學生繼續探索網頁制作的興趣。

● 教學反思

本節課是理解動態HTML的第一課時，教材中提到動態HTML技術的三個方面、客戶端腳本語言的概念以及什么是JavaScript等幾個方面的內容。考慮到學生的接受能力和網頁制作應用中的實際情況，本課時將JavaScript腳本語言作為重點知識講解，其他方面的知識一帶而過。

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

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

點 評

夏老師和馬老師在對本章教材深入研究與整體把握的基礎上，結合學生的實際情況，利用教學網站和學生自主學習網站，通過組織學生玩游戲、開展闖關競賽等活動，由淺入深，讓學生直觀地了解動態HTML的三大核心技術，知道客戶端腳本的概念。他們采取讓學生仔細觀察、慎密思考、模仿練習、鞏固提升等措施，依次掌握如何在網頁中找出JavaSript腳本、嵌入JavaSript腳本和調用JavaSript腳本文件的方法，了解客戶端腳本在DHTML中的作用，從而達成教學目標。總結起來，這兩節課主要特點如下。

1.創設學習情境，激趣導入，喚起學生強烈的求知欲。動態HTML中腳本語言的內容相對比較枯燥，學生不感興趣，但其效果是有趣的。兩位教師所上的課的導入環節都十分精彩，開始就讓學生玩游戲、觀察有趣的實例，讓學生直觀地了解動態HTML的魅力，從而激發學生學習本節內容的濃厚興趣。

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

3.關注課前預設與學生學習過程，加強對學生的巡視指導。兩位教師在課前的教學設計中都充分分析了學生可能出現的問題，并提供處理預案。在課堂教學中，能關注學生的學習過程，對學生在學習中出現的錯誤不回避，而是及時地對學生進行有效的指導。

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

但是兩位教師所上的課仍然有需要改進的地方，我建議著重改進以下方面。（1）教學目標應更具體、明確、可行、可評測，行為動詞選擇應更科學，避免與課程目標相混淆。應切實抓住教學重點、難點，重、難點描述時不應過多。（2）教學中注意對所學內容的對比、分析、梳理與歸納總結，培養學生養成良好的學習習慣，將小組協作學習更要落到實處，掌握有效的學習方法，提高學習效率。例如，在整堂課結束前，應留出時間引導學生對所學知識進行梳理、歸納、總結、感悟與提升，讓學生將所學知識結構化，并設置新的學習懸念，為下節課學習做好鋪墊。