【摘要】：图像布局是在一整张图片上放置若干文本和链接的布局方法。图片布局具体的实现步骤是:图像布局将页面的表现和内容混杂在了一起，这种混杂比表格布局更为严重。HTML中有个元素map是专门用来定义某图片中的超链接区域的。使用这两个元素之前要求将img元素中添加一属性usemap，并赋予该属性一个名称。shape有3种可选值，rect，circle和poly，分别表示长方形、圆形和多边形。
4.6.2 图像实现布局
图像布局是在一整张图片上放置若干文本和链接的布局方法(如图4-2所示)。它有如下特点，网页是基于整张图片的。即一幅图片基本囊括了页面所有的内容，一般适用于文本内容不多的页面。图片布局具体的实现步骤是:
(1)按照布局的版式，先设计好整个页面的图片，例子中是1 000* 600的图片;
(2)将HTML的map元素与图片的局部关联起来，并对map元素嵌套链接。
图像布局将页面的表现和内容混杂在了一起，这种混杂比表格布局更为严重。搜索引擎没法将页面的任何内容提取出来。
HTML中有个元素map是专门用来定义某图片中的超链接区域的。这个区域的形状、坐标和关联URL都由＜area＞这个元素来确定。使用这两个元素之前要求将img元素中添加一属性usemap，并赋予该属性一个名称。在map元素中，使用name属性引用在img元素中定义的usemap名称。map元素可以嵌套若干子元素area，它有3个主要的属性，shape，coords和href分别定义超链接区域的形状、超链接的位置、超链接的地址。
shape有3种可选值，rect，circle和poly，分别表示长方形、圆形和多边形。对应于coords的值，长方形应该给出4个数值(2个坐标值、左上坐标和右下坐标);而对于圆形，coords的值应该是3个数值(一个圆心的坐标，另一个半径值);对于多边形，coords的值应该是2N个数值(对应于N个顶点的坐标)。
图4-2 在Dreamweaver下进行图片布局
下面是南京大学原首页图像布局的部分代码:
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
