浙教版信息科技八上第8课 网页的数据呈现 教案

网页的数据呈现教学设计网页的数据呈现课题

1.通过体验CSS设置的效果，认识样式表，了解样式表的作用教学

2.通过网页中添加样式，掌握样式表的基本结构目标

3.能理解使用CSS降低网页代码耦合度所带来的便利性国教学重点通过网页中添加样式，掌握样式表的基本结构见片教学难点理解使用CSS降低网页代码耦合度所带来的便利性八

1.网络教室课前准备

2.在线应用相关软件或平台1课时课时安排设计意图教师活动学生活动、话题引入你知道网页中的文字效果是如何实现的你知道通过话题引导，激发引网页中的文字效果是如何实现的？参与讨论学生学习兴趣，引出入本课课题

一、网页数据呈现方式说说网页了解网页数据的呈-你知道网页数据呈现方式有哪些？数据的呈文本、图像、链接、表格、列表、图表和图形、视频和音频、动现方式画和交互效果、表单以及其他媒体和插件等现方式

二、CSS样式-你知道什么是CSS了解CSS了解CSS全称为层叠样式表也是一种标识语CSS CascadingStyle Sheets,言，样式可以方便地设置网页效果CSS

二、二CSS的样式新授字号、字体、颜色、位置以及图片的大小……三CSS的优点、样式与内容分离

1、网页加载速度快

2、一致的样式设计

3、容易维护和更新

4、响应式设计5a-in

（四）教师演示教师演示添加样式表的网页效果学习活动一修改样式表里的属性和属性参数，观察网页外观变化，尝学以致用完成活动试其他样式的设置

三、样式表的基本结构

（一）什么是〈style〉标签？〈标签是中用于定义内部样式表的标签它位于style,HTML标签内部，用于在网页中直接指定元素的样式vhead学习了解〈style〉标签

（二）〈style〉标签的基本语法style标及语法head签及语法style/*css样式短则*//style/head

（三）〈style》实例展示!DOCTYPE htmlhtml实例学习head进一步了解〈style〉stylehl{标签color:blue;font-size:24px;}P color:red;font-size:16px;/style/headbodyhlHellOj world!/hlpThis isa paragraph./p/body/html学以致用活动二用样式表美化网页css完成活动随堂练习

三、课

1.用CSS样式表美化网页完成随堂练以练习巩固本节课堂练

2.尝试使用图像标签，在网页里加入一张平铺模式的习的内容习背景图

一、网页数据呈现的方式师课

二、CSS堂小

三、样式表的基本结构结。