《理解動態(tài)HTML》教學設計(二)

精品文檔-下載后可編輯《理解動態(tài)HTML》教學設計(二)教材分析

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

學情分析

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

教學目標

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

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

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

教學重、難點

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

難點：修改JavaScript代碼。

教學過程

1.引入新課，技術體驗

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

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

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

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

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

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

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

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

3.自主探究學習

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

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

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

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

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

4.總結提煉重、難點

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

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

5.應用與提升

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

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

6.匯總與展示

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

7.課堂小結、知識回顧

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

教學反思

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

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

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

點評

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

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

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

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

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

但是兩位教師所上的課仍然有需要改進的地方，我建議著重改進以下方面