【新教材核心素养】人教版信息技术七年级第18课《美化网页方法多》教学课件+教学设计（表格式）

美化网页方法多目录学习目标激趣导入【问题情境】上一课，我们编写了简单的介绍科技节某个项目的网页，这好似用HTML 语言搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？激趣导入【建构】想象一下：当访客打开网页时，第一眼看到的是整洁的布局、舒适的配色，鼠标滑过按钮会有微妙的动画，滚动页面时内容像画卷一样徐徐展开 ……这就是我们今天要学习的网页美化技巧，它能让网页从 “平淡无奇” 变身 “科技感十足”！现在，让我们拿起 “画笔”，开始给网页注入灵魂吧！学习活动学习活动学习活动一、用HTML代码美化网页用 HTML 语言编写网页时，通过简单的标签代码，可以设定网页的文字大小、背景颜色等。学习活动一、用HTML代码美化网页请打开之前完成的科技节网页，使用 HTML 标签及属性对网页进行美化，如设置网页背景、设置字号、设置字体等。学习活动一、用HTML代码美化网页【示例】学习活动一、用HTML代码美化网页【思考-讨论】学习活动一、用HTML代码美化网页【知识链接】学习活动学习活动二、用CSS美化网页用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。 CSS（cascading style sheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。学习活动二、用CSS美化网页如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。学习活动二、用CSS美化网页写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。学习活动二、用CSS美化网页CSS语句由选择器和声明两部分构成。选择器指向需要改变样式的网页元素。一个选择器对应的声明可以有多条，每条声明由属性和值组成，属性和值之间用冒号分开。每条声明以分号结束，所有声明用一对大括号括起来。学习活动二、用CSS美化网页学习活动二、用CSS美化网页学习活动二、用CSS美化网页1．请参考右侧代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。2．观察修改后网页显示效果的变化。校园科技节body{ background-color:#87CEFA;}h2{ font-family:黑体; font-size:50px; color:#DB7093;}h1{ font-family:黑体; font-size:40px; color:#DB7093;}p{ font-family:隶书; font-size:24px; text-indent:2em;}学习活动二、用CSS美化网页【示例】学习活动二、用CSS美化网页学习活动学习活动三、实践探究尝试使用在线人工智能模型，美化已有的HTML代码。只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。学习活动三、实践探究【示例】课堂小结拓展-提升上网搜索使用HTML代码美化网页和用CSS美化网页的特点，总结出二者的区别。