资源简介

(共18张PPT)
信息意识· 计算思维· 数字化学习与创新· 信息社会责任
信息科技 七年级 上册
第四单元　互联网数据编码与呈现——美编网页
第2课　揭秘神奇的标记语言
聚焦
探索
设计
实现
拓展
引入情境
同学们，我们每天都会上网浏览各种网页，但你们有没有想过，这些丰富多彩的网页是怎么制作出来的呢？
聚焦
探索
设计
实现
拓展
聚焦问题，明确任务
聚焦问题
网页数据是怎么通过标记语言变得这么丰富多彩的呢？
明确任务
掌握HTML搭建网页骨架和CSS添加样式的流程，设计并实现一个简单的“学校名片”网页。
成果形式
一个包含标题、段落、图片、链接等元素且样式美观的“学校名片”网页。
标记语言
聚焦
探索
设计
实现
拓展
分析问题，探索方法
温馨提示:在探索过程中，大家可以先查阅资料，了解常见的标记语言有哪些，它们各自的应用场景是什么。然后，选择一种标记语言，研究它是如何通过标签来组织和标记内容的，注意观察标签的格式和使用规则。
聚焦
探索
设计
实现
拓展
分析问题，探索方法
写一写
聚焦
探索
设计
实现
拓展
分析问题，探索方法
聚焦
探索
设计
实现
拓展
趣味活动1：“标签对对碰”
完成“标签对对碰”游戏，掌握常见HTML标签的书写及配对规则。
趣味活动2：代码初体验
在半成品代码中尝试插入HTML标签，观察页面变化。
温馨提示
注意标签的正确书写格式，观察每插入一个标签后页面的具体变化，记录发现的问题。
分析问题，探索方法
聚焦
探索
设计
实现
拓展
分析问题，探索方法：点评展示
点评指导
展示“标签对对碰”游戏成果及半成品代码实践效果，教师点评学表现，指出配对正确与错误的地方，强调HTML标签书写规范。
本环节提升升华
掌握HTML标签基本书写规则，理解标签语义与页面结构的对应关系，初步形成“结构—表现分离”的思维。
聚焦
探索
设计
实现
拓展
梳理思路，设计方案：设计要求
任务1：绘制网页作品设计鱼骨图规划作品蓝图。
聚焦
探索
设计
实现
拓展
梳理思路，设计方案：设计要求
小组汇报
各小组汇报设计方案，展示鱼骨图，介绍网页结构布局、样式规划及文字内容安排，分享设计思路与创意亮点。
温馨提示
在设计时注意标签语义的准确性、样式规划的合理性，以及文字内容的简洁明了；鼓励发挥创意，设计出独特且美观的“学校名片”网页。
聚焦
探索
设计
实现
拓展
梳理思路，设计方案：点评展示
点评指导
肯定优点，指出不足，如标签使用是否合理、样式规划是否美观、内容安排是否清晰等；针对问题提出改进建议。
本环节提升升华
掌握HTML搭建骨架、CSS添加样式的基本流程，提升系统化设计思维，学会通过鱼骨图将复杂问题简单化、可视化。
聚焦
探索
设计
实现
拓展
运用所学，实现方案：实现示范
教师示范新建“school.html”和“style.css”文件，板书内部样式表格式，展示如何插入HTML标签并添加CSS样式，实现一个简单的网页效果。
聚焦
探索
设计
实现
拓展
运用所学，实现方案
实现思路
依据鱼骨图设计蓝图，在本地文件夹新建“school.html”和“style.css”文件，按照HTML标签顺序搭建网页骨架，运用CSS关键词添加样式，实现“学校名片”网页的视觉呈现。
实现过程
在真实编码环境中，按照设计思路逐步编写代码，每写一行代码即查看页面效果，体验“写一行、看一行”的即时反馈。
新内容强调
HTML文件与CSS文件的关联，内部样式表的使用，以及常见HTML标签与CSS属性的综合运用。
聚焦
探索
设计
实现
拓展
运用所学，实现方案：点评展示
点评指导
点评学生实现成果，肯定成功之处，指出问题所在，如代码规范性、页面美观度、功能完整性等；针对问题进行详细讲解。
本环节提升升华
掌握核心标签及CSS属性的运用，提升用代码解决真实问题的能力，增强对“结构—表现分离”计算思维的理解。
聚焦
探索
设计
实现
拓展
评价交流，拓展练习
拓展任务要求
把页面压缩包通过微信发给家长，让家长用浏览器打开并语音反馈“最喜欢的设计点”，收集家长反馈并截图保存。
聚焦
探索
设计
实现
拓展
评价交流，拓展练习：拓展性任务要求
聚焦
探索
设计
实现
拓展
全课总结提升
总结提升
本节课深入学习了HTML和CSS这两种网页设计的核心标记语言。通过“标签对对碰”游戏，掌握了HTML标签的书写规则，理解了如何用这些标签搭建网页的骨架。接着，通过鱼骨图设计活动，学会了用CSS为网页添加样式，让页面变得更加美观。在实践操作中，大家完成了“学校名片”网页的制作，体验了网页从设计到实现的完整过程。
课后学习指导与作业
鼓励自主拓展学习，尝试更多HTML和CSS的功能。根据课堂所学，独立完成一个简单的网页设计任务（制作个人简介网页或好书推荐网页），巩固所学知识与技能。
在课后尝试为页面添加背景音乐或更多超链接，进一步优化“学校名片”网页，为单元后续“内容编辑”埋下伏笔。
谢 谢

展开更多......

收起↑