资源简介

(共16张PPT)
义务教育2024 七年级全一册
第四单元：校园活动线上展
第18课：美化网页方法多
义务教育2024 七年级全一册
第18课：美化网页方法多
学习
目标
知道用HTML代码简单美化网页的操作方法。
知道串联样式表的作用，初步学会用它美化网页。
3
能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。
第18课：美化网页方法多
义务教育2024 七年级全一册
问题情境
导入
新课
上一课编写了简单的网页,好似用HTML语言搭建了“新房屋”的结构,接下来要想办法对“新房屋”进行装修美化。本课将介绍如何用HTML代码和CSS( cascading style sheets,串联样式表)等方式美化网页。
义务教育2024 七年级全一册
第18课：美化网页方法多
学习内容
一、用HTML代码美化网页
二、用CSS美化网页
义务教育2024 七年级全一册
一、用HTML代码美化网页

科技节体验项目--

科机器狗

    机器狗是一种模拟真实犬只形态和部分行为的机器设备、能够实现行走，坐下，翻滚等多种动作，机器狗的出现为人工智能和机器人研究提供了新的超像空间，也让更多人得以近距离接触机器人技术。 

用HTML标签可以设定网页的文字大小、背景颜色等
用HTML代码美化网页
义务教育2024 七年级全一册
一、用HTML代码美化网页
打开上一课完成的介绍科技节某个项目的网页,使用HTML标签及属性对网页进行美化,如设置标题、设置背景等,体会这种方式是否
便捷,美化效果好不好。
义务教育2024 七年级全一册
二 、用CSS美化网页
用HTML代码进行美化,操作非常烦琐,美化效果也有限。在实际应用中,人们经常用CSS来美化网页。
如果将HTML代码比作建造房屋的“建筑师”,那么CSS就是装修房屋的“装潢设计师”(图18.2)。CSS可以描述网页等文档的外观和格式,控制某类HTML标签内容的颜色、字体、宽度、高度等。
义务教育2024 七年级全一册
二 、用CSS美化网页
图18.2 CSS的作用
义务教育2024 七年级全一册
二 、用CSS美化网页
要通过编写CSS美化网页,就必须先了解CSS的基本语法规则。CSS语句主要由两部分构成:选择器;一条或多条声明。
选择器指向需要改变样式的网页元素。一个选择器对应的声明可有多条，每条声明由属性和值组成,属性和值之间用冒号分开。每条声明以分号结束，所有声明用一对大括号括起来
(图18.3)。
义务教育2024 七年级全一册
二 、用CSS美化网页
图18.3 CSS基本语法结构
选择器
（需要改变样式的HTML元素）
P
{
声明开始大括号
font-size:14px;
color
#606266:
:
声明
属性和值被冒号分开，以分号结束
声明结束大括号
属性
属性值
}
义务教育2024 七年级全一册
二 、用CSS美化网页
网页内的样式表可以放在之间
图18.4 网页内的样式表
义务教育2024 七年级全一册
二 、用CSS美化网页
1.查阅关于CSS的相关资料,了解CSS的书写规则和常用指令。
2.用编辑器打开网页,尝试用CSS对网页文本、标题、背景等进行美化。
3.保存网页文件,然后重新浏览,看看修改后显示效果的变化。
4.交流讨论使用CSS美化网页的心得。
尝试用CSS设计美化网页
动手实践
义务教育2024 七年级全一册
1．用HTML代码可以美化网页。
2． CSS可以让网页呈现出效果一致的美化风格。
3．使用CSS美化网页，效果更好。
课堂总结
下 课
Thanks!
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑