- ASP动态网页设计与应用
- 沈大林主编
- 9字
- 2020-08-28 10:44:21
第2章 网页设计基础
2.1 HTML网页设计基础
2.1.1 HTML网页设计的基本概念
HTML（Hypertext Marked Language，即超文本标记语言）是一种用来制作超文本文档的简单标记语言。HTML文档是由HTML元素组成的文本文件，它能独立于各种操作系统平台（如Linux，Windows等）进行浏览。自1990年以来HTML就一直被用作WWW（World Wide Web，万维网）的信息表示语言，用于描述网页的格式设计和它与WWW上其他网页和文件的链接信息。使用HTML语言描述的文件，需要通过网页浏览器显示出效果。
HTML是一切网页实现的基础，在网络中浏览的网页都是一个个的HTML文件，这些网页中可以包含有文字、图片、动画和声音，还可以从当前文件跳转到另一个文件，与网络中世界各地主机上的文件相链接，故称为超文本文件。
一个HTML文件包含了一些特殊的标记来告诉浏览器应该如何显示文本、图像，以及网页的背景，被称为HTML标签。例如，第1章中所见过的<html>、<body>、<font>等。
HTML不是像C/C++、Visual Basic、Java之类的程序语言，它只是标记语言，基本上来说，只要明白了各种HTML标签的用法就可以说是学懂了HTML，HTML的格式非常简单，只是由文字及标签组合而成。表2-1列出了一些常用的HTML语言标签。
表2-1 常用的HTML语言标签
下面是学习HTML标签的几点说明。
（1）任何HTML标签都是由“<”号和“>”号所括住，标签名称不区分大小写。例如：<Html>、<html>和<HTML>表示相同的意思。W3C（World Wide Web Consortium，万维网联盟）在HTML4建议中提倡使用小写标签。
（2）多数标签是成对出现的，一对标签的前面一个是起始标签，第二个是结束标签，在起始和结束标签之间的文本是元素内容。在起始标签的标签名称前加上符号“/”便是结束标签，例如：<html>与</html>、<body>与</body>。
成对出现的标签可以嵌套使用，例如：
<font color="red"> <b>ASP教程</b></font>
上面的标签将“ASP教程”使用红色粗体文字显示。在嵌套时标签最好不要交叉，这会导致源文件的可读性差，且易出错。
（3）少数标签单独出现，没有配对的结束标签。例如：
ASP动态语言教程<br>电子工业出版社
上面语句中，<br>标签是插入一个空行，在这里实际上是换行，即将“ASP动态语言教程”和“电子工业出版社”分成两行显示。
（4）部分标签可以拥有属性，属性能够为页面上的HTML元素提供附加信息，属性只可加于起始标签中。属性通常由属性名和值成对出现，格式如下：
name="value"
其中，name为属性名称，value为所设置的属性值。例如：
<body bgcolor="blue">
标签<body>定义了HTML页面的主体元素，附加的bgcolor属性将可以告诉浏览器，网页页面的背景颜色，上面标记的意思是网页页面的背景色是蓝色。
属性值通常被包含在双引号中，也可以使用单引号。在某些情况下，如属性值本身包含引号时，使用单引号是很有必要的。
（5）为了与其他标签相区别，HTML中规定了专门的标签来作为注释标签，注释标签用来在HTML源文件中插入注释，注释在显示时会被浏览器忽略，是不可见的。注释标签以“<!--”开头，以“-->”结束，如下所示：
<!-- 注 释 -->
（6）很多标签都具有颜色属性，HTML中的颜色可以有两种表示方法：十六进制的RGB格式和在HTML中定义的颜色名称。RGB格式的表示方式为“#RRGGBB”，其中R、G、B为0～F的十六进制数，分别表示红、绿、蓝三种颜色的深度，从00至ff颜色逐渐加深，00为无色透明，ff为纯色。HTML中定义的颜色名称是一些常用颜色的英文单词，如red、black、green、blue、yellow等。例如：
<font color=”#0000ff”>ASP教程</font> <font color=”blue”>ASP教程</font>
上面的两行代码均将“ASP教程”显示为蓝色文字。
2.1.2 HTML文件结构
HTML的文件结构相当简单，其主体结构主要由以下三组标签构成：
<html></html> <head></head> <body></body>
<html>标签用以告知浏览器从这里开始是HTML文件，让浏览器认出并正确处理此HTML文件，整个HTML文件处于标记<html>与</html>之间。
HTML文档通常分两部分，位于<head>和</head>标签之间的部分称为HTML文件头，位于<body>至</body>标签之间的部分称为正文。文件头部分用以记录与网页相关的重要信息，例如标题、字符集等，通常文件头部分都不会显示在浏览器中，只有正文部分会被显示出来。
一般HTML文档格式如下：
<html>
<head>
文件头信息
</head>
<body>
在浏览器中显示的HTML文件的正文
</body>
</html>
HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。在<head>和</head>标签之间的文本是文件头信息。在浏览器窗口中，文件头信息是不被显示的。HTML文件头部分可以使用一些专用的标签来记载信息，常用文件头标签有<title>和<meta>。
在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。<body>标签之间包含的是浏览器中所显示的页面内容，作为对页面的设置，<body>标签有一些附带的属性用于设置页面的背景颜色、正文文字颜色、链接文字颜色和页面背景图像等，后面将逐一进行介绍这些属性。
1.设置文档标题
<title>标签用于指定文档标题，使用的格式如下：
<title> 文档标题 </title>
在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
2.设置网页关键字
<meta>标签是记录有关当前页面的信息（如字符编码、作者、版权信息或关键字）的head元素，该标签也可以用来向服务器提供信息，如页面的失效日期、刷新间隔等。为了完成这些功能，<meta>标签提供了两种附加属性：name和http-equiv。
name主要用于描述网页，以便于搜索引擎对网页进行查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页进行分类。其中最重要的是description（用于网页在搜索引擎上的描述）和keywords（定义搜索引擎用来分类的关键词)，从应用角度来看，应该给网站中的每一页都插入这两个name属性值。例如：
<meta name="keywords" content="ASP教程">
其中，“ASP教程”为所设置的当前网页的关键字。在文件头加上这样的定义后，搜索引擎就能够让读者根据这些关键字查找到网页，了解网页内容。
也可以不使用description和keywords来让搜索引擎进行检索，而使用robots来替代。robots的使用方式如下所示：
<meta name="robots" content="all | none | index | noindex | follow | nofollow">
设置为all时文件将被检索，并且页面上的链接可以被查询；设置为none则表示文件不被检索，而且不查询页面上的链接；设置为index时文件将被检索；设置为follow时则可以查询页面上的链接；设置为noindex时文件不检索，但可被查询链接；设置为nofollow时则表示文件不被检索，但可查询页面上的链接。
此外，还可以使用Author，告诉搜索引擎站点的设计者姓名，例如：
<meta name="Author" content="赵明">
上面标签将告诉搜索引擎当前站点的设计者是赵明。
3.设置网页字符集
http-equiv相当于http文件头的作用，可以直接影响网页的传输。常用方式如下：
<meta http-equiv="content-type" content="text/html; charset=utf-8">
上面的标签用于描述网页使用的字符集，浏览器根据此项，就可以选择正确编码字符集，而不需要读者在浏览器里选择。常用中文字符集有GB2312、UTF-8和BIG5，GB2312是简体中文编码，BIG5则是台湾繁体中文编码的主页专用，而UTF-8是一种通用编码，它可以在同一页面显示简体中文、繁体中文等多种文字，是目前最为常用的编码。本书中所有编码均使用UTF-8。
4.设置网页刷新时间
<meta http-equiv="refresh" content="60; url="new.htm">
上面标签用于刷新浏览器中的网页，在这行标签中，浏览器将在60秒后，自动转到网页new.htm。可以利用这个功能，制作一个网站标志性封面页，在若干时间后，自动让用户转到指定页面。如果省略上面标签中的url项，浏览器将刷新当前页。这样就可以实现网页的定时刷新功能。
5.强制浏览最新网页
<meta http-equiv="program" content="no-cache">
上面的标签用于强制性调用服务器中网页的最新版本。浏览器为了节约网络访问时间，在本地硬盘上都缓存了一个网页的临时文件。在下一次调用网页时，直接显示硬盘上的文件，而不是网络上的文件。如果想让用户每次都看到最新的网页，就需要加上这个标签。
6.设置网页背景颜色和图像
<body>标签的bgcolor属性用于设置页面的背景颜色，例如：
<body bgcolor=”yellow”>
上面的标签将页面背景设置为黄色。
background属性用于设置背景图像，例如：
<body background="images/bg.jpg">
上面的标签将站点中images目录下的bg.jpg图像文件设置为网页背景图像。在设置网页背景图像时应该注意，由于图像文件一般都比较大，网上传输较慢，最好是选择较小的文件或者是以较小的图片为背景。同时，背景图像不宜太复杂，以免影响正文的显示效果。
7.设置正文文字颜色和链接文字颜色
<body>标签的text属性用于设置页面正文的文字颜色，link属性用于设置链接文字的颜色，alink属性用于设置激活的链接颜色，vlink属性用于设置访问过的链接文字颜色。例如：
<body text="#000000" link="#0000FF" alink="#FF0000" vlink="#FFFF00" >
上面的标签设置网页正文文字为黑色，链接文字为蓝色，激活的链接文字为红色，已访问过的链接文字为黄色。
8.指定文档边距（只适用于IE浏览器）
<body>标签的topmargin、bottommargin、leftmargin、rightmargin属性可用于指定文档距浏览器上、下、左、右的空白距离，单位为像素。marginwidth和marginheight属性可用于指定边距宽度和边距高度。例如：
<body leftmargin="10" topmargin="10" rightmargin="10" bottommargin="10">
上面的标签指定了网页文档距离浏览器上、下、左、右边距为10像素。
9.缺省<html>、<head>和<body>标签的网页
还有一些特殊的网页，例如，将要包含在其他页面中的网页，由于要包含到其他页面，因此设计时网页中不能有<html>、<head>和<body>标签，以免与包含它的目标网页内容发生冲突，出现多个<html>、<head>或<body>标签。这种没有<html>、<head>和<body>标签的网页，在浏览器中浏览时，会将其解释为<body>部分的正文内容。
2.1.3 标题格式
HTML中，标题格式由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的标题元素。此外，在显示时，每行标题后还会自动添加一行空白。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 标题格式</title> </head> <body> <h1>标题1 </h1> <h2>标题2 </h2> <h3>标题3 </h3> <h4>标题4 </h4> <h5>标题5 </h5> <h6>标题6 </h6> </body> </html>
上面网页在浏览时效果如图2-1所示。
图2-1 标题格式
2.1.4 文字布局
HTML中，与文字布局相关的标签有段落<p>、换行<br>、预格式化<pre>、水平线<hr>和对齐方式等。
1.段落与换行
在HTML网页设计时，不能像文本编辑那样使用回车键来进行换行，这样的换行在显示时是无效的。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>失败的段落排版</title> </head> <body> <h1>蝶恋花 </h1> 苏轼 花褪残红青杏小。 燕子飞时，绿水人家绕。 枝上柳绵吹又少，天涯何处无芳草！ 墙里秋千墙外道。 墙外行人，墙里佳人笑。 笑渐不闻声渐悄，多情却被无情恼。 </body> </html>
上面的网页在浏览器中的显示效果如图2-2所示。
图2-2 失败的段落排版
从图中可以看出，虽然在设计网页时进行了分段，但在浏览器中显示时并没有按设计时的排版进行显示。所以，在HTML中，网页设计时的回车分段在浏览器中是无效的，即使有多个回车换行，在显示时也不会有效果。还有一种类似情况，HTML中的空格即使在设计时有多个，在浏览时也只能显示出一个空格。
HTML提供了两个标签<p>和<br>来用于段落的分段和换行。<p>用于分段，<br>用于换行。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>正确的段落排版</title> </head> <body> <h1>蝶恋花 </h1> <p>苏轼</p> <p> 花褪残红青杏小。<br> 燕子飞时，绿水人家绕。<br> 枝上柳绵吹又少，天涯何处无芳草！ <br> 墙里秋千墙外道。<br> 墙外行人，墙里佳人笑。<br> 笑渐不闻声渐悄，多情却被无情恼。<br> </p> </body> </html>
上面的网页在浏览器中的显示效果如图2-3所示。
图2-3 正确的段落排版
从图中可以看到，使用了<p>和<br>标签后，得到了正确的段落排版格式。还有一点需要注意，<p>标签会自动在段落后增加一行空白，表示分段。
2.预格式化
除<p>与<br>标签外，HTML还提供了预格式化标签<pre>。预格式化标签支持在网页设计时的排版与浏览时相同，排版时的回车换行与空格等在浏览时也可以保留格式。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>预格式化</title>
</head>
<body>
<pre>
<h1>蝶恋花 </h1>
苏轼
花褪残红青杏小。
燕子飞时，绿水人家绕。
枝上柳绵吹又少，天涯何处无芳草！
墙里秋千墙外道。
墙外行人，墙里佳人笑。
笑渐不闻声渐悄，多情却被无情恼。
</pre>
</body>
</html>
上面的网页在浏览器中的显示效果如图2-4所示。
图2-4 预格式化排版
从图中可以看出，使用预格式化标签后，浏览器中显示的内容与在设计HTML代码时完全相同，其中的空行、空格与回车换行等都得到了实现。
3.对齐方式
在段落排版中，还常常会用到段落对齐方式，HTML中可以使用附加属性align来控制段落对齐方式，该属性可用的值有left、center和right，分别对应于段落的左对齐、居中对齐和右对齐。
此外，由于居中对齐用得比较多（如标题文字、图像等），HTML还提供了专门的居中对齐的标签<center>。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 对齐方式</title> </head> <body> <center><h2>标题居中对齐</h2></center> <p align="left"> 段落左对齐</p> <p align="center">段落居中对齐</p> <p align="right">段落右对齐</p> </body> </html>
上面的网页在浏览器中的显示效果如图2-5所示。
图2-5 对齐方式
4.水平线
为了使网页美观，便于分开显示网页中的不同区域，在HTML中，还提供了一个图形化的分隔标签水平线<hr>。水平线用于在网页中分隔不同区域，常见的使用格式如下：
<hr color=" " align=" " size=" " width=" " noshade>
水平线可以附带多种属性，其中，color用于指定水平线的颜色，默认值为黑色；align用于指定水平线的对齐方式；size用于指定水平线的粗细，以像素为单位，默认值为2像素；width用于指定水平线的宽度，可以用像素作单位，也可以用窗口宽度的百分比作单位，默认值为100%；noshade属性用于设定线条是否为平面显示，若删去则有阴影，默认值为有阴影。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>水平线</title> </head> <body> <pre> <center><h3>蝶恋花 </h3> <h5>苏轼</h5></center> 花褪残红青杏小。 燕子飞时，绿水人家绕。 枝上柳绵吹又少，天涯何处无芳草！ 墙里秋千墙外道。 墙外行人，墙里佳人笑。 笑渐不闻声渐悄，多情却被无情恼。 <hr size="5" color="#0000FF" align="center" width="90%"> <h3><center> 江城子 密州出猎</center> </h3> 老夫聊发少年狂，左牵黄，右擎苍。 锦帽貂裘，千骑卷平冈。 欲报倾城随太守，亲射虎，看孙郎。 酒酣胸胆尚开张，鬓微霜，又何妨！ 持节云中，何日遣冯唐？ 会挽雕弓如满月，西北望，射天狼。 </pre> </body> </html>
上面的网页在浏览器中的显示效果如图2-6所示。
图2-6 水平线
从图中可以看到，下面的标签定义了一个高为5像素，宽为窗口的90%，颜色为蓝色，居中对齐且有阴影的水平线。
<hr size="5" color="#0000FF" align="center" width="90%">
2.1.5 字体格式
字体格式是排版中的重要内容，HTML中定义了多种标签来对文字的字体格式进行控制。
1.字体、颜色与大小
字体标签<font>用于字体格式设置，其附带的属性可用于文字字体、颜色和大小的设置，使用格式如下：
<font face=” “color=” “ size=” ” >
其中，face为客户端字体，如宋体、隶书、黑体等；color为文字颜色，使用<font>标签定义的文字颜色优于在<body>的text属性中定义的颜色；size为字号，HTML中规定了从1至7共七种字体大小，1为最小，7为最大。此外，还可以使用+1～+7和-7～-1这样的增减字号，它表示在当前字号的基础上减小或增大字号。例如：
<font face=”宋体“ color=”blue“ size=”5” >ASP教程</font>
上面的语句将在浏览器中显示字体为宋体，颜色为蓝色，大小为5号的“ASP教程”。
在设计时，face最好不要超出Windows自带字体以外的字体，否则，如果用户在浏览时，用户的计算机上没有该字体，将会影响页面的文字效果。还有一种解决的方法是在face的属性值中列出多种字体，客户端浏览器在浏览时会从左到右查询字体，如果客户机上没有该字体，则会用下一种替代。例如：
<font face=”方正简标宋,宋体“> ASP教程</font>
上面语句在浏览时，如果客户机没有安装字体“方正简标宋”，则以“宋体”显示。
2.字体样式
除了文字字体、颜色与大小外，HTML还提供了可以进行文字字体样式（如加粗、斜体、删除线等）控制的标签，常用的字体样式标签有<i>斜体、<b>加粗、<u>下画线、<strike>删除线、<sup>上标文字和<sub>下标文字等。
常用的字体样式举例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>字体样式</title> </head> <body> <font size="5"> <b>加粗字体</b><br> <i>斜体字</i><br> <strike>删除线</strike><br> <u>下画线</u><br> X<sup>2</sup><br> H<sub>2</sub>SO<sub>4</sub><br> </font> </body> </html>
上面的网页在浏览器中的显示效果如图2-7所示。
图2-7 字体样式
2.1.6 字符实体
在HTML中，有些字符拥有特殊含义，比如小于号“<”和大于号“>”在HTML中是作为标签的一部分使用的，如果想要浏览器显示这些字符，必须在HTML代码中以字符实体的方式使用。
HTML字符实体用于表示一些具有特殊意义的字符，而这些字符又不能在HTML中直接表示出来，如前面所说的“>”、“<”，还有引号（“””和“’”用于字符串的定界）、空格（在HTML中，如果有连续的多个空格，则在浏览时只有一个空格有效，其他的都被忽略）、版权符号（在编辑时，©不能作为字符直接打印出来）等。
一个字符实体拥有三个部分：以&符号开头，然后是一个实体名或者一个实体编号，最后是一个分号“;”。
HTML中常用的字符实体如表2-2所示。
表2-2 HTML常用的字符实体
例如，想要在HTML文档中显示一个小于号，可以写成“<”或者“<”，而要输出一个空格则要写成“ ”或“ ”。
使用实体名相对于使用实体编号的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体编号。
最后一点，在使用字符实体名时需要注意，实体名是大小写敏感的，在书写时注意分清大小写字母。
2.1.7 【任务1】“招生简章”页面设计
本任务将显示一个招生简单网页，在浏览器中的显示效果如图2-8所示。
1.新建网页
按照第1章中“变色的时间”网页中的设计方法，创建一个新网页。
在Dreamweaver CS5的“文件”面板中的“站点”文件夹图标上单击鼠标右键，在弹出的菜单中选择“新建文件”菜单命令，在站点中创建一个新的空白网页文件，将该文件取名为zsjz.asp。
2.添加图像资源
在Dreamweaver CS5的“文件”面板中的“站点”文件夹图标上单击鼠标右键，在弹出的菜单中选择“新建文件夹”菜单命令，在网站根目录下创建一个新文件夹，将其命名为images，用于存储网站中将使用到的图像资源。
将本书所附资源中images目录中的所有图像文件复制到该文件夹下。这一步骤也可以在Windows资源管理器中完成。完成复制后，单击“文件”面板中的“刷新”按钮
，即可看到复制的各个文件。
图2-8 招生简章
在本任务的实现过程中，将学习网页结构、文字布局、字体格式等内容。
3.代码编辑
在“文件”面板中双击zsjz.asp文件图标，打开文件，并切换到“代码视图”。在“代码”窗口中按下面的代码进行编辑。
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>招生简章</title>
</head>
<body background="../images/bg.gif" leftmargin="10" topmargin="10" rightmargin="10" bottommargin="10">
<!-- 设置红色居中对齐的标题文字-->
<h2 align="center"><font color="red"> CCNA网络工程师认证招生简章</font></h2>
<!-- 设置蓝色居中对齐的时间文字-->
<p align="center"><font color="#0000FF">2011-02-03 14:03:48</font></p>
<!-- 下面是招生简章的主要内容-->
<p> 思科认证可确保高标准的专业技术水平。获得任何级别的思科认证均意味着加入得到业界认可和尊敬的熟练网络专业人士的行列。
CCNA认证（思科认证网络工程师）表示经过认证的人员具有为小型办公室／家庭办公室（SOHO）市场联网的基本技术和相关知识。通过CCNA认证的专业人员可以在小型网络（100或100以下节点）中安装、配置和运行LAN、WAN和拨号访问业务。他们可以使用的协议包括（但不限于）：IP，IGRP，IPX，Serial，AppleTalk，Frame Relay，IP RIP，VLAN，RIP，Ethernet，Access Lists。 </p>
<p align="center"><font color="#FF0000" size="5" face="楷体_GB2312">一步领先，步步领先! </font></p>
<p>课程:CCNA认证</p>
<p>课时:48</p>
<p>上课时间:11年4月20日－6月17日 周四、周六晚上</p>
<p>班级代码:J4102B06</p>
<p>培训费:1800元</p>
<p>上课地点:综合楼 3层机房</p>
<p> 报名费:10元</p>
<p> 教 材：《CCNA学习指南（中文第五版）》电子工业出版社 </p>
<p>考 试 费：1250元（培训结束后自愿报名参加） </p>
<p>考试认证：思科（网络工程师）认证考试。 </p>
<p> </p>
<p>网 址：http://bjeetc.com </p>
<p>教学成果：2011年春季培训班，通过率为80% </p>
<p>联系电话：64265966 64269308 </p>
<p>报名地点：北京教育考试培训中心咨询报名处（指导中心一层大厅） </p>
</body>
</html>
完成代码编辑后，保存网页，在浏览器中的浏览效果如图2-8所示。