第4章_图像和背景的使用.pptVIP

Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 4.* Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 4.* Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 4.* Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 4.* Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 4.* Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 4.* Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 4.* Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 4.* HTML网页设计 顾问:邯郸清华万博教职部 第四章 使用图像和背景 本章结构 常见网络图像格式 使用图像 创建图像地图 本章小结 思考题 常见网络图像格式 网络图像格式中，最常用的是GIF格式和JPEG格式。此外PNG格式作为一种Web图像格式也被广泛使用。 GIF（Graphics Interchange Format）图像 扩展名为.gif，是一种被压缩过的图像格式。 只支持256种颜色，但可以制作透明图片和GIF动画。 JPEG（Joint Photographic Experts Group）图像 扩展名为.jpg或.jpeg，有损压缩方式。 不适合表现线条画或文字图像。 PNG（Portable Network Graphics）图像 扩展名为.png， 称为可移动网络图像。 兼有GIF和JPEG的色彩模式，PNG不仅能储存256色以下的图像，最高可储存至48位超强色彩图像。 使用图像——在Web页中添加图像 要向一个HTML文件中添加图片，只需在其中加入img标记，并使它指向所需的图片。img标记不是一个成对标记，不需要结束标志。最基本的使用img标记的语法如下： img src=“图像文件url” alt=“替换文本” src属性设置为要插入图像文件的URI URI既可以是绝对地址，也可以是相对地址。 在Web页中添加图像示例 使用图像——设定图片高度和宽度 HTML3.2版本以后，img标记引入了height和width属性，分别指定图片的高度和宽度。如第一章所述，这两个属性的值既可以用像素值，也可用百分比值。 使用图像——设置图片位置 img标记也具有align属性，通过该属性可以调整图片在Web页中的对齐方式。align属性提供了垂直和水平两种对齐方式。 垂直对齐 top：使图片的顶端与文本的顶端对齐，而使图片的下面部分低于后面的文字。 middle：使图片垂直的中线与当前文字的基线对齐。 bottom：使图片的底端与伴随文字的基线对齐。而使图片的顶部高于伴随文字。 水平对齐 left：强制图片显示在当前窗口的左侧，而使其后的文字显示在图片右侧。 right：强制图片显示在当前窗口的右侧，而使其后的文字显示在图片左侧。 图片垂直对齐示例 图片水平对齐示例 使用图像——设置图片周围空白大小 hspace和vspace属性，它们用来设置图片周围的空白。 图片周围的空白并不一定是白色的，这种空白是指图片周围的一段距离内没有其它内容，而它的颜色是与背景的颜色一致的。 hspace设置的是图片左右两端的空白大小 vspace设置的是图片上下端的空白大小 空白的宽度单位是像素，并且对图片相对的两边都有效。 设置图片周围空白示例 使用图像——设置边框 可以使用img标记的border属性给图片加上边框。边框的宽度用像素数来指定。 使用图像——创建图片链接 可以为图片设置链接，使其指向其它页面。要设置图片链接，只需要在锚站标记a和/a之间包含img标记，并在锚站标记的href属性中添加要链接到目标文件名称。 使用图像——使用缩略图 即用一幅文件较小的副本图片来代替原来较大的图片，将其加入到页面中，再在较小的副本图片上创建一个指向原来的大图片的链接。这个副本图片称为“缩略图”。 使用图像——设置背景图片 网页背景图片在body标记内指定，body标记的属性background用于指定文档的背景图片URI，给文档填充一个背景图片，背景图片将平铺在整个Web页中。 创建图像地图 图像地图是图片链接的一种延伸，在一个图像地图中可以设置多个链接，可以连