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