第18课 美化网页方法多 课件 2026-2027学年人教版初中信息科技七年级全一册

义务教育2024七年级全一册第四单元：校园活动线上展第18课：美化网页方法多义务教育2024七年级全一册第18课：美化网页方法多学习目标知道用HTML代码简单美化网页的操作方法。知道串联样式表的作用，初步学会用它美化网页。3能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。第18课：美化网页方法多义务教育2024七年级全一册问题情境导入新课上一课编写了简单的网页,好似用HTML语言搭建了“新房屋”的结构,接下来要想办法对“新房屋”进行装修美化。本课将介绍如何用HTML代码和CSS(cascadingstylesheets,串联样式表)等方式美化网页。义务教育2024七年级全一册第18课：美化网页方法多学习内容一、用HTML代码美化网页二、用CSS美化网页义务教育2024七年级全一册一、用HTML代码美化网页<bodybgcolor="#87CEFA"><center><h2><fontsize="7"face="黑体"color="#8A2BE2">科技节体验项目--</font></h2><h1><fontsize="6"face="黑体"color="#A52A2A">科机器狗</font></h1><p></p><p></p><imgsrc="images/jiqigou"width="348"></center><p><fontsize="5"face="隶书">    机器狗是一种模拟真实犬只形态和部分行为的机器设备、能够实现行走，坐下，翻滚等多种动作，机器狗的出现为人工智能和机器人研究提供了新的超像空间，也让更多人得以近距离接触机器人技术。 </font></p>用HTML标签可以设定网页的文字大小、背景颜色等用HTML代码美化网页义务教育2024七年级全一册一、用HTML代码美化网页打开上一课完成的介绍科技节某个项目的网页,使用HTML标签及属性对网页进行美化,如设置标题、设置背景等,体会这种方式是否便捷,美化效果好不好。义务教育2024七年级全一册二、用CSS美化网页用HTML代码进行美化,操作非常烦琐,美化效果也有限。在实际应用中,人们经常用CSS来美化网页。如果将HTML代码比作建造房屋的“建筑师”,那么CSS就是装修房屋的“装潢设计师”(图18.2)。CSS可以描述网页等文档的外观和格式,控制某类HTML标签内容的颜色、字体、宽度、高度等。义务教育2024七年级全一册二、用CSS美化网页图18.2CSS的作用义务教育2024七年级全一册二、用CSS美化网页要通过编写CSS美化网页,就必须先了解CSS的基本语法规则。CSS语句主要由两部分构成:选择器;一条或多条声明。选择器指向需要改变样式的网页元素。一个选择器对应的声明可有多条，每条声明由属性和值组成,属性和值之间用冒号分开。每条声明以分号结束，所有声明用一对大括号括起来(图18.3)。义务教育2024七年级全一册二、用CSS美化网页图18.3CSS基本语法结构选择器（需要改变样式的HTML元素）P{声明开始大括号font-size:14px;color#606266::声明属性和值被冒号分开，以分号结束声明结束大括号属性属性值}义务教育2024七年级全一册二、用CSS美化网页网页内的样式表可以放在<style></style>之间图18.4网页内的样式表义务教育2024七年级全一册二、用CSS美化网页1.查阅关于CSS的相关资料,了解CSS的书写规则和常用指令。2.用编辑器打开网页,尝试用CSS对网页文本、标题、背景等进行美化。3.保存网页文件,然后重新浏览,看看修改后显示效果的变化。4.交流讨论使用CSS美化网页的心得。尝试用CSS设计美化网页动手实践义