第8课 网页的数据呈现 课件 2023—2024学年浙教版（2023）初中信息技术八年级上册

第7课 网页的数据呈现 学习目标 通过体验CSS样式设置的效果，认识CSS样式表，了解样式表的作 用；通过网页中添加样式，掌握样式表的基本结构；能理解使用CSS降 低网页代码耦合度所带来的便捷。 探究 1.你浏览过的网页中，看到过哪些网页效果？ 2.你知道网页中的文字效果是如何实现的？ 建构 网站为了保证网页风格的整体性，在制作过程中往往要求文本、色彩等 样式要协调统一，可以对网页数据各种呈现的效果进行样式的设置。 一、网页数据呈现的方式 HTML定义了网页的内容结构，即网页呈现的文字、图文、视频等内 容，用HTML设计网页外观样式时需要使用大量的标记，代码相对多而复杂，使用CSS可以有效地对网页中数据的布局、字体和背景等效果实现更精确的控制，同时可以将网页的结构和格式分离，实现解耦。 一、网页数据呈现的方式 比如对网站所有 页面的风格可以应用一个CSS,只要修改这个CSS文件就可以更新所有页面 的风格样式，既提高了更新和维护的效率，同时又缩减了网页的代码，提高了网页的浏览速度。 二、CSS样式 CSS全称为层叠样式表(Cascading Style Sheets),也是一种标识语言， CSS样式可以方便地设置网页效果。如网页中文字的字号、字体、颜色、位 置以及图片的大小等，都涉及网页显示信息的样式。 开动脑经 CSS样式都能修改网页的哪些外观？最常见的有哪些？ 二、CSS样式 如下图是添加了样式表的网页效果的前后对比图。 未添加样式的HTML文档 二、CSS样式 添加简单样式表的网页效果 二、CSS样式 上图的网页是在＜body＞标签之前添加了以下CSS字体、颜色等样式的代码。 <style type="text/css"> hl( color: red; font-size :35px; font-family: 黑体} p{color: white; font-size :25px; font-family:隶书} body{ background-image:url(bj.jpg)) </style> 亲身体验 修改样式表里的属性和属性参数，观察网页外观变化，尝试其他样式的设置。 三、样式表的基本结构 <style>标签表示要定义的样式，type = "text/css"用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。 三、样式表的基本结构 样式表的基本结构如下： <style type="text/css"> 选择符{样式属性1:属性值1 ；样式属性2:属性值2；样式属性……} </style> 知识链接 级联样式表级联样式表(Cascading Style Sheet,简称CSS)是由国 际组织制定的一套延伸HTML样式的新标准，用来控制网页内容的外观 格式，包括版面的精确位置、特定字体和格式，甚至图像、表格和图层 等的位置和格式，称为“级联”的主要原因是支持应用多个样式表到同一张网页中。 随堂练习 1. 用css样式表美化网页。 2. 尝试使用图像标签，在网页里加入一张平铺模式的背景图。 谢谢聆听！ INTERNET OF THINGS $$