《第五章动态网页制作——.理解动态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．教师提出关于静态网页的问题，学生思考师：同学们，如果你自己有一个个人网站，需要发布大量的信息，采用静态网页的形式，你们觉得方便吗，有什么弊端？请同学们讨论。
高中信息技术《网页制作》教案2024新版
情感目标
培养学生对网页设计与制 作的热爱和兴趣，提高学 生的审美能力和创新意识 。
课程安排与时间
课程安排
本课程共分为理论讲授、实践操作和作品展示三个 部分。其中，理论讲授主要讲解网页制作的基本知 识和技术；实践操作则是通过案例分析和项目实践 ，让学生亲自动手制作网页；作品展示则是让学生 展示自己的作品，并接受老师和同学的点评和建议 。
后端开发入门学习
引导学生了解后端开发的基本 概念和技术，为后续的全栈开 发打下基础。
网络安全与防护
提醒学生关注网络安全问题， 学习基本的网络安全知识和防 护技能，保障自己和他人的信 息安全。
新技术与趋势关注
鼓励学生关注前端领域的新技 术和趋势，如PWA、
WebAssembly等，保持对新技 术的敏感度和好奇心。
文本流式布局
通过合适的字体大小和行高设置，保证文本在不同设备上的可读性。
响应式布局设计
导航栏自适应
根据屏幕尺寸调整导航栏的布局和样式 。
VS
下拉菜单与侧边栏
在小屏幕上使用下拉菜单或侧边栏等替代 方案，提供便捷的导航体验。
04
动态效果与交互功能实现
Chapter
JavaScript语言基础
变量与数据类型
时间安排
本课程共36学时，每周2学时，共18周。其中，前 8周为理论讲授阶段，中间8周为实践操作阶段，最 后2周为作品展示和总结阶段。
02
基础知识与技能
Chapter
互联网与万维网概述
互联网的定义与发展 历程
浏览器的作用及常见 类型
万维网的概念与工作 原理
网页基本元素与结构
网页的组成元素
文本、图像、超链接等
高中信息技术《网页制作》教案
动态网页设计与制作实用教程》电子教案
《动态网页设计与制作实用教程》电子教案第一章：动态网页设计基础1.1 动态网页概述1.1.1 动态网页与静态网页的区别1.1.2 动态网页的优势与应用场景1.2 动态网页技术概述1.2.1 HTML5与CSS31.2.2 JavaScript与jQuery1.2.3 服务器端编程语言（如PHP、Java、Python等）1.3 动态网页设计流程1.3.1 需求分析1.3.2 页面布局与设计1.3.3 交互设计与实现1.3.4 页面测试与优化第二章：HTML5与CSS3基础2.1 HTML5概述2.1.1 HTML5的新特性2.1.2 HTML5文档结构2.2 常用HTML5标签2.2.1 语义化标签2.2.2 媒体标签2.2.3 表单标签2.3 CSS3概述2.3.1 CSS3的特点与优势2.3.2 CSS3的基本语法2.4 常用CSS3样式与属性2.4.1 选择器与伪类2.4.2 盒模型与布局2.4.3 颜色、字体与文本2.4.4 过渡与动画第三章：JavaScript与jQuery基础3.1 JavaScript概述3.1.1 JavaScript的历史与发展3.1.2 JavaScript的运行环境3.1.3 JavaScript的基本语法3.2 常用JavaScript函数与对象3.2.1 基本函数与方法3.2.2 日期与数学对象3.2.3 DOM操作3.3 jQuery概述3.3.1 jQuery的优点与特性3.3.2 jQuery的安装与使用3.4 常用jQuery方法与选择器3.4.1 基础方法与属性3.4.2 事件处理3.4.3 动画与效果第四章：动态网页设计工具与技术4.1 网页设计与制作工具4.1.1 代码编辑器（如Sublime Text、Visual Studio Code等）4.1.2 网页设计软件（如Adobe Dreamweaver、Sublime Text等）4.2 图片处理工具4.2.1 Photoshop4.2.2 Fireworks4.3 浏览器兼容性测试与调试4.3.1 浏览器兼容性问题概述4.3.2 浏览器的内核与版本差异4.3.3 兼容性测试工具（如BrowserStack、CrossBrowserTesting等）4.4 前端框架与库4.4.1 Bootstrap4.4.2 Vue.js4.4.3 React第五章：动态网页交互设计与实现5.1 交互设计概述5.1.1 交互设计的重要性5.1.2 交互设计原则与方法5.2 鼠标与键盘事件5.2.1 鼠标事件（如click、dblclick、mousedown等）5.2.2 键盘事件（如keydown、keyup、keypress等）5.3 表单验证与交互5.3.1 表单基本概念与结构5.3.2 表单验证方法与技巧5.3.3 表单提交与异步请求5.4 AJAX技术5.4.1 AJAX概述与原理5.4.2 AJAX请求与响应5.4.3 AJAX应用实例（如动态加载数据、无刷新提交表单等）第六章：响应式网页设计6.1 响应式网页设计概述6.1.1 响应式网页设计的概念6.1.2 响应式网页设计的重要性6.2 媒体查询与弹性布局6.2.1 媒体查询的使用6.2.2 弹性布局与网格系统6.3 响应式设计工具与技术6.3.1 响应式设计框架（如Bootstrap、Foundation等）6.3.2 响应式图片与视频处理6.4 响应式网页设计实践6.4.1 设计适配不同屏幕尺寸的布局6.4.2 优化网页性能与加载速度第七章：前端框架与库的应用7.1 前端框架概述7.1.1 前端框架的优势7.1.2 主流前端框架简介7.2 Bootstrap框架7.2.1 Bootstrap的特点与安装7.2.2 Bootstrap的布局组件7.2.3 Bootstrap的样式与组件7.3 Vue.js框架7.3.1 Vue.js的简介与安装7.3.2 Vue.js的指令与组件7.3.3 Vue.js的数据绑定与组件通信7.4 React框架7.4.1 React的简介与安装7.4.2 React的组件与状态管理7.4.3 React与Redux的结合使用第八章：服务器端编程与数据库8.1 服务器端编程基础8.1.1 服务器端编程语言的选择8.1.2 服务器端编程的基本概念8.2 PHP服务器端编程8.2.1 PHP简介与安装8.2.2 PHP基本语法与数据结构8.2.3 PHP与MySQL数据库的连接与操作8.3 Java服务器端编程8.3.1 Java简介与开发环境配置8.3.2 Java基本语法与面向对象编程8.3.3 Java与MySQL数据库的连接与操作8.4 Python服务器端编程8.4.1 Python简介与安装8.4.2 Python基本语法与Web框架（如Django、Flask）8.4.3 Python与MySQL数据库的连接与操作第九章：动态网页项目实战9.1 项目实战概述9.1.1 项目需求分析9.1.2 项目设计与开发流程9.2 项目搭建与开发环境配置9.2.1 项目文件结构与目录组织9.2.2 开发工具与技术栈选择9.3 项目实现与测试9.3.1 页面布局与样式设计9.3.2 交互功能实现9.3.3 服务器端编程与数据库设计9.4 项目部署与上线9.4.1 部署环境选择与配置9.4.2 域名与网站空间申请9.4.3 网站搜索引擎优化（SEO）第十章：动态网页设计与制作的未来趋势10.1 前端技术发展趋势10.1.1 5G网络与边缘计算10.1.2 WebAssembly与Web性能优化10.1.3 跨平台与组件化开发10.2 与机器学习在网页设计中的应用10.2.1 在网页内容中的应用10.2.2 机器学习在用户行为分析与个性化推荐中的应用10.3 网页设计与制作的创新与挑战10.3.1 虚拟现实（VR）与增强现实（AR）在网页设计中的应用10.3.2 网页设计与制作的可持续发展与伦理考虑10.4 未来网页设计师的技能要求10.4.1 技术能力与软技能10.4.2 跨界合作与终身学习重点和难点解析重点一：动态网页的优势与应用场景解析：理解动态网页与静态网页的区别，以及动态网页的优势和适用场景是学习动态网页设计的基础。
《动态网页》PPT课件
整理ppt
5
3.1.3 在ASP中使用VBScript
1. 通过IIS指定ASP默认脚本语言 用户可通过IIS指定默认使用的脚本语言，只要是<%
和%>之间的代码，ASP在解释时会认为使用的是默认脚 本语言。
P49 【例3-1】通过“Internet信息服务”控制台设定ASP 的默认脚本语言为VBScript。
Imp 逻辑蕴含 第1个为真，第2个为假，结果为真，其余全 部为假
整理ppt
18
3.3.4 连接运算符
连接运算是将两个字符表达式连接起 来，生成一个新的字符串。连接运算符有+ 和&两个。
例：<% money=56
strTemp="应收金额="&money
%>
<% money="56" strTemp="应收金额="+money
整理ppt
16
3.3.2 关系运算符
关系运算符用来比较两个表达式的值的大小。
大于（>）、小于（<）、大于等于（>=）、 小于等于（<=）、不等于（<>）和等于（=）。
关系运算的结果是逻辑值（布尔值）True或 False。
P55 表3-3 关系运算符
例：3>1
True
2>5
False
then<there
VBScript只有一种数据类型，即
Variant类型，也叫做变体类型。Variant 类型可以在不同的场合代表不同的数据。
例如， Variant用于数字时，将作为数值 处理；用于字符串时，将作为字符串处
5.1认识动态网页教学设计教科版高中信息技术选修3
1.实践作业：制作一个具有简单交互功能的动态网页。
要求：运用HTML、CSS和JavaScript等技术，实现至少一个动态效果，如动态显示时间、图片轮播等。同时，尝试使用一种服务器端编程语言（如PHP）实现数据交互。
提示：在制作过程中，注意代码规范和性能优化，确保网页在各种浏览器中的兼容性。
（二）讲授新知
1.讲解动态网页的概念、运行原理及与静态网页的区别。
教学内容：动态网页是通过对用户请求进行实时处理，生成并返回相应内容的网页。与静态网页相比，动态网页具有交互性强、内容更新及时等特点。
教学语言引导：“动态网页与静态网页最大的区别在于，动态网页可以根据用户的操作实时生成内容，而静态网页的内容是固定的。接下来，我们来学习一下动态网页是如何运行的。”
5.思考题：探讨动态网页制作中的安全问题及防范措施。
要求：结合实际案例，分析动态网页制作中可能遇到的安全问题，并提出相应的防范措施。
提示：可以从SQL注入、XSS攻击等方面进行思考，结合所学知识提出有效的解决方案。
请同学们认真完成作业，通过作业的实践与思考，进一步提高自己的动态网页制作能力和信息安全意识。在完成作业过程中，如有疑问，可随时与老师和同学进行交流，共同进步。期待大家在下一次课堂上的精彩表现！
1.对动态网页的概念和运行原理理解不够深入，容易混淆动态网页与静态网页的区别。
2.缺乏实际编程经验，对HTML、CSS、JavaScript等技术的应用不够熟练，导致动态网页制作过程中出现错误。
3.对服务器端编程语言和数据库知识了解有限，难以实现复杂的动态网页功能。
4.在团队协作中，沟通能力和分工合作能力有待提高。
5.1.1动态HTML课件
• 动态HTML • 动态网页
请以“读我”为话题撰写一篇解读自我“属性”的 短文，并作适当排版，对作文内容、形式不作任何要求， 只要求将真正的自己用文字勾勒出即可。“这样，若干 年后，当大家再次翻阅时，能回想起‘当初的你’”。
（1）自选角度，自拟题目。 （2）文体不限。 （3）写出自己的真情实感。 （4）不得套作，不得抄袭。 （5）软件平台选择FrontPage，制作动态HTML。
第五章动态网页制作
5.1认识动态网页
5.1.1动态HTML
实现简单的动态HTML效果
小组合作，参考P106-P107的方法指 导，尝试“读我”主题动态HTML制作。
动态HTML
动态HTML是指即使在脱离网 络环境的情况下,网页下载到浏览器 以后仍能够随时变换的HTML。
常见的动态HTML效果
光标悬停效果 在网页中加入日期，时间 文字特效，图片特效 在网页中加入动感菜单
注意：
并不是网页上所有：有的GIF图片本身就会动。
小结：
我们了解了简单的“鼠标悬停”、“单 击飞出”等效果的制作，我们还可以发现时 间日期的显示、动感菜单等效果，当然动态 HTML的效果还有很多，我们将在下一节课 和大家深入研究动态网页的制作。
教学设计1：理解动态HTML
高中信息技术（选修）网络技术应用
理解动态HTML 教学设计
一、教学目标
1知识与技能
（1）掌握在HTML中加入JavaScriWeaver制作网页的基本方法，能够制作简单的网页，但不熟悉HTML标记语言。
因此在学习粘贴JavaScriL的基本结构，让学生对HTML有一个基本的认识。
三、教材分析
1本节的作用和地位
教材编写过程中已在第四节预留了发展的空间，详细的动态HTML技术介绍放在第五章。
学生在学习网页制作过程中，可以跳到中结合实例实习。
也可以在经历了完整的网站开发过程后，在第五章中作进一步充实和完善。
2本节主要内容
本课内容主要是动态HTML中的JavaScriL中加入JavaScri
L之间的关系，能够根据任务表达的需求，制作具有动态特效的网页。
九、教学反思
从整体来说，本节课的教学目标均能按预期效果实现。
我认为本课最大的两个特点在于任务的设置以及学习反思的实现。
回顾整个教学过程以及分析教学调查情况，我感觉在练习点评以及个别知识点的讲授方面仍需改进。
（1）任务细化、难度逐层深入、由“点”到“面”。
让学生从简单任务入手，使学生感受成功，让成功感促学生继续学习。
用任务驱动学生进行探究，将问题留给学习小组，让学生在“做”中发现方法，用实践经验帮助学生理解知识、消化知识。
将练习资源划分难度，并安排不同层次的任务，让不同层次的学生均能得到提高。
（2）加入学习反思环节。
下课前预留5分钟，让学生完成教学调查，方便教师及时收集学生的学习情况。
同时指导学生进行学习反思，帮助学生梳理本课知识体系，同时方便学生之间共享学习成果。
高一信息技术《动态网页制作》教学设计
高一信息技术《动态网页制作》教学设计江苏省溧水高级中学王蓉本节课采用网络环境下的教学方式，将教师的教学步骤制作成课件存放在服务器上，学生上课时按照老师指定的方法和步骤，将课件下载到本机的硬盘上（如D上）或直接浏览，可以清楚的看到教学步骤和过程，并选择不同的网页分别学习。
一、教材分析这节课内容为“动态网页制作”，根据时间和学生的学习能力选择了5项：1、横幅广告管理器的使用2、悬停按钮的制作3、滚动字幕的制作4、插入站点计数器5、使用动态HTML效果学生先按照指定的路径输入地址，或将教学过程的网页下载保存到D盘，打开教学过程网页后，完成前4项，根据自己的实际情况，有时间的同学再完成第5项。
二、教学模式——网络环境的教学模式并结合任务驱动的方法所谓网络环境下的教学模式是把多媒体机房看成一个局域网，教师机作为服务器，老师把要学习的内容和要完成的学习任务做成课件放在服务器上，学生按照指定的方法连接到服务器上，阅览学习内容，并且完成老师指定的任务。
整个学习过程学生发挥了很大的主动性，成为课堂的主体，而教师则巡视和辅导一下，成为了客体。
网络环境下的教学模式是新的教学模式，本节课体现的就是这种研究性学习。
任务驱动教学方法是信息技术课堂常用的一种教学方法，也就是给学生布置任务，让学生学习有目标，是学生在完成任务的过程中学到知识和技能。
本节课也采用了这种方法，把任务放在服务器上，这些任务学生必须完成，学生要完成学习任务就要先学会利用网络进行学习，完成任务后也就掌握了这些知识和技能。
三、课件设计在课件的设计，把5个动态效果具体体现在教学课件上，使得该课件既可以让学生学习又是这5个内容的具体例子，一举两得。
例如，本节课内容之一为“横幅广告管理器”，教学课件的网页横幅左侧就是一个广告管理器的使用，学生既可以浏览网页的内容，又可以具体的知道横幅广告管理器究竟是什么。
由于本节课是网络环境下的教学模式和任务驱动的结合，是教学中新的尝试，存在许多不足之处，望专家指正。
- 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文件中，无须编译即 可在浏览器中运行。