3.18美化网页方法多(课件)-义务教育信息科技七年级全一册同步教学

资源下载
  1. 二一教育资源

3.18美化网页方法多(课件)-义务教育信息科技七年级全一册同步教学

资源简介

(共20张PPT)
美化网页方法多
目录
CONTENTS
行业PPT模板http://www./hangye/
知道用HTML代码简单美化网页的操作方法。知道串联样式表的作用。初步学会用它美化网页。
能根据需求,分析不同方法的特点并合理选择,提高解决问题的效率。
01
02
03
观察并总结网页美化的部分都有什么?
字体
字号
背景
字体颜色
对齐方式
我们编写了简单的介绍科技节某个项目的网页,这好似用HTML 语言搭建好了“新房屋”的结构,接下来要想办法对“新房屋”进行装修美化。本课将介绍如何用 HTML 代码和 CSS(cascading style sheets,串联样式表)美化网页。
网页美化的两种方式
用HTML
美化网页
用CSS
美化网页
可以在一定程度上美化网页,比如通过字体标签、颜色属性等来调整文本的显示,但美化往往有限且繁琐
开发者可以实现统一的样式更改,而不需要对每个元素单独设置样式。使得样式的调整更加灵活、高效且易于维护。
用HTML代码美化网页
P
ART01
标签 属性 值 作  用
bgcolor #RRGGBB 规定背景的颜色,采用十六进制表示颜色值,如
观察左侧HTML代码,哪条语句是设置背景颜色的?

HTML 颜色由红色、绿色、蓝色混合而成,HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。
观察左侧HTML代码,哪条语句是可以设置字体、字号和字体颜色的?

标签 属性 值 作  用
color #RRGGBB 规定文本颜色,采用十六进制表示颜色值,如
face 字体系列名称 规定文本的字体,如
size 字体大小 规定文本的大小,如
观察左侧HTML代码,哪条语句是可以对齐方式的?
标  签 作  用

用于将内容居中对齐,已过时并不常用
猜猜“ ”的作用是什么?
HTML 中的一个特殊字符实体,表示“不间断空格”(Non-Breaking Space)。它在网页排版中非常有用,尤其是在需要控制空格显示和格式化文本时。
学习活动1
打开上一课完成的介绍科技节某个项目的网页,使用 HTML 标签及属性
对网页进行美化,如设置网页背景、设置字号、设置字体等。
交流讨论:这种方式是否便捷?美化效果好不好?
用CSS美化网页
P
ART02
用 HTML 代码进行美化,操作非常烦琐,美化效果也很有限。在实际应用中,人们经常用 CSS 来美化网页。
如果将 HTML 代码比作建造房屋的“建筑师”,那么 CSS 就是装修房屋的“装潢设计师”。CSS 可以描述网页等文档的外观和格式,控制某类 HTML 标签内容的颜色、字体、宽度、高度等。
观察CSS代码,分析并找出可以
进行网页美化的部分?
CSS语句由选择器和声明两部分构成。
选择器指向需要改变样式的网页元素。
一个选择器对应的声明可以有多条,每条声明由属性和值组
成,属性和值之间用冒号分开。每条声明以分号结束,所有声明用一对大括号括起来。
sytle标签
CSS
网也内的CSS可以放在之间。
观察并猜测CSS代码部分具体的美化内容是什么?



学习活动2
尝试用 CSS设计美化网页
1. 观看老师提供的关于 CSS 的相关资料,了解 CSS 的书写规则和常用指令。
2. 用编辑器打开制作的网页,尝试用 CSS 对网页文本、标题、背景等进行美化。
3. 保存网页文件,然后重新浏览它,看看修改后显示效果的变化。
4. 交流讨论使用 CSS 美化网页的心得。





尝试用在线人工智能模型,美化已有的 HTML 代码。
感谢您的观看

展开更多......

收起↑

资源预览