《521理解动态HTML》教学设计

1、521理解动态HTM教学设计教材分析本节是教育科学出版社 2004 年 10 月第一版高二选修网络技术应用第五章的第二小节的第一课时，本课时是在上一节探索过动态HTML效果的基础上，理解、掌握动态HTML的工作过程，主要是客户端脚本语言（JavaScript）的理解和应用。学生对使用JavaScript实现的动态HTML效果都很感兴趣，但 JavaScript的学习要经历一个循序渐进的 过程，本课是理解动态 HTML的第一课，是初步认识和体验制作JavaScript的起始篇，因此学好本课将为后续深入学习动态HTML的其他部分知识打下良好的基础，它在本章中占有重要的地位和作用。学情分析本课的教学

2、对象是高二学生。在学习本课之前，他们已经学习了用Frontpage 制作网页的基本方法，能够制作简单的网页，会使用记事本查看网页的源代码，了解基本的 HTML 标记语言。因此在学习粘贴 JavaScript 代码前，先回顾 HTML 的基本结构，让学 生对 HTML 有一个基本的认识。课时安排一课时教学目标知识与技能：（ 1）了解动态 HTML 的三大核心技术；（ 2）了解什么是客户端脚本语言；（3）能够掌握两种在网页中加入 JavaScript代码的方法。过程与方法（1）能够找出一段 HTML中的JavaScript语言；（2）能够修改和添加 HTML中的JavaScript语句；情感态度与

3、价值观（ 1）培养学生自主探究的意识。（ 2）能够体验到 JavaScript 的制作乐趣。（ 3）通过自主学习网站自主学习和探究学，培养发现问题、解决问题的能力。教学重点、难点重点： 1、了解什么是客户端脚本语言；2、掌握加入 JavaScript 代码的方法。难点： 修改 JavaScript 代码。教学过程一、引入新课，活动一：技术体验（ 1）学生在上课前打开浏览器用自己的姓名学号登陆，开始玩网页上的闯关小游 戏。网页闯关游戏需要查看网页的源文件，在代码中查找下一个页面的地址提示。第二关理解动态HTML二舅已过.抑驭韓吐质一初WCH MW UMK!# *活动一：技术的牺临“wll二*如皿

4、，：屜皿如亡标忙松，wtqrlFTtXJM如V：黑虽p bL L|n= ctfii er?Z-iZ,.fem臥罠紀李币网凤实舸-网貝实谢二网竝啊三敷*.心 HELcnF cwil-eT*：1 i w rra 2. jpj- ：b 让e=七师e mSw.gk/btabf)教师观察学生玩网页闯关游戏，开始上课后停止游戏，并选择其中一关网页，解释过 关的方法：查看网页的源代码找到下一个页面的网址，同时复习回顾HTML部分的内容。（2）教师打开一个样例网页，这个样例网页也是课前学生玩得网页游戏中的页面， 页面中除了有学生熟悉的HTML代码以外，还加入了一些学生不熟悉的代码，正是这些代码使网页有了一些特

5、殊的功能，能够与浏览者有所交互，从而引出本节课学习的主题： 理解动态HTML，这些代码正是动态 HTML技术代表之一的 JavaScript代码。第三关| fll ：5静日”怛标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关J； aislf. locatiian

7、=wgaaicB.htm*; else alcrtC再想想吧J; c-focus0; c.select(); 学生玩过刚才网页上简单的游戏，已对这几个网页的功能有所了解，听老师解释这些 网页能具有一些小功能的原因，并对学习内容产生兴趣。设计意图：通过展示几个生动有趣并具有一定交互性的网页，激发学生兴趣，为后 面的学习做铺垫。二、活动二：探究与发现教师控制课堂导学网站展开之活动二，参照打开的页面说明JavaScript是组成动态HTML三大核心技术之一，另外还有两种：DOM文档对象模型以及 CSS样式表，本节课不作讨论，并说明本节课学习的重点是 JavaScript客户端脚本语言。学生听老师讲解

8、动态 HTML的相关知识，初步了解三大核心技术各有什么作用。设计意图：介绍动态 HTML的核心技术构成，使学生对整体的知识架构有所映像，便 于明了今天所学的知识在整体知识结构中的地位和作用。三、自主探究学习(1)教师要求同学打开自主学习页面中的内容，包括“客户端脚本语言”、“什么是JavaScript”、嵌入使用JavaScript ”“调用JavaScript 文件”，并完成页面下方的三组练习：“概念辨析(图1)”、“脚本找找看(图2)”、“有何大不同(图3)”，将自己的答案写进输入框内然提交后，可以看到全班同学所答的内容，以便交流。教师可以点击“晒晒大家的回答”查看全部同学的答案。曲诂卯心

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,訓吐 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占林”老执帕帕口申*曲事坤也丸福崛岸站4 NTH BUdl*1丄申再啊IL 康.一 粒4丸THrfvnA!立內鼻_牌比.上NM1眞占学生自主学习网页中关于客户端脚本语言、JavaScript等相关知识的说明，理解后回答页面下方问题。点击提交按钮将答案提交至服务器。（2）教师汇总学生答案并点评，弓I导全班同学查看所有的回答，对于练习一部分的 选择题，选取难度较大学生错误较多的题目进行讲解，加深学生的概念；练习二部分的

12、找 脚本，选取有代表性的学生答案进行点评，鼓励学生自己解释说明自己的答案，教师再提 炼学生的回答以加深映像；练习三部分两种使用JavaScript方式的比较，依然选择有代表性的答案，请学生描述自己的理解，教师加以点评和归纳。同学们观察所有回答的页面，查看别的同学的答案，并思考其他人的回答是否正确。对起来回答的同学的答案进行补充。设计意图：对于本节课理论知识部分的内容，采用学生自主学习的方式，有利于学生根据自身情况掌握学习进度，避免了教师对于较枯燥的理论知识进行过多讲解。自学后有相应的练习题检验学生的自学成果，保证教师对学生的自学情况有所掌控。四、总结提炼重点、难点教师帮助提炼知识点，对比嵌入式

13、使用Javascript和调用使用Javascript文件的区别,规范两种语法的写法以及各自的优点，加深学生的映像。优点代码H接扫写.调试方便不额外增加文件文档内容体化,够改不影 响其他支档可方便多个页面同事使用相同 的内容便HT阿L丈档变得简洁 -处修改+寒处联动嵌入使用Javascript调用Javascript文件语法escript language=,fjavascriptJ* /Javascript 语句D x.-设计意图：梳理知识，为后面的综合练习提供理论支撑和技术支持。五、活动三：应用与提升教师将课堂导学网站展开至活动三，布置学生完成任务，任务内容为：从导学网站下载网页文件，参考

14、完成稿，对所给的网页文件添加JavaScript代码，使其具备鼠标跟随效果、显示制作人、时间效果，并尝试修改JavaScript脚本中鼠标跟随文字的内容等。理解动羔HTML迂12经剧歸肾:F鈕皿卅 KfUita 福啊 2站*.EM 目極 fliHEtaKKe 3r.ri t-O i i-u a* 一尸龟谕砌削“-Si=嚼 n-un*-I4*i -4 . .i-该任务中鼠标跟随效果使用嵌入 JavaScript 代码方式，学生查看网页的源文件，找到 JavaScript 代码部分，修改代码中的鼠标跟随文字内容。显示作者和时间效果使用的是外 部文件调用方式，学生须找到外部文件位置，用记事本打开该

15、JS 文件，修改其中的内 容。六、汇总学生完成情况，并展示学生作品 教师点击“作品欣赏”，可以点击每个同学的名字打开该同学所修改的网页作品，点 评说明同学们做的好的地方以及不足之处。学生跟随老师观看其他同学的作品，互相交流 制作修改网页的心得体会。七、课堂小结、知识回顾 回顾本节课所学主要知识，鼓励表扬学生所做成果，激发学生继续探索网页制作的兴 趣。教学反思本次课的教学主题是通过学生自主学习的方式学习客户端脚本语言 JavaScript 的基本 知识，通过学 生完成 概念 辨析选择题 、查找 JavaScript 代码 操作和对比 两种 引用 JavaScript 代码的方式等过程检验自学的成

16、果，在老师总结归纳学习要点后以实际操作， 给网页添加 JavaScript 代码和修改代码巩固应用方法和技巧，以体会 JavaScript 在网页制 作中的基本应用。本节课是理解动态 HTML 的第一课时，教材中提到动态 HTML 技术的三个方面、客 户端脚本语言的概念以及什么是 JavaScript 等几个方面的内容。考虑到学生的接受能力和 网页制作应用中的实际情况，本课时将 JavaScript 脚本语言作为重点知识讲解，其他方面 的知识一带而过。在授课过程中，考虑到概念的讲解相对枯燥，较难引起学生的兴趣，考虑再三后采用 了学生自主学习的方式完成，教师通过导学网站控制课堂的进程，使学生在教师的控制下 循序渐进的学习，为了检验学生自学的成果，设计了三种不同类型的练习，分别对概念、 认识代码和两种引用方式的区分上加以巩固，通过教师对所有同学回答的点评和交流使学 生加深印象，最后再以实际对网页的操作作为课堂练习，练习中也对任务难度进行了分 层，从修改代码中的汉字内容到修改外部引用文件的内容，再到学生自己写出 JavaScript 代码实现弹出警告窗口，这是由易到难的过程，适合不同掌握水平的学生选择完成。经过 实际