浙教版《信息科技》八年级上第8课《网页的数据呈现》.pptxVIP

第8课

网页的数据呈现浙教版八年级上册

01教学目标02新知导入03网页数据呈现的方式04CSS样式05样式表的基本结构06拓展延伸08课堂小结07课堂练习09板书设计

01教学目标1、信息意识：能够了解CSS（层叠样式表）是用于控制网页布局和样式的重要技术。2、计算思维：能够将网页设计需求转化为具体的CSS规则，锻炼抽象思维能力。3、数字化学习与创新：能够了解并使用Bootstrap等CSS框架，提高开发效率。培养创新意识和实践能力。4、信息社会责任：能够在设计网页时注重环保和节能，减少不必要的资源浪费。

02新知导入通过体验CSS样式设置的效果，认识CSS样式表，了解样式表的作用;通过网页中添加样式，掌握样式表的基本结构;能理解使用CSS降低网页代码耦合度所带来的便捷。探究：1、你浏览过的网页中，看到过哪些网页效果?2、你知道网页中的文字效果是如何实现的?

02新知导入网站为了保证网页风格的整体性，在制作过程中往往要求文本、色彩等样式要协调统一，可以对网页数据各种呈现的效果进行样式的设置。

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

03网页数据呈现的方式新知拓展你浏览过的网页中，看到过哪些网页效果?1、首先，打开你的浏览器（如Chrome、Firefox或Safari）。2、在地址栏中输入网址并按回车键。3、等待页面加载完成。4、右键点击网页上的任意位置，选择“检查元素”或“审查元素”（取决于你使用的浏览器）。这将打开浏览器的“开发人员工具”。

03CSS样式CSS全称为层叠样式表(CaseadingSlyleSheels)，也是一种标识语言CSS样式可以方便地设置网页效果，如网页中文字的字号、字体、颜色、位置以及图片的大小等，都涉及网页显示信息的样式。如图8-1。图8-1

03CSS样式图8-2所示，是添加了样式表的网页效果的前后对比图。图8-2

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

03CSS样式亲身体验修改样式表里的属性和属性参数，观察网页外观变化，尝试其他样式的设置。1、字体样式（font-style）：设置字体为斜体。font-style:italic;2、字体粗细（font-weight）：设置字体为粗体。font-weight:bold;3、字体大小（font-size）：设置字体的大小。font-size:18px;4、字体颜色（color）：设置字体的颜色。

03CSS样式新知拓展你知道网页中的文字效果是如何实现的?1、下划线和删除线：通过设置text-decoration属性来给文字添加下划线或删除线。例如，给链接添加下划线：2、阴影效果：通过使用text-shadow属性来给文字添加阴影效果。例如，给文本添加阴影：3、文字对齐：通过设置text-align属性来改变文字的水平对齐方式。例如，居中对齐文本：4、行高：通过设置line-height属性来调整行间距。例如，增加段落的行间距。

03CSS样式新知拓展—CSS文本属性

04样式表的基本结构style标签表示要定义的样式，type=textess用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式也可以对网页上的文本、图像等来设置样式。样式表的基本结构如下:

04样式表的基本结构级联样式表:级联样式表(CaseadingStyleSheet，简称CSS)是由国际组织制定的一套延伸HTML样式的新标准，用来控制网页内容的外观格式，包括版面的精确位置、特定字体和格式、甚至图像、表格和图层等的位置和格式，称为“级联”的主要原因是支持应用多个样式表到同一张网页中。知识链接

04样式表的基本结构随堂练习1.用CSS样式表美化网页1、使用CSS样式表美化网页：要使用CSS样式表美化网页，你需要在HTML文件中添加一个style标签，或者将CSS代码放在一个单独的.css文件中，然后在HTML文件中通过link标签引入。

04样式表的基本结构随堂练习2.尝试使用图像标签，在网页里加入一张平铺模式的背景图尝试使用图像标签，在网页里加入一张平铺模式的背景图：要在网页中