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

《浙教版信息科技八上第8课 网页的数据呈现 教案.docx》由会员分享，可在线阅读，更多相关《浙教版信息科技八上第8课 网页的数据呈现 教案.docx（3页珍藏版）》请在第一文库网上搜索。

1、第8课网页的数据呈现教学设计课题网页的数据呈现教学目标1 .通过体验CSS设置的效果，认识样式表，了解样式表的作用。2 .通过网页中添加样式，掌握样式表的基本结构。3 .能理解使用CSS降低网页代码耦合度所带来的便利性。重难点教学重点：通过网页中添加样式，掌握样式表的基本结构。教学难点：理解使用CSS降低网页代码耦合度所带来的便利性。课前准备1 .网络教室。2 .在线应用相关软件或平台。课时安排1课时教师活动学生活动设计意图引入话题引入：你知道网页中的文字效果是如何实现的?你知道网页中的文字效果是如何实现的？参与讨论通过话题引导，激发学生学习兴趣，引出本课课题。二、新授一、网页数据呈现方式(一

2、)你知道网页数据呈现方式有哪些？文本、图像、链接、表格、列表、图表和图形、视频和音频、动画和交互效果、表单以及其他媒体和插件等。二、CSS样式(一)你知道什么是CSS?CSS全称为层叠样式表(CascadingSty1eSheets),也是一种标识语言，CSS样式可以方便地设置网页效果。(-)CSS的样式字号、字体、颜色、位置以及图片的大小()CSS的优点1、样式与内容分离2、网页加载速度快3、一致的样式设计4、容易维护和更新5、响应式设计6、可扩展性说说网页数据的呈现方式了解CSS了解网页数据的呈现方式了解CSS（四）教师演示教师演示添加样式表的网页效果。活动一：修改样式表里的属性和属性参数

3、，观察网页外观变化，尝试其他样式的设置。三、样式表的基本结构（一）什么是sty1e标签？VSty1e标签是HTM1中用于定义内部样式表的标签。它位于Vhead标签内部，用于在网页中直接指定元素的样式.（二）VSty1e标签的基本语法：学习完成活动学习sty1e标签及语法实例学习学以致用了解sty1e标签及语法进一步了解VStyIe标签学以致用*CSS样式规则*/（三）VStyIe实例展示h1co1or:b1ue;font-size:24px;P(co1or:red;font-size:16px;He11o,wor1d!Thisisaparagraph.活动二：用CSS样式表美化网页。完成活动三课堂练习随堂练习1 .用CSS样式表美化网页。2 .尝试使用图像标签，在网页里加入一张平铺模式的背景图。完成随堂练习以练习巩固本节课的内容。即课堂小结一、网页数据呈现的方式二、CSS三、样式表的基本结构