第九章 图片和多媒体.docVIP

第九章 图片和多媒体 1 图片 1.1 图片标记img 高质量的图片一般用TIFF格式保存，但其图片体积过大，不太适合网络传输。 不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。网页中常用的图片格式为GIF、JPEG和PNG。 一般在网页设计中选择的图片不要超过8KB，如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。 如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。 在HTML文档中，显示图片所用的标记是img。 格式：img src=url img是插入图片的标记，其常用属性如表9-1。其中src是其必须的属性。 src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径，也可以是绝对路径。 表9-1 img的属性及其功能说明 img属性 功能说明 src 指定图像源，即图像的URL路径 width 指定图像的显示宽度 height 指定图片的显示高度 hspace 指定图片的水平间距 vspace 指定图片的垂直间距 align 指定图片的对齐方式 border 指定图片的边框大小 alt 显示图像的说明文字 实例1.html： html head title插入图片示例/title /head body !--使用相对路径指定图像路径-- img src=img/001.jpg width=240 /body /html 网页效果如图9-1。 图9-1插入图片示例 1.2 指定图像的高与宽 默认情况下，在HTML页面中显示的是图像的原始大小。 如果要显示指定的图像大小，就需采用img标记的width和height属性。 格式：img src= url width= height= width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。 在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。 实例2.html： html head title图片高和宽的设置/title /head body img src=img/011.jpg width=300 img src=img/011.jpg width=50% /body /html 第二个图设置为50%，其宽度为显示窗口宽度大小的二分之一，图的大小随浏览器窗口大小变化而变化，网页效果如图9-2。 图9-2指定图像的高与宽 1.3 指定图像的间距 img标记的hspace和vspace属性分别用来指定图像的水平间距和垂直间距。其值为数字，单位为px，默认值为0。 格式： img src=url hspace= img src=url vspace= hspace 指的是所设置图片与相邻元素的水平间距。 vspace指的是所设置图片与相邻元素的垂直间距。 实例3.html，通过一个表格把未指定图像间距、只指定图像水平间距、只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况清晰地进行比较显示。 html head title图像间距设置/title /head body table border=1 tr th图像间距说明/th th图像间距示例/th /tr tr td未指定图像间距/td tdimg src=img/001.jpg width=100 img src=img/001.jpg width=100/td /tr tr td指定图像水平间距/td tdimg src=img/001.jpg width=100 img src=img/001.jpg width=100 hspace=55 /td /tr tr td指定图像垂直间距/td tdimg src=img/001.jpg width=100 img src=img/001.jpg width=100 vspace=25/td /tr tr td指定了水平与垂直间距/td tdimg src=img/001.jpg width=100 img src=img/001.jpg width=100 hspace=55 vspace=25/td /tr /table /body /html 网页效果如图9-3。 图9-3设置图像间距 1.4 指定图像的对齐方式 img标记的align属