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

最新推荐文章于 2024-05-03 21:52:12 发布

mashimaro24

最新推荐文章于 2024-05-03 21:52:12 发布

阅读量380

点赞数

文章标签： asp.net 浏览器文档服务器 html hyperlink

本文链接：https://blog.csdn.net/mashimaro24/article/details/5721061

版权

在你的网站中包含图像文件
没有图像是非常难想象一个网站的。想象一个非常简单的方法使用HTML来插入图像到页面中也是非常难的。只需要花一点精力，你就可以把图像和文字融合甚至是让文字环绕图像。在接下来的讨论中，你的所有的图像都以图像标签为始。
图像标签
为了在页面中放置一个图像，你需要使用<img>标签之后跟一个属性src=URL，URL可以指定你想要发送的文件。有趣的是，服务器不会和页面的其他部分一起发送图像文件；相反，浏览器会解析页面中的HTML和文字，然后开始从服务器请求相关的内容，例如图像。那就是你为什么经常会看到页面加载，然后图像就会在几秒钟之后出现。
有时候，图像并不会按照你浏览器窗口顺序来显现。浏览器会顺序请求图像，但是服务器可能不会按照相同的顺序响应请求。当你设计页面的时候，这也就是你需要记在心里的。
对于<img>标签，有几个可选属性。width="数字" 和 height="数字"属性分别指定了图像的宽度和高度。两个属性都是可选的。如果没有这两个属性，浏览器会按照图像的原始大小显示。可选的标签就是——可选的。如果你想要或者不管它们，你就可以包含它们。但是，就像是大部分选择一样，你可以选择任何一种操作。因为浏览器的默认行为是把你的图像按照原定大小显示，大部分时候，不管宽度和高度属性看起来是一个好选择——尤其是对小图像。当你包含宽度和高度属性是，在浏览器向服务器请求图像文件之前，它会为图像保存一个区域。当你不包含宽度和高度属性时，浏览器会放一个“图像丢失(Missing Image)”图标在图像位置。这样就有一个问题。如果浏览器知道图像将有多大，它就可以完成页面图层的设计。如果浏览器不知道，直到从服务器获得图像之后，图层的计算才能完成。它可能必须移动已经显示好的文字和图像。最终的结果就是当你没有包含可选的宽度和高度属性时，页面加载会更慢。
大部分在HTML页面中的图像是图像交换格式(GIF)或者是联合图像专家组(JPEG)文件，因为它们是高度压缩的，所以比起他的图像文件更小。使用其他文件格式并没有技术障碍——尽管没有一些图书的显示器，客户端不能显示它们。网景可以显示GIF（读作“jiff”）以及JPEG或者是JPG（读作“j-peg”）文件。IE增加了位图(BMP)文件。两个浏览器都接受插件或者是ActiveX扩展，这些可以为其他文件格式提供显示器。例如，Macromedia的Flash格式需要下载Flash阅读器。
并不像标准的可执行程序，缺少资源并不会太影响浏览器——它会简单的忽略确实的资源。如果资源一般是可见的，浏览器会在那个位置显示一个图像缺失图标。
除了资源，宽度和高度属性，你可以指定在包含标签中怎样排列图像。例如，对于大部分图像的包含标签都是<body>标签，所以，如果你在<body>标签中靠左排列图像，图像会在页面的左边缘排列图像。如果你在一个表格单元中放置相同的靠左排列的<img>标签，图像会显示在表格单元的左边，而不是页面的左边。
除了你期望的右和左值，排列属性可以使用一些不太常用的值。表格2.1显示了一些特定排列关键字的结果。

表格2.1：表格排列属性
排列属性结果
ABSBOTTOM 把图像放置在相对于文字的最低的点。ABSBOTTOM在最长文字下降的底部。
ABSMIDDLE 把图像放置在文字的中间。
BASELINE 把图像放置在文字的基线处。
BOTTOM 把图像放置在包含标签的底部。
LEFT 把图像放置在包含标签的左边。
MIDDLE 把图像放置在包含标签的水平中间。
RIGHT 把图像放置在包含标签的右边。
TEXTTOP 把图像放置在文字的顶部。
TOP 把图像放置在包含标签的顶部。
BORDER 决定边缘宽度的数字。默认宽度是1。0意味着没有边缘。
HSPACE 决定图像左右边缘以及任何围绕项目的空间的数字。
ISMAP 该属性没有值。当图像被认为是服务器端的图像映射时，它可以存在。图像映射(Image Map)是一个或者多个像是定位标记(Anchor Tag)的图像——他们会超链接到当前文档的定位标记，另一个文档，或者是另一个URL。服务器端的服务映射很少使用在当前的浏览器上。当用户点击一个作为服务器端图像映射的图像时，浏览器会发送点击事件的鼠标坐标到服务器。你必须使用ASP或者是CGI脚本来初始化一个动作来处理点击事件。
USEMAP 这个属性把<map>标签的名字当成一个值。它指定了浏览器应该使用在<map>标签中定义的触摸区来决定是否用户点击在图像的超链接区域。<map>标签定义了一个客户端图像映射。
VSPACE 决定图像上下边缘以及任何围绕项目的空间的数字。

在页面中放置图像
默认地，浏览器会把图像放在页面中被解析的位置。然而，一些动作会改变默认的位置。例如，如果页面中第一个标签是<img>标签，图像会显示在浏览窗口用户区域的左上角。用户区域是窗口中显示内容的位置。它出去了边缘，状态条，以及任何其他工具条。任何图像后的文字会显示在图像的右下角，因为先把图像放置在页面上把基线移动到图像的底部（见图2.8）。

图2.8：默认的图像安排 (ch2-8.htm)
你可以通过添加排列属性来改变<img>标签；例如，<img src="someURL/topImg.gif" align="right">会把图像放在用户区域的右上角。你可能会想，在文件中的图像后添加文字会折叠(Wrap)文字，所以文字会在图像后的第一行开始并且在图像底部显示。但是浏览器不是这么显示文件的。改变图像的显示到右端显示，浏览器会把文字放在用户区域的左上角（见图2.9）。

图2.9：靠右排列的图像 (ch2-9.htm)
如果你回去添加align="left"属性到显示在图2.8(ch2-8.htm)的文件中，文字会放置在图像的右上角而不是右下角。你应该花些时间在实验对于<img>标签的各种属性设置，因为结果不会总是比预料的那样。
在图像周围折叠文字
HTML不会让你很容易的在图像两端折叠文字。你可以通过添加align="left"或者是align="right"属性到<img>标签围着图像的三个边折叠文字。
如果你想要在文字中插入图像——例如，一个图标或者是小图片——你可以通过把图像放在中间(Centering)来放到文字中间（见图2.10）。

图2.10：行中的图像 (ch2-10.htm)
背景图像
IE和网景都支持背景图像。你可以在<body>标签中设置背景图像作为属性：
<body background="http://myserver/mysite/someimage.gif">
页面中的图像会显示为背景图像，这也意味着任何其他的内容会显示在图像上面——换句话说，图像的Z轴顺序是0。例如，我已经在图2.11的图像上中放置了一个列表。

图2.11：背景图像
关于图像你第一个应该注意到的事情是它被放置了多次。那是因为浏览器把整个图像平铺到背景上。平铺意味着浏览器把图像放置在左上角并且沿着页面的水平方向重复放置图片多次。当到达最右边，它会在第一张图片下面的最左边开始继续放置——就像是人在读书时用的方式。浏览器会平铺图像因为这门技术想要使它很容易的显示背景图像。如果你需要一个单个图像，你应该显示放置。
IE也可以用单个图像作为水印(Watermark)显示。水印不是平铺的。就像是论文中的水印，它就是一个被放置一次或者多次的图像，通常是垂直或者水平居中。就像是一个标准的背景图像，水印的Z轴序也是0。所以所有的其他内容都会被放置在水印之上。
超链接简介
超链接(Hyperlink)就是万维网中的“网”。超链接赋予你增加和控制用户从你的应用程序的任何地方浏览和跳转的能力。超链接是Ted Nelson的智力，他把人类知识的整个集合想象成超链接内容。它的Xanadu项目就是为了这一目标而努力了很多年。现在，互联网正在快速的实现它的目标，尽管是以一种非结构化的方法。
超链接的目的是提供给人们一种从一个位置，话题，或者是知识颗粒移动到一个相关的位置，话题，或者是知识颗粒。例如，如果文档在一个电子表单中，我会希望对于每个和ASP相关的术语，每个对于那个术语的定义，以及每个HTML标签，每个那个标签的定义，都有一个超链接。通过这个定义，我希望对于一个或者多个例子有个链接，任何相关的术语，以及也许其他相关的术语，例如SGML, XML，或者是W3C标准文档。
当一个用户在一组链接中移动，或者是遍历，浏览器会维护一个能够让用户以相反的顺序访问已访问过页面的历史列表。现代的浏览器通常会维护这个列表到几个星期。大部分浏览器允许你配置历史列表保存的时间。它们也通过把整个历史作为一系列链接从而允许你一次回复多步。
你可以把整个链接集合作为一个网络，但是在这本书中，我更倾向于你把他们想象成一个应用程序。在一个应用程序中，和网站不同，你有特定的目的。相反，在一个网站中，或者是互联网中，用户可以简单的浏览而没有任何特定的目的。因此，在应用程序中，链接既是一个信息链接器，也是一个应用程序动作引发器。例如，一个表单中的按钮是一个链接——但是它的功能是引发应用程序的一个动作。一个浏览按钮是一个链接，但是它并不需要链接到相关信息——它可以连接到一个菜单，或者是它可以退出应用程序。
定位标记
在HTML中，从一个位置链接到另一个位置的主要方式是定位符，或者是<a>标签。这是一个非常简单的机制，它使用URL在两个位置之间移动。你可以指定一个URL作为href的属性值：
<a href="http://myserver/mysite/mypage.htm">
到我的页面
</a>
浏览器会把这段跟着一个开放的定位标记的文字变成一个链接，所以，在前面的例子里面，链接唯一可见的部分就是“到我的页面”。浏览器会持续把<a>标签之后的文字当成链接的文字知道遇到结束标签</a>。在起始和结束标签之间的所有部分都是定位标记，包括空格（有时候浏览器会忽略空格）都是一个链接文字。
有两种类型的定位标记：链接(Link)和书签(Bookmark)。他们的功能是完全不同的。链接是作为超链接触发器的定位标记——当你点击链接时，它会启动或者是触发链接动作。书签是作为链接终点的定位标记。你可以跳到一个书签，但是书签是不可见的，而且你不能点击他们。浏览器会把包含链接的定位标记变成有下划线和颜色的文字——默认是蓝色。在用户访问过链接目标后，浏览器一般会改变链接的颜色。
为了创建一个标签，你必须给定位标记一个名称(name)属性：
<a name="Bookmark1">
你可以跳转到一个书签，无论是不是在一个文档。基本上来讲，书签就是一个跳转到文档某个位置而不是最顶上的方法，一般来说，跳转到文档最顶上是默认的链接目标。为了跳转到相同文档的不同位置，你需要写一个如下的链接标签：
<a href="#Bookmark1">
注意：在href属性值最前面的符号(#)。该符号通知浏览器链接地址是一个书签而不是文档。你也可以通过增加#符号以及书签名到URL的末尾来链接到另一个文档的书签：
<a href="http://myserver/mysite/mypage.htm#Bookmark1">
你可以看到很多页面会在正上方设置可以跳转到页面下半部分标签的链接。典型的，你也会看到在每个标签都有一个可以跳回到顶端菜单的链接，这样可以保证在度过那部分之后，可以跳回到菜单来选择一个不同的部分。这样设置比设置一组互相连接的页面有更多好处。一个有菜单的长文档会花更少的时间创建，并且只需要一次对服务器的请求。单个长文档也能更容易的打印。另一方面，因为那必须滚动文档，所以读长文档也更难。
清单2.5是一个包含菜单以及内部书签的例子。分隔段( )就是为了在页面中放置足够的空白来保证页面需要滚动——在普通文档中，你不会需要他们的。在浏览器中，菜单页面看起来就像是图2.12显示的那样。

图2.12：有几个段落的菜单页面
清单2.5：有几个段落的菜单页面 (ch2-12.htm)
<html>
<head>
<title></title>
</head>
<body>
<a name="Menu">
<h1>文档菜单</h1></a>
<a href="#Bookmark1">段落1</a> 
<a href="#Bookmark2">段落2</a> 
<a href="#Bookmark3">段落3</a> 
<a href="#Bookmark4">段落4</a> 
 
<a name="Bookmark1">
<h2>段落1</h2></a>
段落 1的内容在这里
<a href="#Menu">
(回菜单)
</a> 
 
 
 
 
 
 
 
 
 
 
<a name="Bookmark2">
<h2>段落2</h2></a>
段落 2的内容在这里
<a href="#Menu">
(回菜单)
</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a name="Bookmark3">
<h2>段落3</h2></a>
段落 3的内容在这里
<a href="#Menu">
(回菜单)
</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a name="Bookmark4">
<h2>段落4</h2></a>
段落 4的内容在这里
<a href="#Menu">
(回菜单)
</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>
为了让你可以看到一个不同的风格，清单2.6包含一个格式为一组链接页面的多重选择问题。

清单2.6：一组链接页面 (ch2-13a.htm- ch2-13e.htm)

<html>
<head>
<title></title>
</head>
<body>

下面哪一个 不是合法的定位标记类型？
<ol>
<li><a href="ch2-13b.htm">指向其他文档的链接。</a>
<li><a href="ch2-13c.htm">指向其他文档特定位置的链接。</a>
<li><a href="ch2-13d.htm">指向前面文档的链接。</a>
<li><a href="ch2-13e.htm">指向浏览器中回退按钮的链接。</a>
</li></ol>
选择你的答案。

</body>
</html>

<html>
<head>
<title></title>
</head>
<body>

不正确
你的选择：“1. 指向其他文档的链接。” 那是一个合法的标签类型。
点击 <a href="ch2-13a.htm">继续</a>重试。

</body>
</html>

<html>
<head>
<title></title>
</head>
<body>

不正确
你的选择：“2.指向其他文档特定位置的链接。”那是一个合法的标签类型。
点击 <a href="ch2-13a.htm">继续</a>重试。

</body>
</html>

<html>
<head>
<title></title>
</head>
<body>

不正确
你的选择：“3. 指向前面文档的链接。” 那是一个合法的标签类型。
点击 <a href="ch2-13a.htm">继续</a>重试。

</body>
</html>

<html>
<head>
<title></title>
</head>
<body>

正确
你的选择：“4. 指向浏览器中回退按钮的链接。” 不是一个合法的标签类型。
</body>
</html>
如果你在浏览器中看看这组页面，你会首先看到问题（见图2.13）。

图2.13：多重选择屏幕 (ch2-13a.htm)
在你点击每个分散器的时候，你会看到类似于图2.14的页面。我不会把它们都显示在这里，因为你可以自己下载代码并在浏览器中浏览。图2.14显示了在你点击第一个分散器之后发生的事情。

图2.14：多重选择的反馈

mashimaro24

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己翻译的书（关于ASP.NET），希望对大家有帮助（七）

 在你的网站中包含图像文件 没有图像是非常难想象一个网站的。想象一个非常简单的方法使用HTML来插入图像到页面中也是非常难的。只需要花一点精力，你就可以把图像和文字融合甚至是让文字环绕图像。在接下来的讨论中，你的所有的图像都以图像标签为始。 图像标签 为了在页面中放置一个图像，你需要使用<img>标签之后跟一个属性src=URL，URL可以指定你想要发送的文件。有趣的是，服务器不会和页面的其他部分一起发送图像文件；相反，浏览器会解析页面中的HTML和文字，然后开始从服
复制链接

扫一扫