(
课件网) 信息意识· 计算思维· 数字化学习与创新· 信息社会责任 信息科技 七年级 上册 第四单元 互联网数据编码与呈现———美编网页 第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属性的 ... ...
