单元四 · 校园活动线上展
第18课 美化网页方法多
一、学习目标
- 知道用HTML代码简单美化网页的操作方法。
- 知道串联样式表的作用，初步学会用它美化网页。
- 能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。
二、情境导入
前面编写了介绍科技节某个项目的简单网页，这好似用HTML搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？
三、核心讲解
本课学习路径：
1用HTML代码美化网页
2用CSS美化网页
1．用HTML代码美化网页
请打开之前完成的科技节网页，使用HTML标签及属性对网页进行美化，如设置字体、设置背景等，然后交流讨论这种方式是否便捷，美化效果好不好。
安全：遵守规则、保护隐私与公共秩序；不同场景有不同底线，先分清再行动。
- 标 签 属 性 值 作 用
- <font>
- color #RRGGBB 规定文本颜色，采用十六进制表示颜色值，如
- <font color="#FF0000">
- face font_family 规定文本的字体，如<font face="楷体">
2．用CSS美化网页
用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。
用CSS美化：先抓住「用CSS美化网页」在做什么，再用例子对照验证。
- 在实际应用中，人们经常用CSS来美化网页。
- CSS（cascadingstylesheets，串联样式表），生活中也经常被称为级联样式表或层
- 如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间
- 房屋的“装潢设计师”。CSS可以描
- 述网页等文档的外观和格式，控制某
弄清以上要点后，再进入下方动手体验，用实际操作验证。
四、动手体验 · 美化素材体验
在本页完成真实操作。完成后勾选下方清单，再去做测评。
五、课堂总结
- 用HTML代码可以美化网页。
- CSS可以让网页呈现出效果一致的美化风格。
- 使用CSS美化网页，效果更好。
六、拓展提升
拓展：尝试用在线人工智能模型，美化已有的HTML代码。只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。
测评
完成练习后作答；选出后点「检查」。答错会显示简短说明。
下列哪一项更接近本课学习目标？
本课课堂总结强调的是？
本课主题最贴近下列哪一项？
完成本课后，优先应该做什么来证明学会了？
判断：教学指南中的学习活动可以全部跳过。
拓展提升部分的作用是？
本节小结
回顾本课要点，完成动手体验与测评。记住：美化网页方法多。