5.1认识动态网页教学设计20232024学年教科版高中信息技术选修3

5.1认识动态网页5.1.1认识动态HTML

一、教材分析本节课是教育科学出版社《网络技术应用》第五章第一节的内容。为动态网页学习的和应用提供知识基础，起到了非常基础的作用。关于动态HTML，书上的概念是：“所谓动态HTML，是指即使在脱离网络环境的情况下，网页到浏览器以后仍能够随时变换的HTML。”本概念比较模糊，学生从字面上理解比较含混，不透彻，不直观。教师需要将该概念直观化、形象化，便于学生理解。在理解动态HTML的同时，需要强调的一点是，并不是网页上所有“动”的效果都是动态HTML效果，比如，有的GIF图片也会表现出各种活动效果，但这只是图片本身的“动画”效果而不是“动态HTML”效果。二、学情分析在学习本堂课之前，学生已经运用FrontPage软件制作过微小型的网站，但都是应用“所见即所得”软件进行设计，并没有真正用代码实现过，因此，本节知识是解开学生对代码神秘面纱起到非常关键基础的作用，这里要求学生具备一定的抽象思维和理解思维。三、教学目标1.知识与技能（1）感受动态效果；（2）理解动态HTML的概念。2.过程与方法（1）通过感受和实现简单的动态HTML效果，学会制作简单动态效果的方法；（2）在任务驱动中以自主操作推进课堂，提升学生独立思考和操作的能力；（3）在分组上网搜索动态DHTML的应用实例，发挥团队作用，促进学生的团队意识，增强彼此之间的合作。3.情感态度与价值观（1）通过感受和实现简单的动态HTML效果，激发学习兴趣，提升学习的成就感，为下节课动态HTML的制作奠定基础。；（2）利用精彩的实例，激发学生学习动态HTML网页的制作兴趣，提高学生的审美情趣。四、教学重难点分析重点：通过感受动态效果，理解动态HTML的概念。难点：通过任务驱动，让学生在规定时间完成规定的任务。五、教学方法及策略（1）通过简单的实例演示，让学生对动态HTML概念有比较具体的认识。（2）利用任务驱动法，让学生学会简单的动态HTML制作。（3）分组上网搜索动态DHTML的应用实例，发挥团队作用，促进学生的团队意识，增强彼此之间的合作。利用精彩的实例，激发学生学习动态HTML网页的制作兴趣，提高学生的审美情趣。六、教学过程教学环节教师活动学生活动多媒体资源设计思想自主学习自主预习课本第105页至第196页的相关内容，认识什么是动态HTML。结合学生的回答归纳：动态HTML：是指在脱离网络环境的情况下，网页到浏览器后仍能后随时变换的HTML。例如：鼠标指针移动至文章段落中，段落能够变成蓝色等。自主阅读，将问题勾画在课本上，或在word上写出自己的答案不断地设计自主学习环节，让学生形成主动学习的好习惯，进一步提升自主学习和独立思考问题的能力。师生互动1．教师展示网上搜集到的一个“旋转导航菜单”师：请学生们就本导航菜单展开讨论。（1）分析与常见的导航栏的区别。（2）你看到这个导航菜单在动，你觉得它是普通意义上的动画吗？师：希望大家踊跃发言，说出自己的观点。2．教师给出DHTML的比较容易理解的解释DHTML不是有关面向服务器的脚本、JavaApplet或动画GIF图像，所有的这些操作都可以自己完成，除了改变页面内容外，不需要访问服务器。页面后，不论什么时候，DHTML都能处理页面元素，改变页面版面、内容和位置并把结果不断地提供给用户。根据教师投影出的“旋转导航菜单”讨论老师提出的问题。并回答。认真听讲并理解师生互动解释动态HTML，激发学生的学习兴趣。任务驱动3．自己动手制作简单的动态HTML请同学们从网上找两幅自己喜欢的图片并到本地机。然后打开FrontPage,先将其中的一幅图片插入，使用DHTML效果，利用其中的“鼠标悬停”事件，将第一幅图片交换成第二幅图片。4．自己动手更多地体验FrontPage中的DHTML效果请同学们在做完上个题目以后，相互讨论，逐一快速体会其他的DHTML效果。5．分组上网搜索动态HTML的应用实例，更好地理解、体会动态HTML的概念及应用按照我们原来的分组，请同学们上网搜索动态HTML的应用实例。利用网络，在本地机上完成该任务，同时体会动态HTML效果。相互讨论，完成其他操作。同学们进行分组活动，并做好记录。讲练结合，有助于学生对动态HTML的理解。熟悉其他动态事件。明确本堂课的任务，本节只注重直观认识，暂不考虑该动态HTML效果是如何实现的。教师总结同学们，我们本节课主要是了解了动态HTML的实现效果，希望同学们通过课堂上讲解的实例，对动态HTML有个大致的了解。学生自我总结。让学生明确本堂课所认识的动态HTML的效果，意识到动态效果的好处。作业为以后进一步学习打下基础。请同学们利用剩余及课后的时间，完成表51的填写。表51动态HTML效果举例网页地址是否运用动态HTML运用了哪几种你知道的动态HTML效果

五、教学反思利用任务驱动法，使学生进行有目的的学习和总结；利用分组的形式完成任务，有助于增进学生的团队意识，提高合作精神。以“动态HTML”为搜索目标，让同学们自己进行学习、总结，提高学生们的自学能力。学生遇到的问题：学生花费了一些时间，却没能找到相关的一些动态HTML效果。改进：提前把工作做细，可以提供一些自己搜索到的动态HTML效果，把网址告诉同学们。这样就能节省时间，加快学生对动态HTML效果的认知。5.1.2静态网页与动态网页的比较一、教材分析本节课是也教育科学出版社《网络技术应用》第五章第一节的内容。关于动态网页，没有动态网站开发经验的同学，可能理解起来比较困难，甚至分不清何为静态网页，何为动态网页。而网络世界走到今天，动态网页已是大行其道，也是学生很有必要掌握的。而教材上关于动态网页的介绍显得比较笼统，教师有必要收集相关资料，让学生正确认识动态网页的含义，便于学生更好地建设网站。二、学情分析对于本节内容，高二年级地学生先前并没有过多地了解动态网页和静态网页，仅仅只是从字面意义上理解，包括前面主题网站的建设，有的学生设计得有动态网页和静态网页，只是不了解，也不关心，相当于是“零基础”地情况。针对学生“零基础”的情况，在讲解时要求更加地细致，透彻。教学过程中，要求学生具备一定的自主学习能力，抽象理解思维能力。二、教学重、难点重点：理解动态网页和静态网页的区别。难点：深入理解动态网页和静态网页的过程及区别。三、教学方法及策略依据学生前面制作网页的基础，首先给出静态网页的概念，有了静态网页的学习，采用比较法，学生会对动态网页有个粗浅的了解。进而通过实例演示，让学生对动态网页有更深一步的了解，达到准确把握动态网页的概念。该堂课理论内容较多，教师需要将讲授内容通过投影展示到屏幕上，以便于学生学习。四、教学过程教学环节教师活动学生活动教学媒体资源设计思想自主学习1.教师首先根据同学们的学习，给出静态网页的概念同学们前面都自己利用FrontPage制作过自己喜欢的网页，这种网页的文件扩展名是.htm或者.html。网页上的每一行代码都是同学们预先编写好后，放置到Web服务器上的，在发送到客户端的浏览器上不再发生任何变化。这种网页，就称之为静态网页。自主阅读，将静态网页和动态网页的概念勾画在课本上。计算机、课件进一步提升自主学习和独立思考问题的能力。新课探究（1）2.教师展示静态网页的处理过程静态网页的处理流程，如图51所示。（1）当用户在浏览器的“地址”栏中输入一个URL地址并单击“转到”按钮或敲击键盘上的回车键（或者在浏览器菜单栏的“收藏”选择一个网址）后，浏览器将向Web服务器发出一个页面请求。（2）当Web服务器收到这个页面请求，根据.htm或.html判断出这是一个静态的HTML文件，然后从磁盘或存储器中查找获取用户请求的这个页面。（3）Web服务器找到这个请求文件后，就会把它发送到浏览器，浏览器对这个返回的HTML文件进行解释并将结果显示在浏览器中。如图51静态网页处理过程（课件展示）。认真听讲并理解。任务驱动3.教师提出关于静态网页的问题，学生思考同学们，如果你自己有一个个人网站，需要发布大量的信息，采用静态网页的形式，你们觉得方便吗，有什么弊端？请同学们讨论。4．登录126网站，体验动态网页给出任务：请同学们登录126网站，通过“注册2280M免费邮箱”，注册一个属于自己的邮箱。在这个过程中，思考这样一个问题：这种注册方式是静态网页能完成的任务吗？讨论老师提出的问题并回答。自主注册邮箱，感受其注册的过程并回答。实践与理论相结合，有助于学生感受抽象的静态网页。新课探究（2）5.动态网页的处理流程（教师听学生的回答再补充）动态网页的处理流程如图52所示。（1）用户在浏览器的“地址”栏中输入一个URL地址并单击“转到”按钮或敲击键盘上的回车键（或者在浏览器菜单栏的“收藏”选择一个网址）后，浏览器将向Web服务器发出一个页面请求。（2）当Web服务器收到这个页面请求，根据文件扩展名判断出它是一个动态网页，会从磁盘或存储器中查找获取用户请求的这个页面，再将这个页面传递给应用程序服务器。（3）用程序服务器解释执行该页中的脚本代码，并将结果以静态网页的形式保存。（4）应用程序服务器将静态网页结果传递给Web服务器。（5）Web服务器把它发送到浏览器，浏览器对这个返回的HTML文件进行解释并将结果显示在浏览器中。如图52动态网页的处理过程（课件展示）。学生先自主学习，相互讨论难点。举手的学生根据自己的学习讲解其过程听教师讲解。认真听讲课件呈现动态网页处理过程的课件。从原理上给学生分析，目的是让学生感受静态网页和动态网页的本质区别，有助于学生在今后的网页制作。课堂总结6.给出动态网页的概念及处理流程（学生先总结，教师后补充）动态网页和静态网页的区别是：1）动态网页的文件扩展名不是.htm、.html，而是以．asp、．jsp、．php、．perl、.cgi等形式为文件后缀；2）动态网页中的某些脚本只能在服务器上运行，而静态网页不能包含在服务器上运行的任何脚本；3）当Web服务器收到用户请求的静态页面后，将把查找结果直接发送到浏览器，而当Web服务器收到用户请求的动态页面后，它将先把这个网页传递给一个称为应用服务器扩展的特殊软件进行处理，然后将处理结果传送给浏览器。学生发表自己的理解。自我总结。让学生先总结，教师再补充，提升学生自我表达能力，自我剖析总结的能力。知识延伸教师进一步比较静态网页和动态网页。（1）程序是否在服务器端运行，是区分动态网页和静态网页的重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP．NET、CGI等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如Html页、Flash、JavaScript、VBScript等等，它们是永远不变的。（2）这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看却有很大的差别。动态网页的一般特点如下：（1）动态网页以数据库技术为基础，可以大大降低网站维护的工作量；（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时。

学生听讲/。计算机、课件进一步理解静态网页与动态网页的区别。采用讲授法，目的在于拉紧课堂节奏，其次让学生集中精力听讲，不至于让学生感觉好像什么都得自己自学。学生活动根据所学内容，完成表52。表52静态网页和动态网页的比较表

静态网页动态网页扩展名

是否以数据库作为基础

能否完成交互功能

是否独立于服务器

响应流程

优/缺点

电子任务单。课后作业一、填空题所谓动态HTML，是指即使在的情况下，网页到浏览器以后仍能够随时变换的HTML。二、判断题1．网页上所有“