初中信息技术浙教版八年级上册：第8课 网页的数据呈现-教学课件.pptx

第8课网页的数据呈现年级：八年级学科：初中信息科技（浙教版）

htmlheadtitle人工智能/title/headbodyh1走进人工智能/h1/body/html回顾HTML语言用来组织网页的结构和内容。

优秀的网页数据呈现效果有什么作用？分析

文字和图片等数据，大小更合适、位置更合理、颜色更统一、协调

分析优秀的网页数据呈现效果有什么作用？网页更美观更便于阅读有整体风格特色

只有结构和内容的网页设置了效果的网页

实验一尝试删除、恢复link标签行，观察实验结果。link代码行实现了整个网页效果的设置

linkrel=stylesheethref=exstyle.css链接类型链接文件路径及文件名新知1：层叠样式表

新知1：层叠样式表定义网页中数据的外观和表现形式，实现网页效果的设置。层叠样式表CSScascadingstylesheets

新知2：样式表的基本结构选择符样式属性1:属性值1;样式属性2……a{color:green;font-size:20px;}样式声明{}

尝试体验请你自己尝试添加样式，观察网页的效果变化，进一步掌握样式表的基本结构。

添加CSS的三种方式linkrel=stylesheethref=exstyle.css1.外部样式表2.内部样式表3.内联样式表

添加CSS的三种方式2.内部样式表

h1style=color:red;text-align:center走进人工智能/h1样式属性1:属性值1;样式属性2:属性值2添加CSS的三种方式3.内联样式表

内联样式表实验二有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。内部样式表外部样式表

知识链接：div标签选择符{样式属性1:属性值1;样式属性2……}类名

divclass=title??h1走进人工智能/h1/div知识链接：div标签类名实现网页数据样式的精准控制

知识链接：div标签

实验二有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。添加css方式网页代码复杂程度网页样式修改难度网页内容与样式的分离程度内联样式表内部样式表外部样式表

实验二有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。添加css方式网页代码复杂程度网页样式修改难度网页内容与样式的分离程度内联样式表内部样式表外部样式表内部样式表实现了网页内容与样式的基本分离外部样式表实现了网页内容与样式的完全分离解耦★★★★★★☆★★★★★★☆☆★★★

小结

小结1.层叠样式表CSS2.样式表的作用3.样式表的基本结构4.CSS降低网页代码耦合度带来的便捷

作业用css来美化自己主题网站的网页，你可以从改变文字的字体和颜色开始，然后尝试添加平铺背景图等样式效果。