资源简介

(共18张PPT)
第8课 网页的数据呈现
| 信息科技| 八年级上 | 互联网数据 | 2023新教材 |
学习目标
通过体验CSS设置的效果，认识样式表，了解样式表的作用；
通过在网页中添加样式的探究，掌握样式表的基本结构；
能理解使用CSS降低网页代码耦合度所带来的便捷。
本课探究
1.你在浏览过的网页中看到过哪些网页效果？
2.网页中的文字效果是如何实现的？
习题导入
1.如何将文字向右对齐？
2.如何导入背景音乐？
上节课留了以下问题，你是否完成相应作业？

新授内容
HTML定义了网页的内容结构，即网页呈现的文本、图像、音频、视频等内容。
使用CSS同样能对网页中数据的布局、字体和背景等效果进行设置，同时还能将网页的结构和格式分离，实现解耦。
一、网页数据呈现的方式
优点：
网站所有页面的风格可以应用一个CSS，只要修改这个CSS文件，就可以更新所有页面的样式，既提升了更新和维护的效率，缩减了网页的代码，又提高了网页的浏览速度。
新授内容
二、CSS
CSS全称为层叠样式表（Cascading Style Sheets）,可以用于控制网页布局与样式，用于定义HTML文档中元素的外观和表现形式。如网页中文字的字号、宋体、颜色、位置以及图片的大小等。
三、样式表的基本结构
新授内容

三、样式表的基本结构
新授内容

<标记名 style="属性:属性值;">

加在
之间
新授内容
<标记名 style="属性:属性值;">
内联样式表
内部样式表

新授内容
外部样式表
格式：
CSS属性代码
CSS文字属性
CSS属性代码
CSS属性代码
课堂小结
1.了解CSS样式在网页中的优势
2.知道CSS样式的结构
3.学会添加CSS样式的三种方式，优先级是哪种越靠近设置对象，显示哪种效果。
板书设计
谢谢大家！
谢谢
21世纪教育网（www.21cnjy.com)
中小学教育资源网站
兼职招聘：
https://www.21cnjy.com/recruitment/home/admin中小学教育资源及组卷应用平台
网页的数据呈现教学设计
课题 网页的数据呈现 单元 第二单元 学科 信息技术 年级 八
教材分析 本课选自2023浙江教育出版社出版的信息科技八年级下册第二单元第二课《网页的数据呈现》，主要讲CSS的相关内容，该内容为网页设计的重要内容之一，不仅仅要学习课本的内容，还要学习些拓展的内容。
学习目标 通过体验CSS设置的效果，认识样式表，了解样式表的作用；通过在网页中添加样式的探究，掌握样式表的基本结构；能理解使用CSS降低网页代码耦合度所带来的便捷。
重点 体验CSS设置的效果
难点 理解使用CSS降低网页代码耦合度所带来的便捷
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 上节课布置以下作业，你是否完成？1.如何将文字向右对齐？2.如何导入背景音乐？

为了让学生能独立完成作业，能自己寻求解决问题的方法
讲授新课 一、网页数据呈现的方式HTML定义了网页的内容结构，即网页呈现的文本、图像、音频、视频等内容。使用CSS同样能对网页中数据的布局、字体和背景等效果进行设置，同时还能将网页的结构和格式分离，实现解耦。优点：网站所有页面的风格可以应用一个CSS，只要修改这个CSS文件，就可以更新所有页面的样式，既提升了更新和维护的效率，缩减了网页的代码，又提高了网页的浏览速度。二、CSSCSS全称为层叠样式表（Cascading Style Sheets）,可以用于控制网页布局与样式，用于定义HTML文档中元素的外观和表现形式。如网页中文字的字号、宋体、颜色、位置以及图片的大小等。三、样式表的基本结构四、样式表的添加方式该部分内容为添加方式的重点内容，需要对比操作，直观教学。具体的操作方式方法可以参考课件同时有很多CSS代码也可参考课件 学习相关基础知识，并了解用CSS设计网页的效果，可以用对比的方式发现其优点。知道CSS的全名及其具体应用方面学习样式表的基本结构学生学习三种样式表的添加方式：内联样式表内部样式表外部样式表 让学生明白利用CSS设计网页的优势，激发学习的兴趣与欲望。系统的了解CSS相关知识掌握相关结构内容。通过操作巩固相关知识
课堂小结 五、课堂小结1.了解CSS样式在网页中的优势2.知道CSS样式的结构3.学会添加CSS样式的三种方式，优先级是哪种越靠近设置对象，显示哪种效果。 回顾本课相关知识 通过小结再次浮现相关知识，系统的掌握相关内容
板书
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑