第三讲 HTML网页设计详解(2)--网页中的图片

设置图片的边框
通过<img />标签的border属性设置，border属 性的值为边框的粗细，单位默认为像素。 <img src=“图片路径” border=“边框粗细数值” />
给图片添加提示文字
通过<img />标签的title属性设置，当鼠标指 向图片时显示提示文字的内容。 <img src=“图片路径” title=“提示文字” />
<img>标记的常见属性
<img>是一个行内元素，插入<img>元素不会 导致任何换行。常见属性如下：
img的属性 src alt title align width、height 含义 图片文件的url地址(img标记的必备属 性) 当图片无法显示时显示的替换文字 鼠标停留在图片上时显示的说明文字
给图片添加链接--图像映射的结构及应用
在HTML中嵌入图像映射的一般语法结构：
<img src=“ 图 像 文 件 " width="778" height="110" border="0" usemap="#Map"> <map name="Map"> <area shape=“circle” coords=“圆心及半径" href=“#" target="_blank"> <area shape="rect" coords="顶点坐标" href=“#"> <area shape=“poly” coords=“顶点坐标" href="#"> </map>
在单元格中插入图像的方法
对于表格布局的网页，所有的元素都是放 置在单元格中的，图像也不例外，要在单 元格中插入图像，且单元格的边框和图像 之间没有间隙。那么必须将该单元格的宽 和高设置为图片的宽和高，且表格中其它 单元格的大小也必须固定，然后确保<td>与 </td>之间只有<img>标记，没有空格和换行 符，否则单元格会被空格撑开。如： <td width="768" height="132"><img src="images/info.gif" /></td> <!-- </td>不能 换行-->
制作滚动图片
制作图片的滚动效果和文字滚动方法一样， 格式如下： <marquee><img src=“” /></marquee> 给图片添加停止与滚动的鼠标操作动作： <marquee onMouseOver=“this.stop()” onMouseOut=“this.start()” ><img src=“” /></marquee> 可增加<center></center>标签将图片居中显示： <center><img …/></center>，但center标签不 是很规范，一般不推荐使用
内容提要
认识网页中的图片格式
在网页中插入图片 图文混合排版
给图片添加链接
制作滚动图片
认识网页中的图片格式
网页中支持的图像文件格式 选择合适的图片格式
网页中支持的图像文件格式
BMP 格式
这是微软公司自身图形文件的点位图格式，比如读 者采用Windows自带的画图程序绘画，默认的生成 的就是BMP格式的图片。
给图片添加替代文字
通过<img />标签的alt属性设置，src属性的路 径找不到相应的图片文件或不能下载图片文 件时，在显示一个叉的同时，显示由alt属性 设置的替代文字。 <img src=“图片路径” alt=“替代文字” />
图文混合排版
<img>标记的对齐方式仍然通过align属性实现， 但其取值多达9种：bottom(底部)、middle(居 中)、texttop(文本上方)、baseline(底部)、 absmiddle(绝对居中)、absbottom(绝对底部)、 left(左对齐)、right(右对齐)，其中要实现图片 和文本混排可使用“左对齐”或“右对齐”， 要实现文本和图片顶部对齐可使用“文本上 方”。 <img src="images/info.gif" width="158" height="41" align="left"/>，但通常是将图片放 在表格里，通过表格定位来实现文本和图像 的混排。
给图片添加链接
<a href=“链接地址” ><img src=“图片文件地 址” /></a> 图片加上链接标签后，其默认有1像素的蓝色 边框(类似文字链接的蓝色下画线)。 可通过图片标签<img>的border属性对其边框 粗细进行修改。 如果不需要链接图片 有边框，可设置border 属性为0。
小结
特别适合网络传播的图片格式有GIF和JPEG 在网页中使用<img />单标签来插入图片文件， 可通过设置的属性有src, width, heigth, border 等 在图片上设置热区(超链接区域)的方法是在 <img/>标签中增加usemap属性，同时设置 <map>…</map>，<area />标签 将图片放置于<marquee>标签内，可设置滚动 的图片效果。
在பைடு நூலகம்页中插入图片的两种方法
说明：网页中插入图像有两种方法， 一是插入一个<img>元素，二是将图 像作为背景嵌入到网页中 图像标记 <img src=“图像url路径” /> 将图像文件嵌入到网页文档中的当前 位置 如果图像是通过<img>元素插入，则 可以在浏览器上通过按住鼠标左键拖 动选中图片，或者将它拖动到地址栏 里，如果作为背景嵌入，则无法选中 图片
PNG 格式 可以任何颜色深度存储图片，也是与平台无 关的格式。无损压缩；具有 8 位、24 位和 32 位三
种色深；支持透明和半透明。IE浏览器对PNG支持 不是很好，所以目前网页制作中很少使用。
选择合适的图片格式
制作网页时，图片格式一般在JPEG和GIF中 选择。 JPEG是损压缩，以24位颜色存储，颜色比 GIF更为丰富。一般适用于对颜色丰富程度要 求高的图片，如照片。 GIF最多只能存储256种颜色，在颜色数量少 的图片中能保持更小的文件大小，并且支持 透明度及动画。一般适用于颜色少的图片， 如企业标志、小图标和网页动画广告。
图片的对齐方式，默认为基线对齐，即 图片的下边缘和文字的下边缘对齐
图片在网页中的宽和高
设置图片的高度和宽度
通过<img />标签的width属性和height属性可 以设置图片在网页中显示的宽度和高度。 <img src=“图片路径” width=“指定宽度” height=“指定高度” /> 但一般不要使用width与height属性来显示缩 略图，因为这时还是必须下载大图，会加重 页面因下载大图的负担。
选择合适的图片格式
GIF 与 JPG 的比较
选择合适的图片格式
GIF 与 PNG 的比较
在网页中插入图片
在网页中插入图像的两种方法
在单元格中插入图片的方法
设置图片的高度和宽度width/height 设置图片的边框border 给图片添加提示文字title
给图片添加替代文字alt
JPEG 格式
JPEG是与平台无关的格式，支持最高级别的压缩。 不过，这种压缩是有损耗的，即压缩比越大，文件 越小，图片质量越差。大多数数码相机默认的照片 存储格式就是JPEG。在肉眼无法明显分辨质量的前 提下，JPEG文件大小可以远远小于BMP，广泛应用
网页中支持的图像文件格式
GIF 格式
GIF图片以8~256色存储图片数据。无损压缩； 8 位 色深（256色）；支持透明；支持动画。GIF的特点 是颜色数量少，很多情况下图片文件大小可以远远 小于JPEG，而且支持透明度，支持动画，所以GIF 格式非常适合网上传输。GIF透明度不是alpha通道 透明度，所以不支持半透明效果。
第三讲 HTML网页设计详解(2) ——网页中的图片
主讲人：易桂生
2013年7月21日星期日
上节主要内容回顾
网页中使用段落标记<p></p>，换行标 记<br /> 设置文字对齐方式—align属性的使用 文字多样化修饰--<font>标记 制作滚动文字标记--<marquee> 用于组织数据的列表：有序列表、无序 列表、自定义列表 超级链接与导航：修改链接的窗口打开 方式；锚点的设置；电子邮件、FTP和 Telnet的链接
给图片添加链接--图像映射的结构及应用
属性coords属性用于定义矩形、图形或多边形区域 的坐标 1)如果热区为矩形区域，则coords包含4个参数，分 别为left, right, top和bottom.也可将这4个参数看成矩 形左上角和右下角顶点的坐标 2)如果热区为圆形区域，则coords包含3个参数，分 别为center-x, center-y和radius，即圆心坐标和半径 3)如果热区形状为多边形区域，则coords需要按顺序 取多边形各个顶点(x、y)坐标，因此形式为 “x1,y1,x2,y2,……”，浏览器会按照定义顶点的顺序 将它们连接起来，形成多边形热区。 热区的设置可通过DW可视方法来进行。