ASP 动态网页设计技术

项目2 ASP动态网页设计技术用HTML制作静态网站

本章任务： • 编写图书馆简介网页。 • 编写新书通报网页。 • 编写图书馆馆员名录网页。 • 编写文学天地框架网页及相关网页本章要点： • HTML语言的文本、段落和图像标记的使用。 • HTML语言的列表类标记与超链接标记的使用。 • HTML语言的表格标记的使用。 • HTML语言框架标记的使用。。

2.1 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>等均是双向标记。 • 在单向标记中，只有开始标记没有结束标记。如第一章介绍的换行标记

2.1 HTML语言简介 • 关于标记，有以下说明：（1）每个标记都用“<”（小于号）和“>”（大于号）围住，如，<Table>，以表示这是HTML标记而非普通文本。注意，“<”与标记名之间不能留有空格或其它字符。（2）对于双向标记，在标记名前加上符号“/”便是其结束标记，表示这种标记内容的结束。（3）标记字母大小写皆可，没有限制。（4）对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果。此时，各个标记间的顺序也是任意的。（5）标记可能具有一些属性，为设置标记的属性，标记的格式可表示如下： <标记属性名1=”属性值1” 属性名2=”属性值2” …>受标记影响的内容</标记> 各属性值的设置顺序是任意的。

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

图2-1 图书馆简介页面

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

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用 • 任务实现：（1）在Windows XP中，执行“开始”→“所有程序”→“附件”→“记事本”命令，启动记事本程序。（2）在记事本中输入HTML文档的基本结构，如下：

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用 <html> <head> <title>图书馆简介</title>  </head> <body bgcolor=orange> </body> </html>

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用说明： ①“”是HTML的注释标记，用它们括起来的部分是HTML的注释。在HTML文档中加入注释后可以使程序更加清晰易懂。该标记中的内容在浏览器解释文档时将被忽略，也不会显示出来。注释内容不局限于一行，长度也不受限制。即注释的结束标记和开始标记不必在同一行上。 ②行“<body bgcolor=orange>”中，使用<body>标记的bgcolor属性来设置网页的背景色。在ASP中，可以使用英文颜色名，也可以用“#”引导的一个十六进制数代码（分别代表红、绿、蓝分量）来表示颜色。英文颜色名及其对应的十六进制值如表2-1所示。

2.2 任务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所示。

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用说明(续)： ②标记<hr>用来在网页中显示水平线。在页面中插入一条水平线，可以把不同功能的文字分隔开，看起来整齐、明了。当浏览器执行HTML文件中的<HR>标记时，会在此处换行，并加入一条水平线段。线段的样式由<HR>标记的参数决定。水平线标记的格式为： <HR align=对齐方式 size=线条粗细 width=线条长度 color=线条颜色 noshade> <hr>标记的各属性及其含义如表2-3所示。

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用（4）双击网页文件task2_1.htm或在该文件上单击右键，在出现的快捷菜单中选择“打开方式”→“Internet Explore”，将会启动IE浏览器，并显示该网页（也可以采用第一章介绍的动态网页的访问方法来访问该网页）。如图2-2所示。图2-2 显示出来的图像和水平线

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用（5）接着在上述行的下面，添加如下代码行： <h1 align="center">图书馆简介</h1> 历史由来 1953年,我院前身军事工程学院在哈尔滨正式成立，……目前已初具规模。 说明： ①标记<h1>用来设置其包含的文字以一号标题的形式显示。在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理性。标题标记的格式为： <Hn align=对齐方式 > 标题文字 </Hn> 其中n代表标题的级别，用来指定标题文字的大小，可以取1～6之间的整数值，取1时文字最大，取6时文字最小。标题文字自动加粗。属性align用来设置标题在页面中的对齐方式，取值有：left（左对齐）、center（居中）和right（右对齐）。 <hn>标记缺省显示宋体字，使用该标记会自动插入一个空行。在一个标题行中无法使用不同大小的字体。

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用说明（续）： ②标记用来设置字体格式，包括字体字型和颜色。其一般格式如下： 被设置的文字 其中size属性用来设置文字的大小，数字的取值范围从1～7，size取1时最小，取7时最大；face属性用来设置字体，当文字为汉字时，格式中的“字体名”可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为Times New Roman等约50种字体。这里的“字体名”就是在Word的“常用”工具栏的“字体”列表框中显示的字体名；color属性用来设置文字颜色。

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用说明（续）： ③标记是一个段落标记，它定义一个新段落的开始。标记不但能使后面的文字换到下一行，还可以使两段之间插入一个空行。由于一段的结束意味着新一段的开始，所以使用也可省略结束标记。段落标记的格式如下： 属性align用来设置段落的对齐方式，其取值可以为left、center和 right，分别表示居左、居中、居右。缺省时默认值为left。一个段落标记可以看作是两个强制换行标记 。

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用（6）保存文件，并在浏览器中浏览该网页，网页显示效果如图2-3所示。图2-3 显示出标题、段落和文本后的网页

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用（7）在上述行的下面，接着添加如下代码行： 资源情况 图书馆现有馆舍面积5500多平方米，……全方位地为广大读者服务。 人员编制 图书馆目前有干部20名，……，成为图书馆建设的一支重要力量。 工程兵工程学院图书馆 2003年6月30日 说明：代码中的 标记为强制换行标记。强制换行标记的一般格式为：文字 浏览器解释时，从标记处换行。

2.2 任务2-1：图书馆简介页面——文本、段落与图像类标记的使用（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> 历史由来 1953年,我院前身军事工程，……目前已初具规模。

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

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

2.3 任务2-2:新书通报——列表类标记和超链接标记 • 列表通常用于列举相关的信息条目，提供一种有组织的易于浏览的阅览格式，在HTML文档中，列表是由列表类标记实现的。 • 超链接（Hyperlink）可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他网页、当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至可以跳转到声音、图片等多媒体文件。 • 当网页包含超链接时，链接源的外观形式将发生变化，一般为蓝色且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接时，将变成手形。在HTML中，超链接是由超链接标记实现的。

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

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

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

2.3 任务2-2:新书通报——列表类标记和超链接标记 • 任务实现：（1）启动“记事本”应用程序，输入如下代码： <html> <head> <title>新书通报——新书介绍（二级VB）</title> </head> <body background="back.jpg"> <center><h3>全国计算机等级考试（二级Visual Basic）</h3></center> <hr> </body> </html>

2.3 任务2-2:新书通报——列表类标记和超链接标记说明： ①<body>标记的background属性用来为网页设置背景图片，设置方法是把图片文件名（包括路径）直接赋值给background属性。 ②<center>…</center>标记的作用是使其作用的对象在网页中居中显示。（2）把该网页保存到D:\ASPExample\CH02文件夹下，取名为Task2_2_1.htm。（3）双击该网页，在IE浏览器中该网页的显示情况如图2-6所示。

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

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

2.3 任务2-2:新书通报——列表类标记和超链接标记说明： ①代码中的第一行是显示书的封面图片，设置了它的align属性、hspace属性和vspace属性，设置这三个属性的目的，是为了使图片被文本环绕且图片与文本之间有一定的间距。 ②代码中的“ ”表示一个空格。由于浏览器在解释HTML文档时，会忽略掉空格、回车和Tab键等空白字符，因此要在网页中使用空格必须采用其它方法，这就是使用特殊字符。HTML的特殊字符如表2-4所示。

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

2.3 任务2-2:新书通报——列表类标记和超链接标记（4）在HTML文档的<body>部分，接着添加如下一行代码： <a href="task2_2.htm" target="new">返回</a> 该行代码的作用是为文本“返回”创建一个链接到task2_2.htm网页的超链接，当单击它时将链接到网页task2_2.htm，即在浏览器中打开该网页。

2.3 任务2-2:新书通报——列表类标记和超链接标记说明： ①在HTML文档中，创建链接到其它网页的超链接，可使用<a>…</a>标记来实现，其一般格式如下： <A href=地址 target=打开窗口方式>热点</A> 其中，href为链接到的资源的有效地址，它的值为一个URL。在书写URL时要注意，如果资源放在自己的服务器上，可以用相对路径表示。如果目标资源在其它服务器上，只能用绝对路径表示。热点是作为链接源出现的，可以是图像、文本、动画等，当鼠标移到热点上时，将会变成手型，单击它将访问href指定的资源。target属性用来设定单击超链接后，目标资源显示在那一种窗口中，取值有：_blank、_parent、_self、_top和框架名称，它们的含义如表2-5所示。。

2.3 任务2-2:新书通报——列表类标记和超链接标记说明： ②若链接的对象是当前Web站点中的文件，根据目标文件与当前文件的目录关系，超链接有以下4种写法。链接到同一目录内的网页文件，其格式为： <A href="目标文件名.html"> 热点 </A> 其中，目标文件名就是超链接所要指向的文件。 • 链接到下一级目录中的网页文件，其格式为： <A href="子目录名/目标文件名.htm">热点 </A> • 链接到上一级目录中的网页文件，其格式为： <A href="../目标文件名.html"> 热点 </A> 其中，“..”代表上一级目录。 • 链接到同级目录中的网页文件，其格式为： <A href="../子目录名/目标文件名.html"> 热点 </A> 表示先退到上一级目录中，然后再进入到目标文件所在的目录。

2.3 任务2-2:新书通报——列表类标记和超链接标记（5）保存网页，并在IE浏览器中打开该网页，网页的运行情况如图2-5所示。（6）依次制作其它书籍的“新书介绍”网页，网页依次取名为Task2_2_x.htm，x代表第几本书，此处不再详述。（7）开始制作“新书列表”网页。启动“记事本”应用程序，在其中输入如下代码：

<html> <head> <title>新书通报——新书列表</title>  </head> <body link=red alink=blue vlink=green> <center><h3>新书通报</h3></center> <hr> <ul type=square>  <li>计算机类  <li>文学类  </ul>  </body> </html>

2.3 任务2-2:新书通报——列表类标记和超链接标记说明： ①代码“<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>标记是单标记，即一个表项的开始，就是前一个表项的结束。

2.3 任务2-2:新书通报——列表类标记和超链接标记（8）把该网页保存到D:\ASPExample\CH02文件夹中，文件名取为Task2_2.htm。用IE浏览器打开该网页，运行情况如图2-7所示。图2-7 用无序列表显示书类的网页

2.3 任务2-2:新书通报——列表类标记和超链接标记（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>计算机类  <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>文学类  <ol type=a> <li><a href="task2_2_5.htm">唐宋词赏析</a> <li><a href="task2_2_6.htm">现代网络诗抄</a> </ol> </ul>  </body> </html>

ASP 动态网页设计技术

ASP 动态网页设计技术

Presentation Transcript