《第4章 图像在网页中的应用》由会员分享，可在线阅读，更多相关《第4章 图像在网页中的应用（37页珍藏版）》请在金锄头文库上搜索。
1、,案例说明,根据实现方式的不同，网页中的图像可分为两大类，一类是插入图像，它是用HTML代码实现的；另一类是背景图像，一般是通过设置CSS样式实现的。在本案例中，将讲解这两类图像的设置方法。另外，在本案例的“支撑知识点”部分，将只讲解第1类图像的设置要点；在案例二中再具体讲解设置网页元素背景图像的相关知识。,案例步骤,将本书附赠的“素材与实例第4章”文件夹拷贝至本地磁盘创建的My Web站点的根目录中。,打开“文件”面板，在刚拷贝的文件夹“第4章task1”中新建一个名为index-lx.html的网页文档，并在文档编辑窗口中打开。,打开“task1”文件夹中名为“文字”的文本文件，将文字内容
2、复制粘贴到新建文档的设计视图中，然后依据效果图，查看是否已分好段落，如果没有，在设计视图中按【Enter】键划分段落，并清除空行。,案例步骤,案例步骤,添加标题。将“做人做事的艺术”文字用一号标题标签对括起来。,添加水平线。将插入点置于标题右侧，选择“插入”“水平线”菜单，在刚添加的标题下方添加水平线。,将插入点置于正文第1行文字左侧，单击“插入”面板“常用”类别中的“图像：图像”按钮，在弹出的对话框中选择素材中名称为“1.jpg”的图像将其插入。,案例步骤,从效果图可知，文字及图像整体在页面中有一定的宽度并需要居中。为此，在设计视图中选中所有内容，单击“插入”面板“常用”类别中的“Div”按
3、钮，插入一个id名为all的标签，所选内容将自动放入该块元素中。,表4-1 涉及的HTML标签,案例步骤,指定在页面中引入CSS样式的方法。本例使用内嵌样式，在标签对之间输入如下代码。,案例步骤,整体页面设置。在步骤1中输入的标签对之间输入如下代码。,bodypadding:0px; /*消除整体页面的默认内边距*/margin:0px; /*消除整体页面的默认外边距*/background-image:url(images/bg111.gif); /*为整体页面添加背景图像*/font-size:14px; /*设置整体页面文字大小*/,案例步骤,设置id为all的块元素样式。在步骤2输入的
4、代码下方输入如下代码。,#allwidth:800px; /*设置块元素宽度为800像素*/margin:0px auto; /*设置块元素水平居中*/border:6px #000 double; /*设置块元素边框*/padding:10px; /*设置块中的内容同块边框之间的距离*/background-color:#FC9; /*设置块元素的背景颜色*/,块元素的特性是独占一行，如果想让整个块元素居于页面中间，就需要确定块的宽度（块元素默认是抵满整行），然后为其设置外边距，即margin:0px auto;，表示设置块边距上下为0，左右自动，从而实现居中显示。,案例步骤,设置页面标题样
5、式。,h1 font-size:36px; /*设置标题文字大小*/font-family:“黑体“; /*设置字体*/text-align:center; /*标题文字水平居中*/color:#ff3300; /*设置文字颜色*/,案例步骤,设置在块元素内插入的图像样式。,#all imgborder:2px #ff3300 solid; /*为图像添加边框*/float: left; /*实现文字环绕图像效果，图像位于左侧*/margin-right:10px; /*设置图像右侧同文字的距离为10px*/padding:8px; /*设置图像与边框之间的距离为8px*/,要实现文字环绕图像
6、的效果，只需要在图像上设置浮动样式属性float，要左环绕还是右环绕由float属性的值left和right决定。,案例步骤,设置块元素内的段落样式。,#all p line-height: 24px; /*设置文本行间距*/text-indent: 2em; /*设置段落首行缩进两个字符*/font-family:“楷体_GB2312“; /*设置字体*/,保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。,支撑知识点,在CSS中，可以利用height（高度）和width（宽度）两个属性来设置图像及块元素类对象的大小。这两个属性的使用很简单，其语法格式为：he
7、ight:高度值;或width:宽度值;。,在设置height和width属性值时可以使用多种单位，常用的有%（百分比）和px（像素）。其中%（百分比）是一个相对单位，例如将图像的width值设置为50%时，图像宽度将调整为其父元素宽度的一半，而且图像会随着父元素（如浏览器）的变大而变大，或缩小而自动缩小，形成自适应效果。,当使用px（像素）作为单位时，图像的大小将保持固定值。,在CSS中，用于设置图像和其他元素边框的属性主要有3个：边框样式、边框宽度和边框颜色。,设置边框样式的属性：border-style；设置边框宽度的属性：border-width；设置边框颜色的属性：border-co
8、lor。,表4-2 border-style属性的不同属性值及其意义,边框不仅可以设置在图像上，网页中的几乎所有元素都可以设置边框效果，如、段落、列表或列表项元素等，都可以设置边框。,表4-3 为4个边框设置不同样式,在对边框的属性使用熟练后，可以将各个属性值写在同一个语句中并用空格分开，从而减少CSS代码的长度。例如：border:5px double #ff00ff;，表示将边框粗细设置为5像素，样式为双线，颜色为粉红色。,图像的对齐方式分为水平对齐和垂直对齐两种方式。,图像的水平对齐与第3章介绍的文字水平对齐方式基本相同，分为左、中、右3种。图像的水平对齐不能通过直接设置图像的text-
9、align属性实现，而是通过设置其父元素的text-align属性来实现。,在CSS中可以使用vertical-align属性来控制图像的垂直对齐方式，它主要应用在图像与文字搭配的情况下。其各属性值的意义如表4-4所示。,在网页中经常会出现图文混排的情况，这种效果是使用CSS为图像设置左浮动或右浮动属性来实现的。,图像居于文字右边：float:right；图像居于文字左边：float:left。,另外，我们可以使用margin属性设置图像同文字之间的距离。,案例说明,在HTML中，背景图像是通过重复平铺实现的，在CSS中处理更加灵活，可以通过CSS样式控制背景图像，将其放在任意位置。本案例通过
10、制作童话故事页面，重点学习使用CSS设置背景颜色及控制背景图像的方法。,案例步骤,打开“文件”面板，在已拷贝的文件夹“第4章task2”中新建一个名为tale-lx.html的网页文档，并在文档编辑窗口中打开。,打开task2文件夹中名为“文字”的文本文件，将文字内容复制粘贴到新建文档的设计视图中，然后依据效果图，使用【Enter】键为文字划分段落，并删除空行。,添加标题。将最上方的“豌豆上的公主”文字用一号标题标签对括起来；将故事的作者“作者:安徒生”用五号标题标签对括起来。,案例步骤,插入图像。在代码视图中将插入点置于5号标题后面，单击“插入”面板“常用”类别中的“图像：图像”按钮，在弹出
11、的对话框中选择素材中的“img2.jpg”图像并插入。,通过效果图可以看出，文字和图像需要整体居中，并添加背景和边框，因此选中所有的文字和图像，插入一个id名为content的块元素，以方便在后面使用CSS对这些内容进行控制。,案例步骤,指定在页面中引入CSS样式的方法。本例使用内嵌样式，在标签对之间输入如下代码。,案例步骤,整体页面设置。在步骤1中输入的标签对之间输入如下代码。,bodypadding-top:30px; /*将页面顶端与块元素的距离设为30px*/background-image:url(images/bg.gif); /*设置背景图像并重复铺满整个页面*/font-siz
12、e:14px; /*统一设置页面文字大小*/color:#660033; /*统一设置页面文字颜色*/,案例步骤,设置id为content的块元素样式。,#contentwidth:80%; /*设置块元素的宽度为页面宽度的80%*/margin:0px auto; /*设置块元素在页面中水平居中*/background-image:url(images/img1.jpg); /*为块元素设置背景图像*/background-repeat:no-repeat; /*设置背景图像不重复（即只显示一张）*/background-position:right bottom; /*设置背景图像所处的位
13、置为右下角*/background-color:#E9FBFF; /*设置块元素的背景颜色*/border:6px double #FF0033; /*为块元素设置边框*/padding:10px; /*设置文字与块边框之间的距离为10px*/ ,案例步骤,设置标题文字居中。,h1,h5text-align:center; /*设置标题文字居中*/ ,background是针对网页元素背景的CSS样式属性，可用于设置网页元素的背景颜色和背景图像。,案例步骤,设置插入图像的样式。,#content imgfloat:left; /*设置文字环绕图像效果，其中图像位于文字的左边*/margin-r
14、ight:10px; /*设置图像右侧距文字之间的距离为10px*/ ,设置段落样式。,p text-indent:2em; /*段落首行缩进2个字符*/ line-height:2em; /*将行高设为2个字符的高度*/ ,保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。,支撑知识点,设置背景颜色是指使用CSS设置整个页面（通过设置标签）或指定的HTML元素（如块）的背景颜色，属性为background-color。其具体颜色值的设置方法与文字颜色的设置一样，可以采用十六进制的RGB值，颜色的RGB分量值和颜色的英文名称等，如表4-5所示。,表4-5 bac
15、kground-color各属性值的意义,设置背景图像是指使用CSS为整个页面或指定的HTML元素设置背景图像，在使用CSS设置背景图像后，还可以使用CSS的其他属性控制背景图像，如设置背景图像的位置，以及是否重复和固定等。在CSS中可以设置的背景图像属性有以下几项。,设置背景图像：background-image；设置背景图像的重复方式：background-repeat；设置背景图像的位置：background-position；固定背景图像：background-attachment。,利用CSS设置背景图像的语法格式为：background-image:url(背景图像的路径和名称); 。背景图像的路径可以为绝对路径，也可以为相对路径；网页中图像的格式一般为GIF、JPG或PNG。,
