ASP動態網頁制作教程第1章網絡基礎知識

本章介紹網絡基礎知識，主要內容包括Internet和Web的相關概念以及Web程序開發環境的相關知識。通過本章的學習，讀者應了解什么是Internet和Web、Web的訪問原理、不同Web開發語言的特點，并掌握Web開發工具的使用等。尤其要理解Internet的一些基本概念，如TCP/IP協議族、IP地址、域名、URL等。主要內容

Internet基礎1.1Web簡介1.2Web程序開發環境1.3

小結1.4

上機指導1.51.1Internet基礎

Internet，中文正式譯名為因特網，是全球范圍的國際互聯網。它是由使用公用語言互相通信的計算機連接而成的全球網絡。本節介紹Internet的基本概念，包括TCP/IP協議族、IP地址、域名和URL等。1.1.1Internet概述Internet是由各種不同類型和規模的、獨立管理和運行的主機或計算機網絡組成的一個全球性網絡。

Internet源于ARPA（美國國防部高級研究計劃局）網絡計劃，最初使用在軍事研究方面。1.1.2TCP/IPInternet主要采用TCP/IP，凡是連入Internet的計算機都必須安裝和使用TCP/IP協議軟件。傳輸控制協議/因特網協議（TransmissionControlProtocol/InternetProtocol，TCP/IP）是Internet最基本的協議。

TCP/IP網絡體系結構分為4個層次：應用層、傳輸層、網絡層和物理鏈接層。

（1）應用層，是TCP/IP參考模型的最高層。（2）傳輸層，也稱為TCP層。

（3）網絡層，也稱為IP層，負責提供基本的數據報封裝及傳送功能，確保每一塊數據報都能夠到達目的主機（但不檢查是否被正確接收）。

（4）物理鏈接層，它的主要功能是接收網絡層的IP數據報，通過網絡向外發送。1.1.3IP地址、域名和URL

1．IP地址

IP地址（InternetProtocolAddress）是識別Internet網絡中的主機及網絡設備的唯一標識。每個IP地址又可分為兩部分，即網絡地址和主機地址。

（1）A類IP地址（2）B類IP地址（3）C類IP地址2．域名

TCP/IP中提供了域名服務系統（DNS），允許為主機分配字符名稱，即域名。

3．URL

統一資源定位器（UniformResourceLocator，URL）也被稱為網頁地址，它是Internet上標準的資源地址。

其格式如下：

<信息服務類型>://<信息資源地址>/<文件路徑>

1.2Web簡介

1.2.1什么是WebWeb，全稱為WorldWideWeb，縮寫WWW，中文稱萬維網，是基于Internet并采用Internet協議的一種體系結構，通過它可以訪問分布于其他Internet主機上的資源。

Web具有以下特點。（1）Web是一種超文本信息系統。（2）Web是圖形化的和易于導航的。（3）Web與平臺無關。（4）Web是分布式的。（5）Web是動態的、交互的。

1.2.2C/S模式與B/S模式

C/S和B/S是目前開發模式技術架構的兩大主流技術。

（1）C/S模式

C/S（Client/Server，客戶機/服務器）模式又稱為C/S結構，它是一種軟件系統體系結構。

（2）B/S模式

B/S（Browser/Server，瀏覽器/服務器）模式又稱為B/S結構。

1.2.3Web的訪問原理

Web應用程序是基于B/S（Browser/Server，瀏覽器/服務器）結構的。

1．服務器端與客戶端通常來說，提供服務的一方被稱為服務器端，而接受服務的一方則被稱為客戶端。

2．靜態網頁的工作原理所謂靜態網頁，就是在網頁文件里不存在程序代碼，只有HTML標記，其文件后綴名一般為.htm或.html。靜態網頁的工作原理非常簡單。

3．動態網頁的工作原理所謂動態網頁，就是在網頁文件中不僅包含HTML標記，同時還包含實現特定功能的程序代碼，該類網頁的后綴名通常根據程序語言的不同而不同。動態網頁的工作原理相對復雜。

圖1-1靜態網頁的工作原理

圖1-2動態網頁的工作原理

1.3Web程序開發環境

1.3.1Web開發工具

1．FrontPageFrontPage是微軟公司開發的一種功能強大且無需編程就可以實現創建和管理Web站點的開發工具。

（1）優點

①操作簡單

②頁面制作方便

③圖片處理功能

④易兼容

（2）缺點

FrontPage也存在著一定的缺點。

①無腳本庫，很多通過代碼實現的功能效果，通過FrontPage無法實現。

②網頁制作時，需要許多輔助文件的支持。

③模板功能有限、步驟繁瑣，在進行頁面模板設計時會耗損大量的時間。綜上所述，FrontPage僅適用于制作功能簡單的網頁或網站。

2．Dreamweaver

Dreamweaver是當今流行的網頁編輯工具之一。它采用了多種先進技術，提供了圖形化程序設計窗口，能夠快速高效地創建網頁，并生成與之相關的程序代碼，使網頁創作過程變得簡單化，生成的網頁也極具表現力。

圖1-3“工作區設置”對話框

圖1-4“新建文檔”對話框

圖1-5代碼視圖

圖1-6拆分視圖

圖1-7設計視圖

3．VisualInterDev6.0VisualInterDev是微軟公司推出的一種供Web開發者快速建立動態數據庫驅動的Web應用程序的超強開發工具。

圖1-8新建應用程序窗口

圖1-9ASP程序代碼編寫窗口

1.3.2Web開發語言目前，用于Web開發的主要有4種語言：ASP、ASP.NET、PHP和JSP。

1．ASPASP（ActiveServerPages）是一種使用很廣泛的開發動態網站的技術。

2．ASP.NETASP.NET也是一種建立動態Web應用程序的技術，它是.NET框架的一部分，可以使用任何.NET兼容的語言，如VisualBasic.NET，C#，J#等來編寫ASP.NET應用程序。

3．PHPPHP來自于PersonalHomePage一詞，但現在的PHP已經不再表示名詞的縮寫，而是一種開發動態網頁技術的名稱。

4．JSPJSP（JavaServerPages）是由Sun公司倡導，與多個公司共同建立的一種技術標準，它建立在JavaServlet基礎之上。

小結本章主要介紹了網絡的基礎知識，這樣可以為讀者學習本書以后的章節奠定良好的基礎。通過本章的介紹，讀者應能明確Internet的一些基本概念，如什么是TCP/IP、IP地址、域名和URL等；應能區分Internet和Web為兩個不同的概念；應了解Web的訪問原理和當前主要使用的幾種Web開發語言。讀者應能熟練掌握一種Web開發工具，為以后開發系統的Web應用程序做好準備。

上機指導

1-1安裝Web瀏覽器（如IE瀏覽器），在瀏覽器地址欄處輸入URL地址（可以是域名或者IP地址）訪問網站。

1-2安裝Dreamweaver軟件，創建ASP動態頁面，并熟悉代碼視圖、拆分視圖和設計視圖。ASP動態網頁制作教程第2章ASP概述

章介紹ASP的相關概念、運行環境的搭建以及如何開發ASP程序，主要內容包括ASP概念、IIS的安裝、IIS的配置、測試網站服務器的方法等。通過本章的學習，讀者應了解什么是ASP、ASP的技術特點以及ASP的運行環境，并能夠掌握IIS的安裝和配置以及測試網站服務器的4種方法。通過第一個ASP程序，熟悉開發ASP應用程序的步驟和特點。主要內容

什么是ASP2.1IIS的安裝2.2IIS的配置2.3

測試網站服務器2.4

第一個ASP程序2.5

上機指導2.7

小結2.62.1什么是ASPASP是微軟公司開發的服務器端的腳本編寫環境。它支持VBScript、JavaScript等多種腳本語言，通過ADO可以快速地訪問數據庫。使用ASP可以組合HTML頁、腳本命令和ActiveX組件來完成Web應用程序的開發，以滿足不同用戶的需求。

ASP包含以下3個方面的含義。（1）Active光煥發（2）Server（3）Pages

2.1.1ASP的發展歷程

1996年，ASP1.0作為Internet信息服務（InternetInformationServer，IIS）管理器的附屬產品免費發布并得到廣泛應用。

1998年，微軟公司發布了ASP2.0。

2000年，微軟公司開發的Windows2000操作系統中IIS5.0所附帶的ASP3.0開始流行。

2.1.2ASP的技術特點1．使用腳本語言2．訪問ActiveX組件3．通過ADO訪問數據庫4．支持HTTP1.1協議5．腳本解釋執行

2.1.3ASP的運行環境

ASP程序是在服務器端執行的，因此必須在服務器上安裝相應的Web服務器軟件。

（1）Windows98操作系統。（2）Windows2000Server/Professional操作系統。（3）WindowsXPProfessional操作系統。（4）Windows2003Server操作系統。

2.2IIS的安裝

2.2.1IIS簡介

IIS是一款功能強大的Internet信息服務系統，是Windows操作系統中集成的最重要的Web技術。

IIS提供了最簡捷的方式來共享信息、建立并部署應用程序以及建立和管理Web上的網站。

2.2.2安裝IISIIS已經被作為組件集成到Windows操作系統中。

圖2-1“添加或刪除程序”對話框

圖2-2“Windows組件向導”對話框

圖2-3“應用程序服務器”對話框

圖2-4安裝程序配置組件

圖2-5完成IIS的安裝

2.2.3卸載IIS

在實際應用中，用戶有時需要重新安裝IIS。在重裝IIS之前必須先卸載IIS再進行安裝。2.3IIS的配置2.3.1配置IIS

通過配置IIS可以發布、測試和維護Web站點。

圖2-6“Internet信息服務（IIS）管理器”對話框

圖2-7選擇“屬性”命令

圖2-8“默認網站屬性”對話框

圖2-9“主目錄”選項卡

圖2-10“文檔”選項卡

圖2-11添加內容頁

2.3.2啟動ActiveServerPages服務在Windows2003Server操作系統下，配置IIS后必須啟動“Web服務擴展”中的ActiveServerPages服務，才能正常運行和瀏覽ASP頁面。

圖2-12選擇“ActiveServerPages”服務

圖2-13啟動ActiveServerPages服務

2.3.3設置虛擬目錄在IIS上，用戶根據需要可以在一個站點上創建一個或者多個虛擬目錄，從而使Web服務器上的不同文件夾被包含在主目錄下，方便用戶瀏覽ASP頁面。

圖2-14新建虛擬目錄

圖2-15輸入虛擬目錄的路徑

圖2-16設置虛擬目錄的訪問權限

2.3.4創建網站在Windows2000和Windows2003操作系統環境下的IIS中，可以創建多個網站，從而可以對不同的應用程序進行有效管理。

圖2-17創建網站圖

圖2-18IP地址和端口設置

圖2-19輸入主目錄的路徑

圖2-20設置網站的訪問權限2.4測試網站服務器

在Windows2003Server操作系統下安裝和配置IIS后，可以通過運行“默認網站”（默認網站路徑為系統盤C:\Inetpub\wwwroot）下的iisstart.htm文件對網站服務器進行測試。

1．http://localhost本地訪問測試2．http://服務器名稱訪問測試3．http://服務器IP地址訪問測試4．本地訪問測試

圖2-21http://localhost測試結果

圖2-22錯誤提示頁面

圖2-23“目錄安全性”選項卡

圖2-24“身份驗證方法”對話框2.5第一個ASP程序

圖2-25程序運行結果圖

圖2-26修改“默認網站”的主目錄

圖2-27查看源代碼

小結本章主要介紹ASP的特點、運行環境的搭建等。讀者應在了解ASP技術特點的基礎上，熟練掌握如何安裝和配置IIS，并能夠測試自己搭建的網站IIS。在成功搭建ASP運行環境后，讀者可以仿照本章介紹的第一個ASP程序，開發一個簡單的ASP程序，從而熟悉ASP的編程特點。

上機指導

2-1安裝和配置IIS，并測試搭建的網站服務器是否成功。

2-2在IIS上的默認網站上設置虛擬目錄，并進行測試。

2-3在IIS上，通過更改端口號創建網站，并進行測試。

2-4根據2.5節的介紹，開發并運行一個簡單的ASP程序。ASP動態網頁制作教程第3章Web頁面制作基礎

本章介紹Web頁面制作基礎，主要內容包括HTML標記語言概述、常用的HTML標記、CSS樣式表等。通過本章的學習，讀者應了解什么是HTML和CSS樣式表，并能掌握關于文本、超鏈接、表格、表單等常用的HTML標記以及如何定義和引用CSS樣式表。主要內容

HTML標記語言3.1設置文字風格3.2制作表格3.5多媒體效果3.4

建立超鏈接3.3

上機指導

3.10

小結3.9CSS3.8

構建框架3.7建立表單3.63.1HTML標記語言

在Internet上瀏覽的大部分網頁都是用HTML語言編寫的。HTML語言是制作網頁的基礎，可以說Web動態編程都是在HTML的基礎上進行的。

3.1.1什么是HTML

超文本標記語言（HypertextMarkupLanguage，HTML）是Web頁面的描述性語言，是在標準通用化標記語言（StandardGeneralizedMarkupLanguage，SGML）的基礎上建立起來的。

根據其語法規則建立起來的文本可以運行在不同的操作系統平臺和瀏覽器上，是所有網頁制作技術的核心與基礎。無論是在Web上發布信息，還是編寫可供交互的程序，都離不開HTML語言。

3.1.2HTML文件結構使用HTML語言編寫的超文本文件稱為HTML文件。可以在Windows下的文本編輯器中手工直接編寫HTML文件，也可以使用FrontPage、Dreamweaver等可視化編輯軟件編寫HTML文件。

HTML通過在文本中嵌入各種標記，使普通文本具有超文本的功能。

HTML文件的基本結構如下。

<HTML><HEAD>

頭部信息

</HEAD><BODY>

主體內容

</BODY></HTML>

<HTML>…</HTML>：

HTML文件的開始和結束，其中包含<HEAD>和<BODY>標記的內容。

<HEAD>…</HEAD>：HTML文件的頭部標記，用于包含文件的基本信息。

<BODY>…</BODY>：HTML文件的主體標記，在頭部標記</HEAD>之后。它定義了HTML文件顯示的主要內容和顯示格式。這里需要注意的是，<HEAD>與<BODY>標記是兩個獨立的部分，不能互相嵌套。

圖3-1運行HTML文件

3.1.3HTML頭部標記與主體標記任何HTML文件都包含在<HTML>和</HTML>標記之中。一個標準的HTML文件分為頭部和主體兩大部分。其中，頭部標記為<HEAD>，主體標記為<BODY>。

1．頭部標記<HEAD><HEAD>標記是頁面的第二層標記，用于提供與Web頁面有關的各種信息。

【例3-1】在<HEAD>標記內設置頁面信息。

圖3-2頭部標記<HEAD>

2．主體標記<BODY>

在<BODY>和</BODY>中放置的是頁面展示的所有內容。作為網頁的主體部分，<BODY>標記有很多的內置屬性，通過這些屬性可以設定網頁的總體風格。例如，定義頁面的背景圖案、背景顏色、文字顏色、超文本鏈接顏色等。

（1）Background屬性光煥發（2）Bglolor屬性（3）Bgproperties屬性（4）Text屬性（5）Link屬性

（6）Alink屬性（7）Vlink屬性（8）Topmargin屬性（9）Leftmargin屬性

【例3-2】通過<BODY>標記定義頁面顯示風格。

圖3-3主體標記<BODY>3.2設置文字風格

文字是網頁的基礎部分，突出的文字內容、合理的文字排版能夠確切地傳達出頁面的主要信息。本節介紹字體標記<FONT>、標題字標記<H>、段落標記<P>、換行標記<BR>以及注釋標記<!--…-->和<COMMENT>。

3.2.1定義文字字體

1．字體標記<FONT><FONT>標記可以設定文字的字體、大小和顏色。<FONT>標記的屬性包括FACE（字體）、SIZE（字號）和COLOR（顏色）。

（1）FACE屬性（2）SIZE屬性（3）COLOR屬性

【例3-3】使用<FONT>標記定義文字。

2．標題字標記<H>

標題文字是指以某幾種固定的字號顯示文字。標題標記由<H1>到<H6>，分別表示1級至6級標題，每級標題文字的字體大小依次遞減。每個標題標記所標識的文字將獨占一行且上下留一空白行。

【例3-4】使用標題字標記<H>。

圖3-4字體標記<FONT>

圖3-5使用標題字標記<H>

3.2.2文字的排版一個清晰、排版整齊的Web頁面更能反映其所包含的內容，讓讀者一目了然。使用文字的排版標記可以使文字按照定義的規則顯示。下面介紹常用的段落標記<P>和換行標記<BR>。

1．段落標記<P>

段落是指一段格式統一的文本。使用段落標記<P>，將在段落之間間隔一空白行。語法：

<PALIGN="對齊方式">…</P>

【例3-5】使用<P>標記對文字進行排版。

2．換行標記<BR><BR>標記相當于一個換行符，它可以使內容換行顯示。與<P>標記不同，使用<BR>標記后兩行之間是沒有明顯間隔的；而使用<P>標記是開始一個新的段落，段落與段落之間間隔一空白行。

【例3-6】換行顯示文字。

圖3-6使用<P>標記對文字進行排版

圖3-7換行顯示文字

3.2.3注釋標記在頁面中可以使用注釋語句來標注一行源代碼或一段源代碼的用途，這樣便于源代碼編寫者對代碼的檢查與維護，還可以使用注釋語句添加版權說明等。值得注意的是，注釋語句不會顯示在瀏覽器窗口中。在HTML文件中，使用注釋標記<!--…-->和<COMMENT>來書寫注釋語句。

語法：

<!>

或者

<COMMENT></COMMENT>

上述兩種表示方法的功能是一樣的，都可以為頁面添加注釋語句。

【例3-7】添加注釋。

圖3-8添加注釋3.3建立超鏈接

超鏈接是網頁中最重要的元素之一。一個網站是由多個頁面組成的，頁面之間根據鏈接確定相互的導航關系。單擊網頁上的鏈接文字或者圖像后，就可以跳轉到另一個網頁。每一個網頁都有唯一的地址，稱作統一資源定位符（UniformResourceLocator，URL）。

3.3.1鏈接標記<A>

在網頁中使用<A>標記建立超鏈接。鏈接標記<A>的屬性如下。（1）href屬性（2）target屬性表3-1 target屬性的取值屬

性

值描述_parent在上一級窗口中打開。一般使用框架頁時使用_blank在新窗口中打開_self在當前窗口中打開_top在瀏覽器的整個窗口中打開，忽略任何框架

（3）title屬性（4）name屬性

3.3.2建立內部鏈接內部鏈接指的是在同一個網站內部，不同的HTML頁面之間的鏈接關系。即鏈接指向的是站點文件夾之內的文件。

語法：

<ahref="鏈接文件的路徑">鏈接內容</a>

其中，鏈接文件的路徑使用的是相對文件路徑，鏈接內容可以是文字或者圖像等。

【例3-8】建立內部鏈接。

圖3-9建立內部鏈接

3.3.3建立外部鏈接外部鏈接指的是跳轉到當前網站外部，與其他網站中的頁面或者其他元素之間的鏈接關系。這種鏈接在一般情況下需要書寫絕對的鏈接地址。

建立外部鏈接時，通常使用URL來定位萬維網信息。這種方式可以簡潔、明了、準確地描述信息所在的地點。下面看一下通過“http://”和“mailto:”如何實現鏈接到外部網站和向外部網站發送郵件的。

1．“http://”鏈接到外部網站語法：

<ahref="http://">鏈接內容</a>http://后面寫網站地址。

2．“mailto:”發送郵件在HTML頁面中可以建立E-mail鏈接，當瀏覽者單擊E-mail鏈接后，系統會啟動默認的電子郵件軟件進行E-mail的發送。

語法：

<AHREF="MAILTO:A@B.C">發送E-mail</A><AHREF="MAILTO:A@B.C?SUBJECT=CONTENT">發送E-mail</A>

<AHREF="MAILTO:A@B.C?CC=A@B.C">發送E-mail</A><AHREF="MAILTO:A@B.C?BCC=A@B.C">發送E-mail</A>表3-2 參數說明參數描述A@B.C代表郵件地址SUBJECT電子郵件主題CC抄送收件人BCC暗送收件人

【例3-9】發送E-mail。

圖3-10建立發送E-mail的超鏈接

圖3-11單擊“給作者的信1”鏈接的結果

圖3-12單擊“給作者的信2”鏈接的結果3.4多媒體效果

在網頁中使用多媒體，不但可以使網頁更美觀，還可以增加網站的訪問量。多媒體是指利用計算機技術，把多種媒體綜合在一起，使之建立起邏輯上的聯系，并能對其進行各種處理的一種方法。

多種媒體主要包括文字、聲音、圖像、動畫等各種形式。本節介紹如何在網頁中插入圖片，播放音樂、視頻和Flash動畫，播放背景音樂以及實現文字或圖片的滾動效果。

3.4.1插入圖片在純文本的HTML頁面中加入圖片，可以給原來單調乏味的頁面添加生氣。HTML語言中使用<IMG>標記插入圖片，這個標記沒有終止標記。<IMG>標記的常用屬性如下。

（1）src屬性（2）width、height屬性（3）hspace、vspace屬性（4）border屬性（5）align屬性（6）alt屬性（7）lowsrc屬性

【例3-10】在網頁中插入圖片。

圖3-13在網頁中插入圖片

3.4.2播放音樂、視頻和Flash動畫在HTML文件中，使用<EMBED>標記可以直接嵌入多媒體文件，如播放音樂、視頻和Flash動畫。<EMBED>標記的屬性如表3-3所示。表3-3 <EMBED>標記的屬性屬性描述src多媒體文件路徑width播放多媒體文件區域的寬度heigth播放多媒體文件區域的高度hidden控制播放面板的顯示和隱藏，取值為“True”代表隱藏面板，取值為“No”代表顯示面板autostart控制多媒體內容是否自動播放，取值為“True”代表自動播放，取值為“False”代表不自動播放loop控制多媒體內容是否循環播放，取值為“True”代表無限次循環播放，取值為“No”代表僅播放一次

1．播放MP3音樂在網頁中使用<EMBED>標記嵌入MP3音樂文件，并設置在網頁打開時自動播放MP3音樂，代碼如下。

<embedsrc="3-01.mp3"width="300"height="200"hidden="no"autostart="true"></embed>

2．播放MPEG電影和AVI視頻（1）播放MPEG電影動態圖像專家組（MovingPicturesExpertsGroup，MPEG）數字視頻格式是運動圖像壓縮算法的國際標準，采用了有損壓縮方法減少運動圖像中的冗余信息。

它在數字電視、動態圖像、因特網、實時多媒體監控、移動多媒體通信、Internet/Intranet上的視頻服務與可視游戲、DVD上的交互多媒體等方面都有應用。

【例3-11】播放MPEG電影。

圖3-14播放MPEG電影

（2）播放AVI視頻

AVI（AudioVideoInterlaced）是一種不需要專門硬件參與就可以實現大量視頻壓縮的數字視頻壓縮格式，是文件音頻數據和視頻數據的混合，即音頻數據和視頻數據交錯存放在同一個文件中。

【例3-12】播放AVI視頻。

圖3-15播放AVI視頻

3．播放Flash動畫

Flash動畫是一種矢量動畫格式，是用Macromedia公司的Flash軟件編輯而成，具有體積小、兼容性好、直觀動感、互動性強大、支持MP3音樂等諸多優點，是當今比較流行的Web頁面動畫格式。在任何一個版本的瀏覽器上只要安裝好插件，就可以觀看Flash動畫了。

【例3-13】播放Flash動畫。

圖3-16播放Flash動畫

3.4.3播放背景音樂在網頁中使用<BGSOUND>標記可以為頁面設置背景音樂。與使用<EMBED>標記不同，<BGSOUND>標記不但可以實現無限次循環播放音樂文件的功能，而且在網頁最小化的時候背景音樂將自動停止。它沒有顯示效果，是真正的背景音樂標記。

語法：

<bgsoundsrc="file_name"loop="loop_value">

通過<BGSOUND>標記可以嵌入多種格式的音樂文件，常用的是MIDI文件。

3.4.4滾動效果在HTML頁面中，可以實現文字或者圖片的滾動效果。例如，可以使一段文字從瀏覽器的右邊進入，橫穿屏幕，從瀏覽器的左邊退出等。在靜止的頁面中使用動態的效果，可以突出頁面中想要強調的內容。在HTML語言中使用<MARQUEE>標記實現滾動效果。

語法：

<MARQUEE>滾動內容</MARQUEE>

<MARQUEE>標記的常用屬性如下。（1）direction屬性（2）behavior屬性（3）loop屬性

（4）scrollamount屬性（5）scrolldelay屬性（6）width屬性（7）height屬性（8）bgcolor屬性

【例3-14】實現文字滾動效果。

圖3-17實現文字滾動效果3.5制作表格

表格是網站常用的頁面元素，是網頁排版的最佳手段。在頁面中用表格來加強對文本位置的控制和顯示數據，直觀清晰。而且HTML的表格使用起來非常靈活，非常容易掌握。

3.5.1表格的基本結構表格是網頁排版的最佳手段，利用表格的豐富屬性可以設計出各種復雜的表格。在HTML中，表格主要由3個標記來構成：表格標記<TABLE>、行標記<TR>、單元格標記<TD>。

表格的基本結構如下。

<TABLE><TR><TD></TD>…</TR><TR>

<TD></TD>…</TR>…</TABLE>

3.5.2定義表格的標題和表頭在HTML語言中，可以通過<CAPTION>標記為表格添加標題，通過<TH>標記定義表格表頭。

（1）<CAPTION>標記定義表格標題。

語法：

<CAPTION></CAPTION>

【例3-15】定義表格的標題。

圖3-18定義表格的標題

（2）<TH>標記定義表格表頭。表頭是指表格的第一行。通過<TH>標記可以定義表格的表頭，其中的文字居中對齊并且加粗顯示。

語法：

<TABLE><TR><TH></TH>…</TR><TR>

<TD></TD>…</TR>…</TABLE>

通過定義表頭，可以很容易地將表格第一行文字與其他行文字形成顯著對比。

【例3-16】定義表格表頭。

圖3-19定義表格表頭

3.5.3設置表格的邊框和間隔

<TABLE>標記的border屬性用于設置表格的邊框大小，cellspacing屬性和cellpadding屬性用于設置表格內元素的間隔。

（1）border屬性：定義表格邊框線的寬度，單位為像素。默認情況下，表格的邊框為0像素。

（2）cellspacing屬性：

設定表格的單元格與單元格之間的間距，以像素為單位。

（3）cellpadding屬性：設定表格的單元格內容和邊框之間的距離，以像素為單位。

【例3-17】設置表格的邊框和間隔。

圖3-20設置表格的邊框和間隔

3.5.4定義表格尺寸和背景顏色

1．定義表格尺寸通過<TABLE>標記的width和height屬性可以設置整個表格的寬度和高度；通過<TD>標記的width和height屬性可以設置表格內單元格的寬度和高度。單位為像素或者以百分比形式表現。

【例3-18】定義表格尺寸。

圖3-21定義表格尺寸

2．設置表格背景顏色通過<TABLE>標記的bgcolor屬性可以設置整個表格的背景顏色，通過<TR>標記的bgcolor屬性可以設置表格同一行的背景顏色，通過<TD>標記的bgcolor屬性可以設置一個單元格的背景顏色。

【例3-19】設置表格背景顏色。

圖3-22設置表格背景顏色

3.5.5設定表格的對齊方式通過<TABLE>標記的align屬性可以設定表格相對于頁面的水平對齊方式，通過<TR>標記的align屬性、valign屬性可以設定一行內容的水平和垂直對齊方式，通過<TD>標記的align屬性、valign屬性可以設定單元格內容的水平和垂直對齊方式。

【例3-20】設定表格的對齊方式。

圖3-23設定表格的對齊方式

3.5.6設置跨行、跨列的表格在設計網頁過程中，有時需要設置跨行、跨列的表格，即表格中的一個單元格占用多行或者多列。

（1）<TD>標記的rowspan屬性：設置單元格在水平方向上跨越的單元格個數。

（2）<TD>標記的colspan屬性：設置單元格在垂直方向上跨越的單元格個數。

【例3-21】設置跨行、跨列的表格。

圖3-24定義表格尺寸3.6建立表單

表單是客戶端和服務器端之間重要的交互手段。利用表單可以收集客戶端提交的有關信息。例如注冊一個電子信箱時，用戶需要填寫網站提供的表單，其內容包括用戶名、密碼、聯系方式等信息。

提交表單信息的處理過程：單擊表單中的提交按鈕時，輸入在表單中的信息會上傳到服務器；然后由服務器上的相關應用程序進行處理；處理后或者將用戶提交的信息儲存在服務器端的數據庫中，或者將一些信息返回給客戶瀏覽器端。

3.6.1表單的結構表單是網頁上的一個特定區域，這個區域是由<FORM>、</FORM>標記定義的。其他的表單對象，都要插入到表單之中。單擊表單的提交按鈕時，提交的是表單范圍之內的內容。表單區域還攜帶表單的相關信息，如處理表單的腳本程序的位置、提交表單的方法等。

表單的結構如下：

<FORMNAME="form_name"METHOD="method"ACTION="URL"ENCTYPE="value"TARGET="target_win"”>…</FORM>

<FORM>標記的屬性如下。（1）name屬性（2）method屬性（3）action屬性（4）enctype屬性（5）target屬性

3.6.2在表單中插入控件表單相當于一個容器，只有在表單中添加表單元素，表單才具有實際意義。例如，在表單中插入文本框、單選框、按鈕、文本域、列表/菜單等。下面介紹表單控件對應的標記：<INPUT>標記、<TEXTAREA>標記、<SELECT>標記和<OPTION>標記。

1．輸入域標記<INPUT><INPUT>標記是表單中最常用的標記之一。語法：

<FORM><INPUTNAME="filed_name"TYPE="type_name"></FORM>

TYPE屬性的取值如下。（1）文字域TEXT<INPUT>標記的TYPE屬性值為TEXT表示控件為文本框。在文本框中可以輸入任何類型的文本、數字、字母等字符串。輸入的內容以單行顯示。

語法：

<FORM><INPUTType="text"NAME="field_name"MAXLENGTH="value"SIZE="value"VALUE="field_value"></FORM>

（2）密碼域PASSWORD

在表單中還有一種文本域的形式為密碼域，輸入到文本域中的文字均以星號或者圓點顯示。

語法：

<FORM><INPUTType="password"NAME="field_name"MAXLENGTH="value"SIZE="value"></FORM>

（3）文件域FILE

文件域的外觀是一個文本框加一個瀏覽按鈕。用戶既可以直接在文本框中輸入上傳文件的路徑，也可以單擊瀏覽按鈕選擇要上傳的文件，然后通過表單將文件上傳到服務器上。例如，上傳附件、Office文檔、圖片等各種類型的文件，都要用到文件域。

語法：

<FORM><INPUTType="file"NAME="field_name"></FORM>

（4）單選按鈕RADIO

單選按鈕要求在所給出的項目中只允許選擇一項。

語法：

<FORM><INPUTType="radio"NAME="field_name"Value="value"></FORM>

（5）復選按鈕CHECKBOX

復選按鈕能夠進行項目的多項選擇。

語法：

<FORM><INPUTType="checkbox"NAME="field_name"checkedValue="value"></FORM>

（6）提交按鈕SUBMIT

單擊提交按鈕，可以實現表單內容的提交。

語法：

<FORM><INPUTType="submit"NAME="field_name"Value="button_text"></FORM>

其中，VALUE代表顯示在按鈕上面的文字，后面幾種類型中VALUE值意義都與此處相同。

（7）重置按鈕RESET

單擊重置按鈕，可以清除表單的內容，恢復默認的表單內容設定。

語法：

<FORM><INPUTType="reset"NAME="name"Value="button_text"></FORM>

（8）普通按鈕BUTTON

普通按鈕一般是配合JavaScript腳本來進行表單的處理。

語法：

<FORM><INPUTType="BUTTON"NAME="field_name"Value="button_text"></FORM>

（9）隱藏域HIDDEN

隱藏域在頁面中對于用戶而言是不可見的，插入隱藏域的目的在于通過隱藏的方式收集或者發送信息。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到相關頁面。

語法：

<FORM><INPUTType="hidden"NAME="name"Value="value"></FORM>

（10）圖像域IMAGE

圖像域是指設置圖片為表單的提交按鈕，即圖片具有按鈕的功能。

語法：

<FORM><INPUTType="image"NAME="name"SRC="image_url"></FORM>

2．文字域標記<TEXTAREA>

文字域標記<TEXTAREA>用來制作多行的文字域，可以在其中輸入更多的文本。

語法：

<FORM><TEXTAREANAME="name"Rows=valueCols=valueValue="value">

文本內容

</TEXTAREA></FORM>

文字域標記如下。

①name?

②rows?

③cols?

④value?

3．選擇域標記<SELECT>和OPTION>

通過選擇域標記<SELECT>和<OPTION>可以建立一個列表或者菜單。菜單節省空間，正常狀態下只能看到一個選項，單擊按鈕打開菜單后才能看到全部的選項。列表可以顯示一定數量的選項，如果超出了這個數量，會自動出現滾動條，瀏覽者可以通過拖動滾動條來查看各選項。

語法：

<FORM><SELECTNAME="name"SIZE="value"Multiple><optionvalue="value"Selected>選項1<optionvalue="value">選項2

<optionvalue="value">選項3…</SELECT></FORM>

選擇域標記<SELECT>和<OPTION>的屬性如下。

【例3-22】建立表單。

圖3-25建立表單3.7構建框架

制作網頁時，經常使用框架進行頁面布局。本節介紹在網頁中如何構建框架以及在框架中如何實現超鏈接。

3.7.1框架的基本結構框架的作用是把瀏覽器窗口劃分成若干個區域，每個區域內可以顯示不同的頁面，并且各個頁面之間不會受到任何影響。框架內每個頁面都有不同的名字，作為彼此互動的依據，所以框架技術普遍應用于頁面導航。

框架的基本結構如下。

<HTML><HEAD><TITLE>框架網頁的基本結構</TITLE>

</HEAD><FRAMESET><FRAME><FRAME>…</FRAMESET></HTML>

構建框架的主要標記如下。

<FRAMESET><FRAME>

3.7.2在網頁中構建框架

1．基本框架基本框架是由<FRAMESET>標記和<FRAME>標記組建的。

（1）框架集標記<FRAMESET>

框架集標記<FRAMESET>定義了框架的開始和結束。它還定義一組框架的結構，包括框架的數量、尺寸等。

<FRAMESET>標記的屬性如下。

①cols屬性

②rows屬性

③framespacing屬性

④bordercolor屬性

⑤frameborder屬性

（2）框架標記<FRAME><FRAME>標記是用于定義每個框架的內容。每個框架最終都要有一個顯示的頁面，通過裝載該頁面就可以顯示網頁的內容了。

框架標記<FRAME>的屬性如下。

①src屬性

②name屬性

③frameborder屬性

④scrolling屬性

⑤marginwidth屬性、marginheight屬性

⑥noresize屬性

（3）<noframes>標記某些版本的瀏覽器是不支持框架結構的，如果遇到這種情況，就可以使用<NOFRAMES>和</NOFRAMES>標記再聲明一對文件主體標記<BODY>和</BODY>，代表在無法接受框架結構時顯示的頁面內容。

【例3-23】構建基本框架。

圖3-26構建基本框架

2．浮動框架浮動框架是一種特殊的框架結構，它是在瀏覽的窗口中嵌套另外的網頁文件。<IFRAME>為浮動框架標記。語法：

<IFRAME></IFRAME>

<IFRAME>標記的屬性如下。

①src屬性

②name屬性

③align屬性

④width屬性?height屬性

⑤scrolling屬性

⑥FRAMEBORDER屬性

⑦marginwidth屬性、marginheight屬性

【例3-24】構建浮動框架。

圖3-27構建浮動框架

3.7.3在框架中應用超鏈接框架的一個主要用途是做為頁面導航，方便用戶查閱網頁，了解網站結構。在框架中建立超鏈接，把框架的名稱賦值給超鏈接<A>標記的TARGET屬性，則指定的鏈接頁面內容將在相應名稱的框架中顯示。

【例3-25】在框架中應用超鏈接。

圖3-28在框架中應用超鏈接3.8CSS

層疊樣式表（CascadingStyleSheets，CSS）是W3C協會為彌補HTML在顯示屬性設定上的不足而制定的一套擴展樣式標準。CSS標準中重新定義了HTML中原來的文字顯示樣式，增加了一些新概念，如類、層等，可以對文字重疊、定位等。

所謂“層疊”，實際上就是將顯示樣式獨立于顯示的內容，進行分類管理，如分為字體樣式、顏色樣式等，需要使用樣式的HTML文件進行套用。

3.8.1CSS的特點為了使讀者更好地了解CSS，下面介紹CSS的特點。

（1）將顯示格式和文檔結構分離。（2）對HTML語言處理樣式的最好補充。（3）體積更小加快網頁下載速度。（4）實現動態更新、減少工作量。（5）支持CSS的瀏覽器增多。

3.8.2定義CSS樣式

CSS樣式中主要包含3種選擇符，分別為標記選擇符、類選擇符和ID選擇符。下面根據這3種選擇符來介紹如何定義CSS樣式。

（1）標記選擇符標記選擇符就是HTML的標記符，如“BODY”、“TABLE”、“P”、“A”等。

如果在CSS中定義了標記使用的樣式，那么在整個網頁中，該標記的屬性都將應用定義中的設置。語法：

tag{property:value}

（2）類選擇符如果在頁面中不希望一種標記遵循同一種樣式或者希望不同的標記遵循相同的樣式，利用類選擇符和標記的class屬性就可以做到這兩點。

類選擇符在CSS中有兩種定義格式。

①格式1

語法：

tag.Classname{property:value}

②格式2

語法：

.Classname{property:value}

（3）ID選擇符

ID選擇符用于定義一個元素的獨有樣式。ID選擇符的用法是在HTML標記的ID屬性中引用CSS樣式。語法：

#IDname{property:value}

3.8.3引用CSS樣式的方式引用CSS樣式的方式有4種，分別為鏈接到外部的樣式表、引入外部的樣式表、<style>標記嵌入樣式和內聯樣式。

1．鏈接到外部的樣式表如果多個HTML文件要共享樣式表，可以將樣式表定義為一個獨立的CSS樣式文件。HTML文件在頭部用<link>標記鏈接到CSS樣式文件。

2．引入外部的樣式表這種方式是在HTML文件的頭部<style></style>標記之間，通過＠import聲明引入外部樣式表。

格式如下：

<style>@importURL("外部樣式表文件名稱");…</style>

引入外部樣式表的使用方式與鏈接到外部樣式表很相似，都是將樣式定義保存為單獨文件。

3．<style>標記嵌入樣式在HTML文件的頭部<style>…</style>標記內可以定義CSS樣式。

4．內聯樣式這種方式是在HTML標記中，將定義的樣式規則作為標記style屬性的屬性值。樣式定義的作用范圍僅限于此標記范圍之內。

小結本章主要介紹了制作Web頁面不可缺少的兩個部分：HTML標記和CSS。讀者在了解其基本概念的基礎上，應能靈活使用各種HTML標記以及CSS制作Web頁面。例如，設置頁面中的文本內容、在頁面中建立超鏈接、使用表格實現頁面布局、在表單中插入控件、使用CSS樣式規范頁面顯示格式等。

上機指導

3-1使用<FONT>標記設置頁面中的文本字體為“宋體”，字號為“12pt”，顏色為“藍色”；同時，設置文本從頁面的右邊向左邊滾動。

3-2在Web頁面中應用<A>標記建立超鏈接，使鏈接的頁面在一個新窗口中打開。

3-3在頁面中插入一個用于用戶登錄的表單。在表單中建立一個3行2列的表格，在第1行第2列和第2行第2列分別插入一個單行文本框和密碼文本框，用于輸入用戶名和密碼；合并第3行的單元格，并插入一個提交按鈕和一個重置按鈕。

3-4在頁面中建立一個1行2列的表格。在該表格的第1行第1列建立3個超鏈接，在第1行2列插入一個浮動框架，并設置單擊超鏈接后在浮動框架中顯示打開的頁面。ASP動態網頁制作教程第4章ASP開發基礎

本章介紹開發ASP程序需要了解和掌握的基礎知識，主要內容包括ASP基本語法、ASP指令的使用、如何申請域名和空間、發布網站等。通過本章的學習，讀者應掌握ASP文件的結構、代碼編寫格式以及輸出指令和包含指令的使用。

為了更好地維護自己的網站，讀者還應了解申請域名和空間的過程，并能將自己建設的網站發布到互聯網上。主要內容

ASP基本語法4.1ASP指令的使用4.2發布網站4.4申請域名和空間4.3

上機指導4.6小結4.54.1ASP基本語法4.1.1ASP的文件結構

ASP文件是以.asp為擴展名的。在ASP文件中，可以包含以下內容。

（1）HTML標記世間（2）腳本命令（3）ASP代碼（4）文本

4.1.2聲明腳本語言在編寫ASP程序時，可以聲明ASP文件所使用的腳本語言，以通知Web服務器該文件是使用何種腳本語言來編寫程序的。聲明腳本語言有3種方法，下面分別介紹。

1．在IIS中設定默認ASP語言在配置IIS服務器時，可以設置ASP程序所使用的腳本語言。

圖4-1“默認網站屬性”對話框

圖4-2“應用程序配置”對話框

2．使用@LANGUAGE聲明腳本語言在ASP處理指令中，可以使用LANGUAGE關鍵字在ASP文件的開始設置使用的腳本語言。使用這種方法聲明的腳本語言，只作用于該文件，對其他文件不會產生影響。

語法：

<%@LANGUAGE=scriptengine%>

3．通過<script>標記聲明腳本語言通過設置<script>標記中的language屬性值，可以聲明腳本語言。需要注意的是，此聲明只作用于<script>標記。

語法：

<scriptlanguage=scriptenginerunat="server">//腳本代碼

</script>

4.1.3ASP與HTML

在ASP網頁中，ASP程序包含在“<%”和“%>”之間，并在瀏覽器打開網頁時產生動態內容。它與HTML標記兩者互相協作，構成動態網頁。ASP程序可以出現在HTML文件中的任意位置，同時在ASP程序中也可以嵌入HTML標記。

【例4-1】ASP程序中嵌入HTML標記。

【例4-1】ASP程序中嵌入HTML標記。

圖4-3ASP程序中嵌入HTML標記4.2ASP指令的使用

在ASP中通過指令可以完成特定的功能，如向客戶端瀏覽器輸出信息、包含其他文件等。本節介紹輸出指令和#include包含指令的使用。

4.2.1使用輸出指令在ASP文件中，使用輸出指令向客戶端瀏覽器輸出指定的信息。

ASP輸出指令的形式如下：

<%=expression%>

4.2.2使用#include指令包含文件在ASP文件中，可以使用包含指令#include調用指定路徑的其他文件。語法：

<!--#includekeyword=filename-->

在調用#Include指令的語句中，可以使用file或者virtual關鍵字指定文件的相對路徑或者虛擬路徑。下面介紹#includefile與#includevirtual的區別。

（1）如果文件在網站根目錄下，可以使用file或者virtual關鍵字直接引用該文件的名稱。

（2）如果同一站點下有兩個虛擬目錄，分別為ASPWeb1和ASPWeb2，并且在ASPWeb1下的文件需要引用ASPWeb2下的文件，則需要使用virtual關鍵字。

（3）在#includefile語句中使用“../”表示文件的相對路徑；在#includevirtual語句中使用“/”表示相對于網站根目錄的文件相對路徑。4.3申請域名和空間

要將網站放在互聯網上供用戶瀏覽，首先要注冊域名和申請空間。也就是說，要給網站申請一個名字以及一個存放空間，通過這個名字可以讓瀏覽者方便地訪問網站。

4.3.1了解域名域名是互聯網上服務器或網絡系統的名字，域名在全世界具有唯一性。從技術上講，域名只是一種在互聯網中用于解決地址對應問題的方法。

1．什么是域名域名是一個企業或機構在互聯網上的名字，是網絡用戶聯絡企業的唯一途徑。

2．域名的分類在實際應用中把域名分成兩類，一類稱為國際頂級域名（簡稱國際域名），另一類稱為國內域名。

國際域名是由國際管理機構確定的。表4-1 國際域名域名含義域名含義.CC商業.COM商業組織、公司.EDU教研機構.GOV政府部門.MIL軍事機構.NET網絡服務商.BIZ商務組織.ORG非營利組織.INFO信息.INT國際組織表4-2 國家域名國家域名國家域名中國.CN英國.UK韓國.KR日本.JP加拿大.CA德國.DE美國.US法國.FR意大利.IT澳大利亞.AU

3．域名的層次結構域名可分為不同級別，包括頂級域名、二級域名等。

4．域名的命名規則

注冊域名時，首先要明確自己要注冊什么樣的域名，然后根據網上提供的域名注冊步驟就可以完成域名注冊了。完成域名注冊并在域名開通后，就可以在自己的域名上發布網站。

在注冊域名時，域名的命名要符合以下規則。（1）域名中只能包含以下字符：

①26個英文字母；

②0～9這10個數字；

③“-”英文連接符號。

（2）域名中字符的組合規則：

①在域名中，不區分英文字母的大小寫；

②對于一個域名的長度是有一定限制的。

（3）CN下域名命名的規則：

①遵照域名命名的所有規則；

②只能注冊到三級域名，三級域名用字母（A～Z，a～z，大小寫等價）、數字（0～9）和連接符（-）組成，各級域名之間用實點（.）連接，三級域名長度不得超過20個字符。

③不得使用以下名稱：

注冊含有“CHINA”、“CHINESE”、“CN”、“NATIONAL”等須經國家有關部門正式批準的名稱；

其他國家或者地區名稱、外國地名、國際組織名稱不得使用；

縣級以上（含縣級）行政區名稱的全稱或者縮寫要經相關縣級以上（含縣級）人民政府正式批準；

行業名稱或者商品的通用名稱不得使用；

他人已在中國注冊過的企業名稱或者商標名稱不得使用；

對國家、社會或者公共利益有損害的名稱不得使用。

4.3.2注冊域名用戶只有注冊域名后才可以通過網絡訪問自己的網站，下面介紹域名注冊的過程。（1）查詢域名（2）填寫注冊域名申請表（3）注冊域名

4.3.3申請空間注冊域名后，用戶需要為網站申請存放的空間。所謂申請空間，就是為網站申請與互聯網連接的虛擬主機。

1．什么是虛擬主機虛擬主機是使用特殊的軟硬件技術，把一臺計算機主機分成多臺獨立的“虛擬”的主機，每一臺虛擬主機都具有獨立的域名和IP地址（或共享的IP地址），并具有完整的互聯網服務器功能。

虛擬主機的主要功能如下：（1）儲存網站文件；（2）搭建程序的運行環境；（3）配置數據庫；（4）提供Web、FTP、SMTP、NNTP等服務。

2．選擇虛擬主機的類型若想建立一個自己的網上站點，就要選擇適合自身條件的虛擬主機。目前主要有以下4種類型的虛擬主機。

（1）購買個人服務器（2）租用專用