《521理解動態(tài)HTML》教學(xué)設(shè)計

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

2、對象是高二學(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 有一個基本的認(rèn)識。課時安排一課時教學(xué)目標(biāo)知識與技能：（ 1）了解動態(tài) HTML 的三大核心技術(shù)；（ 2）了解什么是客戶端腳本語言；（3）能夠掌握兩種在網(wǎng)頁中加入 JavaScript代碼的方法。過程與方法（1）能夠找出一段 HTML中的JavaScript語言；（2）能夠修改和添加 HTML中的JavaScript語句；情感態(tài)度與

3、價值觀（ 1）培養(yǎng)學(xué)生自主探究的意識。（ 2）能夠體驗到 JavaScript 的制作樂趣。（ 3）通過自主學(xué)習(xí)網(wǎng)站自主學(xué)習(xí)和探究學(xué)，培養(yǎng)發(fā)現(xiàn)問題、解決問題的能力。教學(xué)重點、難點重點： 1、了解什么是客戶端腳本語言；2、掌握加入 JavaScript 代碼的方法。難點： 修改 JavaScript 代碼。教學(xué)過程一、引入新課，活動一：技術(shù)體驗（ 1）學(xué)生在上課前打開瀏覽器用自己的姓名學(xué)號登陸，開始玩網(wǎng)頁上的闖關(guān)小游 戲。網(wǎng)頁闖關(guān)游戲需要查看網(wǎng)頁的源文件，在代碼中查找下一個頁面的地址提示。第二關(guān)理解動態(tài)HTML二舅已過.抑馭韓吐質(zhì)一初WCH MW UMK!# *活動一：技術(shù)的犧臨“wll二*如皿

4、，：屜皿如亡標(biāo)忙松，wtqrlFTtXJM如V：黑雖p bL L|n= ctfii er?Z-iZ,.fem臥罠紀(jì)李幣網(wǎng)鳳實舸-網(wǎng)貝實謝二網(wǎng)竝啊三敷*.心 HELcnF cwil-eT*：1 i w rra 2. jpj- ：b 讓e=七師e mSw.gk/btabf)教師觀察學(xué)生玩網(wǎng)頁闖關(guān)游戲，開始上課后停止游戲，并選擇其中一關(guān)網(wǎng)頁，解釋過 關(guān)的方法：查看網(wǎng)頁的源代碼找到下一個頁面的網(wǎng)址，同時復(fù)習(xí)回顧HTML部分的內(nèi)容。（2）教師打開一個樣例網(wǎng)頁，這個樣例網(wǎng)頁也是課前學(xué)生玩得網(wǎng)頁游戲中的頁面， 頁面中除了有學(xué)生熟悉的HTML代碼以外，還加入了一些學(xué)生不熟悉的代碼，正是這些代碼使網(wǎng)頁有了一些特

5、殊的功能，能夠與瀏覽者有所交互，從而引出本節(jié)課學(xué)習(xí)的主題： 理解動態(tài)HTML，這些代碼正是動態(tài) HTML技術(shù)代表之一的 JavaScript代碼。第三關(guān)| fll ：5靜日”怛標(biāo)x HiYl IHtiCHJ()*ii icr*dl i tnrbgrdjer=*O* sre*addl 1*畫p sii(jirccrticr*Xinpui ijpef=*teKt，MiStylbjrHtPlitnXcnter：+ipul 巾滬t 申囂Stylezt -1 iirtpiii iype=*teit， naiSEc siseJ4 orikf/upchkO!:scrlpi 1 aruae= Javias 亡

6、久口勺s_ vki uje=lath_ fl oar (Ia1h_ randfiisO *100)+1.b_ val.ue=lath_ floordiattL randjamO *100)+1: funeiififi 亡hk0iffswont. keyCade-=13)if (isN-sNCpaTselnt (c- valufiJ )i木宥侖人或輸人的不是斂尹；focus 0； e. BBlBCt 0； elseif (p-arselnt (tyalue) psrgelnt (bB valujelpfatrselntvalue)f alert(*iiAT關(guān)J； aislf. locatiian

7、=wgaaicB.htm*; else alcrtC再想想吧J; c-focus0; c.select(); 學(xué)生玩過剛才網(wǎng)頁上簡單的游戲，已對這幾個網(wǎng)頁的功能有所了解，聽老師解釋這些 網(wǎng)頁能具有一些小功能的原因，并對學(xué)習(xí)內(nèi)容產(chǎn)生興趣。設(shè)計意圖：通過展示幾個生動有趣并具有一定交互性的網(wǎng)頁，激發(fā)學(xué)生興趣，為后 面的學(xué)習(xí)做鋪墊。二、活動二：探究與發(fā)現(xiàn)教師控制課堂導(dǎo)學(xué)網(wǎng)站展開之活動二，參照打開的頁面說明JavaScript是組成動態(tài)HTML三大核心技術(shù)之一，另外還有兩種：DOM文檔對象模型以及 CSS樣式表，本節(jié)課不作討論，并說明本節(jié)課學(xué)習(xí)的重點是 JavaScript客戶端腳本語言。學(xué)生聽老師講解

8、動態(tài) HTML的相關(guān)知識，初步了解三大核心技術(shù)各有什么作用。設(shè)計意圖：介紹動態(tài) HTML的核心技術(shù)構(gòu)成，使學(xué)生對整體的知識架構(gòu)有所映像，便 于明了今天所學(xué)的知識在整體知識結(jié)構(gòu)中的地位和作用。三、自主探究學(xué)習(xí)(1)教師要求同學(xué)打開自主學(xué)習(xí)頁面中的內(nèi)容，包括“客戶端腳本語言”、“什么是JavaScript”、嵌入使用JavaScript ”“調(diào)用JavaScript 文件”，并完成頁面下方的三組練習(xí)：“概念辨析(圖1)”、“腳本找找看(圖2)”、“有何大不同(圖3)”，將自己的答案寫進(jìn)輸入框內(nèi)然提交后，可以看到全班同學(xué)所答的內(nèi)容，以便交流。教師可以點擊“曬曬大家的回答”查看全部同學(xué)的答案。曲詁卯心

9、 IfriiilZJI J-M-SWLfEfritilZilco-i.it rWMQ.如dt吃IEH削I頤之II*iti-n宀l erm* Ottati: 胃丁址工吁L mo 皿 謂之申t-iHM t-irinJ 4HSb 可i；：Hgfi-tEffiWH*.:* JZcr屮HHR巧tfil!疫!t JvYor叭 巧LI =11暑、*91“1列!；1|虛:入黑 m.底二鼻陽氏w帳用干耳-牛申畑f S-+FCWM 聃二WEf1 干占. t+ 霖儷畫聲田 i1甘* 工軸inraH兗切艷田9Sfj人im”whniiiH -欣刃11專叢aiEm+wsit*i!ilifl?hti科nvlMi wdiil

10、.lt.iilJn- riaUJ Ji-BX Uli4 Qi.：3 kJ Hvpwrijfl twwtf-rmffl-ir*r rrT-iM “4UU-l：#箏Un WWa|laifL*T iMKFTtrMf lJnfeKE1itfil-tffgri戸pw*-JmTipi!in wifWLi,訓(xùn)吐 udrinriL1：iiOfnt-a mu 血7.卯 NtHMA irn卜噸aaiilMAmI4亠皿ZQ1 I:hh| ErkfEI4# 7 -血B|jvb t 廣0r “t*”巧* l Lii| rrMwf：亍H*tfni 4-ill J * if 號曲卄昭。M.Ti4d-ivifiaHa1. i

11、cm：i* h-|wKU* u-R*ei涉 jh:bzrJ jjTi. uk. r I ! rfll,lkaliliiB ja.1io*prl、月TvinMy 墾i榭o於盅鈿|耳nt占林”老執(zhí)帕帕口申*曲事坤也丸福崛岸站4 NTH BUdl*1丄申再啊IL 康.一 粒4丸THrfvnA!立內(nèi)鼻_牌比.上NM1眞占學(xué)生自主學(xué)習(xí)網(wǎng)頁中關(guān)于客戶端腳本語言、JavaScript等相關(guān)知識的說明，理解后回答頁面下方問題。點擊提交按鈕將答案提交至服務(wù)器。（2）教師匯總學(xué)生答案并點評，弓I導(dǎo)全班同學(xué)查看所有的回答，對于練習(xí)一部分的 選擇題，選取難度較大學(xué)生錯誤較多的題目進(jìn)行講解，加深學(xué)生的概念；練習(xí)二部分的

12、找 腳本，選取有代表性的學(xué)生答案進(jìn)行點評，鼓勵學(xué)生自己解釋說明自己的答案，教師再提 煉學(xué)生的回答以加深映像；練習(xí)三部分兩種使用JavaScript方式的比較，依然選擇有代表性的答案，請學(xué)生描述自己的理解，教師加以點評和歸納。同學(xué)們觀察所有回答的頁面，查看別的同學(xué)的答案，并思考其他人的回答是否正確。對起來回答的同學(xué)的答案進(jìn)行補(bǔ)充。設(shè)計意圖：對于本節(jié)課理論知識部分的內(nèi)容，采用學(xué)生自主學(xué)習(xí)的方式，有利于學(xué)生根據(jù)自身情況掌握學(xué)習(xí)進(jìn)度，避免了教師對于較枯燥的理論知識進(jìn)行過多講解。自學(xué)后有相應(yīng)的練習(xí)題檢驗學(xué)生的自學(xué)成果，保證教師對學(xué)生的自學(xué)情況有所掌控。四、總結(jié)提煉重點、難點教師幫助提煉知識點，對比嵌入式

13、使用Javascript和調(diào)用使用Javascript文件的區(qū)別,規(guī)范兩種語法的寫法以及各自的優(yōu)點，加深學(xué)生的映像。優(yōu)點代碼H接掃寫.調(diào)試方便不額外增加文件文檔內(nèi)容體化,夠改不影 響其他支檔可方便多個頁面同事使用相同 的內(nèi)容便HT阿L丈檔變得簡潔 -處修改+寒處聯(lián)動嵌入使用Javascript調(diào)用Javascript文件語法escript language=,fjavascriptJ* /Javascript 語句D x.-設(shè)計意圖：梳理知識，為后面的綜合練習(xí)提供理論支撐和技術(shù)支持。五、活動三：應(yīng)用與提升教師將課堂導(dǎo)學(xué)網(wǎng)站展開至活動三，布置學(xué)生完成任務(wù)，任務(wù)內(nèi)容為：從導(dǎo)學(xué)網(wǎng)站下載網(wǎng)頁文件，參考

14、完成稿，對所給的網(wǎng)頁文件添加JavaScript代碼，使其具備鼠標(biāo)跟隨效果、顯示制作人、時間效果，并嘗試修改JavaScript腳本中鼠標(biāo)跟隨文字的內(nèi)容等。理解動羔HTML迂12經(jīng)劇歸腎:F鈕皿卅 KfUita 福啊 2站*.EM 目極 fliHEtaKKe 3r.ri t-O i i-u a* 一尸龜諭砌削“-Si=嚼 n-un*-I4*i -4 . .i-該任務(wù)中鼠標(biāo)跟隨效果使用嵌入 JavaScript 代碼方式，學(xué)生查看網(wǎng)頁的源文件，找到 JavaScript 代碼部分，修改代碼中的鼠標(biāo)跟隨文字內(nèi)容。顯示作者和時間效果使用的是外 部文件調(diào)用方式，學(xué)生須找到外部文件位置，用記事本打開該

15、JS 文件，修改其中的內(nèi) 容。六、匯總學(xué)生完成情況，并展示學(xué)生作品 教師點擊“作品欣賞”，可以點擊每個同學(xué)的名字打開該同學(xué)所修改的網(wǎng)頁作品，點 評說明同學(xué)們做的好的地方以及不足之處。學(xué)生跟隨老師觀看其他同學(xué)的作品，互相交流 制作修改網(wǎng)頁的心得體會。七、課堂小結(jié)、知識回顧 回顧本節(jié)課所學(xué)主要知識，鼓勵表揚學(xué)生所做成果，激發(fā)學(xué)生繼續(xù)探索網(wǎng)頁制作的興 趣。教學(xué)反思本次課的教學(xué)主題是通過學(xué)生自主學(xué)習(xí)的方式學(xué)習(xí)客戶端腳本語言 JavaScript 的基本 知識，通過學(xué) 生完成 概念 辨析選擇題 、查找 JavaScript 代碼 操作和對比 兩種 引用 JavaScript 代碼的方式等過程檢驗自學(xué)的成

16、果，在老師總結(jié)歸納學(xué)習(xí)要點后以實際操作， 給網(wǎng)頁添加 JavaScript 代碼和修改代碼鞏固應(yīng)用方法和技巧，以體會 JavaScript 在網(wǎng)頁制 作中的基本應(yīng)用。本節(jié)課是理解動態(tài) HTML 的第一課時，教材中提到動態(tài) HTML 技術(shù)的三個方面、客 戶端腳本語言的概念以及什么是 JavaScript 等幾個方面的內(nèi)容?？紤]到學(xué)生的接受能力和 網(wǎng)頁制作應(yīng)用中的實際情況，本課時將 JavaScript 腳本語言作為重點知識講解，其他方面 的知識一帶而過。在授課過程中，考慮到概念的講解相對枯燥，較難引起學(xué)生的興趣，考慮再三后采用 了學(xué)生自主學(xué)習(xí)的方式完成，教師通過導(dǎo)學(xué)網(wǎng)站控制課堂的進(jìn)程，使學(xué)生在教師的控制下 循序漸進(jìn)的學(xué)習(xí)，為了檢驗學(xué)生自學(xué)的成果，設(shè)計了三種不同類型的練習(xí)，分別對概念、 認(rèn)識代碼和兩種引用方式的區(qū)分上加以鞏固，通過教師對所有同學(xué)回答的點評和交流使學(xué) 生加深印象，最后再以實際對網(wǎng)頁的操作作為課堂練習(xí)，練習(xí)中也對任務(wù)難度進(jìn)行了分 層，從修改代碼中的漢字內(nèi)容到修改外部引用文件的內(nèi)容，再到學(xué)生自己寫出 JavaScript 代碼實現(xiàn)彈出警告窗口，這是由易到難的過程，適合不同掌握水平的學(xué)生選擇完成。經(jīng)過 實際