浙教版（2023）八年级上册信息科技 第八课：网页的数据呈现 课件.pptxVIP

网页的数据呈现第八课八年级信息技术

学习目标 1、了解网页数据呈现的常见方式（如表格、图表、文本等）2、掌握CSS（层叠样式表）的基本概念及其在网页设计中的作用3、学会使用CSS样式表的基本结构（选择符、属性、值）进行简单的网页美化

CONTENT01课前导入02网页数据呈现方式03CSS样式基础04课堂小结

PART-01课前导入

课前导入对比观察并讨论以下两个网页页面有什么样的差异。 人工智能人工智能（ArtificiaIntelligence）,英文缩写为AI。人工智能可以对人的意识、思维的信息过程进行模拟。人工智能能在全球范围内蓬勃发展，已影响着人们生活的方方面面。同样的内容，怎么显示出来的效果不一样尼，图一和图二的区别在哪尼？图一图二

课前导入CSSHTML对的，使用到了html及CSS技术

PART-02网页数据呈现方式

1：网页数据呈现方式问题思考：01.网页数据以什么样的方式进行呈现？02.HTML和CSS各有什么不一样？

1：网页数据呈现方式HTML定义了网页的内容结构，即网页呈现的文字、图文、视频等内容，用HTML设计网页外观样式时需要使用大量的标记，代码相对多而复杂。使用CSS可以有效地对网页中数据的布局、字体和背景等效果实现更精确的控制，同时可以将网页的结构和格式分离，实现解耦。比如对网站所有页面的风格可以应用一个CSS，只要修改这个CSS文件就可以更新所有页面的风格样式，既提高了更新和维护的效率，同时又缩减了网页的代码，提高了网页的浏览速度。

1：网页数据呈现方式01.数据呈现类型与实例分析文本呈现：讨论：如何通过字体、字号、颜色提升可读性？

1：网页数据呈现方式02.表格呈现：示例：学生成绩表学号姓名总成绩无样式表学号姓名总成绩有样式表

1：网页数据呈现方式03.图表呈现：

1：网页数据呈现方式课间思考及讨论：HTML表格vs.CSS美化表格vs.动态图表，分析各自优缺点。例如：01.代码复杂度02.视觉效果03.交互性

PART-03CSS样式基础

2：CSS样式基础CSS全称为层叠样式表(CascadingStyleSheets)，也是一种标识语言，CSS样式可以方便地设置网页效果。如网页中文字的字号、字体、颜色、位置以及图片的大小等，都涉及网页显示信息的样式。如图1和图2所示，是添加了样式表的网页效果的前后对比图。人工智能人工智能（ArtificiaIntelligence）,英文缩写为AI。人工智能可以对人的意识、思维的信息过程进行模拟。人工智能能在全球范围内蓬勃发展，已影响着人们生活的方方面面。图1图2

2：CSS样式基础图2所示的网页是在body标签之前添加了以下CSS字体、颜色等样式的代码。图2

互动游戏：给出HTML片段（如图），让学生快速匹配对应的CSS选择符。文本样式：2：CSS样式基础styletype=text/cssh1{color:red;font-size:35px;font-family:黑体}p{color:white;font-size:25px;font-family:隶书}body{background-image:url(bj.jpg)}/style

3：样式表的基本结构style标签表示要定义的样式，type=text/css用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。样式表的基本结构如下:styletype=text/css选择符{样式属性1:属性值1;样式属性2:属性值2;样式属性……}/style

PART-04课堂总结

课堂小结网页的数据呈现1.网页数据呈现方式：文本、表格、图表等2.CSS样式：-概念：层叠样式表-优点：样式与内容分离、易于维护3.样式表结构：选择符{属性:值;}

感谢同学们的观看！下课啦！