第一章Web網站架構與HTML基礎王張宜wzy@武漢大學計算機學院第一章Web網站架構與

HTML基礎王張宜wzy@武漢大學計算機學院1/42內容提要網頁設計與制作22/42/10/10Web特點和結構Web服務器配置創(chuàng)建虛擬目錄HTML基礎Web特點和結構網頁設計與制作33/42/10/10本章介紹WWW概念、Web服務器配置、創(chuàng)建虛擬目錄和瀏覽器IE配置。一、WWW概念1.什么是WWW？WWW是World

Wide

Web縮寫，簡稱為Web（萬維網）。WWW起源于1989年3月，是由歐洲粒子物理試驗室CERN

(the

European

Laboratory

for

ParticlPhysics)開發(fā)主從結構分布式（“客戶機/服務器”式）超文本系統。1992年1月，Web第一個版本在瑞士日內瓦問世。WWW是一個全球性信息系統，使計算機能夠在Internet上相互傳送基于超媒體數據信息。WWW也能夠用來建立Intranet（企業(yè)內部網）信息系統。

WWW含有三個統一：1.統一資源命名方式：URL（統一資源定位符，即網址）。2.統一資源訪問方式：HTTP

（超文本傳輸協議）。3.統一信息組織方式：HTML（超文本標識語言）。Web特點和結構網頁設計與制作44/42/10/10WWW是一個全球性信息系統，使計算機能夠在Internet上相互傳送基于超媒體數據信息。WWW也能夠用來建立Intranet（企業(yè)內部網）信息系統。WWW含有三個統一：統一資源命名方式：URL（統一資源定位符，即網址）。統一資源訪問方式：HTTP

（超文本傳輸協議）。統一信息組織方式：HTML（超文本標識語言）。Web特點和結構網頁設計與制作55/42/10/10URL（統一資源定位符）主要用來指明通信協議和地址方式，以取得網絡上各種服務，它包含通信協議（Protocol）、主機名、所要訪問文件路徑和文件名等幾個部分。

統一資源定位符（URL）是用于完整地描述Internet上網頁和其它資源地址一個標識方法。

Internet上每一個網頁都含有一個唯一名稱標識，通常稱之為URL地址，這種地址能夠是當地磁盤，也能夠是局域網上某一臺計算機，更多是Internet上站點。簡單地說，URL就是Web地址，俗稱“網址”。URL（統一資源定位符）URL由三部分組成：協議類型，主機名和路徑及文件名。

protocol://hostname[:port]/path/[;parameters][?query]#fragment協議類型：經過URL能夠指定主要有以下幾個：http、ftp、telnet、file等，包含新出現ed2k、Flashget、thunder、tencent、msnim等。hostname（主機名）：是指存放資源服務器域名系統(DNS)主機名或IP地址。有時，在主機名前也能夠包含連接到服務器所需用戶名和密碼（格式：username:password）。path（路徑）：由零或多個“/”符號隔開字符串，普通用來表示主機上一個目錄或文件地址。Web特點和結構網頁設計與制作66/42/10/10URL（統一資源定位符）URL由三部分組成：協議類型，主機名和路徑及文件名。protocol

://

hostname[:port]

/

path

/[;parameters][?query]#fragment

協議類型：經過URL能夠指定主要有以下幾個：http、ftp、

telnet、file等，包含新出現ed2k、Flashget、thunder、tencent、msnim等。

hostname（主機名）：是指存放資源服務器域名系統(DNS)主機名或

IP

地址。有時，在主機名前也能夠包含連接到服務器所需用戶名和密碼（格式：username:password）。

path（路徑）：由零或多個“/”符號隔開字符串，普通用來表示主機上一個目錄或文件地址。URL（統一資源定位符）示例http://rfc.sunsite.dk/rfc/rfc1738.html

:80/wiki/Special:Search?search=鐵路&go=Gohttp，是協議；

，是服務器；

80，是服務器上網絡端口號；/wiki/Special:Search，是路徑；?search=鐵路&go=Go，是問詢。Web特點和結構網頁設計與制作77/42/10/10URL（統一資源定位符）示例http://rfc.sunsite.dk/rfc/rfc1738.html:80/wiki/Special:Search?search=&go=Gohttp，是協議；，是服務器；80，是服務器上網絡端口號；/wiki/Special:Search，是路徑；?search=鐵路&go=Go，是問詢。超級文本超級文本（Hypertext）與普通文本不一樣，它是一個使用戶與計算機之間能夠愈加親密交流文本顯示技術，它經過對相關詞匯進行索引鏈接，能夠使帶鏈接詞匯或語句指向文本中其它段落、注解或文本。用戶能夠沿著超級文本中索引鏈接跳轉閱讀，也能夠隨時返回到原來閱讀之處。超級文本出現，使計算機中文本展現出嶄新面目。HTTP：超文本傳輸協議Web特點和結構網頁設計與制作88/42/10/10超級文本超級文本（Hypertext）與普通文本不一樣，它是一個使用戶與計算機之間能夠愈加親密交流文本顯示技術，它經過對相關詞匯進行索引鏈接，能夠使帶鏈接詞匯或語句指向文本中其它段落、注解或文本。用戶能夠沿著超級文本中索引鏈接跳轉閱讀，也能夠隨時返回到原來閱讀之處。超級文本出現，使計算機中文本展現出嶄新面目。HTTP：超文本傳輸協議Protocol，一組在網絡上發(fā)送信息規(guī)則和約定。這些規(guī)則控制在網絡設備間交換消息內容、格式、定時、次序和錯誤控制。通俗說就是不一樣網絡程序交流語言，我們常見OICQ使用UDP協議、ICQ使用TCP協議、E-mail程序使用POP3和SMTP協議，正像我們國人使用漢語一樣Web特點和結構網頁設計與制作99/42/10/10Protocol，一組在網絡上發(fā)送信息規(guī)則和約定。這些規(guī)則控制在網絡設備間交換消息內容、格式、定時、次序和錯誤控制。通俗說就是不一樣網絡程序交流語言，我們常見OICQ使用UDP協議、ICQ使用TCP協議、E-mail程序使用POP3和SMTP協議，正像我們國人使用漢語一樣Web特點和結構網頁設計與制作1010/42/10/10HTMLHTML（Hypertext

Markup

Language，超級文本標識語言）一個用來制作網絡中超級文本簡單標識語言。它是在文本文件基礎上加上一系列標識，用以描述其顏色、字體、文字大小和格式，再加上聲音、圖像、動畫甚至視頻等形成精彩頁面。嚴格來說，

HTML語言并不是一個編程語言，只是一些能讓瀏覽器看懂標識。當用戶瀏覽WWW上包含HTML語言標簽網頁時，瀏覽器會“翻譯”由這些HTML語言標簽提供網頁結構、外觀和內容信息，并

按照一定格式在屏幕上顯示出來。HTML是在客戶端被執(zhí)行，它

包含許多HTML標簽（標識），這些標簽都包含在“<”和“>”符號里，而且大部分是成對出現。2.WWW特點分布式信息資源。統一用戶界面。支持各種信息資源和各種媒體演播。廣泛用途。Web特點和結構網頁設計與制作1111/42/10/102.WWW特點分布式信息資源。統一用戶界面。支持各種信息資源和各種媒體演播。廣泛用途。3.WWW結構WWW是成千上萬個網站連結而成頁面式網絡信息系統。WWW采取“客戶機/服務器”結構。Web特點和結構3.WWW結構WWW是成千上萬個網站連結而成頁面式網絡信息系統。WWW采取“客戶機/服務器”結構。網頁設計與制作1212/42/10/10網頁存放在被稱為Web服務器(Web

Server)計算機上，等候用戶訪問。Web特點和結構網頁存放在被稱為Web服務器(Web

Server)計算機上，等候用戶訪問。網頁設計與制作1313/42/10/10Web特點和結構網頁設計與制作1414/42/10/104.Web技術經歷了3個發(fā)展階段第一代，提供對靜態(tài)網頁管理和訪問。第二代，提供對動態(tài)網頁訪問和顯示。第三代，除動態(tài)網頁生成和訪問之外，還提供基于Web聯機事務處理能力。l

靜態(tài)網頁是從放置到服務器以后，直到發(fā)送給瀏覽器不會發(fā)生更改網頁，通慣用HTML語言

編寫其代碼，保留為.htm文件。l

動態(tài)網頁是在發(fā)送到瀏覽器之前由應用程序服務器修改網頁。動態(tài)網頁源文件可用HTML語言和VBscript或Javascript等腳本語言編寫，保留為.asp文件，也稱為Web應用程序。靜態(tài)網頁指是HTML網頁，即用HTML語言編寫網頁，它是全部其它網頁技術基礎。網頁中全部對象，包含文字、圖片、超鏈接、Flash動畫、表格、列表等都需要經過HTML才能展現出來。Web特點和結構網頁設計與制作1515/42/10/10靜態(tài)網頁指是HTML網頁，即用HTML語言編寫網頁，它是全部其它網頁技術基礎。網頁中全部對象，包含文字、圖片、超鏈接、

Flash動畫、表格、列表等都需要經過HTML才能展現出來。Web

應用程序是用HTML語言和VBscript或Javascript等腳本語言編寫動態(tài)網頁源文件，也稱為服務器端腳本。當從服務器請求這么一個頁時，Web服務器先將該頁傳遞給應用程序服務器進行處理，然后再將該頁發(fā)送給瀏覽器。應用程序服務器是一個軟件，它幫助Web服務器處理Web

應用程序，方便生成動態(tài)網頁。

ASP（Active

Server

Page動態(tài)服務器網頁）是Windows系統所包含應用程序服務器軟件。Web特點和結構網頁設計與制作1616/42/10/10

Web應用程序是用HTML語言和VBscript或Javascript

等腳本語言編寫動態(tài)網頁源文件，也稱為服務器端腳本。當從服務器請求這么一個頁時，Web服務器先將該頁傳遞給應用程序服務器進行處理，然后再將該頁發(fā)送給瀏覽器。

應用程序服務器是一個軟件，它幫助Web服務器處理Web應用程序，方便生成動態(tài)網頁。

ASP（Active

Server

Page動態(tài)服務器網頁）是Windows系統所包含應用程序服務器軟件。Web特點和結構網頁設計與制作1717/42/10/10動態(tài)服務器網頁是在WWW服務器端動態(tài)生成網頁技術，ASP、JSP、PHP等都屬于動態(tài)服務器網頁技術。動態(tài)服務器網頁普通都需要經過訪問數據庫（或文本類文件）來實現網頁生成，系統中有一臺單獨數據庫服務器，也能夠將WWW服務器與數據庫服

務器合二為一。二、Web服務器配置1.什么是Web

服務器？Web

服務器也稱為HTTP

服務器，它是響應來自瀏覽器請求，而且發(fā)送出網頁軟件。當訪問者在瀏覽器地址文本框中輸入一個URL，或者單擊在瀏覽器中打開網頁上某個鏈接時，便生成一個網頁請求。常見Web

服務器有：Microsoft

Internet

Information

Server（IIS）Microsoft

Personal

Web

Server(PWS)Apache

HTTP

ServerNetscape

Enterprise

ServerSun

ONE

Web

Server。Web服務器配置網頁設計與制作1818/42/10/10二、Web服務器配置1.什么是Web服務器？Web服務器也稱為HTTP服務器，它是響應來自瀏覽器請求，而且發(fā)送出網頁軟件。當訪問者在瀏覽器地址文本框中輸入一個URL，或者單擊在瀏覽器中打開網頁上某個鏈接時，便生成一個網頁請求。常見Web服務器有：l

Microsoft

Internet

Information

Server（IIS）l

Microsoft

Personal

Web

Server(PWS)l

Apache

HTTP

Serverl

Netscape

Enterprise

Serverl

Sun

ONE

Web

Server。2.五種常見Web應用程序服務器Dreamweaver能夠使用以下五種服務器技術任何一個設計Web

應用程序：ColdFusion（可用于Windows和Solaris操作系統平臺動態(tài)服務器網頁技術）ASP

（Active

ServerPage：動態(tài)服務器網頁技術）ASP.NET

（.NET平臺動態(tài)服務器網頁技術）JSP

（Java

Server

Page

：Java服務器網頁技術）PHP

（Personal

Home

Page：個人主頁技術）每種技術都與Dreamweaver

中一個文檔類型相對應。Web服務器配置網頁設計與制作1919/42/10/102.五種常見Web應用程序服務器Dreamweaver能夠使用以下五種服務器技術任何一個設計Web應用程序：l

ColdFusion（可用于Windows和Solaris操作系統平臺動態(tài)服務器網頁技術）l

ASP

（Active

Server

Page：動態(tài)服務器網頁技術）l

ASP.NET

（.NET平臺動態(tài)服務器網頁技術）l

JSP

（Java

Server

Page：Java服務器網頁技術）l

PHP

（PersonalHome

Page：個人主頁技術）每種技術都與Dreamweaver中一個文檔類型相對應。Web服務器配置ASP、JSP、PHP比較網頁設計與制作2020/42/10/10選擇哪一個Web

應用程序技術取決于多個原因，其中包含對各種腳本語言熟悉程度以及要使用應用程序服務器。假如采取ColdFusion

MX服務器，則能夠選擇ColdFusion

。假如采取IIS服務器，則能夠選擇ASP或ASP.NET。假如采取PHP服務器，則能夠選擇PHP；假如采取JSP服務器，則能夠選擇JSP。本課程選擇了WindowsASP動態(tài)網頁技術。Web服務器配置選擇哪一個Web應用程序技術取決于多個原因，其中包含對各種腳本語言熟悉程度以及要使用應用程序服務器。n假如采取ColdFusion

MX服務器，則能夠選擇

ColdFusion。n假如采取IIS服務器，則能夠選擇

ASP或ASP.NET。n假如采取PHP服務器，則能夠選擇

PHP；n假如采取JSP服務器，則能夠選擇

JSP。本課程選擇了WindowsASP動態(tài)網頁技術。網頁設計與制作2121/42/10/10Web服務器配置3.兩種Web系統配置方案網頁設計與制作2222/42/10/10一個配置是將IIS或PWS安裝在地Windows計算機硬盤中，另一個將IIS或PWS安裝在遠程Windows

算機硬盤中。Web服務器配置網頁設計與制作2323/42/10/104.怎樣用Windows操作系統建立Web服務器？能夠安裝以下系統之一：Windows/Server和IIS

5.0。Windows

XP和IIS

5.1。Windows98/Professional和PWS。其中IIS：Internet

Information

Service（Internet信息服務器）；PWS：Personal

WebService（個人Web服務）。Windows/Server和IIS

5.0安裝在Windows

Server軟件里帶有IIS

5.0。插入Windows

Server光盤，自動開啟，按照提醒進行安裝，同時自動安裝IIS

5.0

。Windows

Server不自動安裝IIS。若要安裝IIS，能夠單擊“開始”?“程序”?“管理工具”?“配置服務器”，選擇“高級”選項，打開顯示可供安裝組件對話框；也能夠在控制面板中使用“添加/刪除程序”。Web服務器配置網頁設計與制作2424/42/10/10Windows/Server和IIS

5.0安裝l在Windows

Server軟件里帶有IIS

5.0。插入Windows

Server光盤，自動開啟，按照提醒進行安裝，同時自動安裝IIS

5.0。l

Windows

Server不自動安裝IIS。若要安裝IIS，能夠單擊“開始”?“程序”?“管理工具”?“配置服務器”，選擇“高級”選項，打開顯示可供安裝組件對話框；也能夠在控制面板中使用“添加/刪除程序”。注意，因為ASP處理程序會伴隨IIS自動安裝。所以，運行ASP應用程序服務器會伴隨Web服務器建立而自動地建立。Web服務器配置注意，因為ASP處理程序會伴隨IIS自動安裝。所以，運行ASP應用程序服務器會伴隨Web服務器建立而自動地建立。網頁設計與制作2525/42/10/10怎樣在Windows

XP中安裝IIS（1）單擊“開始”>“控制面板”，雙擊“添加或刪除程序”；（2）單擊“添加/刪除Windows

組件”；（3）出現“Windows

組件向導”，單擊“下一步”；（4）在“Windows

組件”列表中，選中“Internet

信息服務(IIS)”；（5）單擊“下一步”，然后依據提醒操作。在安裝后，能夠開啟瀏覽器，輸入地址：localhost。若顯示其網頁，則表示IIS正常安裝。Web服務器配置怎樣在Windows

XP中安裝IIS單擊“開始”>“控制面板”，雙擊“添加或刪除程序”；單擊“添加/刪除Windows組件”；出現“Windows組件向導”，單擊“下一步”；在“Windows組件”列表中，選中

“Internet信息服務(IIS)”；單擊“下一步”，然后依據提醒操作。在安裝后，能夠開啟瀏覽器，輸入地址：localhost。若顯示其網頁，則表示IIS正常安裝。演示網頁設計與制作2626/42/10/105.服務器上根文件夾Inetpub\wwwroot\假定讀者在計算機D:盤中安裝了Windows

XP操作系統。那末，該系統會自動創(chuàng)建根文件夾D:\Inetpub\wwwroot\。默認情況下，Web

服務器從D:\Inetpub\wwwroot

文件夾提供網頁。Web

服務器將依據來自Web

瀏覽器HTTP

請求，提供此文件夾中任何頁或其子文件夾中任何頁。在D:\Inetpub\wwwroot

文件夾中能夠創(chuàng)建子文件夾，比如“MyPage”用以存放一組網頁源文件。Web服務器配置5.服務器上根文件夾Inetpub\wwwroot\假定讀者在計算機D:盤中安裝了Windows

XP操作系統。那末，該系統會自動創(chuàng)建根文件夾D:\Inetpub\wwwroot\。默認情況下，Web服務器從D:\Inetpub\wwwroot文件夾提供網頁。Web服務器將依據來自Web瀏覽器HTTP請求，提供此文件夾中任何頁或其子文件夾中任何頁。在D:\Inetpub\wwwroot文件夾中能夠創(chuàng)建子文件夾，比如“MyPage”用以存放一組網頁源文件。演示網頁設計與制作2727/42/10/106.怎樣設置默認網站主目錄（根文件夾）（1）單擊“開始”?“控制面板”?“性能和維護”?“管理工具”?“Internet

信息服務”；展開“當地計算機”列表，展開“Web站點”文件夾，然后展開“默認Web站點”文件夾，右擊“默認網站”；單擊“屬性”。（2）輸入默認網站IP地址（若本機作Web服務器，則用）。（3）輸入默認網站主目錄，以及為該文件夾設置腳本權限。現在已完成了Web服務器配置，它將依據瀏覽器請求，提供根文件夾中網頁。假如建立網頁文件test.htm，將它存放到本機默認網站主目錄d:\inetpub\wwwroot下。那末，其瀏覽地址為：\test.htm。Web服務器配置6.怎樣設置默認網站主目錄（根文件夾）單擊“開始”?“控制面板”?“性能和維護”?“管理工具

”?“Internet信息服務”；展開“當地計算機”列表，展開

“Web站點”文件夾，然后展開“默認Web站點”文件夾，右擊

“默認網站”；單擊“屬性”。輸入默認網站IP地址（若本機作Web服務器，則用）。輸入默認網站主目錄，以及為該文件夾設置腳本權限?，F在已完成了Web服務器配置，它將依據瀏覽器請求，提供根文件夾中網頁。假如建立網頁文件test.htm，將它存放到本機默認網站主目錄d:\inetpub\wwwroot下。那末，其瀏覽地址為：

\test.htm。演示網頁設計與制作2828/42/10/10三、怎樣創(chuàng)建虛擬目錄1.存放網頁源文件兩種做法將網頁文件保留到默認網站主目錄里，如上節(jié)所述，默認網站主目錄直接采取Windows系統已經建立d:\Inetpub\wwwroot根文件夾。將網頁文件保留到默認網站主目錄之外。這就需要建立一個虛擬目錄，在建立虛擬目錄過程中指定虛擬目錄及其實際目錄，從而建立虛擬目錄和實際目錄聯絡。創(chuàng)建虛擬目錄網頁設計與制作2929/42/10/10三、怎樣創(chuàng)建虛擬目錄1.存放網頁源文件兩種做法將網頁文件保留到默認網站主目錄里，如上節(jié)所述，默認網站主目錄直接采取Windows系統已經建立d:\Inetpub\wwwroot根文件夾。將網頁文件保留到默認網站主目錄之外。這就需要建立一個虛擬目錄，在建立虛擬目錄過程中指定虛擬目錄及其實際目錄，從而建立虛擬目錄和實際目錄聯絡。2.什麼是虛擬目錄虛擬目錄是實際目錄別名，它代表存放網頁實際目錄，方便用在網址中代替實際目錄。虛擬目錄名稱能夠與實際目錄名稱相同，也能夠不一樣。虛擬目錄在磁盤目錄中并不存在，實際目錄是存放網頁內容目錄。比如，存放網頁文件test.htm實際目錄為d:\x1，若為該目錄設置一個別名，即虛擬目錄zhang，則虛擬目錄Zhang就能夠用在網址

\zhang\test.htm中代表存放網頁實際目錄d:\x1。創(chuàng)建虛擬目錄網頁設計與制作3030/42/10/102.什麼是虛擬目錄虛擬目錄是實際目錄別名，它代表存放網頁實際目錄，方便用在網址中代替實際目錄。虛擬目錄名稱能夠與實際目錄名稱相同，也能夠不一樣。虛擬目錄在磁盤目錄中并不存在，實際目錄是存放網頁內容目錄。比如，存放網頁文件test.htm實際目錄為d:\x1，若為該目錄設置一個別名，即虛擬目錄zhang，則虛擬目錄Zhang就能夠用在網址\zhang\test.htm中代表存放網頁實際目錄d:\x1。3.設置默認網站虛擬目錄單擊“開始”?“控制面板”?“性能和維護”?“管理工具”?“Internet

信息服務”；展開，右擊“默認網站”；單擊“新建”>“虛擬目錄”。詳細創(chuàng)建過程參見教材圖1-7~圖1-12。創(chuàng)建虛擬目錄3.設置默認網站虛擬目錄單擊“開始”?“控制面板”?“性能和維護”?“管理工具”?“Internet信息服務”；展開，右擊“默認網站”；單擊“新建”>“虛擬目錄”。詳細創(chuàng)建過程參見教材圖1-7~圖1-12。演示網頁設計與制作3131/42/10/10四、網頁瀏覽器IE配置瀏覽器IE配置能夠使用瀏覽器“工具”和“Internet選項”菜單命令進行設置，也能夠經過修改操作系統注冊表進行設置。本節(jié)介紹怎樣使用“工具”和“Internet選項”進行以下設置。1.設置Internet連接（1）開啟Internet

Explorer。（2）單擊“工具”?“Internet

選項”。出現Internet

選項對話框。（3）單擊“連接”選項卡?單擊“建立連接”。（4）按照屏幕上提醒操作。瀏覽器IE配置四、網頁瀏覽器IE配置瀏覽器IE配置能夠使用瀏覽器“工具”和“Internet選項”菜單命令進行設置，也能夠經過修改操作系統注冊表進行設置。本節(jié)介紹怎樣使用“工具”和“Internet選項”進行以下設置。1.設置Internet連接開啟Internet

Explorer。單擊“工具”?“Internet選項”。出現

Internet選項對話框。單擊“連接”選項卡?單擊“建立連接”。按照屏幕上提醒操作。演示網頁設計與制作3232/42/10/10瀏覽器IE配置2.設置起始頁面單擊IE菜單欄中“工具”>“Internet選項

”出現Internet選項對話框。輸入“主頁”“地址”，比如

，單擊“確定”。3.設置IE緩存在“Internet選項”對話框中，單擊“設置”，出現“設置”對話框。能夠設置IE緩存

“使用磁盤空間”等。演示網頁設計與制作3333/42/10/10瀏覽器IE配置4.IE安全設置在“Internet選項”對話框中，單擊“安全”，出現“安全設置”對話框。其中主要包含ActiveX控件和插件、Java權限、JavaApplet和腳本、Cookies、文件下載或用戶驗證設置，可選擇“禁用”或“啟用”等。5.調整自動完成功效設置在IE“工具”菜單上，單擊“Internet選項”；單擊“內容”標簽；在“個人信息”區(qū)域，單擊“自動完成”；選中要應用“自動完成”功效選項前面復選框。演示網頁設計與制作3434/42/10/106.去除已訪問過網頁為了加緊瀏覽速度，IE會自動把瀏覽過網頁保留在系統盤＼Temporary

Internet

Files文件夾內。當用戶不再需要這些網頁時，在該文件夾下全選且刪除即可。或者，在“常規(guī)”標簽下單擊“Internet暫時文件”項目標“刪除文件”按鈕，選中“刪除全部脫