浙教版（2023）八年级上册第9课 网页的数据编码优质教学设计

这是一份浙教版（2023）八年级上册第9课 网页的数据编码优质教学设计，共7页。教案主要包含了学习内容分析，学情分析，教学重难点，课前准备，学习过程，网页中的交互等内容，欢迎下载使用。
一、学习内容分析
本课是浙江省信息科技教材八年级上册第二单元的第 9课，本课内容处于互联网应用与创新模块，包含了网页的编码、网页的数据请求与响应、网页中的交互三部分内容。要求学生能通过学习网页的数据编码，理解网页的数据请求与响应过程；通过体验网页表单，了解网页表单数据交互的过程。处于第二单元《互联网数据》的第四课，承上启下，为学习下一节网页的编辑与发布打下基础。
二、学情分析
本课授课对象为初二学生，接触过不少网页知识，在本课之前，学生已经了解了常用互联网应用中的数据构成，掌握了HTML文档的基本结构，能够初步编辑HTML网页代码，理解了超链接的作用，体验过CSS设置的效果。但是对于网页的数据编码，网页的数据请求和响应过程以及网页表单数据交互的过程还不太了解。
学习目标
四、教学重难点
教学重点：了解网页的数据编码，理解网页的数据请求与响应过程。编辑好的网页能否正确打开依赖于各个部分的数据编码是否正确，网页发送请求后，浏览器根据编码进行解析，返回相应的数据，编码在这个环节中起到极其重要的作用。
教学难点：通过体验设置网页表单，了解网页表单数据交互的过程。表单是实现网页交互的重要组成部分，表单属性对于学生来讲也是比较陌生的部分，表单所涉及的设置内容较多，想让学生在一节课中进行理解并掌握有较大难度。
通过小组合作、实践探究、分析归纳、迁移应用辅以教师指导等多种方式逐一突破。
五、课前准备
学习环境：Edge浏览器，Windws系统电脑
设计思路
通过讨论得出网页中需要出现的数据，从各项数据的组织进入本课的知识点，讲解HTML标签编码。通过视频标签的添加让学生掌握网页编码及数据请求与响应这部分内容。
学生讨论平时碰到过的网页交互方式，通过网页现有表单的分析以及文本输入框的添加让学生掌握网页表单交互的设置。
教法学法
本课采用实践体验法、讨论总结法、演示讲解法、任务探究法等教学方法。
七、学习过程
教学目标
核心素养指向
1.通过具体任务的实践活动，了解网页的数据编码；
2.分析网页编码，理解网页的数据请求与响应过程；
3.通过体验网页表单，了解网页表单数据交互的过程。
1.信息意识：崇尚科学精神、原创精神，具有自主动手解决问题、掌握核心技术的意识。
2.计算思维：能在真实情境中发现问题，提取问题的基本特征，对问题进行抽象、分解、建模，制订解决方案。
3.数字化学习与创新：按照任务需求，能选择合适的数字设备、平台和资源，合作完成数字化创新活动的创意、规划与实施。
4.信息社会责任：具有良好的协作意识与习惯，乐于帮助他人开展信息活动，负责任的共享信息和资源，并尊重他人知识产权。
学习任务
学习过程
设计意图
教师活动
学生活动
引入
播放一则AI宣传视频。
当今科技发展非常迅速，AI已经渗入我们生活的方方面面，如果老师打算以网页的形式来调查收集同学们对AI了解情况的信息，那么这张网页中需要有哪些元素？（文字、图片、视频、输入框、按钮……）现在通过网页收集信息的方法很常见（展示案例），大多都有文字、图片、输入框、按钮等这些元素，输入框和按钮都属于表单的一部分。今天这节课我们就要学着将这些元素组合起来制作一个“AI主题小调查”的网页。
参与思考、讨论
通过话题引导学生联系日常观察，引出本课课题
新授
一、网页的编码
我们先打开下发的“AI主题小调查”观察一下，这个界面中有哪些元素？（图片、文字、表单）
大家知道这些内容是如何展示在一个网页中的么？结合前几节课的学习，大家思考一下。
网页中的数据都是通过HTML标签编码组织在网页中的，网页编码是指用于表示和处理网页文本内容的字符编码方法，在通过浏览器进行解释并呈现。
刚才我们有举例网页中常见的数据类型，不同的数据类型都对应不同的标签编码，接下去请同学们小组讨论，结合现有的网页界面来分析一下这些数据类型对应的标签编码是什么，进行连线。
学习网页编码
小组讨论，完成任务，各组展示结果，派一组上台连线。
了解网页编码
通过连一连的任务，让学生进行自主探究，加深这部分内容的印象
网页的数据请求与响应是本课的重点之一，通过网页源文件的修改，以及网页的浏览来让学生体验整个过程，加深这个知识点的记忆。
二、网页的数据请求与响应
我们通过HTML标签编码将数据组织在网页中，那么这些数据又是如何呈现给我们，让我们看到相应的文字音频视频等内容的呢？这里就涉及到网页的数据请求与响应。
网页需要通过请求与响应以获取HTML数据，网页中如有多个媒体数据，则需要多次请求与响应，才能在网页上呈现。请求与响应的流程如图：
学习网页的数据请求与响应
通过作业展示进行课堂
检验，关注学生的掌握情况，即时调整教学。
大家刚才应该有注意到，老师下发的文件中，有一个文件名为“AI宣传视频”的视频文件，为了在收集调查结果前，能够确保每位被调查的同学都知道AI是什么，我们可以在网页中插入这个宣传视频，接下去请同学们仿照图片标签的添加格式，在网页图片下方添加这个视频。
（提问：1.视频标签是？2.标签添加语句是？）
根据学生完成情况进行点评，利用错误案例进行分析易错点。（1.标签错误；2.文件名错误；3.文件路径）
学生打开文件观察页面内容
结合源代码观察网页，找出图片标签
学生思考，在源文件中添加视频文件。
展示完成情况
结合学生错误点进行分析，进行重点加强。
三、网页中的交互
刚才我们体验了网页从服务器获取信息的功能，大家有没有注意到网页上有两个文本框和一个“提交”按钮，网页中出现文本框和按钮在我们平时浏览网页的时候有出现过么，一般用于哪些情境？（各平台账号密码登录、问卷调查、论坛评论等）这个就是网页表单，是实现用户和网页之间信息交互的
方式之一，是用户向服务器反馈信息的途径。大家思考一下，网页中还有哪些交互的形
式？（点击链接、按钮操作、鼠标悬停、下拉菜单、滚动交互、轮播图、弹出框和模态框、列表排序与过滤、拖放交互）展示举例个别交互形式。
这节课我们要体验一下表单的创建，基本步骤是：
1.使用标签创建表单
2.添加表单字段
3.定义表单提交操作
4.处理表单数据
在HTML中，使用标签创建表单元素，它会包裹表单中的各个字段和提交按钮。
在frm标签中，可以设置表单的基本属性，包含表单的名称、处理程序、传送方法、编码方式等。
小组思考讨论
学习创建表单
的步骤
举例加深对交互的理解
表单的创建
是本课的难点，通过教师讲解创建过程，通过自主探究分析各部分代码对
在刚才的网页中，表单部分代码如下：
小组讨论，结合网页和源代码，找出创建文本输入框的代码为：
创建提交按钮的代码为：
接下来请同学们参照案例，在姓名下方添加一个用于输入班级的文本框。
对学生作品进行展示评价。（自我评价、小组互评、教师评价）
提供表单拓展内容：
常用单选按钮

女性
男性

分析表单的各个部分对应的代码是什么
完成任务，作品展示
应的内容，分析作用，对后续编写做准备
表单的设置是本节课的难点，利用此任务对学生对于这部分的学习进行检验
总结
在本节课中你学到了什么？
各项数据是如何组织在网页中的？
表单的作用是？
学生回答
用提问的方式对本课内容进行回顾总结，检验学生掌握情况