第四单元第18课美化网页方法多 课件 -2025-2026学年人教版(2024)信息技术七年级全一册

人教版（2024）第四单元 《校园活动线上展》 漳州台商区第一中学 美化网页方法多 网页效果对比——美化的价值 这两份网页呈现的是相同的核心内容，你更愿意浏览哪一份？为什么？ 网页效果对比——美化的价值 观察美观的网页，它在哪些方面进行了优化？ 字体 字号 背景 字体颜色 对齐方式 网页美化能提升视觉体验、突出重点内容，其核心美化维度包括 字体、字号、背景、字体颜色、对齐方式等。 网页美化的两种方式 用HTML美化网页 用CSS美化网页 可以在一定程度上美化网页，比如通过字体标签、颜色属性等来调整文本的显示，但美化往往有限且繁琐。 开发者可以实现统一的样式更改，而不需要对每个元素单独设置样式。使得样式的调整更加灵活、高效且易于维护。 用HTML美化网页 1、背景颜色设置 标签 属性 值 作　　用 <body> bgcolor #RRGGBB 规定背景的颜色，采用十六进制表示颜色值（红、绿、蓝三色混合，每种颜色取值 0-255，共 1600 万种颜色） <body bgcolor="#87CEFA"> &nbsp; 是 HTML 中的一个特殊字符实体，表示“不间断空格” 用HTML美化网页 <font size="7" face='黑体' color='#8A2BE2'> 标签 属性 值 作　　用 <font> color #RRGGBB 规定文本颜色，采用十六进制表示颜色值，如<font color="#FF0000"> face 字体系列名称 规定文本的字体，如<font face="楷体"> size 字体大小 规定文本的大小，如<font size="6"> 2、文本样式设置 &nbsp; 是 HTML 中的一个特殊字符实体，表示“不间断空格” 用HTML美化网页 3、对齐方式设置 标　　签 作　　用 <center></center> 用于将内容居中对齐,已过时并不常用 用HTML美化网页 4、特殊字符实体 标　　签 作　　用 &nbsp 表示 “不间断空格”，用于控制文本排版中的空格显示 猜猜“&nbsp”的作用是什么？ 实践活动1——用HTML美化网页 《HTML 美化任务单》 1、设置网页背景颜色为 #87CEFA。 2、一级标题（<h1>）：字号 6 号、字体黑体、颜色 #A52A2A，居中显示。 3、二级标题（<h2>）：字号 7 号、字体楷体、颜色 #8A2BE2，居中显示。 4、段落文本 “风力发电是一种清洁、可再生的能源形式，它通过风力驱动风车叶片旋转，将风能转化为电能……” 首行缩进（使用&nbsp;实现）。 ！！强调：关注标签闭合、属性值书写规范（如颜色值的 #不能遗漏） HTML 美化特点 ——HTML 能实现基础美化，但需要对每个元素单独设置样式，美化效果有限且繁琐。 用CSS美化网页 如果需要修改网页中所有标题的字体，用 HTML 美化需要逐一修改每个<font>标签，有没有更高效的方法？ CSS 的优势： CSS 能实现统一样式更改，无需单独设置每个元素，灵活高效、易于维护。 CSS 基本语法： 选择器（指向需修改的 HTML 元素）+ 声明块（包含多条声明，每条声明由 “属性：值；” 组成），举例： body { background-color: #87CEFA; } h1 { font-family: 楷体; font-size: 40px; color: #f8645a; } CSS 的嵌入方式：介绍网页内 CSS 的使用 —— 将 CSS 代码放在<head>标签内的<style>标签中 用CSS美化网页 CSS属性 值 作　　用 color #RRGGBB 设置文本颜色，采用十六进制表示颜色值，如{color:#FF0000;} font-family 字体系列名称 设置文本的字体，如{font-family:楷体;} font-size 长度值px/em 设置文本的大小，如{font-size:6px;} background-color #RRGGBB 设置背景颜色，采用十六进制表示颜色值， 如{background-color:#0000FF;} text-align left 左对齐文本，如{text-align:left;} right 右对齐文本，如{text-align:right;} center 居中对齐文本，如{text-align:center;} text-indent 长度值px/em 设置段落中首行文本的缩进，如{text-indent:2em;} 实践活动2——用CSS代码美化网页 《CSS 美化任务单》 基于已有的 HTML 结构，用 CSS 完成以下操作： 1、设置网页背景颜色为 #87CEFA。 2、一级标题（h1）：字体黑体、字号 40px、颜色 #A52A2A。 3、二级标题（h2）：字体黑体、字号 50px、颜色 #8A2BE2。 5、段落文本（p）：字体隶书、字号 24px。 ！！重点关注 选择器与 HTML 元素的对应关系、 声明的语法规范（冒号、分号的使用）。 对比分析 HTML 代码和 CSS 代码，讨论两种方式的差异 对比维度 HTML 美化 CSS 美化 操作方式 逐元素设置 统一设置 效率 繁琐，修改不便 高效，易于维护 适用场景 简单网页、临时美化 复杂网页、长期维护 课堂总结与拓展 1、网页美化的维度 2、HTML 美化的核心标签与属性 3、CSS 的语法与常用属性 4、两种美化方式的差异 课后尝试用 CSS 设置文本缩进（text-indent）、对齐方式（text-align），进一步优化网页； 思考 ：如果多个网页需要统一风格，CSS 还能有什么更灵活的使用方式？ 总结回顾 拓展延伸 变化是常态，一路向前，知识无界 谢谢！！！ $