(
课件网) 网页的数据呈现 第八课 八年级信息技术 学习目标 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. 样式表结构： 选择符 { 属性: 值; } 感谢同学们的观看！ 下课啦！ ... ...
