- ASP動態網頁設計與應用
- 沈大林主編
- 9字
- 2019-01-01 05:02:52
第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所示。