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

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

2、對(duì)象是高二學(xué)生。在學(xué)習(xí)本課之前，他們已經(jīng)學(xué)習(xí)了用Frontpage 制作網(wǎng)頁(yè)的基本方法，能夠制作簡(jiǎn)單的網(wǎng)頁(yè)，會(huì)使用記事本查看網(wǎng)頁(yè)的源代碼，了解基本的 HTML 標(biāo)記語(yǔ)言。因此在學(xué)習(xí)粘貼 JavaScript 代碼前，先回顧 HTML 的基本結(jié)構(gòu)，讓學(xué) 生對(duì) HTML 有一個(gè)基本的認(rèn)識(shí)。課時(shí)安排一課時(shí)教學(xué)目標(biāo)知識(shí)與技能：（ 1）了解動(dòng)態(tài) HTML 的三大核心技術(shù)；（ 2）了解什么是客戶端腳本語(yǔ)言；（3）能夠掌握兩種在網(wǎng)頁(yè)中加入 JavaScript代碼的方法。過(guò)程與方法（1）能夠找出一段 HTML中的JavaScript語(yǔ)言；（2）能夠修改和添加 HTML中的JavaScript語(yǔ)句；情感態(tài)度與

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

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

5、殊的功能，能夠與瀏覽者有所交互，從而引出本節(jié)課學(xué)習(xí)的主題： 理解動(dòng)態(tài)HTML，這些代碼正是動(dòng)態(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é)生玩過(guò)剛才網(wǎng)頁(yè)上簡(jiǎn)單的游戲，已對(duì)這幾個(gè)網(wǎng)頁(yè)的功能有所了解，聽老師解釋這些 網(wǎng)頁(yè)能具有一些小功能的原因，并對(duì)學(xué)習(xí)內(nèi)容產(chǎn)生興趣。設(shè)計(jì)意圖：通過(guò)展示幾個(gè)生動(dòng)有趣并具有一定交互性的網(wǎng)頁(yè)，激發(fā)學(xué)生興趣，為后 面的學(xué)習(xí)做鋪墊。二、活動(dòng)二：探究與發(fā)現(xiàn)教師控制課堂導(dǎo)學(xué)網(wǎng)站展開之活動(dòng)二，參照打開的頁(yè)面說(shuō)明JavaScript是組成動(dòng)態(tài)HTML三大核心技術(shù)之一，另外還有兩種：DOM文檔對(duì)象模型以及 CSS樣式表，本節(jié)課不作討論，并說(shuō)明本節(jié)課學(xué)習(xí)的重點(diǎn)是 JavaScript客戶端腳本語(yǔ)言。學(xué)生聽老師講解

8、動(dòng)態(tài) HTML的相關(guān)知識(shí)，初步了解三大核心技術(shù)各有什么作用。設(shè)計(jì)意圖：介紹動(dòng)態(tài) HTML的核心技術(shù)構(gòu)成，使學(xué)生對(duì)整體的知識(shí)架構(gòu)有所映像，便 于明了今天所學(xué)的知識(shí)在整體知識(shí)結(jié)構(gòu)中的地位和作用。三、自主探究學(xué)習(xí)(1)教師要求同學(xué)打開自主學(xué)習(xí)頁(yè)面中的內(nèi)容，包括“客戶端腳本語(yǔ)言”、“什么是JavaScript”、嵌入使用JavaScript ”“調(diào)用JavaScript 文件”，并完成頁(yè)面下方的三組練習(xí)：“概念辨析(圖1)”、“腳本找找看(圖2)”、“有何大不同(圖3)”，將自己的答案寫進(jìn)輸入框內(nèi)然提交后，可以看到全班同學(xué)所答的內(nèi)容，以便交流。教師可以點(diǎn)擊“曬曬大家的回答”查看全部同學(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.底二鼻陽(yáng)氏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 號(hào)曲卄昭。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)頁(yè)中關(guān)于客戶端腳本語(yǔ)言、JavaScript等相關(guān)知識(shí)的說(shuō)明，理解后回答頁(yè)面下方問題。點(diǎn)擊提交按鈕將答案提交至服務(wù)器。（2）教師匯總學(xué)生答案并點(diǎn)評(píng)，弓I導(dǎo)全班同學(xué)查看所有的回答，對(duì)于練習(xí)一部分的 選擇題，選取難度較大學(xué)生錯(cuò)誤較多的題目進(jìn)行講解，加深學(xué)生的概念；練習(xí)二部分的

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

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

14、完成稿，對(duì)所給的網(wǎng)頁(yè)文件添加JavaScript代碼，使其具備鼠標(biāo)跟隨效果、顯示制作人、時(shí)間效果，并嘗試修改JavaScript腳本中鼠標(biāo)跟隨文字的內(nèi)容等。理解動(dòng)羔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)頁(yè)的源文件，找到 JavaScript 代碼部分，修改代碼中的鼠標(biāo)跟隨文字內(nèi)容。顯示作者和時(shí)間效果使用的是外 部文件調(diào)用方式，學(xué)生須找到外部文件位置，用記事本打開該

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

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