资源简介

中小学教育资源及组卷应用平台
3.18《美化网页方法多》教学设计
核心素养教育目标：
信息意识：学生用HTML代码简单美化网页的操作方法。知道串联样式表的作用。
计算思维：学生初步学会用它美化网页。
数字化学习与创新：引导学生体验制作网页，培养学生的创新意识和实践能力。
信息社会责任：体验用人工智能技术制作网页，认识科技创新的意义。
教学重难点：
重点：掌握用HTML代码简单美化网页的操作方法。知道串联样式表的作用。
难点：学会用它美化网页。
教学方法：
任务驱动法、分组讨论法、演示法
教学准备：
多媒体网络教室、课件
教学过程：
【复习导入】
上节课我们编写了简单的介绍科技节某个项目的网页，这好似用HTML 语言搭建好了“新房屋”的结构，接下来要想办法对“新房屋”进行装修美化。本课将介绍如何用 HTML 代码和 CSS（cascading style sheets，串联样式表）美化网页。
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过本节课的学习，我们解决以下两个问题：①怎样用 HTML 代码美化网页？②怎样用 CSS 美化网页？
【新知探究】
一、用HTML代码美化网页
1、用 HTML 语言编写网页时，通过简单的标签代码，可以设定网页的文字大小、背景颜色等。
2、学习活动1
打开上一课完成的介绍科技节某个项目的网页，使用 HTML 标签及属性对网页进行美化，如设置网页背景、设置字号、设置字体等。
学生交流讨论：这种方式是否便捷？美化效果好不好？
二、用CSS美化网页
1、用 HTML 代码进行美化，操作非常烦琐，美化效果也很有限。在实际应用中，人们经常用 CSS 来美化网页。
如果将 HTML 代码比作建造房屋的“建筑师”，那么 CSS 就是装修房屋的“装潢设计师”。CSS 可以描述网页等文档的外观和格式，控制某类 HTML 标签内容的颜色、字体、宽度、高度等。
2、CSS语句由选择器和声明两部分构成。
选择器指向需要改变样式的网页元素。
一个选择器对应的声明可以有多条，每条声明由属性和值组成，属性和值之间用冒号分开。每条声明以分号结束，所有声明用一对大括号括起来。
网页内的 CSS可以放在之间
3、学习活动2：尝试用 CSS设计美化网页
（1）观看老师提供的关于 CSS 的相关资料，了解 CSS 的书写规则和常用指令。
（2）用编辑器打开制作的网页，尝试用 CSS 对网页文本、标题、背景等进行美化。
（3）保存网页文件，然后重新浏览它，看看修改后显示效果的变化。
（4）交流讨论使用 CSS 美化网页的心得。
【拓展与提升】
尝试用在线人工智能模型，美化已有的 HTML 代码。
【课堂小结】
请同学们对照本章的学习目标进行总结，看看自己掌握了那些知识。
1．用HTML代码可以美化网页。
2． CSS可以让网页呈现出效果一致的美化风格。
3．使用CSS美化网页，效果更好。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
21世纪教育网(www.21cnjy.com)

展开更多......

收起↑