《第五章动态网页制作——.理解动态HTML——.....课件》高中信息技术教科版网络技术应用
高中信息技术选修：网络技术应用 动态网页-“十市联赛”一等奖
教者： 龚宜成
课题
（章节名称）
动态网页制作专题复习
学科
信息技术
授课年级
高二年级
学期
上
课时数
1
教学方法
任务驱动、启发式
教学内容分析
本文就教科版网络技术应用(选修)第五章动态网页制作展开分析，本章内容课本分了四小节，以“认识动态网页”“理解动态html”“应用html”“asp脚本应用”为主线，这样的布局安排从整体来看似乎是一气呵成，合理到位，真正落实到教学实践中，效果不尽人，每年学业考试时，这块都是学生惧怕的难点之一。这一章内容在测试中，会出现三种类型的操作题和5条左右的选择题，分值达到近20分，所以显得尤其的重要。为了能到达更好的教学效果，在学测复习教学中我立足于教材但不拘泥于教材。我把整章大体分成动静态网页的初识、JavaScript部分学习、css部分的学习。每部分的学习是否吸引学生，好的切入点至关重要。高二学生对什么感兴趣新奇的、身边的、直接关联的。所以依托网络环境下的教学平台，在教学中以师生共同发现问题、提出问题、解决问题为学习主线，应用任务教学法与半成品组装法，让学生处在“做中学、学中思、思中做”的状态中，积极主动地完成知识的建构，达成学习目标。
5、能根据实际需要简单应用CSS。
重点、难点分析
教学重点：
1、掌握JavaScrip代码的应用方式
2、了解CSS样式表的类别，以及不同类别的应用方式
教学难点：
1、了解CSS样式表的类别，以及不同类别的应用方式
课堂教学过程结构设计
教学环节
教师活动
学生活动
设计意图
课前准备
老师准备素材，课件，学习平台
学生预习
掀起你的盖头来
第五章---动态网页制作
第五章动态网页制作5．1 动态HTML一、课程标准中的相关内容能够根据表达任务的需求，使用常用的网页制作软件制作与发布动态网页。
二、教学目标1、知识与技能（1）掌握在HTML中加入JavaScript代码的方法。
（2）能够在指定位置加入JavaScript代码。
（3）掌握修改JavaScript代码中文字属性的方法。
综合应用：能够根据网页的内容、风格选择适当的网页特效。
2、过程与方法（1）培养学生的自主学习、探究学习以及协作学习的能力。
（2）培养学生的创新能力、表达能力。
（3）培养学生进行学习反思的学习习惯。
3、情感态度与价值观（1）培养学生与他人合作与交流的能力。
（2）培养学生的信息道德素养。
三、学生分析本课的教学对象是桂城中学的高中二年级学生。
在学习本课之前，他们已经学习了用DreamWeaver制作网页的基本方法，能够制作简单的网页，但不熟悉HTML标记语言。
因此在学习粘贴JavaScript代码前，应先讲解HTML的基本结构，让学生对HTML有一个基本的认识。
四、教材分析1、本节的作用和地位教材编写过程中已在第四节预留了发展的空间，详细的动态HTML技术介绍放在第五章。
学生在学习网页制作过程中，可以跳到5.1中结合实例实习。
也可以在经历了完整的网站开发过程后，在第五章中作进一步充实和完善。
2、本节主要内容本课内容主要是动态HTML中的JavaScript脚本语言的应用。
JavaScript代码能够命令网页出现动态的效果，这是比较受学生欢迎的学习内容。
对于普通高中学生，仅需要了解如何在网页中适当位置加入JavaScript代码即可，无需深入了解JavaScript代码的组成以及原理。
因此我将本课的重点定为：掌握加入JavaScript代码的方法，能够在指定位置加入JavaScript代码。
3、重点难点分析教学重点（1）掌握加入JavaScript代码的方法。
（2）能够在指定位置加入JavaScript代码。
5.1认识动态网页优秀教学案例教科版高中信息技术选修3
3.小组合作培养团队精神：通过小组合作完成动态网页项目，学生能够在团队协作中提高沟通能力、合作能力，培养团队精神。同时，小组合作也有助于学生发挥个体优势，提高综合应用能力。
5.教师加强对小组合作的指导，及时发现并解决合作过程中遇到的问题。
（四）反思与评价
1.引导学生对所学知识进行总结和反思，提高他们的自主学习能力；
2.教师通过提问、讨论等方式，检查学生对动态网页知识的掌握程度；
3.关注学生的学习过程，注重培养他们的创新思维和解决问题的能力；
4.采用多元化评价方式，全面评估学生的知识掌握和实际操作能力；
4.创设情境，让学生结合所学知ຫໍສະໝຸດ 解决实际问题，提高他们解决问题的能力；
5.采用项目式教学，让学生独立完成动态网页项目，提升他们的综合应用能力。
（三）情感态度与价值观
1.培养学生对信息技术学科的兴趣，激发他们学习动态网页技术的热情；
2.培养学生自主学习、主动探究的学习习惯，增强他们的自主学习能力；
3.培养学生团队协作、沟通交流的能力，使他们能够更好地适应社会发展；
5.熟悉常用的网页开发工具，如Dreamweaver、Visual Studio Code等，能够高效地进行动态网页开发。
（二）过程与方法
1.采用问题驱动的教学方法，引导学生主动探究动态网页的原理和制作方法；
2.通过案例教学，让学生动手实践，掌握动态网页制作的整个流程；
3.运用小组合作学习，培养学生团队协作能力和沟通能力；
在教学评价方面，我采用多元化评价方式，不仅关注学生的知识掌握程度，还关注他们的学习过程、情感态度和合作精神，旨在全面提高学生的信息素养。总之，本节课的教学案例旨在通过丰富多样的教学活动和人性化的教学语言，激发学生的学习兴趣，提高他们的综合素质，为他们的未来发展奠定坚实基础。
5.1认识动态网页-教科版高中信息技术选修三教案
用案日期：________年______月_______日星期_______ 主备人：课时：N0:_____
务器页面，Active server Pages）、JSP（Java服务器页面，Java Server Pages）和PHP（超级文本预处理语言，Hypertext Pre-Processor）等技术动态生成的页面。
动态网页技术通常以数据库技术为基础。
2．动态网页和静态网页的区别
动态网页是与静态网页相对应的，这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。
从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。
两者的工作原理区别和各自的特点详见表5-2 动态网页和静态网页工作原理图。
表5-2 动态网页和静态网页工作原理图。
静态网
页的特点简
要归纳如下：
（1）静
态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；
（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；
（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；。
第5章动态网页制作PPT课件
使用绝对路径的优点是无论页面移动到哪里只要目标文档的位置不变，链 接都有效。因此链接到其他站点中的文档必须使用绝对路径。如果链接 的文件是本地站点内的，也可以使用绝对路径，但是一般不建议采用。
2. 文档相对路径
文档相对路径是以当前文件所在路径为起点，进行相对文件的查找。一个 相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访 问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和 文件名，甚至只有文件名。可以用相对URL指向与源文档位于同一服务 器或同一文件夹中的文件。此时，浏览器链接的目标文档处在同一服务 器或同一文件夹下。
如果链接到同一目录下，则只需输入要链接文件的名称。要链接到下级目 录中的文件。只需先输入目录名，然后加“/”，再输入文件名。要链接 到上一级目录中文件，则先输入“../”，再输入文件名。
相对路径的用法如表5.1所示
表5.1 相对路径用法
相对路径名
ቤተ መጻሕፍቲ ባይዱ
含义
herf="shouye.html"
shouye.html 是本地当前路径下的文件
若要使用站点根目录相对路径，首先要定义一个本地文件夹，作 为服务器上文档根目录的等效项。站点根目录相对路径以一个 正斜杠“/”开始，该正斜杠表示站点根文件夹。
例如，计算机有1个文档“5.html”，其在计算机地址栏上的路径 是“F:\My Documents\inetpub\\jtwy\5.html”，如果将作为服 务器dust2的文档根目录，那么“5.html”的站点根目录相对路 径为“/jtwy/5.html”。在浏览器地址栏中的区别如图5.4、图 5.5所示
第5章 超链接网页
本章要点内容:
• 超链接的基本概念。 • 文本超链接、邮件超链接、 脚本超链接以及图像超链接。 • 在页面中添加书签和导航条。
第五章_动态网页的制作52_使用表单创建交互访问522设计一课件高中信息技术粤教版选修3网络技术应用
表单域 ID
文本字段 stuname
网游抢滩登陆战—Dreamweaver表单交互应用
12 赵超鸿 2013年9月 于宁夏银川一中
第二关：自主学习
网游抢滩登陆战—Dreamweaver表单交互应用
13 赵超鸿 2013年9月 于宁夏银川一中
第三关：分组探究
任务3：如何在表单交互中“分组”，实现由 个人闯关升级为团队闯关。 （提示：其id为 stugroup）
网游抢滩登陆战—Dreamweaver表单交互应用
赵超鸿 2013年9月 于宁夏银川一中
你玩过吗？
网游抢滩登陆战—Dreamweaver表单交互应用
赵超鸿 2013年9月 于宁夏银川一中
你玩过吗？
网游抢滩登陆战—Dreamweaver表单交互应用
赵超鸿 2013年9月 于宁夏银川一中
你玩过吗？
分组讨论（2分钟）： 1 如果4个人一组，我们班可分____组。 2 组数较_多__，且每个人只属于_某__一_组。 3 请找找，有哪些表单域可以描述“分组”，你认为哪个最合适？
可以选：单选按钮组、列表/菜单。 最合适的应该是列表/菜单
网游抢滩登陆战—Dreamweaver表单交互应用
14 赵超鸿 2013年9月 于宁夏银川一中
网游抢滩登陆战—Dreamweaver表单交互应用
赵超鸿 2013年9月 于宁夏银川一中
你玩过吗？
网游抢滩登陆战—Dreamweaver表单交互应用
赵超鸿 2013年9月 于宁夏银川一中
游戏就在服务器
网游抢滩登陆战—Dreamweaver表单交互应用
6 赵超鸿龙虎榜>
网游抢滩登陆战—Dreamweaver表单交互应用
11 赵超鸿 2013年9月 于宁夏银川一中
高中信息技术：第五章《通过实例认识动态 HTML》教案
一、教学目标
了解动态 HTML，能够实现简单的动态 HTML 效果。
二、教材内容分析
关于 动态 HTML，书上的概念是：“所谓动态 HTML，是指即使在脱离网络环境的情况下，网页下载到浏览器以后仍能够随时变换的 HTML。〞本概念比较模糊，学生从字面上理解比较含混，不透彻，不直观。教师需要将该概念直观化、形象化，便于学生理解。在理解动态 HTML的同时，需要强调的一点是，并不是网页上所有“动〞的效果都是动态 HTML 效果，比如，有的 GIF图片也会表现出各种活动效果，但这只是图片本身的“动画〞效果而不是“动态 HTML 〞效果。
师：按照我们原来的分组，请同学们暂不考虑该动态 HTML 效果是如何实现的。
生：同学们进行分组活动，并做好记录。
6．教师总结
师：同学们，我们本节课主要是了解了动态 HTML 的实现效果，希望同学们通过课堂上讲解的实例，对动态 HTML 有个大致的了解。为以后进一步学习打下基础。请同学们利用剩余及课后的时间，完成表 5-1 的填写。
表 5-1 动态 HTML 效果举例
网页地址
是否运用动态 HTML
运用了哪几种你知道的动态 HTML 效果
五、对该案例的评价
利用任务驱动法，使学生进行有目的的学习和总结；利用分组完成任务，有助于增进学生的团队意识，提高合作精神。
六、还可以怎样讲
以“动态 HTML 〞为搜索目标，让同学们自己进行学习、总结，提高学生们的自学能力。
DHTML不是有关面向服务器的脚本、 JavaApplet 或动画 GIF图像，所有的这些操作都可以自己完成，除了改变页面内容外，不需要访问服务器。页面下载后，不论什么时候， DHTML都能处理页面元素，改变页面版面、内容和位置并把结果不断地提供给用户。
高中信息技术：第五章《动态网页制作》教案(教科版选修)
第五章《静态网页与动态网页的比较》教案一、教学目标准确把握静态网页与动态网页的区别，为学生以后自主制作动态网页打下良好的基础。
二、教材内容分析关于动态网页，没有动态网站开发经验的同学，可能理解起来比较困难，甚至分不清何为静态网页，何为动态网页。
而网络世界走到今天，动态网页已是大行其道，也是学生很有必要掌握的。
而教材上关于动态网页的介绍显得比较笼统，教师有必要收集相关资料，让学生正确认识动态网页的含义。
三、教学方法及策略依据学生前面制作网页的基础，首先给出静态网页的概念，有了静态网页的学习，采用比较法，学生会对动态网页有个粗浅的了解。
进而通过实例演示，让学生对动态网页有更深一步的了解，达到准确把握动态网页的概念。
该堂课理论内容较多，教师需要将讲授内容通过投影展示到屏幕上，以便于学生学习。
四、教学过程1．教师首先根据同学们前面的学习，给出静态网页的概念师：同学们前面都自己利用 FrontPage 制作过自己喜欢的网页，这种网页的文件扩展名是 .htm 或者 .html。
网页上的每一行代码都是同学们预先编写好后，放置到 Web 服务器上的，在发送到客户端的浏览器上不再发生任何变化。
这种网页，就称之为静态网页。
2．教师展示静态网页的处理过程静态网页的处理流程（1）当用户在浏览器的“地址”栏中输入一个 URL 地址并单击“转到”按钮或敲击键盘上的回车键（或者在浏览器菜单栏的“收藏”选择一个网址）后，浏览器将向 Web 服务器发出一个页面请求。
（2）当 Web 服务器收到这个页面请求，根据 .htm 或 .html 判断出这是一个静态的 HTML 文件，然后从磁盘或存储器中查找获取用户请求的这个页面。
（3） Web 服务器找到这个请求文件后，就会把它发送到浏览器，浏览器对这个返回的 HTML 文件进行解释并将结果显示在浏览器中。
图 5-1 静态网页处理过程3．教师提出关于静态网页的问题，学生思考师：同学们，如果你自己有一个个人网站，需要发布大量的信息，采用静态网页的形式，你们觉得方便吗，有什么弊端？请同学们讨论。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
问题3：下列是两段JavaScript代码，请解释各语句的作用。
<html> <head> </Head> 〈body〉 <Script Language ="JavaScript">
// JavaScript Appears here. alert("这是第一个JavaScript程序！") </Script> 〈/body〉 </Html>
否需要修改。一般来说,像日期时间、页面特效是不需要修 改的，但像菜单，文字等特效是要根据自身网页的特性和 需要进行修改。 2.确定插入的位置。 3.注意版权问题。
小飞开网站首页,有选择地运用下列提供的 JavaScript代码，为你的网页添加特效，使网页变得生 动活泼，让浏览活动变得轻松愉快。 讨论：动态HTML设计原则
1.尽量精简、不要过多使用。 2.过度的闪烁让人头痛。
小飞守角制作
活动四：自我评测
小飞守角制作
活动五：本课小结
一、客户端脚本语言
客户端脚本语言是指可以直接对客户端进行编
二、什写么并是使页Ja面va发Sc生r动ip态t 变化的脚本语言。
三、初J识avaJsacvraiSptc是riNpett程sca序pe公司推出的一种面向浏览
理解动态HTML
客户端脚本语言
本课要求
专注地听讲 敏捷的思维 流畅地发言 主动地交流 灵活地操作
小飞守角制作
动态网页：通过更新页面的外观和行为， 实现动态的交互作用。
客户端脚本语言
JavaScript VBScript
动态HTML 核心技术
文件目标模块 DOM
层叠式样式表 Layers CSS
欣赏网页特效
器的网页脚本编程语言。它可嵌入在HTML文件中，
四、动无态<须SHc编TriaM译plLte设即rLt可计a(n"在g这原u浏是a则g览第e 器一="中个Ja运Jvaa行vSac。Srcirpitp"t>程序！")
</Script> 1.尽量精简、不要过多。 23..<<过合S/cS度理rcir的地pitp闪使tL>烁用an让 滚gu人动ag头字e"痛幕Ja。、va变Sc换ri选pt择" 框s。rc="test.js">
（2）由哪个公司推出？ （2）面对面交流
（3） JavaScript运行环境？（3）小组抢答
（4）评价（ABC等级）
小飞守角制作
• 脚本语言是一种高级编程语言，通常由相应脚本语言的解 释器来解释执行。它包括客户端脚本语言和服务器端脚本 语言。
• 客户端脚本语言：直接对客户端进行编写并使页面发生动 态变化的脚本语言。其最大的优点在于由浏览器解析执行 ，不需要给服务器增加任何的负担。常用的有VBScript 和JavaScript等。
小飞守角制作
活动六：课后拓展
借助于学件中的课后拓展内容，期待 着你进入JavaScript程序世界！
小飞守角制作
<html> <head> </Head> 〈body） <Script Language ="JavaScript" src="test.js"> </Script> 〈/body） </Html> 其中test.js 文件内容为：alert("这是第一个JavaScript程序！")
小飞守角制作
</Script>
小飞守角制作
活动二：观察与归纳
流程 （1）观察：教师如何把JavaScript代码插入到HTML中。 （2）归纳：如何在HTML中插入JavaScript代码。
小飞守角制作
如何在HTML中插入javaScript代码
1.判断是否要修改。 在将JavaScript源代码应用到网页之前，先判断它是
在HTML中嵌入JavaScrip 有两种方法。
方法一：
直接在HTML文件中使用JavaScript , 其描述形式为： <script language = "JavaScript"> JavaScript语句段 </script>
方法二：
<Script language="JavaScript" src="test.js">
小飞守角制作
活动一：阅读与思考
自主阅读学件中的“阅读与思考”栏目，思考如下问题：
问题1：简述客户端脚本语言。 （1） 什么是客户端脚本语言？ （2）简述客户端脚本语言与服务器端脚本语言区别。 （3）常用的客户端脚本语言有哪些？
问题2：简述JavaScript
流 程：
（1）什么是JavaScript？ （1）自主阅读
• 服务器端脚本语言，通常用来操作存于服务器上的数据库 中的数据。当客户请求页面时，页面脚本将在服务器上执 行，然后再反馈给浏览器，浏览器获得标准HTML文件， 进行显示。常用的有ASP、PHP等。
• Javascript是Netscape公司推出的一种面向浏览器的网 页脚本编程语言。它可嵌入在HTML文件中，无须编译即 可在浏览器中运行。