第18课 美化网页方法多.pptx

（义务教育版）七年级

全一册

第18课

美化网页方法多

单元主题

单元名称

课名称

核心内容

第四单元

校园活动线上展

第16课探秘网页与代码

网页与HTML代码、HTML标签、网页数据的呈现

第17课制作网页展活动

标签格式、用HTML代码制作网页

第18课美化网页方法多

HTML代码美化网页、串联样式表美化网页

第19课多人协同效率高

多人协同制作网页、Markdown代码

第20课组建网站跟我做

网站建设流程、发布网站

学习目标

知道用HTML代码简单美化网页的操作方法。

知道串联样式表的作用。

初步学会用CSS美化网页。

能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。

激趣导入

【问题情境】

上一课，我们编写了简单的介绍科技节某个项目的网页，这好似用HTML语言搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？

激趣导入

【建构】

想象一下：当访客打开网页时，第一眼看到的是整洁的布局、舒适的配色，鼠标滑过按钮会有微妙的动画，滚动页面时内容像画卷一样徐徐展开……这就是我们今天要学习的网页美化技巧，它能让网页从“平淡无奇”变身“科技感十足”！

现在，让我们拿起“画笔”，开始给网页注入灵魂吧！

学习活动

一、用HTML代码美化网页

二、用CSS美化网页

三、实践探究

学习活动

学习活动

一、用HTML代码美化网页

用HTML语言编写网页时，通过简单的标签代码，可以设定网页的文字大小、背景颜色等。

学习活动

一、用HTML代码美化网页

请打开之前完成的科技节网页，使用HTML标签及属性对网页进行美化，如设置网页背景、设置字号、设置字体等。

学习活动

一、用HTML代码美化网页

【示例】

学习活动

一、用HTML代码美化网页

【思考-讨论】

学习活动

一、用HTML代码美化网页

【知识链接】

学习活动

学习活动

二、用CSS美化网页

用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。

CSS（cascadingstylesheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。

学习活动

二、用CSS美化网页

如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。

学习活动

二、用CSS美化网页

写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。

学习活动

二、用CSS美化网页

CSS语句由选择器和声明两部分构成。

选择器指向需要改变样式的网页元素。

一个选择器对应的声明可以有多条，每条声明由属性和值组成，属性和值之间用冒号分开。每条声明以分号结束，所有声明用一对大括号括起来。

学习活动

二、用CSS美化网页

学习活动

二、用CSS美化网页

学习活动

二、用CSS美化网页

1．请参考右侧代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。

2．观察修改后网页显示效果的变化。

head

title校园科技节/title

style

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;

}

/style

/head

学习活动

二、用CSS美化网页

【示例】

学习活动

二、用CSS美化网页

学习活动

学习活动

三、实践探究

尝试使用在线人工智能模型，美化已有的HTML代码。

只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。

学习活动

三、实践探究

【示例】

课堂小结

一、用HTML代码美化网页

用HTML语言编写网页时，通过简单的标签代码，可以设定网页的文字大小、背景颜色等。

用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。

二、用CSS美化网页

CSS（串联样式表），生活中也经常被称为级联样式表或层叠样式表。

CSS可以让网页呈现出效果一致的美化风格。

三、实践探究

使用人工智能模型美化已有的HTML代码。

拓展-提升

上网搜索使用HTML代码美化网页和用CSS美化网页的特点，总结出二者的区别。