HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局.docx
- 文档编号：16705201
- 上传时间：2023-07-16
- 格式：DOCX
- 页数：15
- 大小：3.48MB
HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局.docx
《HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局.docx》由会员分享，可在线阅读，更多相关《HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局.docx（15页珍藏版）》请在冰点文库上搜索。
HTML5+CSS3网页美化与布局单元3网页图片与背景的美化与布局
单元3 网页图片与背景的美化与布局
在网页中恰当地使用图像，能够充分展现网页的主题，吸引浏览者的眼球。
图像能美化网页、增强视觉效果，使网页锦上添花。
将适当的图像与文字有效地组合，实现图文混排，丰富页面内容，提高网页的美感。
【知识预览】
1．HTML5中常用的图片标签
（1）标签
标签用于向网页中嵌入一幅图像。
标签创建的是被引用图像的占位空间。
标签有两个必需的属性：
src属性和alt属性。
（2）
2．CSS的背景设置与定位
（1）背景色的设置
CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。
background-color属性用于设置元素的背景颜色，其取值为指定的颜色或transparent，默认值为transparent，即为透明色。
可以为网页中的任何元素设置背景颜色，也可以为HTML的标签设置背景颜色。
（2）背景图像的设置
在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。
在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
可以以像素或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
①background-image
background-image属性用于定义对象的背景图像，当背景图像与背景颜色（background-color）同时被定义时，背景图像覆盖于背景颜色之上。
其取值可以为none（无背景图像）或者为图像地址，可以使用绝对或相对地址指定背景图像。
②background-size
background-size属性用于定义背景图像的尺寸，其属性值可以为数值或者auto，也可以是percentage、cover和contain。
如果属性值为数值或者auto，用于设置背景图像的高度和宽度，第1个值设置背景图的宽度，第2个值设置背景图的高度，其单位可以为像素（px）或者百分比（%），如果只设置1个值，则第2个值会被设置为"auto"。
如果属性值为percentage，则width和height是针对于背景区域，不是背景图像大小。
以父元素的百分比来设置背景图像的宽度和高度，同样第1个值设置宽度，第2个值设置高度。
如果只设置1个值，则第2个值会被设置为"auto"。
如果属性值为cover，则把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
如果属性值为contain，则把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
③background-position
background-position属性用于定义对象背景图像的位置，应先定义对象的background-image属性，该属性不受对象的填充属性padding的影响。
默认值为0%，即背景图像默认位于对象内容区块的左上角。
如果只指定了一个值，该值将用于横坐标，纵坐标默认为50%。
如果指定了两个值，第一个值用于横坐标，第二个值用于纵坐标。
背景图像的位置由background-position-x和background-position-y两个属性综合确定。
background-position-x定位背景图像的横坐标位置，默认值为0%，其取值包括left、center、right和数值。
background-position-y定位背景图像的纵坐标位置，默认值为0%，其取值包括top、center、bottom和数值。
当背景图像的位置坐标定义为数值时，单位可以取长度单位，也可以为百分比。
④background-repeat
background-repeat属性用于定义对象的背景图像是否重复以及如何平铺，应先定义对象的background-image属性。
其取值包括repeat（重复，即背景图像在纵向和横向上都平铺）、no-repeat（不重复）、repeat-x（横向平铺）和repeat-y（纵向平铺）。
⑤background-origin
background-origin属性用于规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域，示意图如图3-2所示。
图3-2 背景图片放置位置的示意图
⑥background-attachment
background-attachment属性用于定义背景图像是否随对象内容滚动还是固定位置。
其取值包括scroll（背景图像随对象内容滚动）和fixed（背景图像处在固定位置），默认值是scroll，也就是说，在默认的情况下，背景会随文档滚动。
⑦background
background属性是一个复合属性，可以快速定义背景图像，其组成包括background-color、background-image、background-position、background-repeat和background-attachment，默认值为transparentnonerepeatscroll0%，如果其单个属性没有显式定义，则取其默认值。
3．背景定位的方法
（1）应用位置关键字
图像放置关键字最容易理解，其作用如其名称所表明的。
（2）应用百分数值
百分数值的表现方式更为复杂。
假设希望用百分数值将图像在其元素中居中。
（3）应用长度值
长度值解释的是元素内边距距左上角的偏移，偏移点是图像的左上角。
例如，如果设置值为50px100px，图像的左上角将在元素内边距距左上角向右偏移50像素、向下偏移100像素的位置上。
4．图像的透明度
通过CSS创建透明图像是很容易的，定义透明效果的CSS3属性是opacity。
CSS的opacity属性是W3CCSS推荐标准的一部分。
（1）创建透明图像
创建透明图像的CSS代码如下：
img{
opacity:
0.4;
filter:
alpha（opacity=40）;/*针对IE8以及更早的版本*/
}
（2）创建透明图像的Hover效果
将鼠标指针移动到图片上时，会改变图片的透明度，实现图像透明度的Hover效果。
创建透明图像的Hover效果的CSS代码如下：
img{
opacity:
0.4;
filter:
alpha（opacity=40）;/*针对IE8以及更早的版本*/
}
img:
hover{
opacity:
1.0;
filter:
alpha（opacity=100）;/*针对IE8以及更早的版本*/
}
【验证训练】
【任务3-1】验证各种类型的图片与背景属性设置
【任务描述】
在网页中输入以下HTML标签及文字：
针对上述图片验证各种类型的图片属性设置，并设置背景图像。
（1）设置多种不同的图片长度和宽度。
（2）设置多种不同的图片边框。
（3）设置div区域的背景图象，并设置背景图像多种不同的background-repeat、background-size、background-position、background-origin属性值以及margin和padding属性值。
【任务实施】
（1）创建一个名称为“单元3”的站点，在该站点中创建文件夹“3-1”。
（2）在该站点的文件夹“3-1”中创建网页0301.html。
（3）在网页0301.html中插入div标签和所需的图片，并设置该图片的alt属性。
（4）定义标签的CSS代码。
标签的初始CSS定义代码如下所示。
img{
width:
300px;
height:
220px;
border:
2px#CCCsolid;
border-radius:
4px;
}
（5）定义
div{
background-image:
url（images/travel-bg.png）;
background-repeat:
no-repeat;
background-size:
100%100%;
background-origin:
padding-box;
padding:
20px;
margin:
10px;
}
（6）浏览网页0301.html的效果，如图3-3所示。
图3-3网页0301.html的浏览效果
（7）然后按照任务描述的要求不断改变各个属性设置，重新浏览其效果。
【引导训练】
【任务3-2】创建图片为主体的网页0302.html
【任务描述】
创建网页文档0302.html，在该网页中添加必要的HTML标签、插入图片和输入文字。
该网页的浏览效果如图3-4所示，该网页包含1张覆盖整个网页的图片，在该图片上还有文字。
图3-4网页0302.html的浏览效果
【任务实施】
（1）在站点“单元3”中创建文件夹“3-2”。
（2）在文件夹“3-2”中创建网页文档0302.html，切换到【代码视图】，在标签“”的前面编写样式代码，如表3-1所示。
（3）在网页文档0302.html中添加所需的标签、插入图片与输入文字，HTML代码如表3-2所示。
（7）保存网页文档0302.html，在浏览器GoogleChrome中的浏览效果如图3-4所示。
【任务3-3】创建多张图片并行排列的网页0303.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0303.html，且链接外部样式文件base.css和main.css。
（3）在网页0303.html中添加必要的HTML标签和输入文字。
（4）浏览网页0303.html的效果，如图3-5所示，该网页包含多张图片。
图3-5网页0303.html的浏览效果
【任务实施】
（1）创建站点与文件夹
在站点“单元3”中创建文件夹“3-3”，在该文件夹中创建子文件夹“CSS”，将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。
（2）定义网页主体布局结构和美化图片的CSS代码
在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构和美化图片的CSS代码如表3-3所示。
表3-3中的CSS代码“border-radius:
5px;”实现了圆弧边框的效果。
（3）创建网页文档0303.html与链接外部样式表
在文件夹“3-3”中创建网页文档0303.html，切换到网页文档0303.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：
（4）编写网页主体布局结构的HTML代码
网页0303.html主体布局结构的HTML代码如表3-4所示。
（5）在网页中插入图片与设置图片属性
在网页文档0303.html中插入图片与设置图片属性，HTML代码如表3-5所示。
（6）保存与浏览网页
保存网页文档0303.html，在浏览器GoogleChrome中的浏览效果如图3-5所示。
【任务3-4】创建图片和文字的网页0304.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0304.html，且链接外部样式文件base.css和main.css。
（3）在网页0304.html中添加必要的HTML标签、插入图片和输入文字。
（4）浏览网页0304.html的效果，如图3-6所示，该网页包含标题文字、1张图片和正文文字。
图3-6网页0304.html的浏览效果
【任务实施】
（1）创建文件夹
在站点“单元3”中创建文件夹“3-4”，在该文件夹中创建子文件夹“CSS”。
将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。
（2）定义网页主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表3-6所示。
（3）定义美化图片与文字的CSS代码
在样式文件main.css中编写样式代码美化图片与文字，其CSS代码如表3-7所示。
（4）创建网页文档0304.html与链接外部样式表
在文件夹“3-4”中创建网页文档0304.html，切换到网页文档0304.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：
（5）编写网页主体布局结构的HTML代码
网页0304.html主体布局结构的HTML代码如表3-8所示。
（6）输入HTML标签与文字
在网页文档0304.html中输入所需的标签与文字，HTML代码如表3-9所示。
（7）保存与浏览网页
保存网页文档0304.html，在浏览器GoogleChrome中的浏览效果如图3-6所示。
【任务3-5】创建带动画效果的相册网页0305.html
【任务描述】
（1）创建样式文件base.css，在该样式文件中定义标签的属性。
（2）创建样式文件main.css，在该样式文件中定义类选择符及其属性。
（3）创建网页文档0305.html，且链接外部样式文件base.css和main.css。
（4）在网页0305.html中添加必要的HTML标签、插入图片和输入文字。
（5）浏览网页0305.html的效果，如图3-7所示，该网页包含标题文字、3张图片及图片标题，当鼠标指针指向图片时会出现动画效果。
图3-7网页0305.html的浏览效果
【任务实施】
（1）创建文件夹
在站点“单元2”中创建文件夹“3-5”，在该文件夹中创建子文件夹“CSS”。
（2）定义网页通用CSS代码
在文件夹“CSS”中创建样式文件base.css，在该样式文件中编写样式代码，网页通用的CSS代码定义如表3-10所示。
（3）定义网页主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表3-11所示。
（4）定义美化图片与文本内容的CSS代码
在样式文件main.css中编写样式代码美化图片与文本内容，其CSS代码如表3-12所示。
（5）创建网页文档0305.html与链接外部样式表
在文件夹“3-5”中创建网页文档0305.html，切换到网页文档0305.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：
（6）编写网页主体布局结构的HTML代码
网页0305.html主体布局结构的HTML代码如表3-13所示。
（7）输入HTML标签与正文内容
在网页文档0305.html中输入所需的标签、输入标题文字、插入图片与输入正文内容，HTML代码如表3-14所示。
（8）保存与浏览网页
保存网页文档0305.html，在浏览器GoogleChrome中的浏览效果如图3-7所示。
【任务3-6】创建布局结构较复杂的图片墙网页0306.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0306.html，且链接外部样式文件base.css和main.css。
（3）在网页0306.html中添加必要的HTML标签和输入文字。
（4）浏览网页0306.html的效果，如图3-8所示，该网页包含多张图片，当鼠标指针指向图片时会出现动画效果。
图3-8网页0306.html的浏览效果
【任务实施】
（1）创建文件夹
在站点“单元3”中创建文件夹“3-6”，在该文件夹中创建子文件夹“CSS”。
将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。
（2）定义网页主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表3-15所示。
（3）定义美化图片及提示文字的CSS代码
在样式文件main.css中编写样式代码美化图片及提示文字，其CSS代码如表3-16所示。
（4）创建网页文档0306.html与链接外部样式表
在文件夹“3-6”中创建网页文档0306.html，切换到网页文档0306.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：
（5）编写网页主体布局结构的HTML代码
网页0306.html主体布局结构的HTML代码如表3-17所示。
（6）输入HTML标签与图片
在网页文档0306.html中输入所需的标签、插入图片与输入文字，HTML代码如表3-18所示。
（7）保存与浏览网页
保存网页文档0306.html，在浏览器GoogleChrome中的浏览效果如图3-8所示。
【同步训练】
【任务3-7】创建多列图片展示的网页0307.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0307.html，且链接外部样式文件base.css和main.css。
（3）在网页0307.html中添加必要的HTML标签和插入多张图片。
（4）浏览网页0307.html的效果，如图3-16所示，该网页包含标题文字和多张图片。
图3-16网页0307.html的浏览效果
【任务3-8】创建图文混排的网页0308.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0308.html，且链接外部样式文件base.css和main.css。
（3）在网页0308.html中添加必要的HTML标签、插入图片和输入文字。
（4）浏览网页0308.html的效果，如图3-17所示，该网页左侧为1张图片，右侧为文字内容。
图3-17网页0308.html的浏览效果
【单元小结】
本单元主要探讨图片与背景的美化与布局，熟悉了图片与背景的美化方法，训练了单张图片、多张图片、图文混排、带动画效果的相册、图片墙的布局方法。
对HTML中常用的图片标签、背景设置与定位、图像透明度等方面知识进行了全面介绍，同时对利用CSS样式设置图像属性、图文混排布局、全图排版网页的制作、“图片替代文本”效果的实现、利用CSSSprites原理合成图片、利用CSS样式设置图像的阴影效果和采用不同方法将内容性图像和修饰性图像插入到页面等技术要点进行了详细说明。
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局 HTML5 CSS3 网页 美化 布局 单元 图片 背景
冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
《纸的发明》优质教案反思2.docx
-
安全生产工作表态发言稿精选汇编.docx
-
2供应商大会主持词.docx
-
3D渲染笔记教程.docx
-
7A版最新9001质量管理体系内部审核检查表.docx
-
010小语教案二上.docx
-
16年级小学生古诗文.docx
-
115米烟囱施工方案.docx
-
201X企业文化培训总结范文.docx
-
304汽水分析站热控安装分部工程施工质量验收表课件.docx
-
0831《中国音乐史》网上作业题及答案.docx
-
13142继电保护期末复习题1.docx
-
bgp自我理解.docx
-
CAD软件操作.docx
-
12年注册会计师《审计》随章考试题第三章.docx
-
18年高考生物大一轮复习阶段评估检测一.docx
-
20xx年义务教育均衡发展工作会讲话.docx
-
22教案跨越海峡的生命桥doc.docx
-
26个专题知识点精编汇总.docx
-
42式太极剑名称与动作分解.docx
-
500万吨常减压装置关键质量控制点.docx
-
3000常用汉字米字格字帖楷体.docx
-
39《劝学》导教案2.docx
-
12高中班主任评语.docx
-
18年度工作总结风景名胜区.docx
-
21世纪制浆造纸业的革命doc.docx
-
51定期巡视和典型巡视.docx
-
20XX年内蒙古特岗教师招聘考试真题及答案部分试题.docx
-
20年春北理工《计算机应用基础本》在线作业5.docx
-
101迎国庆节祝贺词60句资料doc.docx
-
40万吨铁选厂建设项目职业病危害防护设施设计D.docx
-
110kV天等站直流系统充电机及馈线屏更换工作方案要点.docx
-
七年级下册语文文言文阅读训练及答案.docx
-
基于单片机控制电梯的超载显示与报警大学论文.docx
-
湖南省高星物流园建设工程项目申请报告优秀甲级资质项目申请报告完整版.docx
-
年产10万吨再生塑料颗粒项目立项建设可行性分析论证报告.docx
-
加油站应急预案备案稿模板.docx
-
鲁人版语文必修一第9课《赤壁之战》word教案.docx
-
企业产品标准管理办法.docx
-
基站建设标准化图文详解.docx
-
年终个人工作总结范文5篇大全.docx
-
家用纺织品进入意大利市场的调研分析.docx
-
湖南省中学教育心理学复习分章节要点.docx
-
企业会计准则附注格式例.docx
-
计算机二级ACCESS试题2.docx
-
钦州辖城区砂石资源开发专项规划.docx
-
宁夏回族自治区 七年级下学期期中考试地理试题II卷.docx
-
架子鼓教案共13页.docx
-
论保住青山绿水也是政绩.docx
-
花键套零件工艺设计.docx
-
企业所得税相关法规精要.docx
