单元四 · 校园活动线上展
第18课 美化网页方法多
一、学习目标
- 知道用HTML代码简单美化网页的操作方法。
- 知道串联样式表（CSS）的作用，初步学会用它美化网页。
- 能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。
二、情境导入
前面用 HTML 搭好了科技节网页的「结构」，接下来怎样把「新房屋」装修得更漂亮？
本课分别体验用 HTML 属性美化，以及用 CSS（串联/层叠样式表）统一美化。
三、核心讲解
本课学习路径：
1用HTML语言美化网页
2用CSS美化网页
1．用HTML语言美化网页
可在已有页面上继续用 HTML 标签调整结构与基础呈现，例如标题层级、段落、列表、图像与超链接等，让内容层次更清晰。
- 先理清页面结构，再选择合适标签。
- 保持标签配对与嵌套正确，避免页面错乱。
- 美化时仍要注意可读性与访问体验。
想一想：只改文字不改结构，页面观感通常够不够？还缺什么？
2．用CSS美化网页
CSS（层叠样式表）：把外观样式与内容结构分离，便于统一颜色、字体、间距等，让多页呈现风格一致。
- 1确定配色、字体与间距等风格目标。
- 2编写或修改 CSS 规则，应用到相关标签/类。
- 3在浏览器中预览，对比修改前后效果。
- 4按需要在「手写代码」与可视化工具间合理选择，提高效率。
想一想：为什么用 CSS 比在每个标签里重复写外观属性更利于维护？
弄清以上要点后，再进入下方动手体验，用实际操作验证。
四、动手体验 · 美化素材体验
在本页完成真实操作。完成后勾选下方清单，再去做测评。
五、课堂总结
- 可用HTML调整并丰富网页结构与基础呈现。
- CSS能帮助网页形成风格统一的美化效果。
- 使用CSS可提升网页外观设计的效率与一致性。
六、拓展提升
- 对比不同网页编辑方式（纯代码 / 可视化），总结各自适用场景。
测评
对照本课学习目标作答（客观题练习）；选出后点「检查」。答错会显示简短说明。
CSS 的主要作用是？
美化网页时更合理的做法是？
判断：CSS 有助于多页保持较一致的视觉风格。
本节小结
回顾本课要点，完成动手体验与测评。记住：美化网页方法多。