第8课 网页的数据呈现 教学设计 2024—2025学年浙教版（2023）初中信息技术八年级上册

课时设计 课题 第8课《网页的数据呈现》 课型 新授课☑ 复习课□ 练习讲评课□ 其他课□ 班级 八年级 学生数 400 人 授课类型/时长 新课/40分钟 教学内容分析 本课属于“互联网应用与创新”模块，是2023浙江省版八上第二单元第八课的教学内容。本课通过学习使用CSS（层叠样式表）来设置网页样式和布局，包涵认识CSS及其作用、掌握CSS的语法结构、理解CSS的优点等内容。本课是在学习了前一课《网页的数据组织》基础上，进一步学习样式美化设置，了解网页数据呈现样式的原理，为下一课更好地呈现网页交互做好准备，起到承上启下的作用。 学习者分析 学生在学习了上一课《网页的数据组织》，认识了HTML（超文本标记语言）,掌握了HTML文档的基本结构，会使用HTML的常用标签初步编辑网页的内容和简单样式，但页面效果较简陋，且HTML主要是用于描述网页的结构和内容。为此引入新知：CSS样式设置，让学生学习便捷的样式设计方法，通过任务活动，施展设计技能，提高制作网页的兴趣，为今后创作有价值的网页作品创造条件。 教学目标 1.通过体验CSS设置的效果，认识CSS，了解CSS的作用。 2.通过在网页中添加样式的探究，掌握CSS的语法结构。 3.通过链接CSS文件设置样式的体验，理解分离式CSS的便捷性。 教学重点、难点 项 目 内 容 解 决 措 施 重点 通过CSS修改和添加样式，认识CSS，掌握CSS的语法结构。 通过学习探究样式的修改、添加等任务，切身体验感知，结合教师解说。 难点 理解分离式CSS的优点。 在一系列的学习活动中，去体验了解分离式CSS的形式 教学方法 采用对比分析、任务探究、实践体验、演示讲解、归纳总结等教学方法。 特色教学资源、技术手段 教学环节 教学资源 教学作用 信息化手段 课前 教材 自主学习 希沃一体机 微课技术 UMU线上学习平台 课内 导学稿、index.html半成品文件、css文件夹UMU平台 任务驱动 自主探究 教学评一致 学练测一致 教学活动设计 教学 环节 教师活动 学生活动 情境导入 话题引入：你知道网页中的文字效果是如何实现的?你知道网页中的文字效果是如何实现的? 参与讨论 设计意图说明: 通过话题引导，激发学生学习兴趣，引出本课课题。 新知讲授 1、 网页数据呈现方式 （1） 你知道网页数据呈现方式有哪些？ 文本、图像、链接、表格、列表、图表和图形、视频和音频、动画和交互效果、表单以及其他媒体和插件等。 2、 CSS样式 （1） 你知道什么是CSS？ CSS全称为层叠样式表 (Cascading Style Sheets), 也是一种标识语言，CSS样式可以方便地设置网页效果。 （2） CSS的样式 字号、字体、颜色、位 置以及图片的大小...... （3） CSS的优点 1、样式与内容分离 2、网页加载速度快 3、一致的样式设计 4、容易维护和更新 5、响应式设计 6、可扩展性 ...... （4） 教师演示 教师演示添加样式表的网页效果。 活动一：修改样式表里的属性和属性参数，观察网页外观变化，尝试其他样式的设置。 说说网页数据的呈现方式 了解CSS 完成活动一 设计意图说明: 了解网页数据的呈现方式，了解CSS，学以致用 新知 讲授 3、 样式表的基本结构 （1） 什么是<style>标签？ <style>标签是HTML中用于定义内部样式表的标签。它位于<head>标签内部，用于在网页中直接指定元素的样式。 （二）<style>标签的基本语法： （2） <style>实例展示 活动二：用CSS 样式表美化网页。 了解<style>标签及语法 理解代码 完成活动二 设计意图说明: 通过初步编辑，进一步了解<style>标签。 课堂 练习 随堂练习 1. 用CSS 样式表美化网页。 2. 尝试使用图像标签，在网页里加入一张平铺模式的背景图。 完成课堂练习 设计意图说明: 超链接实现了网页的跳转，使得文档、网站互联，学生通过超链接标签的设置，体会网页互联后的强大，提升学生对自主可控技术重要性的认识。 总结 在本节课中你学到了什么？ 引导让学生讨论，并小组为单位总结今天网页设计项目的完成情况，归纳完成过程中所学到的知识和处理过程。 学生回答 设计意图说明: 小组回顾、反思、总结学习过程，提高信息社会责任意识，通过其他优秀网站的源代码查看，激发好奇心，为夏一节课的内容学习做好铺垫。 板书设计 一、网页数据呈现的方式 二、CSS 三、样式表的基本结构 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $$