自己翻译的书（关于ASP.NET），希望对大家有帮助（九）

最新推荐文章于 2024-10-10 11:15:29 发布

mashimaro24

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量265

点赞数

文章标签： asp.net 框架浏览器 html 服务器 css

在浏览器中，你会使用框架的概念来定义子窗口。框架(Frame)是主窗口的子区域，但是你会把每一个框架当作是一个完整的单独的浏览器。每一个框架可以独立的访问一个页面。对于计算机而言，每个框架是一个拥有大部分浏览器能力的子窗口除了它是从属于最上层的浏览器窗口。框架必须被安放到最顶层浏览器窗口的屏幕区域，而且当你最小化最顶层窗口的时候，他们也需要跟着最小化。你可以把框架想象成一种把浏览器窗口划分成不同大小的窗口的简单方式。
框架不能自己存在——你必须使用一个叫做框架集(Frameset)的概念来定义他们。一个框架集必须定义在自己的页面——你不能定义一个框架集并且把它的内容（而不是一个<noframes>标签）放到一个简单的HTML文件中；然而，你可以在一个简单页面中定义多个框架集。框架集是不可见的——它是框架的包含标签。框架集可以包含一个或者多个框架或者是框架集。框架本身通常是可见的，尽管不可见框架也有很多用处。例如，你可以使用包含客户端脚本的不可见框架来控制页面中的其他框架。你可以使用<frameset>标签来定义框架集，使用<frame>标签来定义框架。例如，为了创建一个把浏览器的客户区域分成两等分的框架的框架集，你可以如下定义一个<frameset>标签：
<frameset rows="50%, *">
<frame name="topFrame" src="top_1.htm">
<frame name="bottomFrame" src="bottom_1.htm">
</frameset>
对于那些不支持框架的浏览器（现在已经很少了），你可以增加一个<noframes>标签。
<frameset rows="50%, *">
<frame name="topFrame" src="top_1.htm">
<frame name="bottomFrame" src="bottom_1.htm">
<NOFRAMES>你需要一个支持框架的浏览器来浏览这个网址！</NOFRAMES>
</frameset>
那些支持框架的浏览器会忽略<noframes>标签。其他浏览器会显示<noframes>标签里面的内容，因为它就是不出现在tag之间的HTML的内容——记住浏览器会忽略掉它们不支持的标签。
你可以根据像素或者是比例定义框架的大小。注意你可以在值中使用星号(Asterisk)来定义最后一个框架，其意义是“可用区域的所有余下部分”。换句话说，我可以如下定义框架rows=”50%, 50%”，结果可以是一样的。星号标记在你使用像素定义框架的时候非常有用。一般来说，你可能不知道浏览器的宽度，所以准确的定义最后一个框架非常难。例如，假设我想要垂直的把屏幕分成两份。左边的框架包含一系列链接，而且我想要它是200像素宽。我想要在右边框架上显示内容——但是我不知道右边的剩下部分是440像素(VGA)，600像素(Super VGA)，或者是1080像素(XGA).因此，我可以使用星号如下定义框架集：
<frameset cols="200, *">
<frame name="leftFrame" src="left_1.htm">
<frame name="rightFrame" src="right_1.htm">
</frameset>
你不能在同一个框架集内同时使用行(rows)和列(cols)属性，但是你可以嵌套(Nest)框架集来实现相同的效果。例如，下面的代码定义了一个垂直分隔成两等分的框架集。框架集还包含了第二个框架集，这个框架集可以把右边的框架水平的分为两个相等的框架（见清单2.8）。
清单2.8：嵌套框架集 (ch2-18a.htm - ch2-18d.htm)
**********************************************************
* 这个文件 (ch2-18a.htm) 包含了框架集定义 *
**********************************************************
<html>
<head>
<title>嵌套框架集</title>
</head>
<frameset cols="50%, *">
<frame name="leftFrame" src="ch2-18b.htm">
<frameset rows="50%, *">
<frame name="rightTopFrame" src="ch2-18c.htm">
<frame name="rightBottomFrame" src="ch2-18d.htm">
</frameset>
<noframes>你需要一个支持框架的浏览器来浏览这个网址！</noframes>
</frameset>
</html>

**********************************************************
* 这个文件 (ch2-18b.htm) 显示了左边框架 *
* 其他文件 (ch2-18c.htm和ch2-18d.htm) 除了 *
* 标题和内容不同其他都完全一致 *
**********************************************************
<html>
<head>
<title>ch2-18b.htm</title>
</head>
<body>
这是文件ch2-18b.htm
</body>
</html>

在浏览器中，清单2.8看起来像是图2.18。

图2.18：嵌套框架集 (ch2-18a.htm - ch2-18d.htm)

框架的优缺点
框架的主要优点在于它们可以独立显示内容并且能够可视化的分隔内容。你可以在一个框架里面定义一个链接，该链接可以在另一个框架中显示内容或者是引发一个动作而不需要重画整个屏幕。
另一方面，框架的另一个不太重要的优点在于你可以创建可重定义大小的框架。用户可以拖拽框架边缘来增加或者缩小框架的可视区域。这个特性非常有用。最简单的看到这个效果的方法（如果你使用的是IE）就是点击浏览器工具栏上的“搜索”按钮并且启动搜索。你可以拖拽搜索框架的右边缘来改变搜索和内容窗口的相对大小。
框架的主要缺点在于他们很难创建和控制。为了创建如前面清单显示的两个框架的屏幕，你必须创建三个页面：一个包含框架集定义，另外的每个框架一个页面。
框架的另一个缺点是它们需要很长时间来显示。浏览器向服务器请求框架集需要一轮的通讯。每个框架的内容显示需要至少一次的额外通讯。因此，显示两个框架的内容需要三次通讯，只要那个页面没有其他的框架。
最后，框架通常需要一些使用JavaScript的客户端编程，或者是VBScript，如果你使用的是IE。例如，如果一个用户点击框架中指向一个对象的链接——例如一个按钮或者是一个链接——在其他的框架中，你必须保证目标对象真的存在，不然用户将会收到一个脚本错误信息。直到页面加载完成，目标才会出现。当页面仍然在加载时，用户的行为是引起脚本错误的通用原因。因为使用框架的主要原因就是在一个框架中有指向其他框架中对象或者动作的操作。这类问题非常普遍。
我不准备在这本书中花大量时间解释客户端编程，因为它主要是讲服务器端编程的。然而，我可以告诉你，找到基于框架的JavaScript脚本的错误远比找到服务器端C#代码的错误要难得多。除了我所列出的问题，如果你已经对于客户端脚本很熟悉，框架可以是一个极其有能力的组织内容的工具。
怎样避免框架
如果你不使用框架，你必须不停重复相同的信息——就例如一系列链接——在一个页面中。大部分服务器拥有实现这个的机制；在IIS中，你可以使用包含文件(Include Files)来在页面中放置内容。一个包含文件就像是听起来那样——是一个指向其它文件的引用，指向的文件就是服务器“包含”的用以响应的文件。服务器会根据包含文件的内容来替换内容。例如，如果你想要在每个页面的底部放置一个版权通告，你可以创建一个包含版权通告的包含文件。你可以在每个内容页面放置一个指向你的页脚文件的引用。对于浏览器而言，响应会像你显式地写在每个HTML文件页脚那样来显示。换句话说，浏览器并不在乎（也不知道）是否响应包含包含一个还是100个文件只要文件是合法的HTML文件即可。
类似于包含文件，你也可以使用表格来在屏幕的特定区域来安排元素。在使用绝对地址来安排元素之前，表格是最普通的安排内容的方式。

控制元素位置
有两种在屏幕上放置内容的方法。第一种方法使用CSS的层叠样式表，而且也是现今所知的最简单的方法。尽管我并没有介绍CSS（我会在这章晚些时候的“层叠样式表”一章来具体描述），我承诺这么技术非常简单，以至于你并不需要CSS的知识来使用它。第二种方法是使用表格和透明图像的混合方法。我将要分别介绍每种方法。
警告: 绝对位置的技术只适用于支持CSS的浏览器。
使用CSS来控制元素位置
首先，一个警告：绝对位置的技术只适用于版本4或者更高版本的浏览器，并且不幸的是，网景浏览器和IE的语法和方法有些许不同。网景6以及IE 5.x两者都能比早期的浏览器更好的支持CSS，尽管它们有些许不同。IE把屏幕中的每一个元素——每一段，每一个按钮，每一个字体标签——当成是一个对象。因此，每个你到现在看到的标签，除了我列出来的，都可以接受其他的几个属性。一个这样的属性是style属性。有很多值可以应用于style。在这一章，我们只是使用和位置相关的属性：position:absolute。
为了在IE中放置一个对象，你需要添加style属性，把position设置为absolute，并且指定你想要放置对象的像素位置。例如，为了在点50,50显示图像，你需要如下设计图像标签：
<img src="image/bike.gif" style="position:absolute; left:50; top:50">
这种使用style的方式叫做“内联(Inline)”，因为你在标签里面指定——换句话说，在和代码的同一行。style属性的值，就像是其他的属性值，也是一个字符串。在字符串内，你可以指定多个style值。你可以使用分号来分隔设置的每一个部分，你也可以使用冒号来分隔设置值和设置名称。例如，句子“Hello World”被安置在点100,100。
<div style="position:absolute; left:100 top:100">Hello World</div>
控制Z序位置
使用style，你可以控制元素的z序。所有浏览器中可见的元素都有一个z序值。z序值高的元素会出现在低的元素之上。在标准HTML中，在HTML流中元素的位置决定了它的z序位置。换句话说，HTML流末尾的元素会出现在流之前的元素之上。CSS支持z序值来控制每个元素的z序位置。例如，为了把文字“Hello World”放在自行车图像元素的顶端，你可以在清单2.9中如下实现页面。
清单2.9：控制z序位置 (ch2-20.htm)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<div style="position:absolute; left:100; top:100; z-index:0">
<img src="images/bike.gif" border=1>
</div>
<div style="position:absolute; left:100; top:100; z-index:1">
<b><font size="5" color="blue">Hello World</font></b>
</div>
</BODY>
</HTML>
值为1的z序值强制浏览器把文字放在图片上面，该图片拥有z序值0。现在，你可能还是没有明白，因为当我第一次看到的时候，我也是这样。知道那一刻，我还是必须设置表格背景为那个图片以保证图片可以出现在上面。
CSS也支持相对位置，在这种情况下，浏览器会决定元素针对于它的父元素的位置。你可以使用像素或者使用比例，使用正值或者负值，来定义绝对或者相对位置。只要可能，我最喜欢使用比例来指定位置。如果你使用比例，你会把你的页面元素从依赖于客户端分辨率的情况下分离出来。同时，显示的元素也会随着浏览器大小的改变而响应的改变位置。
例如，在清单2.10中，<span>标签包含的文字“I’m Here!”被放置在上面，同时也在它的父标签<div>的左边。
清单2.10：绝对和相对位置 (ch2-21.htm)
<html>
<head>
<title></title>
</head>
<body>
<div style="position:absolute; left:100; top:100; z-index:0">
<img src="images/bike.gif" border="1" WIDTH="227" HEIGHT="179">
</div>
<div style="position:absolute; left:100; top:100; z-index:1">
<b><font size="5" color="blue">Hello World</font></b>
<span style="position:relative; left:-100%; top:-100%; z-index:2">
<b><font size="5" color="red">I’m Here!</font></b>
</span>
</div>
</body>
</html>
图2.19显示了清单2.10是怎么样被显示在浏览器中的。

图2.19：绝对和相对位置 (ch2-21.htm)
使用表格控制元素位置
你可以使用表格来实现相似的结果，尽管会花费更多的时间并且不是很精确。通过改变表格单元的宽度和高度，你可以大致把元素放到你想要放的位置。例如，为了把一个图像放置到点100,100，你可以创建一个2列，没有边缘，4个单元格的表格。通过让最左上的单元格变得99像素高，99像素宽，你就可以保证右下的区域开始于100,100。
<table cols="2">
<tr>
<td width="99" height="99">
 
</td>
<td>
 
</td>
</tr>
<tr>
<td width="99" height="99">
 
</td>
<td>
<img src="images/bike.gif" border="1" WIDTH="227" HEIGHT="179">
</td>
</tr>
</table>
我可以通过设置背景属性来把文字放到图像的上面。图2.20显示了结果。我增加了边框到表格上并且把一些文字加到最左上的单元格里面以此清楚的显示。

图2.20：使用表格控制元素位置 (ch2-22.htm)