资源简介

(共21张PPT)
网页的数据呈现
第八课
八年级信息技术
学习目标
CONTENT
01
课前导入
02
网页数据呈现方式
03
CSS样式基础
04
课堂小结
PART-01
课前导入
课前导入
对比观察并讨论以下两个网页页面有什么样的差异。
人工智能
人工智能（Artificia Intelligence）,英文缩写为AI。
人工智能可以对人的意识、思维的信息过程进行模拟。
人工智能能在全球范围内蓬勃发展，已影响着人们生活的方方面面。
同样的内容，怎么显示出来的效果不一样尼，图一和图二的区别在哪尼？
图一
图二
课前导入
CSS
HTML
对的，使用到了html及CSS技术
PART-02
网页数据呈现方式
1：网页数据呈现方式
1：网页数据呈现方式
HTML定义了网页的内容结构，即网页呈现的文字、图文、视频等内容，用HTML设计网页外观样式时需要使用大量的标记，代码相对多而复杂。
使用CSS可以有效地对网页中数据的布局、字体和背景等效果实现更精确的控制，同时可以将网页的结构和格式分离，实现解耦。比如对网站所有页面的风格可以应用一个CSS，只要修改这个CSS文件就可以更新所有页面的风格样式，既提高了更新和维护的效率，同时又缩减了网页的代码，提高了网页的浏览速度。
1：网页数据呈现方式
01.数据呈现类型与实例分析
文本呈现：
讨论：如何通过字体、字号、颜色提升可读性？
1：网页数据呈现方式
02.表格呈现：
示例：学生成绩表
学号 姓名 总成绩
无样式表
学号 姓名 总成绩
有样式表
1：网页数据呈现方式
03.图表呈现：
1：网页数据呈现方式
PART-03
CSS样式基础
2：CSS样式基础
CSS全称为层叠样式表(Cascading Style Sheets)，也是一种标识语言， CSS样式可以方便地设置网页效果。如网页中文字的字号、字体、颜色、位置以及图片的大小等，都涉及网页显示信息的样式。如图1和图2所示，是添加了样式表的网页效果的前后对比图。
人工智能
人工智能（Artificia Intelligence）,英文缩写为AI。
人工智能可以对人的意识、思维的信息过程进行模拟。
人工智能能在全球范围内蓬勃发展，已影响着人们生活的方方面面。
图1
图2
2：CSS样式基础
图2所示的网页是在标签之前添加了以下CSS字体、颜色等样式的代码。
图2
互动游戏：给出HTML片段（如图），让学生快速匹配对应的CSS选择符。
文本样式：
2：CSS样式基础

3：样式表的基本结构

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

展开更多......

收起↑