《轻松学HTML+CSS之图片.pptx》由会员分享，可在线阅读，更多相关《轻松学HTML+CSS之图片.pptx（23页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第4章图片网页中的图片具有直观和美化的作用，是网页设计中必不可少的元素。它既是文字表达的有力补充，又是网页美化装饰中最具渲染力的元素。这一章我们将讲解如何在网页中插入图片，美化图片等内容，从而使网页丰富多彩更显生动，进而激发出浏览者的兴趣。4.1 网页图片格式图片的格式有很多。但常见的网页图片格式只有三种：GIF、JPG、PNG。下面详细讲解图片的这三种格式。1.GIF格式：GIF格式的文件后缀名是.gif。2.JPG格式：JPG格式的文件后缀名是.jpg。3.PNG格式：PNG格式的文件后缀名是.png。4.2 图片的构建在HTML中，图片由标签定义。是空标签，它只包含属性，并且没有闭合标签
2、。下面我们就来讲解如何在网页中嵌入图片。4.2.1 选择路径（SRC）为了在页面上显示图片，我们需要使用源属性src。src指“source”（来源）的缩写。源属性的值是图片的URL地址。定义图片的语法是：4.2.2 设定低分辨率（LOWSRC）如果用户的浏览器速度很慢，网页设计者可以在页面中为其插入一张低分辨率的图像以供显示。src和lowsrc定义的图片并不能共存，当src定义的图片不显示时，才会显示lowsrc定义的图片。定义语法如下：4.2.3设定替换文本（ALT）alt属性用来为图片定义一串预备的可替换的文本。替换文本属性的值是用户定义的。定义语法如下：4.3 调整图片在网页设计过程
3、中，可以自行定义图片的高度和宽度，排列位置等，使得图片为整个网页添加效果。下面我们就来详细如何对图片进行调整。4.3.1选择宽度和高度为了在网页中能够更好的显示图片，我们常常设定图片的宽度和高度。定义语法如下：4.3.2设定排列（ALIGN）图片和文字之间的排列通过align属性来设定。图片的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样，只有三种：居左、居中、居右；而相对文字对齐方式是指图片与一行文字的相对位置对齐。定义语法如下：4.3.2设定排列（ALIGN以下描述的是空间位置，这里使用图形和文字作为参考。“基线”、“底部”、“绝对底部”效果相同，是指图片底端
4、和文字的底端对齐。“顶端”、“文本上方”方式是指图片顶端和文字行最高字符的顶端对齐。“中间”方式是指图片的中间线和文字的底端对齐。“绝对中间”是指图片的中间线和文字的中间线对齐。4.3.2设定排列（ALIGN其中，图片的顶端、中间、底端的位置如图4.4所示。文字的顶端、中间、底端的位置如图4.5所示。4.3.3设定边框（BORDER）默认的图片是没有边框的，通过属性可以为图片添加边框线。我们可以设置边框线的宽度，但边框的颜色是不可以调整。当图片上没有添加链接的时候，边框的颜色为黑色；当图片添加了链接时，边框的颜色和链接文字的颜色一致，默认为深蓝色。定义语法如下：4.3.4设定水平间距和垂直间距
5、图像和文字之间的距离是可以调整的，使用属性hspace调整图像和文字之间的左右距离，属性vspace调整图像和文字之间的上下距离。这样可以非常有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。定义语法如下：4.4网页背景图片在网页制作过程中，背景的设置多种多样，可以用纯色作为背景，也允许使用背景图像创建相当复杂的效果。要把图片放入背景，有两种方式设置，下面我们分别来介绍在HTML中和CSS中的设置方式。4.4.1 为网页背景添加图片背景图片指的是在网页背景中插入图片。我们可以根据自身要求进行定义，下面我们就来介绍如何为网页背景添加图片。1.在HTML中，我们使用background属性，
6、对背景图片进行设置。定义语法如下：为网页背景添加图片2.在CSS中，我们通常使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个URL值，定义语法如下：4.4.2 指定背景图片应用的范围背景图片的应用范围非常广。不仅可以用于body中对整个网页背景进行定义，还可以对网页内部元素进行定义，如段落背景等。下面我们就来详细介绍背景图片的应用范围。1.段落背景图片的应用2.行内元素背景图片的应用4.4.3 指定图片平铺方式如果需要在页面上对背景图片进行平铺，可以使用backgrou
7、nd-repeat属性。属性值repeat导致图片在水平垂直方向上都平铺，与以往背景图片的通常做法一样。repeat-x和repeat-y分别导致图片只在水平或垂直方向上重复，no-repeat则不允许图片在任何方向上平铺。定义语法规则如下：4.4.4 为背景图片定位background-position属性来改变图片在背景中的位置。定义语法规则如下：为BACKGROUND-POSITION属性提供值为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。下面逐一进行介绍。1.定位关键字：位置关键字可以按
8、任何顺序出现，只要保证不超过两个关键字一个对应水平方向，另一个对应垂直方向。2.百分数值：百分数值的表现方式更为复杂，定义语法规则如下：3.长度值：长度值是从元素内边距区左上角的偏移。偏移点是图片的左上角。定义语法规则如下：4.4.5 设置背景图片跟随方式如果文档比较长，那么当文档向下滚动时，背景图片也会随之滚动。当文档滚动到超过图片的位置时，图片就会消失。而background-attachment属性就是防止这种滚动的。通过这个属性，可以调节图片相对于可视区是固定的（fixed），因此不会受到滚动的影响。定义语法规则如下：4.5 小结本章学习了图片在网站中的用法，如插入图片、背景图片等。但是由于图片文件所占的网站空间较大，这里建议大家最好不要使用像素太高的图片。有关网页图片链接的内容，我们将会在后面的章节中详细介绍。