asp 动态网页设计技术

ASP

动态网页设计技术

编写图书馆简介网页。编写新书通报网页。编写图书馆馆员名录网页。编写文学天地框架网页及相关网页

本章任务：

本章要点： HTML 语言的文本、段落和图像标记的使用。 HTML 语言的列表类标记与超链接标记的使用。 HTML 语言的表格标记的使用。 HTML 语言框架标记的使用。。

HTML是 Hyper Text Markup Language （超文本标记语言）的缩写，它是构成 Web 页面（ Page ）的主要工具，是用来表示网上信息的符号标记语言，但不是一种编程语言，没有编程语言条件判断和循环控制结构。

HTML 文档属于纯文本文件，可用任意的文本编辑器（如记事本）编写， HTML 文档可以运行在不同操作系统的平台上。

HTML 文件由标记和被标记的内容组成，标记用于修饰、设置被标记内容的格式。就像一个排版程序，标记将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，如 P 表示 Paragraph （段落）的缩写、 IMG

为 Image （图像）的缩写。

2.1 HTML 语言简介

根据具体使用方法，标记又可分为双向标记和单向标记。在双向标记中，用 < 标记 > 表示标记的开始，用 </ 标记 > 表示标记的结束，它的一般格式如下：

< 标记 > 受标记影响的内容 </ 标记 >

例如第一章提到的 :<HTML>……</HTML>、 <HEAD>……</HEAD>、 <TITLE>……</TITLE>、 <BODY>……</BODY> 等均是双向标记。

在单向标记中，只有开始标记没有结束标记。如第一章介绍的换行标记 <BR>


关于标记，有以下说明：（ 1 ）每个标记都用“ <” （小于号）和“ >” （大于号）

围住，如 <P>， <Table> ，以表示这是 HTML 标记而非普通文本。注意，“ <” 与标记名之间不能留有空格或其它字符。

（ 2 ）对于双向标记，在标记名前加上符号“ /” 便是其结束标记，表示这种标记内容的结束。

（ 3 ）标记字母大小写皆可，没有限制。（ 4 ）对同一段要标记的内容，可以用多个标记来共同作

用，产生一定的效果。此时，各个标记间的顺序也是任意的。

（ 5 ）标记可能具有一些属性，为设置标记的属性，标记的格式可表示如下：

< 标记属性名 1=” 属性值 1” 属性名 2=” 属性值 2” …> 受标记影响的内容 </ 标记 >

各属性值的设置顺序是任意的。


任务 2-1 描述：设计一个图书馆简介页面，用来介绍该图书馆的基本情况，包括“历史由来”、“资源情况”和“人员编制”三个方面，为增强视觉效果，设置网页的背景为桔黄色并在页面的开头显示一幅图片。页面的浏览情况如图2-1 所示。

2.2 任务 2-1 ：图书馆简介页面——文本、段落与图像类标记的使用

图 2-1 图书馆简介页面

任务分析：可使用 HTML 语言来编写静态页面。网页的背景颜色可使用 <body>标记的 bgcolor 属性来设置，显示图片可使用 <img> 标记，图片下的水平线可使用 <hr> 标记，正文的标题、字体和内容可由相应的文本和段落类标记来实现。


任务实现：（ 1 ）在 Windows XP 中，执行“开始”

→“所有程序”→“附件”→“记事本”命令，启动记事本程序。（ 2 ）在记事本中输入 HTML 文档的基本

结构，如下：


<html><head><title> 图书馆简介 </title></head><body bgcolor=orange></body></html>

说明： “① ”是 HTML 的注释标记，用它们括起来的部分是 HTML 的注释。在 HTML 文档中加入注释后可以使程序更加清晰易懂。该标记中的内容在浏览器解释文档时将被忽略，也不会显示出来。注释内容不局限于一行，长度也不受限制。即注释的结束标记和开始标记不必在同一行上。

②行“ <body bgcolor=orange>” 中，使用 <body> 标记的 bgcolor 属性来设置网页的背景色。在 ASP 中，可以使用英文颜色名，也可以用“ #”引导的一个十六进制数代码（分别代表红、绿、蓝分量）来表示颜色。英文颜色名及其对应的十六进制值如表 2-1 所示。

（ 3 ）为显示图像和水平线，在 <body> 标记的下面，添上以下两行。

<img src="tsgt1.gif" align="center">

<hr size=4 width=100% color=blue>

然后把该文档保存到 D:\ASPExample\CH02 文件夹中，取名为 Task2_1.htm ，注意保存时一定要确保文件的扩展名为htm 。

说明： ①为在网页中显示图像，可使用 <img> 标记。 <img> 标记的

一般格式如下： <img src= 文件名 alt= 说明 width=x height=y border=n

hspace=h vspace=v align= 对齐方式 >

<img> 标记的各属性及其含义如表 2-2 所示。


说明 (续 ) ：②标记 <hr> 用来在网页中显示水平线。在页面中插入一条水平

线，可以把不同功能的文字分隔开，看起来整齐、明了。当浏览器执行 HTML 文件中的 <HR> 标记时，会在此处换行，并加入一条水平线段。线段的样式由 <HR> 标记的参数决定。水平线标记的格式为：

<HR align= 对齐方式 size= 线条粗细 width= 线条长度 color= 线条颜色 noshade>

<hr> 标记的各属性及其含义如表 2-3 所示。


（ 4 ）双击网页文件 task2_1.htm 或在该文件上单击右键，在出现的快捷菜单中选择“打开方式”→“ Internet Explore” ，将会启动 IE 浏览器，并显示该网页（也可以采用第一章介绍的动态网页的访问方法来访问该网页）。如图 2-2 所示。


图 2-2 显示出来的图像和水平线

（ 5 ）接着在上述行的下面，添加如下代码行： <h1 align="center"> 图书馆简介 </h1> <font face="隶书 " color=blue size=4> 历史由来 </font> <p>1953年 ,我院前身军事工程学院在哈尔滨正式成立，……目前已初具规模。 </p>

说明： ①标记 <h1> 用来设置其包含的文字以一号标题的形式显示。在页面中，标

题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理性。标题标记的格式为：

<Hn align= 对齐方式 > 标题文字 </Hn> 其中 n代表标题的级别，用来指定标题文字的大小，可以取 1～ 6 之间的整数值，取 1 时文字最大，取 6 时文字最小。标题文字自动加粗。

属性 align 用来设置标题在页面中的对齐方式，取值有： left （左对齐）、 center （居中）和 right （右对齐）。

<hn> 标记缺省显示宋体字，使用该标记会自动插入一个空行。在一个标题行中无法使用不同大小的字体。


说明（续）： ②<font> 标记用来设置字体格式，包括字体字型和颜色。

其一般格式如下： <font size=数字 face= 字体名 color= 颜色 > 被设置的文

字 </font>

其中 size 属性用来设置文字的大小，数字的取值范围从1～ 7， size取 1 时最小，取 7 时最大； face 属性用来设置字体，当文字为汉字时，格式中的“字体名”可以为：宋体、幼圆、隶书、楷体 _GB2312 、黑体、仿宋_GB2312 等。当文字为英文时，字体名可以为 Times New Roman 等约 50 种字体。这里的“字体名”就是在Word 的“常用”工具栏的“字体”列表框中显示的字体名；color 属性用来设置文字颜色。


说明（续）： ③<p> 标记是一个段落标记，它定义一个新段落的开

始。 <P> 标记不但能使后面的文字换到下一行，还可以使两段之间插入一个空行。由于一段的结束意味着新一段的开始，所以使用 <P> 也可省略结束标记。段落标记的格式如下：

<p align= 对齐方式 >

属性 align 用来设置段落的对齐方式，其取值可以为left、 center 和 right ，分别表示居左、居中、居右。缺省时默认值为 left 。

一个段落标记 <P> 可以看作是两个强制换行标记<BR><BR> 。


（ 6 ）保存文件，并在浏览器中浏览该网页，网页显示效果如图 2-3 所示。


图 2-3 显示出标题、段落和文本后的网页

（ 7 ）在上述行的下面，接着添加如下代码行：


说明：代码中的 <br> 标记为强制换行标记。强制换行标记的一般格式为：文字 <BR>浏览器解释时，从标记处换行。

<font face="隶书 " color=blue size=4> 资源情况 </font> <p> 图书馆现有馆舍面积 5500 多平方米，……全方位地为广大读者服务。 </p> <font face="隶书 " color=blue size=4> 人员编制 </font> <p> 图书馆目前有干部 20 名，……，成为图书馆建设的一支重要力量。 </p> <br><br> <p align="right"> 工程兵工程学院图书馆 </p> <p align="right">2003年 6月 30日 </p>

（ 8 ）保存该网页，并在浏览器中显示，显示结果如图 2-1 所示。最后的网页代码如下。


<html><head><title> 图书馆简介 </title></head><body bgcolor=orange> <img src="tsgt1.gif" align="center"> <hr size=4 width=100% color=blue> <h1 align="center"> 图书馆简介 </h1> <font face="隶书 " color=blue size=4> 历史由来 </font> <p>1953年 ,我院前身军事工程，……目前已初具规模。 </p>

<font face="隶书 " color=blue size=4> 资源情况 </font> <p> 图书馆现有馆舍面积 5500 多平方米，……全方位地为广大读者服务。 </p> <font face="隶书 " color=blue size=4> 人员编制 </font> <p> 图书馆目前有干部 20 名，……，成为图书馆建设的一支重要力量。 </p> <br><br> <p align="right"> 工程兵工程学院图书馆 </p> <p align="right">2003年 6月 30日 </p></body></html>

归纳说明：本节通过图书馆简介网页的实现过程，全面介绍了 HTML 的文本类标记、段落标记、水平线标记、图像标记的使用方法。重点是文本类标记，有 <hn>…</hn>标记和 <font>…</font> 标记。读者应弄清段落标记 <p> 与换行标记 <br>、 <hn>…</hn>与 <font>…</font> 标记的区别。


列表通常用于列举相关的信息条目，提供一种有组织的易于浏览的阅览格式，在 HTML 文档中，列表是由列表类标记实现的。

超链接（ Hyperlink ）可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他网页、当前页的某个位置、 Internet 或本地硬盘或局域网上的其他文件，甚至可以跳转到声音、图片等多媒体文件。

当网页包含超链接时，链接源的外观形式将发生变化，一般为蓝色且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接时，将变成手形。在 HTML 中，超链接是由超链接标记实现的。

2.3 任务 2-2: 新书通报——列表类标记和超链接标记

任务 2-2 描述：为图书馆编写“新书通报”网页，网页的运行情况如下：在 IE 浏览器中首先出现“新书列表”网页，如图 2-4 所示，该网页以列表的形成按类列出了本期的所有新书，并为每本新书的书名建立了一个超链接。当单击某本书的书名时，将会出现一个对该书内容进行简介的网页，图 2-5 是单击了“全国计算机等级考试（二级 VB ）”书名后的出现的简介网页。单击“返回”按钮，将返回到图2-4 所示的新书列表网页。


图 2-4 新书列表网页图 2-5 介绍“全国计算机等级考试（二级VB ）”的网页

任务分析：新书通报的新书列表网页的主体其实是一个嵌套的列表。书名分类（计算机类和文学类）是一个无序列表，每一类的书名列表是有序列表。在 HTML 中，使用 <ul>…</ul> 来实现无序列表，使用 <ol>…</ol> 来实现有序列表。每个书名都是一个超链接，链接到不同的网页，在HTML 中，可使用 <a>…</a> 标记来实现超链接。新书通报的新书介绍网页的主体其实是一幅图片和一段正文的环绕，图片和正文的环绕是通过<img> 属性的设置来实现的。该网页还设置了背景图片，背景图片是通过设置 <body> 标记的background 属性来实现的。


任务实现：（ 1 ）启动“记事本”应用程序，输入如下代码：


<html><head><title> 新书通报——新书介绍（二级 VB） </title></head><body background="back.jpg"> <center><h3> 全国计算机等级考试（二级 Visual Basic） </h3></center><hr></body></html>

说明： ①<body> 标记的 background 属性用来为网页设置背景图片，设

置方法是把图片文件名（包括路径）直接赋值给 background 属性。

②<center>…</center> 标记的作用是使其作用的对象在网页中居中显示。

（ 2 ）把该网页保存到 D:\ASPExample\CH02 文件夹下，取名为Task2_2_1.htm 。

（ 3 ）双击该网页，在 IE 浏览器中该网页的显示情况如图 2-6 所示。


图 2-6 设置了图片背景的网页

（ 3 ）接着在 HTML 文档的 <body>部分，添加如下代码：


<img src="book1.jpg" align=left alt="二级 Visual Basic" width=80 height=120 hspace=3 vspace=3> 全书分上、中、下三篇，共计 19 章。上篇为典型考题分析及对策，该篇将近年考题及样题进行深度剖析，并根据作者多年等级考试培训的经验选了一定数量的典型试题进行分析。然后按考试大纲的章节进行分类编排，从而利于考生分类复习，专项攻克，同时也便于考生更好地理解和掌握等级考试的内容、范围及难度。中篇为上机考试分析及对策，该篇包括考试环境及规则简介、典型上机题分类解析、上机训练题及解析等内容。该篇选了一定数量的真题和一些重点典型的攻关试题，不仅有利于提高考生的应试能力而且有助于提高考生的编程能力。下篇为实战冲刺全真预测试题，共 6套，并附有答案与解析。试题由名校经验丰富的等级考试辅导老师经过精心设计和锤炼，全面模拟考试真题，预测考点，应试导向准确。本书非常适合准备参加全国计算机等级考试的人员选作复习参考书，亦可作为各类全国计算机等级考试培训班的教材和自学考试参考书。<br><br>

说明： ①代码中的第一行是显示书的封面图片，设置了它的 align 属性、

hspace 属性和 vspace 属性，设置这三个属性的目的，是为了使图片被文本环绕且图片与文本之间有一定的间距。

②代码中的“ ” 表示一个空格。由于浏览器在解释 HTML文档时，会忽略掉空格、回车和 Tab键等空白字符，因此要在网页中使用空格必须采用其它方法，这就是使用特殊字符。 HTML 的特殊字符如表 2-4 所示。


（ 4 ）在 HTML 文档的 <body>部分，接着添加如下一行代码：

<p align="right"><a href="task2_2.htm" target="new">返回 </a>

该行代码的作用是为文本“返回”创建一个链接到 task2_2.htm 网页的超链接，当单击它时将链接到网页 task2_2.htm ，即在浏览器中打开该网页。


说明： ①在 HTML 文档中，创建链接到其它网页的超链接，可使用

<a>…</a> 标记来实现，其一般格式如下： <A href= 地址 target=打开窗口方式 >热点 </A> 其中， href 为链接到的资源的有效地址，它的值为一个 URL 。

在书写 URL 时要注意，如果资源放在自己的服务器上，可以用相对路径表示。如果目标资源在其它服务器上，只能用绝对路径表示。热点是作为链接源出现的，可以是图像、文本、动画等，当鼠标移到热点上时，将会变成手型，单击它将访问 href指定的资源。 target 属性用来设定单击超链接后，目标资源显示在那一种窗口中，取值有：_blank、 _parent、 _self、 _top 和框架名称，它们的含义如表 2-5 所示。。


说明： ②若链接的对象是当前 Web站点中的文件，根据目标文件与当前文

件的目录关系，超链接有以下 4 种写法。链接到同一目录内的网页文件，其格式为： <A href="目标文件名 .html"> 热点 </A> 其中，目标文件名就是超链接所要指向的文件。

链接到下一级目录中的网页文件，其格式为： <A href="子目录名 /目标文件名 .htm">热点 </A>

链接到上一级目录中的网页文件，其格式为： <A href="../目标文件名 .html"> 热点 </A> 其中，“ ..”代表上一级目录。

链接到同级目录中的网页文件，其格式为： <A href="../子目录名 /目标文件名 .html"> 热点 </A> 表示先退到上一级目录中，然后再进入到目标文件所在的目录。


（ 5 ）保存网页，并在 IE 浏览器中打开该网页，网页的运行情况如图 2-5 所示。（ 6 ）依次制作其它书籍的“新书介绍”网页，

网页依次取名为 Task2_2_x.htm， x代表第几本书，此处不再详述。（ 7 ）开始制作“新书列表”网页。启动“记

事本”应用程序，在其中输入如下代码：


说明： ①代码“ <body link=red alink=blue vlink=green>” 中设置了 <body>

标记的 link、 alink和 vlink 属性。 <body> 标记的主要属性及其含义如表 2-6 所示。


2.3 任务 2-2: 新书通报——列表类标记和超链接标记 ②显示图书的类别，使用了 <ul>…</ul> 标记，在 HTML 中，该标记用来实现无序列表。无序列表中每一个表项的前面是项目符号（如●、■等）。建立无序列表的一般格式如下： <ul type= 符号类型 > <li type= 符号类型 1> 第一个列表项 <li type= 符号类型 2> 第二个列表项 … </ul> 其中， type 属性指定每个表项左端的符号类型，取值有： disc（实心圆点●）、 circle （空心圆点○）、 square （方块■）。在<ul>后指定符号的样式，可设定直到 </ul>；在 <li>后指定符号的样式，可以设置从该 <li>起直到 </ul>。 <li> 标记是单标记，即一个表项的开始，就是前一个表项的结束。

（ 8 ）把该网页保存到 D:\ASPExample\CH02 文件夹中，文件名取为 Task2_2.htm 。用 IE 浏览器打开该网页，运行情况如图 2-7 所示。


图 2-7 用无序列表显示书类的网页

（ 9 ）在 <body>部分无序列表项“计算机类”后面添加如下代码


<ol type=1>   <li><a href="task2_2_1.htm"> 全国计算机等级考试 ( 二级 VB)</a> <li><a href="task2_2_2.htm"> 全国计算机等级考试 ( 二级 VFP)</a> <li><a href="task2_2_3.htm">VB.NET 应用教程 </a> <li><a href="task2_2_4.htm">Delphi 应用教程 </a> </ol> 在 <body> 部分无序列表项“文学类”后面添加如下代码： <ol type=a> <li><a href="task2_2_5.htm"> 唐宋词赏析 </a> <li><a href="task2_2_6.htm"> 现代网络诗抄 </a> </ol>

2.3 任务 2-2: 新书通报——列表类标记和超链接标记说明：有序列表（带有序号的列表）可以更清楚地表达信息的顺序，在HTML 语言中，可使用 <ol>…</ol> 标记建立有序列表，有序列表项的建立，依旧使用 <li> 标记。有序列表创建的一般格式如下： <OL type= 符号类型 > <LI type= 符号类型 1> 表项 1 <LI type= 符号类型 2> 表项 2 … </OL> 其中，属性 type 用来指定序号的类型，取值及含义如表 2-7 所示。

2.3 任务 2-2: 新书通报——列表类标记和超链接标记（ 10 ）保存该网页，在 IE 浏览器中打开该网页，运行情况如图 2-4 所示。单击“全国计算机等级考试（二级VB ）”超链接将会打开 Task2_2_1.htm 网页，运行情况如图 2-5 所示。单击“返回”超链接，将又在 IE 浏览器中打开 Task2_2.htm 网页，运行情况如图 2-4 所示。至此本任务完成，下面给出两个网页的最终代码。

task2_2.htm 的代码如下：<html> <head> <title> 新书通报——新书列表 </title>  </head> <body link=red alink=blue vlink=green> <center><h3> 新书通报 </h3></center> <hr> <ul type=square>  <li><font face=" 黑体 " size=4> 计算机类 </font>  <ol type=1>   <li><a href="task2_2_1.htm"> 全国计算机等级考试 ( 二级 VB)</a> <li><a href="task2_2_2.htm"> 全国计算机等级考试 ( 二级VFP)</a> <li><a href="task2_2_3.htm">VB.NET 应用教程 </a> <li><a href="task2_2_4.htm">Delphi 应用教程 </a> </ol>

<li><font face=" 黑体 " size=4> 文学类 </font>  <ol type=a> <li><a href="task2_2_5.htm"> 唐宋词赏析 </a> <li><a href="task2_2_6.htm"> 现代网络诗抄 </a> </ol> </ul> </body></html>

task2_2_1.htm 的代码如下：<html><head><title> 新书通报——新书介绍（二级 VB） </title></head><body background="back.jpg"> <center><h3> 全国计算机等级考试（二级 Visual Basic） </h3></center><hr><img src="book1.jpg" align=left alt=" 二级 Visual Basic" width=80 height=120 hspace=3 vspace=3> 全书分……准确。本书非常适合……考书。<p align="right"><a href="task2_2.htm" target="new"> 返回 </a> <br><br></body></html>

2.3 任务 2-2: 新书通报——列表类标记和超链接标记归纳说明：在本任务的实现中，着重讲解了无序列表、有序列表、链接到其它网页的超链接的实现方法。在HTML 中，使用 <ul>…</ul> 标记实现无序列表，使用<ol>…</ol> 标记实现有序列表，使用 <a>…</a> 标记实现超链接。对于有序列表和无序列表，均采用 <li> 标记表示列表项，使用 type 属性来设置列表项的类型，读者应着重掌握 type 属性的取值及其含义。对于超级链接，读者应熟练地掌握其属性 href 的设置方法。另外本任务还介绍了 <body>…</body> 标记的一些常用属性，主要有 background、 bgcolor、 link、 vlink、 alink 等，读者应了解它们的含义并掌握设置它们的方法。

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用任务 2-3 描述：编写“图书馆馆员名录”网页，该网页在浏览器中的浏览情况如图2-10 所示。单击表格最下面的馆长电子邮件地址将会启动默认的邮件处理程序，向馆长信箱发送一封电子邮件。

图 2-10 “ 图书馆馆员名录”网页浏览情况

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用任务分析：在 HTML 文档中，使用 <table>…</table> 标记实现二维表格，在 <table>…</table>标记中使用 <caption>…</caption> 标记给表格添加标题；使用 <tr>…</tr> 标记给表格添加行，使用 <th> 标记为表格设置表头，使用 <td> 标记添加列数据。建立到特定电子信箱的超链接，也是使用 <a>……</a> 标记，但其 href 属性取值格式为：“ mailto:电子邮件地址”。

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用任务实现：（ 1 ）启动“记事本”应用程序，在其中输入如下代码：。

<html><head><title> 馆员名录 </title></head><body background="back.jpg"> <center><h2> 馆员名录 </h2></center> <hr>

<table align=center border=3 width=90%>  <caption align=center valign=top> 图书馆馆员名录 </caption>  <tr align=center valign=middle><th> 部别 <th> 姓名 <th> 性别 <th> 上岗证号 <th> 工作地点  <tr><td> 馆长 <td> 黄德荣 <td>男 <td>010004<td> 二楼馆长办公室  <tr><td> 副馆长 <td> 常小雨 <td>女 <td>980017<td> 二楼馆长办公室 </TABLE> <BR></body></html>

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用说明： ①表格的标记为 <table>…</table> ，行的标记为 <tr>…</tr> ，

表项的标记为 <td>…</td> 、表头的标记为 <th>…</th> 。其中，</tr>、 </td>、 </th> 可以省去，因为一行（列）的开始是前一行（列）的结束。 <table>…</table> 标记则必须成对使用，其一般格式如下：

<table align=left|center|right border=n width=x|x% height=y|y%> <tr> <th> 表头 1<th> 表头 2…<th> 表头 n <tr> <td> 表项 1<td> 表项 2…<td> 表项 n …… <tr> <td> 表项 1<td> 表项 2…<td> 表项 n </table> 在浏览器中显示时， <th> 标记的文字按粗体显示，属于“表头”，

<td> 标记的文字按正常字体显示，属于表项。 ②表格的整体外观由 <table> 标记的属性决定，见表 2-8 所示。

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用说明： ③表头不但可以放在第一行，而且可以放在第一列。 ④上述代码中 <table>…</table> 标记中的第一行是给

表格添加标题，使用的是 <caption>…</caption> 标记，该标记的一般格式如下：

<caption align=left|right|center valign=top|bottom>标题 </caption>

其中， align 属性用来设置标题的水平对齐方式，默认值为 center， valign 属性用来设置表格标题的垂直对齐方式，默认值为 top ，即标题在表格的上面。需注意的是 <caption> 标记应包含在 <table>…</table>标记之间。

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用

（ 2 ）把文档保存到 D:\ASPExample\CH02 文件夹中，取名为task2_3.htm 。用 IE 浏览器浏览该网页，网页的浏览情况如图 2-11所示。

图 2-11 带有表头的标准表格

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用（ 3 ）在 <table>…</table> 标记之间再添加如下代码：

<tr><td rowspan=3 valign=middle> 采编组 <td> 李刚<td>男 <td>970015<td>307 室  <tr> <td> 赵群芳 <td>女 <td>040008<td>503 室 <tr> <td> 黄世锋 <td>男 <td>040019<td>208 室 <tr><td rowspan=2 valign=middle> 信息组<td> 童明 <td>男 <td>960005<td>207 室  <tr> <td> 花小梅 <td>女 <td>040023<td>403 室


说明： ①可以使用 <td>、 <th> 标记的 rowspan 属性来制作跨多行的表格。

格式如下： <td rowspan=n> 表项 </td>|<th rowspan=n> 表头 </th> 其中， n 表示合并的行数。 ②<tr>、 <td>和 <th> 标记均有 align和 valign 属性， align 的属性取

值有： center （居中）、 left （左对齐）、 right （右对齐）和 justify（左右调整）。 valign 的属性是垂直对齐属性，取值有： top （靠单元格顶）、 bottom （靠单元格底）、 middle （垂直居单元格中）和baseline （同行单元格数据项位置一致）。


（ 4 ）保存文档，并用 IE 浏览器打开它，网页的浏览结果如图 2-12 所示。

图 2-12 跨多行的表格


（ 5 ）在 <table>…</table> 标记之间再添加如下代码： <tr><td colspan=5>全馆馆员自觉接受您的监督，热情为您服务，如有意见或建议请向“馆长信箱”反映 <tr><td colspan=5 align=center valign=top><img src=email.gif><a href="mailto:[email protected]"> [email protected]</a> 说明： ①可以使用 <td>、 <th> 标记的 colspan 属性来制作跨多列的表格。

格式如下： <td colspan=n> 表项 </td>|<th colspan=n> 表头 </th> 其中， n 表示合并的列数。 ②使用 <a>…</a> 标记，可以制作电子邮件超链接，其一般格式为： <a href=mailto:邮箱地址 >热点 </a> 其中邮箱地址是要接收信件的邮箱地址。

（ 6 ）保存文档，并用 IE 浏览器打开它，网页的浏览结果如图 2-10 所示。至此本任务已经完成，最终网页代码如下：<html><head><title> 馆员名录 </title></head><body background="back.jpg"> <center><h2> 馆员名录 </h2></center> <hr> <table align=center border=3 width=90%>  <caption align=center valign=top> 图书馆馆员名录 </caption>

<tr align=center valign=middle><th> 部别 <th> 姓名 <th> 性别 <th> 上岗证号 <th> 工作地点  <tr><td> 馆长 <td> 黄德荣 <td>男 <td>010004 <td> 二楼馆长办公室  <tr><td> 副馆长 <td> 常小雨 <td>女 <td>980017<td> 二楼馆长办公室 <tr><td rowspan=3 valign=middle> 采编组 <td> 李刚 <td>男 <td>970015<td>307 室  <tr> <td> 赵群芳 <td>女 <td>040008<td>503 室 <tr> <td> 黄世锋 <td>男 <td>040019<td>208 室 <tr><td rowspan=2 valign=middle> 信息组 <td> 童明 <td>男 <td>960005<td>207 室  <tr> <td> 花小梅 <td>女 <td>040023<td>403 室 <tr><td colspan=5> 全馆馆员自觉接受您的监督，热情为您服务，如有意见或建议请向“馆长信箱”反映 <tr><td colspan=5 align=center valign=top><img src=email.gif> <a href="mailto:[email protected]">[email protected]</a> </TABLE> <BR></body></html>

归纳说明：在 HTML 文档中，使用 <table>…</table> 标记制作表格，在该标记中，可使用Caption 标记为表格添加标题，使用 <tr> 标记表示新的一行的开始，使用 <th> 为一行添加一个表头，使用 <td> 为一行添加一个表项。另外还可以使用 <td>、 <th> 等的 colspan和rowspan 属性来制作跨多列或多行的表格。还可以使用 <tr>、 <td>、 <th> 等的 align和valign 属性来设置表格内容的水平对齐方式和垂直对齐方式。


任务 2-4 描述：编写“文学天地”框架网页及相关网页。在 IE 浏览器中，框架网页初始运行情况如图 2-14 所示。此时单击左边框架中显示的网页中的文章名超链接，将在右边的框架中出现相应文章的网页，图 2-14 就是单击了“创造机会”后的网页浏览情况。此时在右边框架网页中单击“第一段”、“第二段”、“第三段”、“第四段”超链接，将会跳转到相应段落的开头。单击“返回到开头”文字或文字前的图像，均会跳转到文章的开头。

2.5 任务 2-4: 文学天地——框架类标记及其应用

图 2-14 框架网页的浏览结果

任务分析：本任务涉及到四个以上网页的编制。首先要在浏览器中划分框架并指出在每个框架中显示的网页，这是由框架网页来实现的。在框架网页中，可通过 <frameset>…</frameset> 标记划分框架，并在该标记中通过 <frame> 标记来指定每个框架中显示的网页。顶部框架、左边框架中显示的网页应先制作出来，并作为初始网页显示在相应的框架中。应把每一篇文章制作成一张网页，为实现在单击左侧网页中的相应链接时，链接到相应网页并把网页显示在右侧的框架中，可通过超链接的 target 属性指定框架名来实现。在显示文章内容的各个网页中，为了能够通过超链接在各个段落之间进行转移，可在每个段落之前通过 <a>…</a> 标记的 name 属性设置一个书签，然后在热点处制作一个跳转到相应书签的超链接，通过书签可以在同一网页内部进行跳转。

2.5 任务 2-4: 文学天地——框架类标记及其应用

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用任务实现：（ 1 ）启动“记事本”应用程序，在记事本中输

入以下代码：<html><head><title> 文学天地 </title></head><frameset rows="100,*">  <frame name="banner" scrolling="no" noresize src="task2_4_top.htm"> <frameset cols="180,*">  <frame name="contents" target="main" src="task2_4_left.htm">  <frame name="main" src="czjh.htm" scrolling="yes" target="_self">  </frameset></frameset></html>


说明： ①在 HTML 中，实现框架功能的标记有两个：

框架组标记 <frameset>…</frameset> 和框架标记 <frame>。 <frameset>…</frameset> 标记用来划分框架，而每一框架由一个 <frame> 标记所标示， <frame> 标记用来声明在框架中显示的页面，并且必须在 <frameset>…</frameset>范围中使用。所有框架标记需放在一个起始的 HTML文件中，这个文件只是用来声明框架的定义，记录了框架如何划分，以及框架的各种属性，不会显示任何资料。该文件通常称为框架网页。


②框架定义的基本语法格式如下： <frameset> <frame src="URL"> <frame src="URL"> … </frameset> 在框架组之间定义框架，甚至还可以定义框架组，从而实现框

架组的嵌套。 ③定义框架组时，可以设置框架组的属性，框架组定义的一般语

法格式如下： <frameset rows=R cols=C border=n bordercolor=colorvalue frameborder=yes|no framespacing=m> … </FRAMESET> 其各属性名及其含义如表 2-9 所示。

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用 ④<frame> 标记用于给各个框架指定页面的内容，通过该标记将各个框架和框架中显示的网页文件联系在一起。 <frame> 是一个单标记，其一般格式如下：

<frame src="URL" name=" 框架名 " border=n bordercolor=mycolor frameborder=yes|no marginwidth=m marginheight=n scrolling=yes|no|auto noresize>

可见 <frame> 标记也有许多属性，这些属性及其取值如表 2-10 所示。

⑤<frameset>…</frameset> 标记与 <body>…</body> 标记的作用相似，所以它们在 HTML 文件中一般不同时出现，否则会导致框架无法正常显示。

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用（ 2 ）把该网页保存到 D:\ASPExample\CH02 文件夹中，文件取名为 Task2_4.htm 。然后在 IE 浏览器中打开该网页，显示结果如图 2-15 所示。可以看到框架已经显示出来，但各框架中的网页没有显示出来。原因是各 <frame> 标记指定的起始网页“ task2_4_top.htm” 、“ task2_4_left.htm” 和“ czjh.htm” 网页均没有编写，不存在。

图 2-15 显示出来的框架

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用（ 3 ）启动记事本应用程序，在其中输入以下代码：

<html><head><title> 文学天地 </title><base target="_top"></head><body><table border="0" width="100%" cellspacing="1" cellpadding="1"> <tr> <td width="50%" align="center"> <img border="0" src="dotsbani.gif" width=100% height="16"> <td width="50%" align=center> <img border="0" src="dotsbani.gif" width=100% height="16"> </tr>

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用（ 4 ）把该网页保存到 D:\ASPExample\CH02 文件夹中，文件取名为 Task2_4_top.htm 。然后在 IE浏览器中打开该网页，显示结果如图 2-16 所示。

图 2-16 上框架网页的浏览结果

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用（ 5 ）启动“记事本”应用程序，在其中输入以下代码：

<html><head><title> 文学天地 </title><base target="main"> </head><body><p><img border="0" src="wenxue.jpg" width="150" height="124"></p><p><font size=3><i> 文学是情感的净化剂！ </i></font></p>

<ol> <li><a href="czjh.htm"><b> 创造机会 </b></a> <li><a href="lycby.htm"><b> 那一次表扬 </b></a> <li><a href="rj.htm"><b>日记 </b></a> <li><a href="cb.htm"><b> 心灵城堡 </b></a> <li><a href="hczyl.htm"><b> 活出尊严来 </b></a> <li><a href="fs.htm"><b>丰收 </b></a> <li><a href="twojl.htm"><b> 两份金陵 </b></a></ol></body></html>


说明： ①代码行“ <base target="main">” 用来指出超链接目标网页的默认显示窗口是 main 框架。这一行比较重要，如果没有该行，超链接的相应文章将不会显示的 main 框架中。如果没有该行，也可以在每个 <a>…</a> 标记中把 target 属性值设置为 "main" ，以实现同样的功能。

把超链接的结果显示在某个框架中的一般格式如下： <A href="URL" target=" 框架名 "> 热点文本 </A> 其中“框架名”是通过 <frame> 标记的 name 属性给某个框架起

的名字。 ②文档中使用了 <b>…</b> 标记，该标记的作用是使文本加粗显

示。除该标记外，还有一些其它的控制文本格式的标记，如表 2-11 所示。

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用（ 6 ）把该网页保存到 D:\ASPExample\CH02 文件夹中，文件取名为Task2_4_left.htm 。然后在IE 浏览器中打开该网页，显示结果如图 2-17 所示。

图2-17 左框架网页的浏览结

果

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用（ 7 ）启动“记事本”应用程序，在其中输入以下代码：

<html><head><title> 创造机会 </title><base target="_self"></head><body>  <center><h2><a name="start"> 创　造　机　会 </a><h2></center>  <p align=center><a href="#d1"> 第一段 </a> <a href="#d2"> 第二段 </a> <a href="#d3"> 第三段 </a> <a href="#d4"> 第四段 </a>

<font face=" 宋体 _GB2312" size="3"> <p><a name="d1"> 足球运动员 </a>经过了顽强的拼抢，终于在对方的门前赢得了一个绝妙的战机，射门！球飞了……他那“威风挡不住”的形象刹时变成了黯然神伤的特写画面．当我正为他感到婉惜的时候，却惊喜地发现，他又投入了拼抢！因为他知道消沉意味着失败，只有拼博才能创造下一次战机！<p><a name="d2"> 其实 </a>人生又何尝不是一个巨大的赛场，其中也充满了许多稍纵即逝的机会？即使是十分有才能的人，也难免会遇到“贻误战机”或功败垂成的考验。<p><a name="d3"> 由于 </a>这样那样的原因，当你眼睁睁地看着一次又一次本该属于你的足以改变命运的机会从眼前溜走时，当你面对为某件事耗费心血成功在望却又由于偶然的失误而前功尽弃时，朋友，你是否黯然神伤，悲叹命运的不公？此时请你想想足球场上的精英，想想他们功亏一箦后的心理历程 ,你就会知道懊恼神伤只能为你的失败增加一份无奈的悲壮，机会绝对不会在你的怨天忧人中到来！只有积极地投入竞争，才能创造出再一次堀起的机会！ <p><a name="d4"> 创造 </a> 机会，这才是勇敢者明智的决择。 </font><br>  <p align=center><a href="#start"><img src="exit.gif"> 返回到开头 </a></p></body></html>


说明： ①代码中类似于“ <a name="start">创　造　机　会 </a>” 的行的

作用是定义书签，书签可看作是网页中被标记的位置，通过超链接可以很轻松地跳转到书签处。当页面内容较多时，或一个网页很长时，浏览起来就会很不方便，查找信息也会浪费很多时间，这时，可先在网页内创建书签，然后再建立指向这些书签的超链接，浏览网页时只需单击这些超链接就可以快速定位到书签处。

建立书签的一般格式如下： <A name=“ 书签名” > 目标文本或对象 </A> 其作用是在“目标文本或对象”处创建一个名为“书签名”的书签。跳转到书签处的超链接的一般格式如下： <A href="# 书签名 "> 热点 </A> 浏览网页时，单击超链接的“热点”，将跳转到书签名指定的书签处。注意书签名前的“ #” 号不能省略。


②代码中的行“ <a href="#start"><img src="exit.gif">返回到开头</a>” 的作用是把图像和文本均作为超链接的热点，即图像也可以作为超链接的热点。制作图像超链接的一般形式如下：

<A href=URL><IMG src= 图片文件名 ></A>其中图片文件名是带有路径的文件名。（ 8 ）把该网页保存到 D:\ASPExample\CH02 文件夹

中，文件取名为 czjh.htm 。然后在 IE 浏览器中打开该网页，显示结果如图 2-18 所示。

图 2-18 “ 创建机会”文章网页的浏览结果


（ 9 ）重复（ 7） ~（ 8 ）步，依次创建其它各篇文章的网页并浏览。

（ 10 ）在 IE 浏览器中打开 Task2_4.htm 网页，浏览结果如图 2-14 所示，单击不同的文章名，在右下框架中将出现相应的文章网页。至此，本任务已经完成。


归纳说明：本节通过“文学天地”任务的实现过程，全面讲解了框架网页的作用及其实现过程，另外本任务还讲解了通过书签在同一网页中进行跳转的方法。要使用框架网页，应首先使用 <frameset>…</frameset> 标记创建框架组，然后在该标记内用<frame> 标记创建框架，在 <frame> 标记中可通过属性指出该框架显示的网页来源于哪一个网页文件。一般框架组和框架的创建放在一个网页文件中，该网页文件称为框架网页。通过设置超链接的 target 属性或使用 <base> 标记的 target 属性来指定超链接的目标框架，从而实现各框架之间的链接。使用 <a>…</a>标记的 name 属性，可以在网页的任意位置设置书签，然后在需要跳转到书签的地方，就可以使用 <a href=”# 书签名” >…</a> 标记来建立超链接。

2.4 任务 2-3: 图书馆馆员名录——表格标记的使用拓展提高：通过超链级可以实现在不同的网页之间跳转、在同一网页不同部分之间跳转，还可以直接跳接到另一网页的某一部分。实现方法是在另一网页的跳转目标位置设置一个书签，在该网页的热点处，使用如下超链接格式：

<a href="目标网页 URL# 书签名 ">热点 </a>

asp 动态网页设计技术

Documents