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

网页设计技术 第四章-使用图像和背景 提 纲 常用网络图像格式 使用图像 创建图像地图 4.1??常见网络图像格式 GIF（Graphics Interchange Format）图像 扩展名为.gif，是一种被压缩过的图像格式。 只支持256种颜色，但可以制作透明图片和GIF动画。 JPEG（Joint Photographic Experts Group）图像 扩展名为.jpg或.jpeg，有损压缩方式。 不适合表现线条画或文字图像。 PNG（Portable Network Graphics）图像 扩展名为.png， 称为可移动网络图像。 兼有GIF和JPEG的色彩模式，PNG不仅能储存256色以下的图像，最高可储存至48位超强色彩图像。 4.2??使用图像 在Web页中添加图像 img src=“图像文件url” alt=“替换文本” src属性设置为要插入图像文件的URI URI既可以是绝对地址，也可以是相对地址。 添加图像示例 4.2??使用图像 设定图片高度和宽度 height和width属性 既可以用像素值，也可用百分比值 4.2??使用图像 设置图片位置：align属性 垂直对齐 top：使图片的顶端与文本的顶端对齐 middle：使图片垂直的中线与当前文字的基线对齐 bottom：使图片的底端与伴随文字的基线对齐 水平对齐 left：强制图片显示在当前窗口的左侧 right：强制图片显示在当前窗口的右侧 图片垂直对齐示例 图片水平对齐示例 4.2??使用图像 设置图片周围空白大小 hspace和vspace属性 空白的宽度单位是像素 hspace：设置图片左右两端的空白大小 vspace：设置图片上下端的空白大小 设置图片周围空白示例 4.2??使用图像 设置边框 border属性 边框的宽度用像素数来指定 4.2??使用图像 创建图片链接 锚站标记a和/a之间包含img标记 href属性中添加要链接到目标文件 4.2??使用图像 使用缩略图 用一幅文件较小的副本图片代替原来较大的图片，再在较小的副本图片上创建指向原来的大图片的链接。 减少页面载入时间 4.2??使用图像 设置背景图片 body标记内指定 background属性 4.3??创建图像地图 图像地图:一个图像地图中设置多个链接 热点:整张图片被分成的多块活动的区域。用户自己定义这些热点，把它们分别链接到各自独立的URI地址。 图像地图的基本类型包括两种： 客户端图像地图：该地图直接被浏览器处理 服务器端图像地图：该地图将被Web服务器上的一段程序负责解析处理 图像地图实例 课堂练习 小 结 演示相对地址和绝对地址 要求：1. 用画图工具作图 2. 创建图像地图 演示创建图像地图的快捷方式 Chapter1　ComputerBase SubTitle Contents Master DataBase Design Understand the process of database design Use ERP Table Color And Format Code Color And Format HTML TITIE H1This Heading is created using H1 tag/H1 H2This Heading is created using H1 tag/H2 H3This Heading is created using H1 tag/H3 H4This Heading is created using H1 tag/H4 H5This Heading is created using H1 tag/H5 H6This Heading is created using H1 tag/H6 /HTML /TITIE Color Schedule ACCP V4.0 ACCP V4.0 Col 4 Col 3 Col 2 Col 1 TABLE D C B A Row 1 G F E D Row 8 C B A Z Row 7 Y X W V Row 6 U T S R Row 5 Q P O N Row 4 M L K J Row 3 H G F E Row 2 Text Color Picture And Flow Chart Color ACCP V4.0