第一章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

1、第一章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ),上網(wǎng)對(duì)人們來(lái)說(shuō)已不再陌生，人們通過(guò)瀏覽網(wǎng)頁(yè)不僅可以獲得最新的新聞、購(gòu)買所需的商品、查詢和檢索網(wǎng)絡(luò)信息與相隔千里的朋友聊天，還可以建立個(gè)人網(wǎng)站宣傳和定位自己，也經(jīng)常用以宣傳企事業(yè)、建立企業(yè)與客戶間溝通的平臺(tái)。 本章主要介紹網(wǎng)頁(yè)、網(wǎng)站的一些基礎(chǔ)知識(shí)和基礎(chǔ)概念，為今后進(jìn)一步建立網(wǎng)站和設(shè)計(jì)網(wǎng)頁(yè)奠定基礎(chǔ)。,本章我們主要學(xué)習(xí)以下三個(gè)內(nèi)容：1.1 基本概念 實(shí)例1－1 網(wǎng)站、網(wǎng)頁(yè)的基本操作與基本概

2、念1.2 網(wǎng)站基礎(chǔ) 實(shí)例1－2 網(wǎng)站分類及特征1.3 網(wǎng)站的體系結(jié)構(gòu) 實(shí)例1—3理解網(wǎng)站體系結(jié)構(gòu),1.1 基本概念,從表面上看，網(wǎng)頁(yè)是由文本、圖片、動(dòng)畫和超鏈接等多種對(duì)象構(gòu)成的多媒體頁(yè)面，但從本質(zhì)上來(lái)說(shuō)，網(wǎng)頁(yè)是使用HTML語(yǔ)言編寫而成的文檔，在Internet中可以通過(guò)瀏覽器程序進(jìn)行瀏覽。,實(shí)例1－1 網(wǎng)站、網(wǎng)頁(yè)的基本操作與基本概念,一、要求與目的★ 熟悉網(wǎng)站訪問(wèn)與網(wǎng)頁(yè)瀏覽的過(guò)程，使學(xué)員在設(shè)計(jì)前有個(gè)感

3、性認(rèn)識(shí)★ 掌握瀏覽器的使用方法★ 掌握網(wǎng)頁(yè)保存、網(wǎng)頁(yè)在線瀏覽、網(wǎng)頁(yè)離線瀏覽的方法★ 理解網(wǎng)址、網(wǎng)站名稱、網(wǎng)頁(yè)、網(wǎng)站、主頁(yè)、URL、WWW、超鏈接、離線瀏覽、在線瀏覽等相關(guān)術(shù)語(yǔ)及基本概念★ 初步了解腳本語(yǔ)言及其作用,二、操作步驟,1．在桌面雙擊IE瀏覽器的圖標(biāo)，啟動(dòng)IE瀏覽器。2．在IE瀏覽器的地址欄中鍵入 http://www.sina.com.cn,進(jìn)入新浪網(wǎng)主頁(yè)，如圖1－1 所示。3. 結(jié)合本例后面知識(shí)點(diǎn)觀察、體會(huì)

4、和分析網(wǎng)頁(yè)4．在 IE瀏覽器中單擊“文件”菜單，選中“另存為”，在彈出的窗口中，默認(rèn)保存位置為“我的文檔”、默認(rèn)文件名為“新浪首頁(yè)”，單擊保存，完成新浪網(wǎng)主頁(yè)的本地保存過(guò)程。 *注釋*：本地一般指瀏覽者所使用的計(jì)算機(jī)。,5．關(guān)閉瀏覽器，打開“我的文檔”，在其中找到剛保存的“新浪首頁(yè)”文件，雙擊文件，再次打開新浪網(wǎng)頁(yè)，完成離線瀏覽過(guò)程。6.在IE瀏覽器中，點(diǎn)擊“查看/查看源文件” 如圖1－2所示，就會(huì)看到“新浪首頁(yè)”的源

5、代碼。如圖1－3所示。,圖1－1 瀏覽網(wǎng)頁(yè),圖1－2 查看網(wǎng)頁(yè)源代碼的方法,圖1－3 新浪首頁(yè)的源代碼,三、本實(shí)例知識(shí)點(diǎn),（一）、基本概念 1、URL URL是“Uniform Resource Locator”的縮寫，中文翻譯為“統(tǒng)一資源定位器”，就是通常所說(shuō)的網(wǎng)址，是指信息資源在Internet上的惟一地址，它提供在Web上訪問(wèn)資源的惟一方法和路徑。這里的信息資源是指在網(wǎng)絡(luò)上能夠獲得的文字、圖形、圖像、動(dòng)畫、

6、程序等信息，這些文件分布在不同的主機(jī)系統(tǒng)上，可能具有不同的文件格式、操作系統(tǒng)、網(wǎng)絡(luò)結(jié)構(gòu)等，因此需要統(tǒng)一訪問(wèn)不同系統(tǒng)資源的方法，這就要采用URL。,URL由協(xié)議類型、存放資源的主機(jī)域名和資源文件三部分組成。Internet上計(jì)算機(jī)間的通信協(xié)議是采用TCP/IP(傳輸控制協(xié)議/網(wǎng)際協(xié)議)。而HTTP(Hypertext Transfer Protocol，超文本傳輸協(xié)議)是用來(lái)在Internet上傳送超文本的傳輸協(xié)議，它運(yùn)行在TCP/IP協(xié)

7、議之上。HTTP定義了信息如何被格式化、如何被傳輸，以及在各種命令下服務(wù)器和瀏覽器所采取的響應(yīng)。其他常用的協(xié)議還有文件傳輸協(xié)議FTP，遠(yuǎn)程登錄協(xié)議Telnet等。 例如，新浪網(wǎng)址http://www.sina.com.cn/index.htm中，http代表所使用的傳輸協(xié)議；www.sina.com.on為主機(jī)名，index.htm為要訪問(wèn)的主頁(yè)的路徑和文件名。 *注釋*：網(wǎng)絡(luò)協(xié)議是指計(jì)算機(jī)網(wǎng)絡(luò)中相互通信的對(duì)等實(shí)

8、體間交換信息時(shí)所必須遵守的規(guī)則集合。,2、網(wǎng)站名稱 任何一個(gè)網(wǎng)站都有一個(gè)除網(wǎng)址外用來(lái)識(shí)別網(wǎng)站的中文或英文名稱，如本例中的“新浪網(wǎng)”名稱。一般情況下，企事業(yè)單位網(wǎng)站中文名稱多為企事業(yè)單位的全稱或中文簡(jiǎn)稱，網(wǎng)站英文名稱多為企事業(yè)單位中文名稱的英文縮寫；但也有用拼音縮寫的。娛樂性網(wǎng)站的名稱取名一般比較自由。3、網(wǎng)頁(yè) 有時(shí)也稱為web頁(yè)或頁(yè)面，網(wǎng)頁(yè)的英文是Webpage，它是指一種存儲(chǔ)在Web服務(wù)器(網(wǎng)站服務(wù)器)上，

9、通過(guò)Web進(jìn)行傳輸，并被瀏覽器所解析和顯示的HTML（一種腳本語(yǔ)言，見后續(xù)章節(jié)）文件。除這個(gè)定義之外，我們還可以從文件、組成等多個(gè)角度對(duì)網(wǎng)頁(yè)進(jìn)行描述：,?從文件的角度講，網(wǎng)頁(yè)是一種由HTML，即超文本標(biāo)記語(yǔ)言編寫而成的特殊的文本文件。所以網(wǎng)頁(yè)文件通常又被稱為HTML文件，它的文件擴(kuò)展名通常為“html”和“htm”。?從網(wǎng)站的角度講，網(wǎng)頁(yè)是網(wǎng)站的基本信息單位，一個(gè)網(wǎng)站通常由眾多的網(wǎng)頁(yè)組成。?從組成元素的角度講，網(wǎng)頁(yè)是由文本、圖片和超

10、鏈接等多種對(duì)象構(gòu)成的多媒體頁(yè)面。如圖1－1所示，新浪主頁(yè)上除了文本、圖片、超鏈接之外，還有F1ash、GIF動(dòng)畫、文本框、按鈕等多種對(duì)象。,4、網(wǎng)站 通常我們把一系列邏輯上可以視為一個(gè)整體的頁(yè)面叫做網(wǎng)站，或者說(shuō)，網(wǎng)站就是一個(gè)鏈接的頁(yè)面集合，它具有共享的屬性，例如相關(guān)主題或共同目標(biāo)。比如新浪網(wǎng)站就是由數(shù)以千計(jì)的網(wǎng)頁(yè)組成，每個(gè)頁(yè)面間通過(guò)超鏈接訪問(wèn)。 網(wǎng)站的概念是相對(duì)的，大可以到“新浪網(wǎng)”這樣的網(wǎng)站，頁(yè)面多得無(wú)法計(jì)數(shù)

11、，而且位于多臺(tái)服務(wù)器上，小可以到一些個(gè)人網(wǎng)站，可能只有零星幾個(gè)網(wǎng)頁(yè)， 僅在某臺(tái)服務(wù)器上占據(jù)很小的空間。5、主頁(yè) 也叫首頁(yè)，主頁(yè)(Homepage)是網(wǎng)站中的一個(gè)特殊頁(yè) 面，它專指一個(gè)網(wǎng)站的首頁(yè)。具體的說(shuō)它是作為一個(gè)組織 或個(gè)人在網(wǎng)絡(luò)上站點(diǎn)開始點(diǎn)的頁(yè)面，其中包含指向其他頁(yè) 面的超鏈接。通常主頁(yè)的名稱是固定的，例如叫做index.htm 或 index.html等。,6、WWW

12、 WWW是“World Wide Web”的縮寫，中文翻譯成“萬(wàn)維網(wǎng)”，可簡(jiǎn)稱Web，是一種基于超文本的、龐大的網(wǎng)絡(luò)信息系統(tǒng)，這些信息分布在世界各地的計(jì)算機(jī)上，通過(guò)Internet連接起來(lái)。大家通過(guò)Internet可以訪問(wèn)萬(wàn)維網(wǎng)信息資源并可進(jìn)行一些操作，如閱讀信息、下載軟件、網(wǎng)絡(luò)游戲、聽音樂、發(fā)送手機(jī)短信或電子郵件等。 *注意*：WWW是通過(guò)互聯(lián)網(wǎng)獲取信息的一種應(yīng)用，我們所瀏覽的網(wǎng)站就是WWW的具體表現(xiàn)形

13、式，但其本身并不就是互聯(lián)網(wǎng)，只是互聯(lián)網(wǎng)的組成部分之一。,7、瀏覽器 瀏覽器是專門用來(lái)定位和訪問(wèn)Web信息的應(yīng)用程序或工具軟件，它的作用是把各種從Web上接收的信息翻譯成合適的屏幕顯示方式呈現(xiàn)在用戶面前。用戶可通過(guò)Web瀏覽器訪問(wèn)Internet上的各種信息資源，如收發(fā)信息、播放動(dòng)畫、視頻和聲音等。 瀏覽器軟件種類較多，常用的有微軟公司的Internet Explorer 即IE瀏覽器、Netscape公司的Net

14、scape Navigator、遨游瀏覽器（Maxthon）等。8、在線瀏覽和離線瀏覽 在線瀏覽就是瀏覽者使用的計(jì)算機(jī)在連接互聯(lián)網(wǎng)的情況下瀏覽網(wǎng)頁(yè)。離線瀏覽通常是指瀏覽者將互聯(lián)網(wǎng)上的資源下載或?qū)⒕W(wǎng)頁(yè)保存在本機(jī)后，在未連接互聯(lián)網(wǎng)的情況下瀏覽網(wǎng)頁(yè)或資源的工作方式。,（二）、網(wǎng)頁(yè)的基本組成 網(wǎng)頁(yè)是由一些部件組成的，知道這些部件是什么是很重要的，因?yàn)樵诰W(wǎng)頁(yè)編寫或設(shè)計(jì)過(guò)程中，主要的任務(wù)就是為每一個(gè)標(biāo)準(zhǔn)的部件選用或編寫相

15、應(yīng)的內(nèi)容，這些部件有的是我們能夠在網(wǎng)頁(yè)中直接看到的，而有的卻是我們不能在網(wǎng)頁(yè)中直接看到的。 1、瀏覽者能夠看到的內(nèi)容 ? 主題：一般情況下，瀏覽器在所顯示網(wǎng)頁(yè)的窗口的標(biāo)題欄上顯示“主題”。網(wǎng)頁(yè)的真正主題并不一定出現(xiàn)在網(wǎng)頁(yè)內(nèi)部，而是作為顯示此網(wǎng)頁(yè)的瀏覽器窗口的標(biāo)題。然而，大多數(shù)網(wǎng)頁(yè)有另一種標(biāo)題，它們表現(xiàn)為屏幕上的文本或圖像，標(biāo)題的作用和在書本或雜志中的作用一樣——位于網(wǎng)頁(yè)中比較醒目且重要的頂部附近，從而給網(wǎng)頁(yè)賦予了名字。,

16、?標(biāo)題：瀏覽器通常以較大字體、粗體或者其他的顯示類型來(lái)突出顯示標(biāo)題。一個(gè)網(wǎng)頁(yè)可以有很多的標(biāo)題，而且標(biāo)題還可以有多達(dá)6層的嵌套深度；也就是說(shuō)，可以有子標(biāo)題、子標(biāo)題的子標(biāo)題等等。?普通文本：是指?組成網(wǎng)頁(yè)的基本內(nèi)容的、多用途的文本。一般情況下將普通文本中的線和塊當(dāng)作“段落”。?簽名：通常顯示在網(wǎng)頁(yè)的底部。簽名標(biāo)識(shí)了網(wǎng)頁(yè)的作者，并且常常還包含作者(或者網(wǎng)絡(luò)管理員)的電子郵件地址，從而使訪問(wèn)者可以發(fā)送有關(guān)此網(wǎng)頁(yè)的評(píng)論或者問(wèn)題。?水平線：是

17、用來(lái)裝飾網(wǎng)頁(yè)的，它將網(wǎng)頁(yè)分割成邏輯上的幾個(gè)部分。,?內(nèi)嵌圖像：是那些嵌入網(wǎng)頁(yè)布局中的圖像，它們讓網(wǎng)頁(yè)變得生動(dòng)活潑，而且使得網(wǎng)頁(yè)的信息量更大。?背景色或樣式：可以是一種單一的顏色，或者是一個(gè)內(nèi)嵌圖像，但是和普通圖像不同的是，它們覆蓋了整個(gè)網(wǎng)頁(yè)的背景，文本和其他圖像就顯示在其上面。?動(dòng)畫：可以是網(wǎng)頁(yè)中出現(xiàn)的文本或者圖片，不同的是它們以某種方式運(yùn)動(dòng)。圖片可以忽隱忽現(xiàn)或者按照簡(jiǎn)單的動(dòng)作進(jìn)行旋轉(zhuǎn)；而文本既可以忽隱忽現(xiàn)，也可以從屏幕上滾動(dòng)而過(guò)。

18、?超級(jí)鏈接：可以鏈接到很多不同的對(duì)象上去，如其他的網(wǎng)頁(yè)、多媒體文件(外部的圖像、動(dòng)畫、聲音、視頻)、文檔文件、電子郵件地址以及文件或者應(yīng)用程序。鏈接還可以引導(dǎo)至當(dāng)前網(wǎng)頁(yè)的某個(gè)特定的位置。?,?圖像地圖：是一些內(nèi)嵌圖像，此圖像的不同區(qū)域下面包含有不同的鏈接。?列表：可以是黑點(diǎn)(就如本行中所示的項(xiàng)目符號(hào)黑色菱形)，或按數(shù)字進(jìn)行的編號(hào)，或者其他圖形。?表單：訪問(wèn)者可以在其中的空白處填寫內(nèi)容，以回復(fù)在線的問(wèn)卷、預(yù)訂貨物等等。2、瀏覽者

19、看不到的內(nèi)容 除了能夠看到的那些內(nèi)容以外，網(wǎng)頁(yè)(或者說(shuō)那些組成此網(wǎng)頁(yè)的文件)還有其他一些元素也可以被包括在內(nèi)。通常，訪問(wèn)者并不能看到這些元素：,?鑒定：網(wǎng)頁(yè)文件可以包含多種鑒定信息，包括作者的名字(和/或電子郵件地址)，以及一些特殊的編碼，這些編碼可以幫助搜索引擎確定網(wǎng)頁(yè)的主題與內(nèi)容。?注釋：是作者希望在直接閱讀網(wǎng)頁(yè)的HTML代碼時(shí)能夠看到的文本，在瀏覽器中是看不到的。注釋通常包括HTML文件的結(jié)構(gòu)或者相關(guān)的注意事項(xiàng)。

20、?JavaScript代碼：在HTML文件內(nèi)，JavaScript的語(yǔ)句行可以給網(wǎng)頁(yè)添加一些特殊的動(dòng)態(tài)性能。?Java applet：以單獨(dú)的文件存在，這種Java程序模塊可以提高訪問(wèn)者、瀏覽器和服務(wù)器之間的交互能力。比如說(shuō)，Java就非常適合于編寫在Web上玩的交互游戲。?圖像地圖和表單處理代碼：用來(lái)處理圖像地圖和交互表單的程序代碼。,1.2 網(wǎng)站基礎(chǔ),網(wǎng)站是互聯(lián)網(wǎng)上最基本的信息發(fā)布平臺(tái)，無(wú)論是公司、企業(yè)、政府、還是個(gè)人都紛紛建立

21、自己的網(wǎng)站來(lái)發(fā)布和收集信息。,實(shí)例1－2 網(wǎng)站分類及特征,一、要求與目的 ★ 通過(guò)瀏覽不同類型的網(wǎng)站，理解網(wǎng)站的分類 ★ 分析和體會(huì)不同類型主題網(wǎng)站的特征和風(fēng)格 ★ 分析不同類型網(wǎng)站的欄目組成和板塊劃分 ★ 掌握網(wǎng)站共性特征,二、操作步驟1、在桌面上啟動(dòng)IE瀏覽器。2、在打開的IE瀏覽器窗口的地址欄中鍵入http://www.yahoo.com.cn，.進(jìn)入著名.的門戶網(wǎng)站――雅虎，.如圖1－.4，.1－.5所示。3、啟動(dòng)

22、一個(gè)新的IE窗口，.在地址欄中鍵入http://www.gansu.gov.cn、進(jìn)入甘肅省人民政府網(wǎng)站，.如圖1－.6所示。4、再啟動(dòng)一個(gè)新的IE窗口，.在地址欄中鍵入http://www.lili.cc ，.進(jìn)入“秘密花園”個(gè)人網(wǎng)站，.如圖1－.7，.1－.8所示。5、觀察、分析和對(duì)比三類網(wǎng)站,圖1－4 雅虎中國(guó)主頁(yè)的上半部分,圖1－5 雅虎中國(guó)主頁(yè)的下半部分,圖1－6 甘肅省人民政府主頁(yè),圖1－7秘密花園個(gè)人網(wǎng)站主頁(yè),圖1－8

23、秘密花園個(gè)人網(wǎng)站欄目頁(yè),三、本實(shí)例知識(shí)點(diǎn) 1．網(wǎng)站分類 網(wǎng)站分類方法很多，大體上有以下幾種分法： 1）、按是否提供網(wǎng)絡(luò)服務(wù)可分為門戶網(wǎng)站和非門戶網(wǎng)站。 門戶網(wǎng)站是通向互聯(lián)網(wǎng)世界的大門，它是指通向各類互聯(lián)網(wǎng)信息資源并提供如電子郵件、網(wǎng)絡(luò)聊天室，新聞組、個(gè)人信息管理等網(wǎng)絡(luò)服務(wù)的網(wǎng)站。幾乎所有的網(wǎng)絡(luò)用戶都需要通過(guò)門戶站點(diǎn)來(lái)查找自己所需的網(wǎng)絡(luò)資源和享受各種網(wǎng)絡(luò)服務(wù)。最著名的門戶網(wǎng)站就是雅虎(YAHO

24、O!，www.yahoo.com.cn)，如圖1－4，圖1－5所示,這類網(wǎng)站一般具有欄目眾多、分類較細(xì)、功能齊全、知名度高等特征。,除雅虎中國(guó)之外，還有很多中國(guó)本土的門戶網(wǎng)站，比如新浪(www.sina.com.cn)、搜狐(www.sohu.com)、網(wǎng)易(www.163.com)、TOM(www.tom.com.cn)等，它們也提供了非常好的網(wǎng)絡(luò)服務(wù)，深受中文用戶的喜愛。門戶網(wǎng)站根據(jù)所提供的服務(wù)又可分為搜索引擎、電子郵件、網(wǎng)絡(luò)聊天室

25、、新聞組和電子公告牌等網(wǎng)站。2）、按照網(wǎng)站所屬部門的性質(zhì)可分為企業(yè)網(wǎng)站、政府網(wǎng)站和個(gè)人網(wǎng)站。 政府網(wǎng)站是一類特殊的網(wǎng)站，因?yàn)樗碇男蜗?，是政府部門對(duì)外發(fā)布信息、實(shí)現(xiàn)電子政務(wù)的基本平臺(tái)。網(wǎng)站在特色上一般具有豐厚的當(dāng)?shù)匚幕厣偷滋N(yùn)，但是作為網(wǎng)站本身，它又少不了所有網(wǎng)站都應(yīng)具有的各種特征。如圖1－6所示。,個(gè)人網(wǎng)站是人們?yōu)榱藵M足個(gè)人的興趣愛好，將自己收集到或者自己創(chuàng)作的東西放到網(wǎng)上與別人分享，以期交到更多與自己興趣相

26、同的朋友而建立的網(wǎng)站。相比于商業(yè)網(wǎng)站或者政府網(wǎng)站，個(gè)人網(wǎng)站更隨意，更為個(gè)性化。如圖1－7、1－8所示。,3）、最為重要也最為直觀的分類方法是按網(wǎng)站的主題來(lái)進(jìn)行分類。 這種分類方法類似于生物學(xué)的分類方法，它將所有的主題按照其從屬關(guān)系建立起一棵分類層次樹，然后每一個(gè)網(wǎng)站根據(jù)其主題被劃分到層次樹上的某一個(gè)節(jié)點(diǎn)之上。比如網(wǎng)站可分為藝術(shù)與人文、休閑與生活、娛樂、電腦與因特網(wǎng)、商業(yè)與經(jīng)濟(jì)等幾個(gè)大類組成了分類樹的第一層，然后在第二層，第一

27、層的每一個(gè)類又被細(xì)分為更多的小類，比如娛樂類又被分為電視、電影、電子賀卡、魔術(shù)、幽默與笑話、KTV與卡拉OK等類。 總之，不同的網(wǎng)站可能屬于不同的類別，也可能在內(nèi)容、服務(wù)和風(fēng)格上千變?nèi)f化、各不相同，但是作為一個(gè)完整的功能實(shí)體，它們既具有許多不同特征又具有很多相同的特征。,2．網(wǎng)站特征 網(wǎng)站種類雖然眾多，它們看起來(lái)具有很大的差異，但實(shí)際上作為網(wǎng)站本身它們又具有許多共同的特征，這些特征從用戶的角度來(lái)看主要表現(xiàn)在以下

28、幾個(gè)方面：有特色的網(wǎng)站標(biāo))志。任何一個(gè)網(wǎng)站都有自己的網(wǎng)站標(biāo))志，)而且都力求自己的網(wǎng)站標(biāo))志標(biāo))新立異、與眾不)同。一個(gè)好的網(wǎng)站標(biāo))志通常具有瑯瑯上口的名)字和令人印象深刻的圖片造型。統(tǒng)一的風(fēng)格。網(wǎng)站內(nèi)網(wǎng)頁(yè)很多，)但是作為一個(gè)整體來(lái)講，)它必須有一個(gè)統(tǒng)一的風(fēng)格。主頁(yè)作為網(wǎng)站最為重要的網(wǎng)頁(yè)，)它的風(fēng)格往往就決定了整個(gè)網(wǎng)站的風(fēng)格。眾多的網(wǎng)頁(yè)。網(wǎng)站是由眾多的網(wǎng)頁(yè)組成的，)所以從某種角度上講，)建設(shè)網(wǎng)站就是制作網(wǎng)頁(yè)。主頁(yè)是整個(gè)網(wǎng)站最為重要

29、的網(wǎng)頁(yè)。便捷的導(dǎo)航系統(tǒng)。導(dǎo)航是一個(gè)網(wǎng)站非常重要的組成部分，)也是衡量—個(gè)網(wǎng)站是否優(yōu)秀的重要標(biāo))準(zhǔn)。,便捷的導(dǎo)航能夠幫助用戶以最快的速度找到自己所需的網(wǎng)頁(yè)。導(dǎo)航系統(tǒng)最常用的實(shí)現(xiàn)方法就是導(dǎo)航條。分層的欄日組織。將網(wǎng)站的內(nèi)容分成若干個(gè)大欄目，)將大欄目分成若干個(gè)小欄目，)再將小欄目分成若干更小的欄目，)這就是網(wǎng)站所用的最簡(jiǎn)單也是最清晰的層次型組織方法。切合主題的內(nèi)容。任何網(wǎng)站都應(yīng)有一個(gè)主題，然后所有的內(nèi)容都圍繞這個(gè)主題展開，不切合主題的

30、內(nèi)容不應(yīng)出現(xiàn)在網(wǎng)站上。比如甘肅省人民政府網(wǎng)站，它所有的內(nèi)容都圍繞政府工作展開，而那些廣告、卡通漫畫、音樂電影等題材顯然不)符合政府的形象，并且過(guò)于龐雜的內(nèi)容往往也很難讓用戶記住這個(gè)網(wǎng)站。,用戶指南和網(wǎng)站動(dòng)態(tài)信息。就好像一個(gè)完整的產(chǎn)品。除了能完成相應(yīng)的功能之外，還應(yīng)該具有相應(yīng)的產(chǎn)品說(shuō)明書，指導(dǎo)用戶如何使用這個(gè)產(chǎn)品。網(wǎng)站也一樣，也需要提供幫助、關(guān)于網(wǎng)站等信息來(lái)幫助用戶了解這個(gè)網(wǎng)站和指)導(dǎo)用戶訪問(wèn)這個(gè)網(wǎng)站。另外，網(wǎng)站還應(yīng)該動(dòng)態(tài)發(fā)布網(wǎng)站建設(shè)的最

31、新信息，以便用戶了解網(wǎng)站的最新變化。能與用戶進(jìn)行雙向交流的欄目。網(wǎng)站是一個(gè)開放的環(huán)境，除了發(fā)布信息之外，還有一個(gè)非常重要的功能就是收集用戶的反饋信息，)與用戶進(jìn)行雙向交流。雙向交流的欄目最常見的實(shí)現(xiàn)方式是E-mail和留言板。網(wǎng)址。任何發(fā)布在因特網(wǎng)上的網(wǎng)站都有自己的網(wǎng)址。,1.3 網(wǎng)站的體系結(jié)構(gòu),實(shí)例1－3 理解網(wǎng)站體系結(jié)構(gòu)一、要求與目的★ 理解WWW客戶機(jī)與WWW服務(wù)器之間的通信過(guò)程★ 理解WWW服務(wù)器工作過(guò)程★ 理解

32、靜態(tài)網(wǎng)頁(yè)請(qǐng)求、動(dòng)態(tài)網(wǎng)頁(yè)請(qǐng)求的不同之處★ 掌握基本體系結(jié)構(gòu)、三層體系結(jié)構(gòu)★ 初步了解數(shù)據(jù)庫(kù)的作用,二、操作步驟 預(yù)先在一臺(tái)計(jì)算機(jī)上安裝IIS并設(shè)置好一個(gè)網(wǎng)站，利用一臺(tái)或多臺(tái)客戶機(jī)瀏覽預(yù)設(shè)網(wǎng)頁(yè)，配合本例知識(shí)點(diǎn)講解網(wǎng)站體系結(jié)構(gòu)。 *注釋*：如未條件，也可通過(guò)訪問(wèn)任意網(wǎng)站配合知識(shí)點(diǎn)相關(guān)圖形演示講解。,三、本實(shí)例知識(shí)點(diǎn) 1、網(wǎng)站體系結(jié)構(gòu) 從網(wǎng)絡(luò)技術(shù)的角度上

33、講，所有的網(wǎng)站都具有相同的體系結(jié)構(gòu)，即WWW客戶機(jī)/服務(wù)器體系結(jié)構(gòu)。如圖1－9所示,圖1－9 網(wǎng)站與客戶機(jī)工作原理,在這種體系結(jié)構(gòu)中，客戶機(jī)僅是已接入Intetnet并具有網(wǎng)頁(yè)瀏覽器的計(jì)算機(jī)。而WWW服務(wù)器相對(duì)復(fù)雜得多，它除了負(fù)責(zé)接收所有來(lái)自客戶機(jī)的訪問(wèn)請(qǐng)求并進(jìn)行相應(yīng)的處理之外，還需要對(duì)自身的資源進(jìn)行合理的配置、管理和優(yōu)化?？蛻魴C(jī)和WWW服務(wù)器可以位于因特網(wǎng)上的任何一個(gè)位置，它們之間通過(guò)標(biāo)準(zhǔn)的HTTP協(xié)議進(jìn)行通信。

34、 從上面的圖中可以看出，客戶機(jī)和WWW服務(wù)器之間的通信通常分為四個(gè)步驟：首先客戶機(jī)通過(guò)瀏覽器向服務(wù)器發(fā)送HTTP請(qǐng)求，請(qǐng)求一個(gè)特定的網(wǎng)頁(yè)；這個(gè)請(qǐng)求通過(guò)Internet傳送到WWW服務(wù)器端；服務(wù)器接收這個(gè)請(qǐng)求，找到所請(qǐng)求的網(wǎng)頁(yè)，然后用HTTP協(xié)議再將這個(gè)網(wǎng)頁(yè)通過(guò)Internet發(fā)送給客戶機(jī)；客戶機(jī)接收這個(gè)網(wǎng)頁(yè)，并將其顯示在瀏覽器中。,2、WWW服務(wù)器工作過(guò)程 在上面的體系結(jié)構(gòu)中，WWW服務(wù)

35、器指的就是網(wǎng)站，它是整個(gè)網(wǎng)站體系結(jié)構(gòu)的核心。它的工作過(guò)程如圖1-10所示。,圖1－10 WWW服務(wù)器的工作過(guò)程,這個(gè)過(guò)程分為三個(gè)步驟，首先是WWW服務(wù)器接收到一個(gè)訪問(wèn)網(wǎng)頁(yè)的請(qǐng)求，然后根據(jù)這個(gè)請(qǐng)求到服務(wù)器上查找相應(yīng)的網(wǎng)頁(yè)，如果找到這個(gè)網(wǎng)頁(yè)就將這個(gè)網(wǎng)頁(yè)提取出來(lái)并發(fā)送給請(qǐng)求的用戶，如果找不到這個(gè)網(wǎng)頁(yè)，就發(fā)送一個(gè)含有錯(cuò)誤信息的網(wǎng)頁(yè)給請(qǐng)求的用戶。 3、二層、三層體系結(jié)構(gòu) 圖1－9所示的WWW服務(wù)是網(wǎng)站基本結(jié)構(gòu)模

36、式，它在網(wǎng)站規(guī)模比較小、網(wǎng)頁(yè)比較簡(jiǎn)單的情況下能夠非常好地滿足用戶和網(wǎng)站建設(shè)者的要求。但是隨著用戶數(shù)量的不斷增多、新的信息海量增長(zhǎng)，從而網(wǎng)站規(guī)模變得越來(lái)越大、網(wǎng)頁(yè)所需要的存儲(chǔ)空間越來(lái)越多、網(wǎng)站的維護(hù)也日益復(fù)雜和困難，這種簡(jiǎn)單的模式就很難滿足各方面的需求。于是動(dòng)態(tài)服務(wù)器技術(shù)產(chǎn)生了，它的產(chǎn)生使得WWW服務(wù)器除了具有基本的WWW服務(wù)功能之外，還能得到數(shù)據(jù)庫(kù)服務(wù)器,和特定應(yīng)用程序的支持來(lái)提供動(dòng)態(tài)的WWW服務(wù)。所以現(xiàn)在的WWW服務(wù)器通常具有三層的體

37、系結(jié)構(gòu)，如圖1-11所示。,圖1-11 服務(wù)器體系結(jié)構(gòu),這三層分別為WWW服務(wù)器層、應(yīng)用程序服務(wù)器層和數(shù)據(jù)庫(kù)服務(wù)器層。這時(shí)的工作過(guò)程如下：當(dāng)WWW服務(wù)器接收到：HTTP請(qǐng)求之后，如果發(fā)現(xiàn)請(qǐng)求的是一個(gè)靜態(tài)的HTML網(wǎng)頁(yè)(即以.htm或.html為擴(kuò)展名的網(wǎng)頁(yè))，WWW服務(wù)器無(wú)需其他服務(wù)器的幫助直接使用基本的WWW服務(wù)即可(圖1-10)。如果發(fā)現(xiàn)請(qǐng)求的是一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)(如ASP、JSP或其他動(dòng)態(tài)網(wǎng)頁(yè))，WWW服務(wù)器就需要將這個(gè)請(qǐng)求轉(zhuǎn)交給應(yīng)用程

38、序服務(wù)器，應(yīng)用程序服務(wù)器根據(jù)需要從數(shù)據(jù)庫(kù)中取出相應(yīng)的數(shù)據(jù)并對(duì)其進(jìn)行相應(yīng)的處理，然后動(dòng)態(tài)生成一個(gè)新的HTML網(wǎng)頁(yè)返回給WWW服務(wù)器，最后再由WWW服務(wù)器通過(guò)HTTP協(xié)議將這個(gè)網(wǎng)頁(yè)傳遞給客戶機(jī)。 目前在實(shí)際中較為常用的兩個(gè)典型的例子是：第一個(gè)是基于Windows網(wǎng)絡(luò)操作系統(tǒng)的IIS WWW服務(wù)器，支持ASP，數(shù)據(jù)庫(kù)服務(wù)器是Microsoft SQL Server，其結(jié)構(gòu)如圖1-12所示：,圖1-12 基于windo

39、ws環(huán)境的服務(wù)器體系結(jié)構(gòu)圖,當(dāng)IIS WWW服務(wù)器接收到ASP網(wǎng)頁(yè)的HTTP請(qǐng)求時(shí)，將其轉(zhuǎn)交給ASP服務(wù)器進(jìn)行解釋執(zhí)行，ASP服務(wù)器在需要時(shí)訪問(wèn)Microsoft SQL Server，然后生成一個(gè)HTML網(wǎng)頁(yè)返回給IIS WWW服務(wù)器，最后由IIS WWW服務(wù)器將這個(gè)HTML網(wǎng)頁(yè)傳送給客戶瀏覽器。 第二個(gè)例子基于Linux操作系統(tǒng)，WWW服務(wù)器為Apache，安裝TOMCAT以支持JSP，數(shù)據(jù)庫(kù)服務(wù)器為MyS

40、QL，其體系結(jié)構(gòu)如圖1-13所示，其工作過(guò)程是類似的。,圖1-13 基于Linux環(huán)境的服務(wù)器體系結(jié)構(gòu)圖,習(xí)題一、選擇題 1. 網(wǎng)站按照不同的分類方法有不同的分類，比如按照網(wǎng)站所屬部門的性質(zhì)可分為 ( )。 A．企業(yè)網(wǎng)站 B．政府網(wǎng)站 C．個(gè)人網(wǎng)站 D．門戶網(wǎng)站 2、門戶網(wǎng)站是為網(wǎng)絡(luò)用戶提供各種便捷網(wǎng)絡(luò)服務(wù)的網(wǎng)站，請(qǐng)問(wèn)下面哪二種網(wǎng)絡(luò)服務(wù)通 常不是門戶網(wǎng)

41、站所提供的服務(wù)?( ) A．電子郵件 B．網(wǎng)頁(yè)搜索 C一網(wǎng)絡(luò)聊天室 D．火車時(shí)刻查詢 3、 下面哪一個(gè)網(wǎng)站不屬于門戶網(wǎng)站?( ) A．首都之窗 B．新浪網(wǎng) C．搜狐網(wǎng) D．雅虎中國(guó) 4、 不同的網(wǎng)站雖然風(fēng)格各異，所提供的內(nèi)容與服務(wù)也千差萬(wàn)別，但是它們作為網(wǎng)站本 身仍具有很多共同的特征，這些特征包括(

42、 )等。 A．網(wǎng)站標(biāo)志 B．統(tǒng)一的風(fēng)格 C．導(dǎo)航系統(tǒng) D．切合主題的內(nèi)容,5、 從網(wǎng)絡(luò)技術(shù)的角度上講，網(wǎng)站的體系結(jié)構(gòu)是WWW客戶機(jī)/服務(wù)器體系結(jié)構(gòu)。在這個(gè)結(jié)構(gòu)中，最為核心的部分是( )。 A、WWW客戶機(jī) B、因特網(wǎng) C、WWW服務(wù)器

43、 D、應(yīng)用程序服務(wù)器6、通常網(wǎng)站的首頁(yè)被稱為( )。 A、主頁(yè) B、網(wǎng)頁(yè) C、頁(yè)面 D、網(wǎng)址7、網(wǎng)頁(yè)的基本語(yǔ)言是( )。 A、JavaScript B、VBScript C、HTML D、XML8、瀏覽網(wǎng)頁(yè)的工具被稱為瀏覽器，目前最為流行的瀏覽器有兩種，其中一種就是微軟公司開發(fā)的( )瀏覽器。 A、Navigator

44、B、IE C、WebBrowser D、PageViewer9、 IE瀏覽器除了瀏覽網(wǎng)頁(yè)的功能之外，還具有很多非常有用的功能。請(qǐng)問(wèn)下面哪一項(xiàng)不是IE瀏覽器所具備的功能?( ) A、保存網(wǎng)頁(yè) B、查看網(wǎng)頁(yè)源代碼 C、保存網(wǎng)頁(yè)中的圖片 D、保存整個(gè)網(wǎng)站10、網(wǎng)頁(yè)在Internet上是通過(guò)URL來(lái)指明其所在的

45、位置的，每個(gè)不同的網(wǎng)頁(yè)都應(yīng)該有不同的URL，比如263網(wǎng)站主頁(yè)的URL就是( )。 A、http://www.263.com B、http:\\www.263.com C、ftp://www.263.com D、mailto:WWW.263.com,二、簡(jiǎn)答題1、幾乎所有的門戶網(wǎng)站都采用按主題分類的方式將因特網(wǎng)的網(wǎng)站進(jìn)行分類。訪問(wèn)雅虎中國(guó)(cn.yah

46、oo.com)，然后簡(jiǎn)述雅虎中國(guó)都有哪些主要的主題分類?2、試分別瀏覽任意的門戶網(wǎng)站、企業(yè)網(wǎng)站、政府網(wǎng)站、個(gè)人網(wǎng)站、娛樂網(wǎng)站，比較一下說(shuō)說(shuō)它們都有哪些共同的特征?3、簡(jiǎn)述WWW客戶機(jī)和WWW服務(wù)器之間的通信過(guò)程。4、簡(jiǎn)述三層結(jié)構(gòu)的服務(wù)器體系工作過(guò)程。 5、網(wǎng)頁(yè)通常都有哪些組成元素? 6、網(wǎng)頁(yè)和主頁(yè)有什么區(qū)別? 7、如何用IE瀏覽器來(lái)訪問(wèn)搜狐網(wǎng)的主頁(yè) (http://www