自己翻译的书（关于ASP.NET），希望对大家有帮助（八）-CSDN博客

定位标记和图像
你不能局限在文本链接上；你也可以使用图像作为链接源。例如，你可以使用定制的图标代替简单的文字链接。用户可以点击主页图像而不是“主页”这两个字。使用图像你可以让你的页面看起来更你好。使用图像创建超链接，你可以在图像标签周围放置定位标记：
<a href="http://myserver/mysite/mypage.htm">
<img src="http://myserver/mysite/home.gif" border=0>
</a>
默认的，浏览器会在可点击的图像周围放置一个边界。边界的颜色继承了页面的链接颜色。如果你不想要边界的话，像上面那个例子那样使用属性border=0就可以了。
格式化表格
表格包含行和列。因为浏览器会忽视空白，包括Tab，在HTML中你通常会使用表格来显示必须用空白来分隔的项目。注意这并不要求使用版本4或者更高版本的浏览器——你可以使用绝对位置来强制项目显示在特定的像素位置。然而，即便是在现代浏览器，表格也比显示柱状数据更有用。
<table>标签包含几种其他的标签来用于分隔行和列。表格有三个部分——表头(Header)，表格体(Body)，以及页脚(Footer)。表头和页脚行是“固定的”行——他们不能滚动（尽管在大部分浏览器中是这么做的）。表头和页脚是可选的；为了创建一个合法的表格，你并不需要包含它们。如果你包含表头和页脚的任何一个，那你也必须包含表格体。表格也可以有标题(<caption>)标签。浏览器也可以把标题放在第一行之上。表格的边缘设置并不会应用于标题。另外，IE中的表格包含<colgroup> 和 <col> 标签，这些标签可以帮助简化表格格式化过程。<colgroup>标签定义了一组列，<col>标签为列组定义了每个具体的列。
表格，表格行，表格数据标签
表格以<table>标签为始。你使用表格行标签(<tr>)来分隔行，用表格数据标签(<td>)来分隔列。下面的HTML描述了一个简单的两行两列表格：
<table>
<tr>
<td>
行 1，列 1
</td>
<td>
行1，列 2
</td>
</tr>
<tr>
<td>
行2，列 1
</td>
<td>
行2，列 2
</td>
</tr>
</table>

警告：要小心的关闭所有的表格标签。一些浏览器，例如IE，会帮你关闭标签而且表格可以正常显示，但是有些不能，表格根本不会显示或者是不会正确的显示。微软的文档说对于大部分文档元素，结束标签都是可选的，但是这只适用于IE浏览器。所以规则就是：不要依赖于显示引擎来关闭标签；永远都显式地关闭所有的标签。
正如你在前面的代码段上看到的，表格可以包含任意数目的行，对于每一行，表格可以包含任意数目的列。它不会特别好看——看起来就像是两个选项卡式的列（见图2.15）。

图2.15：实例HTML表格 (ch2-14.htm)
幸运的是，你可以添加属性到表格标签中来控制它的定位以及显示。表格标签的属性值可以应用于表格所有的行和列除非你用针对单个行，列或者是单元的属性值来代替它。下面的列表包含最常用的属性值；你可以在附录A中找到其他的。
align 该属性有三个值：左，右，或者是中。它控制了页面中表格的水平放置。
background 该属性，就像是针对<body>标签的background属性，接受指向一个图像文件的URL。浏览器会在Z轴上显示该图像，其他所有的数据都会显示在背景图像之上。
bgcolor 该属性会用HTML颜色值来控制整个表格的背景颜色。你也可以针对单个行或者列重写背景颜色。
border 该属性会接受一个整数值来控制围绕表格和每个单元的边缘的控制。默认值是0：没有边缘。
cellpadding 该属性会接受一个整数值来控制两个单元的内容和边缘之间的空间。
cellspacing 该属性会接受一个整数值来控制两个单元之间的空间。
cols 该属性在表格中指定列的数目。它显著的增大了浏览器显示表格的速度。没有这个属性，浏览器必须先解析整个表格来获得行中列的数目，但是没有这个属性，浏览器可以立刻开始显示行。
height 该属性会接受一个整数值来通知浏览器要显示表格区域的最终高度。就像是cols属性一样，包含height会显著的增大了浏览器显示表格的速度。你可以指定像素高度或者是针对可见用户区域的比例高度。
width 该属性会接受一个整数值来通知浏览器要显示表格区域的最终宽度。就像是cols和height属性一样，包含height会显著的增大了浏览器显示表格的速度。你可以指定像素宽度或者是针对可见用户区域的比例宽度。
如果你把这章开始时候的表格例子拿来，排列它到页面中间，指定宽度和高度，加上标题，加上边缘，并且填充上单元，最初的两行应该看起来是这样的：
<table border="1" align="center" cellpadding="3" cellspacing="2" width="60%" height="80%">
<caption>格式化的实例表格</caption>
如果你在浏览器中看一下这个修改过的表格，它看起来应该是图2.16这样。

图2.16：有边界的简单表格 (ch2-15.htm)
正如你在例子中看到的那样， <tr>标签指定了表格的行。你可以在<tr>标签中使用align已经bgcolor属性。<tr>标签也可以使用valign标签来控制行中每个单元内容的水平排列。可能的值是baseline，bottom，center，以及top。
<td>标签接受align，background，bgcolor以及valign属性。另外，<td>标签也接受colspan和rowspan属性。colspan和rowspan属性的值是整数。它们指定了单元扩展的行和列的数目。当你有一个行包含不同数目的列时，你会需要这个属性。例如，如果你想要添加第三个行到图2.16的表格中，该行只包含一个行，并且希望添加一个是其他行单元高度两倍的单元，你可以如下指定该单元：
<tr>
<td colspan="2" align="center" valign="center">
这是一个两倍宽度的单元格，内容居中。
</td>
</tr>
<tr>
<td rowspan="2" width="50%" align="center" valign="center">
这是一个两倍高度的单元格，内容居中。
</td>
<td width="50%" >普通高度的单元格</td>
</tr>
<tr>
<td width="50%" >普通高度的单元格</td>
</tr>
增加了新行之后，表格如图2.17所示。

图2.17：使用 colspan和rowspan属性的表格 (ch2-16.htm)
表头，页脚标签
你可以把表格分为三个主要的功能部分——表头，一个或者多个表格体，以及一个页脚。表头和页脚的主要目的是当用户打印横跨多页的表格时，在每页复制表头和页脚。对于没有边界的表格，你可以通过把内容放置到多个表格体中，从而在表格体中使用水平线分隔成几个部分。你还是可以让表格只有一个表头和一个页脚。
为了定义表头，使用<thead>标签。表头可以有多行。你也可以通过使用<th>表头标签而不是<td>标签来自动用粗体显示表头。
在表格中，你可以有多个表格体(<tbody>)。每个<tbody>标签定义了表格体的一部分。默认的，即使你不显式地定义，每个表格也有一个表格体。浏览器会用水平线分隔多个表格体。
你可以使用页脚标签(<tfoot>)来定义页脚。页脚可以有多行。没有相应的页脚标签<tf>来对应表头中的表头标签。然而，你可以在页脚中使用<th>标签代替<td>标签来让页脚格式化为粗体。
使用表格来安排布局
因为浏览器使用它的内部规则来安排显示和放置内容，你不会很容易去控制一个特定的项目显示在哪里。在更现代的浏览器中（版本4及更高），你可以使用绝对位置来强制项目放置在一个特定的位置。在早期的浏览器（版本3及更低）以及少数不流行的浏览器中，你仍然需要使用表格在屏幕中来安排及放置项目。
第二个——我想对于大部分的目的来说，也是最重要的——原因使用表格来安排布局，甚至是在现代浏览器中，是你可以使用比例而不是像素来指定表格和单元格的宽度。这个很重要是因为几个正在使用的不同的屏幕分辨率是：: VGA (640 x 480)，Super VGA (800 x 600)，以及 XGA (1280 x 768)。例如，通过增加width=60%属性到一个表格标签，浏览器就会根据客户端浏览器的分辨率来按照客户区域60%的比例显示表格。当然，在不同的屏幕分辨率下，文字会以不同的方式折叠，但是你可能知道页面会怎样显示给不同的用户，因为表格会占据屏幕相同的比率而不管用户使用的到底是VGA还是XGA显示器。相反，使用基于像素的定位方法会不管屏幕的宽度和高度来设置项目的位置。
这有一个例子。假设我想要增加一个定制的数字图片而不是数字来作为清单2.6中的分散器，但是我仍然希望人们可以点击每个分散器的文字来回答问题。我可以使用两个链接而不是一个全文字的链接。第一个定位标记可以包含定制的图像作为分散器。第二个定位标记可以包含文字作为分散器。两个链接可以转到相同的页面。我会如下改变第一页：
<html>
<head>
<title></title>
</head>
<body>

<p>下面哪一个 <EM>不是</EM>合法的定位标记类型？</p>
<a href="ch2-13b.htm"><IMG SRC="images/1.gif" border="0"></a>
<a href="ch2-13b.htm">指向其他文档的链接。</a><br>
<a href="ch2-13c.htm"><IMG SRC="images/2.gif" border="0"></a>
<a href="ch2-13c.htm">指向其他文档特定位置的链接。</a><br>
<a href="ch2-13d.htm"><IMG SRC="images/3.gif" border="0"></a>
<a href="ch2-13d.htm">A 指向前面文档的链接。</a><br>
<a href="ch2-13e.htm"><IMG SRC="images/4.gif" border="0"></a>
<a href="ch2-13e.htm">指向浏览器中回退按钮的链接。 </a><br>
<p>选择你的答案。</p>
</body>
</html>
使用图像映射
图像映射(Image Map)类似于图像链接除了你可以在图像上定义一个或者多个可点击区域。可点击区域“对应于”一个书签或者是URL。例如，每个地图可以显示每个州的概况，并且每个州都是一个到不同位置的链接。为了创建完整的针对每个州的图像映射，你必须创建每一副图像，然后使用绝对位置安放图像以使得图像可以适当地被安放。或者说（更简单的），你可以使用一个图像，然后沿着州的边界创建可点击的区域。
有两种图像映射：服务器端映射(Server-side Map)以及客户端映射(Client-side Map)。服务器端图像映射告诉浏览器：当用户点击图像，浏览器应该把点击点的坐标发送给服务器。一个服务器端程序（例如ASP页面）必须判断这个坐标是不是在一个合法的点击区域。如果是，超链接到相应的页面。直到3.x版本的浏览器出现，服务器端图像映射是唯一的图像映射方式。当你想要用脚本把图像分到许多长方形区域时，或者是当你的客户可能在使用老版本浏览器时，服务器端图像映射仍然是有用的。然而，用户的每次点击都会让浏览器发送信息到服务器端去处理，所以服务器端图像映射一般来说是对资源的非高效使用。
注意: 在这一章，你不会看到服务器端图像映射，而仅仅是客户端图像映射。在稍晚些时候，我会重新提到服务器端图像映射，当我们在第II部分中讲到Request对象时。
客户端图像映射定义了图像的可点击区域并且URL关联到客户端HTML的每个区域。客户端接管了处理用户鼠标点击的负担，因此避免了在客户端和服务器端的往返通讯。
图像映射是如何工作的
对于计算机而言，屏幕像是一个每个单元都是一个像素的桌子。每个像素有一个列数和一个行数。第一个像素是在屏幕的左上角，列0，行0。通常，你会使用两个整数值，中间用逗号分隔，来指定像素；例如0,0或者是100,100。另一种想象屏幕的方式是，就像是你们在数学课上记得的那样，是一个x-y网格。每个像素的列数（第一个数字）是x值，行数（第二个数字）是y值。任何点都出现在第四象限里面，也就是x轴以下，y轴以右的区域。
你使用相同的方法指定图像中的像素来让它们显示在屏幕上，除非像素位置被指定为从图像左上角的偏移量(Offset)，而不是屏幕的左上角。所以，如果你有一个图像，一边是100像素，你也想要把那个图像放到位置100,100。那么图像的左上角的像素就是100,100。但是在图像里面，你需要指定像素就好象相同的位置是0,0一样——也就是图像本身的第一行和第一列。
你可以使用左上角和右下角来定义一个长方形。我将使用分号来分隔每个像素。例如，被图像盖住的长方形是100,100;199,199。通过这两个像素，你可以推导出图像区域的四个角分别是左上100,100，右上199,100，右下199,199，以及左下100,199。
如果你想要把100平方像素的图像分成四个部分，你需要把它们定义为长方形——假如这样的话，每个区域就是每边50个像素。那些你将要使用的点是针对于图像左上角的偏移量。所以从左上角开始顺时针移动，第一个长方形将是0,0;49,49，第二个是51,0;100,49，第三个是51,49;99;99，最后一个是0, 50; 49, 99。
你不必局限于长方形，你也可以定义圆形以及多边形。正如你可以想象的，为密闭区域或者是不规则的多边形找出真正的像素值是很困难的。幸运的是，你几乎不用自己计算值了。有许多图像映射编辑器，它们可以让你可视化的跟踪和画出映射区域的边界。
创建客户端图像映射
你可以使用<map>标签来创建客户端图像映射。例如，清单2.7显示了用于创建描述前一章客户端图像映射的HTML文件——图像被分为等大小的小区域，每一个都是一个指向其他文档或者是书签的超链接。
清单2.7：客户端图像映射例子 (ch2-19a.htm)
<html>
<head>
<title>客户端图像映射</title>
</head>
<body>
<map name="fourSquares">
<area shape=rect coords="0, 0, 49, 49" href="ch2-19b.htm#upperLeft" border="0">
<area shape=rect coords="51, 0, 100, 49" href="ch2-19b.htm#upperRight" border="0">
<area shape=rect coords="51, 49, 99, 99" href="ch2-19b.htm#lowerRight" border="0">
<area shape=rect coords="0, 50, 49, 99" href="ch2-19b.htm#lowerLeft" border="0">
</map>
<IMG SRC="images/bluesquare.gif" usemap="#fourSquares" border=0>
</body>
</html>
<map>标签是一个包含一些列<area>标签的部分，每一个<area>标签定义了一个图像的可点击区域。map标签本身不必和使用坐标的<map>标签在相同的文件中。让我们使用美国地图作为例子，你可以在一个文件中定义包含每个州可点击区域的<map>标签，然后从多个页面中引用那个文件，每个都可以包含同样的图像映射。通过这种方式，如果你想要改变一个可点击区域，你只需要改变包含图像映射的一个文件即可。
<area>标签定义了链接的目标URL以及图像的可点击区域。对于一个给定的图像，你可以创建多个<area>标签。每个<area>标签必须有一个shape属性以及一个包含用逗号分隔的坐标串的coords属性。shape属性拥有三个可能的值：
circ或circle
poly或polygon
rect或rectangle
当shape属性值是circ或circle，coords属性需要三个值：原点的x轴和y轴坐标以及半径。当shape属性值是poly或polygon，coords属性包含一系列定义多边形的x轴和y轴坐标值。当shape属性值是rect或rectangle，coords属性包含长方形左上角和右下角的x轴和y轴坐标值。
创建图像映射的工具
有很多商业级别的图像映射创建工具，而且他们以一种相似的方式工具。你把图像加载到图像编辑器，然后绕着图像的热点画一个长方形，圆，或者是多边形。图像映射编辑软件会输出图像映射的HTML，有时仅仅是映射定义，但是更通常的是链接标签以及映射定义。
即便你只需要在你的图像上创建一个长方形的热点，图像映射工具可以节省你大量的时间。
有三种流行的资源；其他的大致相当。注意，没有一个解决方案是免费的，而且我不会推荐你什么。你可以从互联网上下载MapEdit以及JImage-Map。
Microsoft FrontPage 98或 FrontPage 2000
MapEdit (shareware)
JImageMap (Java solution)
理解框架
为了理解框架，你需要及时回到Windows的开始。一个窗口是一个包含位图(Bitmap)的内存区域——也就是一个像素的长方形区域。每个程序都“包含”一个或者多个窗口，并且每个窗口或者是一个最顶层窗口或者是一个子窗口。所有的窗口都是桌面窗口的子窗口——所谓桌面窗口，你可以把它想成屏幕本身。
例如，在Windows中打开任何程序并且在屏幕中浏览。你会看到一个标题栏(Title Bar)，窗口框架(Window Frame)，以及一个客户区域(Client Area)。你会看到其他的附加选项，例如包含按钮和其他东西的工具栏，以及状态栏。每个项目都是一个独立的窗口。每一个都有特定的属性，例如高度，宽度，以及背景颜色。如果你打开多个窗口，想象一下你的屏幕。如果你想象一个程序就像是打开栈中的项目，总有一个窗口在最顶上。Z-order的值会控制栈中每个窗口的位置。最顶上的窗口（活动窗口）的z-order的值是0。所有其他的窗口会出现在活动窗口之下并且拥有一个更高的z-order值。除非你最大化所有的窗口，每个窗口都会出现在屏幕上的些许不同的位置，意味着每个窗口都有自己的区域。
程序的主窗口是最上面的窗口。每个项目，例如工具栏按钮，是一个子窗口。子窗口，尽管他们有自己的控制权，他们都会随着或者不随着他们的父窗口出现。如果你最小化程序窗口，所有的子窗口也会随着从屏幕上消失。