第四讲10.pptVIP

Web开发基础 授课教师：滕皓 办公地点：12教 – 804 办公电话E-mail：ise_tengh@ 本讲内容 第七章 加入图片 第八章 基本表格标记 第七章 加入图片 如何在网页中加入图片 在图片中使用src、alt、width、height等属性 创建图像地图 图片在网站上的出现方式 背景图片 内嵌图片 内嵌图片在网页中的应用方式 作为简单图像 作为链接 作为图像地图 可内嵌于网页中的图像格式 GIF、JPEG、PNG 图像文件后缀名gif、jpg（jpeg）、png 7.1 Img元素 img /(XHTML) img(HTML) 当浏览器遇到img元素时，它会向服务器发出一个请求，先检索图片文件再将其显示到网页上。 例：pI had been wanting to go to Tuscany img src=tuscany.jpg alt= /for a long time,and I was not disappointed./p(example1.html) src和alt属性是必需的 src告诉浏览器图片文件的地址 当图片无法显示时，alt属性提供显示用的替换文本 注意 img是空元素，本身不包含任何意义，只需放在需要插入的文本流中； 在XHTML中，空元素必须被终止，所以img元素被表示成img /； 是一个内嵌元素；（例：photocollection.html） 是置换元素，当网页显示时，被一个外部文件所置换；文本元素是非置换的； 默认情况下，图片底部与文本的基准线对齐，可采用层叠样式表，将图片移动到右部或左部边缘，允许文本环绕在其周围，控制图片的间隔及边界，其垂直对齐方式。 不推荐使用的img属性 border 指定图片边框的宽度，可用CSS中的border值代替 align 改变图片垂直和水平方向上的对齐方式。可用CSS中的float值进行代替 hspace 在使用align属性移动图片时，用它来设置左右边缘的空白；可用CSS中的margin值实现 vspace 在使用align属性移动图片时，用它来设置上下边缘的空白；可用CSS中的margin值实现 用src提供地址 src=URL 图片的资源（地址） 图像通常存储于服务器上，所以需要使用相对URL来指出它们 图片通常放在同一个目录（images/graphics）下 有些站点每部分都拥有各自独立的图片目录 例 img src=icon.gif alt= / img src=images/arrow.gif alt= / img src=http://www//images/smile.gif alt= / 用alt提供替换文本 alt=“text” 该属性提供了对图片的简要描述 替换文本应作为图片内容的替补，与图片具有相同的目的，表达同样的信息 如果图片纯粹用作装饰，对网页的文本内容没有任何意义，建议将alt属性设为空值（注意：引号之间没有空格）：img src=“bullet.gif” alt=“” / 不要省略所有的alt属性，否则会引起文档无效； 替换文本对于图形化浏览器也是有用的 更多描述 替换文本为改善非文本内容的可达性提供了一个很好的开端，但前提是非文本内容是短小简洁的； 对于复杂图片，替换文档不够表达其所有内容，需要使用longdesc属性来提供更多的描述 longdesc属性的值是一个外部(X)HTML文档的URL，该文档提供了更多的描述，如 img src=executiveking.jpg alt=photo of executive king room longdesc=executiveking-ld.html / 许多浏览器及助残装置并不支持longdesc属性 提供宽度与高度尺寸 width=number height=number 这两个属性以像素来表明图片的大小尺寸； 可加快最终网页的显示速度。 赋予实际像素值 例：widthheight.html 该方法应该避免使用 使用大图片时，即使在页面上显示出来很小，仍需要下载相应的很大的文件 使用属性改变大小往往使图片模糊及变形。 7.2 图像地图 图像地图：单个图片上含有许多“热区”或链接 图像地图的组成 客户端图像地图有三个组成部分 由img元素表示的普通图片文件 img元素中的usemap属性，它指明使用哪个地图（每个地图都被命名） map元素，它作为一些area元素的容器 创建地图 用网页制作和网页图形工具可方便的生成地图 解读地图 img src=veggies.gif width=330 height=90 border=0 usemap=#veggies / m