《Dreamweaver网页设计与制作》-第 ７ 章 　网 页 中 图 像 的 应 用

７.１网页图像常识７.１.１矢量图与位图１.矢量图———完美的几何图形矢量图是通过组成图形的一些基本元素，如点、线、面、边框、填充色等信息通过计算的方式来显示图形的。这就好比在几何学里面通过圆心位置和半径来描述圆，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述其样式。电脑在显示的时候则通过这些数据去绘制人们定义的图像。下一页返回７.１网页图像常识２.位图———神奇的拼图位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了人们所看到的图像。当放大一幅位图时，能看到这些拼片一样的像素点。上一页下一页返回７.１网页图像常识７.１.２有损压缩和无损压缩尽管人们在Ｗｅｂ页面中所使用的ＪＰＧ、ＰＮＧ、ＧＩＦ格式的图像都是位图，即它们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这涉及有损压缩和无损压缩的区别。１.有损压缩———看到的不一定是真实的ＪＰＧ是最常见的采用有损压缩对图像信息进行处理的图片格式。ＪＰＧ在存储图像时会把图像分解成８×８像素的栅格，然后对每个栅格的数据进行压缩处理。当放大一幅图像的时候，会发现这些８×８像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充。这就是用ＪＰＧ格式存储图像有时会产生块状模糊的原因。上一页下一页返回７.１网页图像常识２.无损压缩———最精确的拼图相对有损压缩无损压缩能真实地记录图像上每个像素点的数据信息，但为了压缩图像文件其会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录（例如对一片蓝色的天空只需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。上一页下一页返回７.１网页图像常识７.１.３网页常用的图像格式１.ＧＩＦ图片格式ＧＩＦ是一种调色板型（ｐａｌｅｔｔｅｔｙｐｅ）（或者说是索引型）的图片。它含有多达２５６种颜色。每一个像素点都有一个对应的颜色值。ＧＩＦ是一种无损压缩的格式，这意味着在修改并且保存图片的时候，它的质量不会有任何损耗。ＧＩＦ格式支持动画，如果有需要，就可以使用动画支持。ＧＩＦ支持透明度，透明度的值是一种布尔类型数据。ＧＩＦ图片里的一个像素要么完全透明，要么完全不透明。上一页下一页返回７.１网页图像常识２.ＰＮＧ图片格式ＰＮＧ又分为ＰＮＧ－８、ＰＮＧ－２４两种，其中，ＰＮＧ－８与ＧＩＦ类似，支持２５６色调色板，而ＰＮＧ－２４只支持４８位真彩色，凡是ＧＩＦ拥有的优势ＰＮＧ－８都拥有，ＧＩＦ所没有的优势ＰＮＧ－８也有，同样的文件，ＰＮＧ－８格式比ＧＩＦ格式要小，ＰＮＧ－８的特点使得它在网站设计的切图环节深受网站设计师的喜爱。ＰＮＧ格式可以以任何颜色深度存储图像，也支持高级别的无损耗压缩，支持伽马校正，支持交错，得到最新Ｗｅｂ浏览器的支持，能够提供长度比ＧＩＦ格式小３０％的无损压缩图像文件，最高支持４８位真彩色图像以及１６位灰度图像，可渐近显示和流式读写。其不足之处是较旧的浏览器和程序可能不支持ＰＮＧ文件。上一页下一页返回７.１网页图像常识３.ＪＰＥＧ图片格式ＪＰＥＧ是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式。在Ｐｈｏｔｏｓｈｏｐ软件中以ＪＰＥＧ格式储存图像时，它提供１１级压缩级别，以０～１０级表示。其中０级压缩比最高，图像品质最差。即使采用细节几乎无损的１０级质量保存时，压缩比也可达到５∶１。经过多次比较，第８级压缩为存储空间与图像质量兼得的最佳比例。ＪＰＥＧ格式的应用非常广泛，在网络读物和光盘读物上，都能找到它的身影。目前各类浏览器均支持ＪＰＥＧ格式，因为ＪＰＥＧ格式的文件尺寸较小，下载速度快。上一页返回７.２在网页中插入前端图像７.２.１通过可视化工具插入图像（１）打开Ｄｒｅａｍｗｅａｖｅｒ后，将光标移动到待插入图片的位置，单击一下，进行当前焦点确认。（２）在Ｄｒｅａｍｗｅａｖｅｒ上方的菜单栏中单击“插入”菜单，在弹出的二级菜单中选择“图像”子菜单，如图７－１所示。（３）在接下来弹出的选择图片窗口中，选择图片来源于文件系统，然后单击“确定”按钮。（４）在弹出的浏览框中单击进入存放图片的目录，并通过浏览查找拟插入到网页中的图片。在浏览时，可以通过右侧的图像预览来确定该文件是否是需要的图片文件，如图７－２所示。下一页返回７.２在网页中插入前端图像（５）选中需要的图片，单击“确定”按钮。（６）如果选中的图片不在站点文件夹中，软件会弹出保存文档的提示，如图７－３所示，这时单击“确定”按钮，接下来把该图片文件复制到站点文件夹中。（７）在弹出的文件信息中，单击“确定”按钮。（８）此时可发现，该图像已经插入到页面中了，如图７－４所示。７.２.２通过标签插入图像在制作网页时，可以使用ＨＴＭＬ语言中的＜ｉｍｇ＞标签将图像插入到网页中，从而达到美化页面的效果。语法：＜ｉｍｇｓｒｃ＝＂图像文件的地址＂＞上一页返回７.３图像的编辑与设置１.通过属性面板进行编辑与设置在Ｄｒｅａｍｗｅａｖｅｒ的设计页面中，首先用鼠标点选拟修改的图片，然后下方的属性面板就会显示该图片的各类相关数据。可以通过修改这些数据来对图片进行编辑与设置。２.通过ＨＴＭＬ标签进行编辑与设置在Ｄｒｅａｍｗｅａｖｅｒ中，单击代码标签，将当前的工作页面切换至代码编写界面，然后通过对＜ｉｍｇ＞标签进行属性配置，就能够实现不同的图像显示效果。１）图像高度———ｈｅｉｇｈｔ通过ｈｅｉｇｈｔ属性可以设置图片显示的高度，默认情况下，在改变高度的同时，其宽度也会等比例进行调整。下一页返回７.３图像的编辑与设置语法：＜ｉｍｇｓｒｃ＝“图像文件的地址”ｈｅｉｇｈｔ＝图像的高度＞说明：在该语法中，图像的高度单位是像素。２）图像宽度———ｗｉｄｔｈ图像宽度的属性与图像高度类似，同样是用来调整图像大小的。语法：＜ｉｍｇｓｒｃ＝“图像文件的地址”ｗｉｄｔｈ＝图像的宽度＞说明：在该语法中，图像的宽度单位是像素。如果在使用属性的过程中，只设置了高度或宽度，则另外一个参数会等比例变化。上一页下一页返回７.３图像的编辑与设置３）图像边框———ｂｏｒｄｅｒ在默认情况下，页面中插入的图像是没有边框的，可以通过ｂｏｒｄｅｒ属性为图像添加边框。语法：＜ｉｍｇｓｒｃ＝＂图像文件的地址＂ｂｏｒｄｅｒ＝＂图像边框的宽度＂＞说明：ｂｏｒｄｅｒ的单位是像素。４）图像水平间距———ｈｓｐａｃｅ图像与文字之间的水平距离是可以通过ｈｓｐａｃｅ参数进行调整的。通过调整间距，可以使文字和图像的排版不那么拥挤，看上去更加协调。语法：＜ｉｍｇｓｒｃ＝＂图像文件的地址＂ｈｓｐａｃｅ＝＂水平间距＂＞说明：水平间距ｈｓｐａｃｅ属性的单位是像素。上一页下一页返回７.３图像的编辑与设置５）图像垂直间距———ｖｓｐａｃｅ垂直间距参数ｖｓｐａｃｅ用来调整图像与文字的垂直距离。语法：＜ｉｍｇｓｒｃ＝“图像文件的地址”ｖｓｐａｃｅ＝“垂直间距”＞说明：ｖｓｐａｃｅ属性的单位是像素。６）图像相对于文字基准线的对齐方式———ａｌｉｇｎ图像和文字之间的排列方式可以通过ａｌｉｇｎ参数来调整。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括左对齐、右对齐和居中对齐３种，而相对文字对齐方式则是指图像与一行文字的相对位置。上一页下一页返回７.３图像的编辑与设置语法：＜ｉｍｇｓｒｃ＝＂图像文件的地址＂ａｌｉｇｎ＝＂相对文字的对齐方式＂＞７）图像的说明文字———ａｌｔ当图像没有装载到浏览器上时，就会显示添加的说明文字，而即便在图像正常显示之后，把鼠标停留在图像上方时也会显示提示文字，这一功能通过ａｌｔ属性来实现。语法：＜ｉｍｇｓｒｃ＝＂图像文字的地址＂ａｌｔ＝＂提示文字的内容＂＞上一页返回７.４在网页中插入背景图像在Ｄｒｅａｍｗｅａｖｅｒ中把一个漂亮的图片设置为页面背景是常用的设计技巧。对于一个新手来说，如何在ＤｒｅａｍｗｅａｖｅｒＣＳ６中设置网站的背景图片呢？下面说明其设置步骤。（１）打开ＤｒｅａｍｗｅａｖｅｒＣＳ６应用软件后，单击欢迎屏幕上“新建”项下的“ＨＴＭＬ”，如图７－５所示。（２）保存好后，单击菜单栏中的“修改”命令，