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

優質課展臺

2012年10月底，江南大學舉辦的“國培計劃”高中信息技術教師研修班在無錫市天一中學開課，聽了由夏燕萍和馬暢兩位老師上的兩節《理解動態HTML》的同題異構課。兩位老師的教學方式各有千秋，在同一教學內容的處理方面顯現了各自的特點，我們又邀請了湖南的張葵老師為此次同課異構的兩節課做了點評。

● 教材分析

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

● 學生分析

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

● 教學目標

知識與技能目標：初步了解動態HTML的三個核心技術；理解客戶端腳本語言和JavaScript的概念；學會在HTML中嵌入JavaScript腳本，并能做適當修改；學會建立JavaScript腳本文件，并能在網頁中調用；能夠根據網頁的內容、風格選擇適當的網頁特效。

過程與方法目標：通過半成品加工掌握JavaScript腳本的使用方法；通過學習網站，學會自主學習，掌握知識及技能；通過作品交流，培養表達、交流和鑒賞能力。

情感態度與價值觀目標：通過網頁欣賞和制作，培養發現美、欣賞美和創造美的意識和能力；通過學習和應用客戶端腳本，培養嚴謹、細致的學習習慣，體驗技術的魅力和價值，提高學習興趣；通過作品交流，增進同學間互動，學會分享和傾聽，體驗成功喜悅和同學友誼。

● 教學重、難點

重點：客戶端腳本和JavaScript的概念，網頁中使用JavaScript腳本的兩種方法。

難點：動態HTML和客戶端腳本的概念，JavaScript腳本代碼的識別及修改。

● 教學策略

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

● 教學過程

1.情境導入（5分鐘）

師：請同學們打開瀏覽器，訪問學習網站http：//192.168.1.100/，使用學號登錄網站。打開左側“新課導入”欄目，查看兩個動態網頁實例及技術揭秘，并驗證。

學生登錄網站并訪問相應網頁。學生打開實例一：Happy halloween（萬圣節快樂），如圖1，網頁一中會彈出兩個對話框，還能用鼠標讓南瓜圖片跳舞。查看網頁一的源代碼，查找關鍵詞“Script”和“Document”。學生打開實例二：Slide Bar（網頁調色板），如圖2，可以移動網頁二中的三個滑塊，實現調色板功能。查看網頁二的源代碼，找到關鍵詞“Script”、“Document”及“Style”。

教師解釋關鍵詞的含義，引入動態HTML的三大核心技術：客戶端腳本（Script）、文檔對象模型（DOM）和層疊樣式表（Style）。

2.新知導學及學習活動（35分鐘）

（1）新知導學

教師打開教學網頁“知識要點”，解釋動態HTML的三大核心技術。教師強調：我們今天主要學習客戶端腳本的使用方法，不要求大家編寫腳本，只要學會如何把已有的JavaScript腳本運用到網頁中。因此，這節課奉行的就是“拿來主義”，關鍵是怎么拿及怎么放。教師介紹JavaScript腳本的使用方法一：嵌入法。

（2）活動一：在練習網站的歡迎頁index.htm上彈出對話框

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

教師提醒學生：不會時可以觀看教師的操作演示，出現錯誤時可以求助教師和同學。教師及時分析學生中常見的錯誤：缺少結束標記；單詞拼寫錯誤；標點符號使用了全角字符或者輸入錯誤。

設計意圖：提供兩個練習網站的目的，是希望學生學以致用。兩個網站一個以漫畫為主題，主色調是白色的，另一個是以狼為主題，主色調為黑色。學生可以選擇一個感興趣的網站，將本節課所學的技術運用到網頁中，體現出一定的個性和創造性，獲得一點樂趣和成就感。活動一沒有提供現成的代碼，要求學生自己根據學習網頁的提示，在網頁中輸入代碼。這樣才能讓學生充分暴露操作中的問題，加深對嵌入法和