地理學(xué)科網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)胡寶請(qǐng) 伍詩(shī)源廣西師范學(xué)院資源與環(huán)境科學(xué)學(xué)院［摘要］互聯(lián)網(wǎng)技術(shù)的發(fā)展，以多媒體和國(guó)際互聯(lián)網(wǎng)為代表的當(dāng)代信息技術(shù)，正以驚人的速度改變著人們的生存方式和學(xué)習(xí)方式?，F(xiàn)代互聯(lián)網(wǎng)技術(shù)

地理學(xué)科網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

胡寶請(qǐng) 伍詩(shī)源

廣西師范學(xué)院資源與環(huán)境科學(xué)學(xué)院

［摘要］互聯(lián)網(wǎng)技術(shù)的發(fā)展，以多媒體和國(guó)際互聯(lián)網(wǎng)為代表的當(dāng)代信息技術(shù)，正以驚人的速度改變著人們的生存方式和學(xué)習(xí)方式。現(xiàn)代互聯(lián)網(wǎng)技術(shù)的廣泛應(yīng)用 ，打破了科研教學(xué)上的封閉狀態(tài) ，步入了資源共享的新時(shí)代。本文介紹了地理學(xué)科網(wǎng)站建設(shè)的總體過(guò)程，對(duì)網(wǎng)站的整體設(shè)計(jì)、后臺(tái)建設(shè)、網(wǎng)站的功能實(shí)現(xiàn)及搜索引擎優(yōu)化等做了初步的探索。

[關(guān)鍵詞]地理學(xué)科；網(wǎng)站；網(wǎng)站建設(shè)；設(shè)計(jì)；實(shí)現(xiàn)

The Design and Realization of the Website of Geography Subject Abstract: The present information technology characterized by multimedia and Internet is changing people’s life style and study method with the surprising rapidity. The extensive application of modern Internet breaks the enclosed state of scientific education， and is moving into a new era of resources-sharing. This thesis introduces the whole process of the establishment of geography websites， and initially explores the integrated design of websites， the establishment of backstage， the function achievement of websites and the searching of optimizing engine and so on.

Key words: geography subject; website; website establishment; design; realization

1引言

互聯(lián)網(wǎng)日益普及，使得網(wǎng)絡(luò)向社會(huì)生活的滲透明顯提速。網(wǎng)上學(xué)校、商場(chǎng)、圖書(shū)館、大量增加，互聯(lián)網(wǎng)服務(wù)形式和內(nèi)容從深度和廣度上不斷擴(kuò)展，人們足不出戶就可以自由輕松地在網(wǎng)上進(jìn)行辦公、娛樂(lè)、購(gòu)物、教育等活動(dòng)。互聯(lián)網(wǎng)不僅提升了人們的生活質(zhì)量和工作效率，而且改變了人們的生活、工作和思維方式，它已經(jīng)從最初的輔助性工具開(kāi)始逐漸成為很多人日常生活、工作和學(xué)習(xí)的重要組成部分。網(wǎng)絡(luò)技術(shù)可以把大量生動(dòng)豐富多彩的文字、圖表、圖像、動(dòng)畫(huà)、影片和錄像片等各種各樣的多媒體資源形象，直觀地呈現(xiàn)在學(xué)生的面前，使學(xué)生視聽(tīng)并舉，加深、加快感知和理解，為學(xué)生創(chuàng)設(shè)生動(dòng)的學(xué)習(xí)情境。利用超級(jí)鏈接結(jié)構(gòu)可以實(shí)現(xiàn)教學(xué)信息的靈活獲取以及教學(xué)過(guò)程和教學(xué)結(jié)構(gòu)的重新組織，適合于不同層次學(xué)生的學(xué)習(xí)需要，有利于因材施教。地理學(xué)科網(wǎng)站作為學(xué)科網(wǎng)站，是以學(xué)生自主學(xué)習(xí)、教學(xué)互動(dòng)、學(xué)習(xí)交流的重要平臺(tái)。建設(shè)一個(gè)美觀實(shí)用、內(nèi)容豐富、特色鮮明的學(xué)科網(wǎng)站，網(wǎng)站的整體設(shè)計(jì)要跟上。從目前多媒體的應(yīng)用來(lái)看，居主流的是一種“課堂演示型”教學(xué)模式，可以通過(guò)發(fā)布到網(wǎng)上讓學(xué)生進(jìn)行在線瀏覽演示，同時(shí)，網(wǎng)站也可以展現(xiàn)地理教師的個(gè)性風(fēng)采，創(chuàng)建彼此溝通的橋梁。

2網(wǎng)站的策劃

2.1網(wǎng)站的可行性分析

推動(dòng)這場(chǎng)歷史變革的基礎(chǔ)和直接動(dòng)力是創(chuàng)造在信息技術(shù)支撐下的教學(xué)資源庫(kù)和新型教學(xué)模式。地理學(xué)科網(wǎng)站正是在這種大背景下迅速發(fā)展起來(lái)的，利用網(wǎng)絡(luò)技術(shù)的靈活多樣、生動(dòng)逼真及便于控制等特點(diǎn)，可以使全方位的信息空間在教學(xué)過(guò)程中得到充分應(yīng)用，從而引發(fā)學(xué)生的創(chuàng)造力與想象力。由于傳統(tǒng)的信息發(fā)布方式和教學(xué)方式已經(jīng)落后，有了網(wǎng)站，很多信息都能在第一時(shí)間一覽而獲。而且我們可以將大量的圖片、資料片上傳到網(wǎng)站供瀏覽者觀看學(xué)習(xí)。

2.2網(wǎng)站功能及應(yīng)用

地理學(xué)科網(wǎng)站，是面向廣大地理教師和學(xué)習(xí)者的開(kāi)放型地理教育特色網(wǎng)站，網(wǎng)站是師生共創(chuàng)學(xué)習(xí)環(huán)境，共享智慧的資源庫(kù)。創(chuàng)設(shè)一種與國(guó)內(nèi)外專家、教授、教師、學(xué)習(xí)者在網(wǎng)上對(duì)話、交流的學(xué)習(xí)環(huán)境，跨時(shí)空搭建巨大的人網(wǎng)，共享智慧資源。依托現(xiàn)有校園網(wǎng)，通過(guò)在校園網(wǎng)主頁(yè)上建立“地理教學(xué)網(wǎng)站”及其相關(guān)鏈接?！暗乩斫虒W(xué)網(wǎng)站”包括開(kāi)辟BBS 論壇、在線交流、電子信箱、討論區(qū)等版塊。教學(xué)型，給學(xué)生以主動(dòng)權(quán)，教師定期確立一個(gè)討論主題交給學(xué)生，并引導(dǎo)學(xué)生的發(fā)散思維，形成一系列的子討論題，然后由學(xué)生查找資料，分組討論，集思廣益。學(xué)生可以盡情發(fā)表自己的見(jiàn)解，圍繞某一專題進(jìn)行在線或離線討論。交流型，同時(shí)地理學(xué)科網(wǎng)站是一扇窗戶，全國(guó)乃至全世界的地理學(xué)人士都可以訪問(wèn)交流地理問(wèn)題。通過(guò)訪問(wèn)網(wǎng)站的內(nèi)容，可以了解某學(xué)科的地理最新資訊。

2.3域名的選取及解析

先要考慮一個(gè)域名，域名的名稱也就是網(wǎng)站的名字，最好是www.yourname.com 的頂級(jí)國(guó)際域名，如果國(guó)際域名沒(méi)有了，那您可以選擇www.yourname.com.cn 的國(guó)內(nèi)域名，如地理學(xué)科網(wǎng)站www.nnnug.com ，當(dāng)然根據(jù)網(wǎng)站內(nèi)部或類型的不同也可以注冊(cè)其它后綴的域名，.com 商業(yè)網(wǎng)站、.net 代表網(wǎng)絡(luò)機(jī)構(gòu)、.org 代表組織機(jī)構(gòu)，國(guó)內(nèi)域名除了.com.cn 、.net.cn 以外如果符合要求的話還可以注冊(cè).org.cn （非盈利性組織）.gov.cn （政府部門(mén)）.edu.cn （大學(xué)），域名的名稱由數(shù)字，英文字母及"-" 組成。選好了域名就可以去各大空間運(yùn)營(yíng)商那里注冊(cè)，這個(gè)域名生效過(guò)程可能需要一天左右。

進(jìn)行域名解析，域名解析就是國(guó)際域名或者國(guó)內(nèi)域名以及中文域名等域名申請(qǐng)后做的到IP 地址的轉(zhuǎn)換過(guò)程。IP 地址是網(wǎng)路上標(biāo)識(shí)您站點(diǎn)的數(shù)字地址，為了簡(jiǎn)單好記，采用域名來(lái)代替ip 地址標(biāo)識(shí)站點(diǎn)地址。域名的解析工作由DNS 服務(wù)器完成。以地理學(xué)科網(wǎng)站www.nnnug.com 為例，因?yàn)榭臻g選取多線主機(jī)，多線路虛擬主機(jī)適合目標(biāo)客戶覆蓋全國(guó)范圍的網(wǎng)站，不論是電信用戶、網(wǎng)通用戶、教育網(wǎng)用戶、海外用戶、鐵通用戶、聯(lián)通用戶、移動(dòng)用戶，均能快速訪問(wèn)到自己的網(wǎng)站，徹底解決互聯(lián)網(wǎng)的互聯(lián)互通問(wèn)題。

2.4網(wǎng)站版塊結(jié)構(gòu)

網(wǎng)站采用模塊化結(jié)構(gòu)，主要由前臺(tái)和后臺(tái)兩大部分組成，前臺(tái)主要呈現(xiàn)后臺(tái)數(shù)據(jù)信息，由各欄目組成，包括地理資訊，自然地理學(xué)，人文地理學(xué)，經(jīng)濟(jì)地理學(xué)，遙感技術(shù)，測(cè)量與地圖，土地規(guī)劃學(xué)，土地資源學(xué)，環(huán)境學(xué)概論，環(huán)境生態(tài)學(xué)，討論區(qū)。后臺(tái)主要負(fù)責(zé)數(shù)據(jù)管理，會(huì)員管理，文章

圖1 網(wǎng)站版塊圖示

每個(gè)學(xué)科欄目都有自己的獨(dú)立主頁(yè)，各個(gè)欄目下都有自己的小欄目，教學(xué)實(shí)踐，課程課件，參考文獻(xiàn)，作業(yè)習(xí)題，考試大綱，課程教案，科研情況，師資隊(duì)伍，教學(xué)大綱，課程介紹，申報(bào)材料。 3網(wǎng)站的后臺(tái)搭建

Internet 的出現(xiàn)和WWW 技術(shù)的發(fā)展，有力地支持了電子信息服務(wù)和大眾信息媒體的傳播。作為網(wǎng)站開(kāi)發(fā)人員，如何將信息快速，準(zhǔn)確的發(fā)布到網(wǎng)絡(luò)，是評(píng)價(jià)一個(gè)網(wǎng)站技術(shù)的關(guān)鍵，傳統(tǒng)的網(wǎng)站新聞管理方式是靜態(tài)HTML 頁(yè)面，更新信息時(shí)需要重新制作頁(yè)面并修改相應(yīng)鏈接然后上傳頁(yè)面。這種方式效率低，而且不好操作，隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，現(xiàn)在許多網(wǎng)站都采用網(wǎng)站后臺(tái)技術(shù)，如ASP ，PHP ，ASP.net 語(yǔ)言技術(shù)的充分應(yīng)用，與數(shù)據(jù)庫(kù)技術(shù)結(jié)合，使得網(wǎng)站信息的發(fā)布管理效率大大提高，可操作性加強(qiáng)，方便了網(wǎng)站的管理。網(wǎng)頁(yè)交互技術(shù)將傳統(tǒng)的靜態(tài)頁(yè)面與后臺(tái)數(shù)據(jù)庫(kù)、其他的外掛資源連接起來(lái)，使頁(yè)面上的信息能夠根據(jù)一定的要求進(jìn)行定制，而且可以和客戶端進(jìn)行信息交互，得到用戶的信息，并且反饋給用戶。這種將傳統(tǒng)的靜態(tài)頁(yè)面和后臺(tái)數(shù)據(jù)庫(kù)相互有機(jī)結(jié)合起來(lái)的產(chǎn)物就是目前流行的動(dòng)態(tài)網(wǎng)頁(yè)。可以使用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)開(kāi)發(fā)動(dòng)態(tài) Web 站點(diǎn)。所以，網(wǎng)站后臺(tái)技術(shù)是現(xiàn)在網(wǎng)站建設(shè)的關(guān)鍵。

3.1建立和使用開(kāi)發(fā)環(huán)境

要使用ASP.NET 進(jìn)行Web 程序的開(kāi)發(fā)和運(yùn)行，首先要建立一個(gè)特定的開(kāi)發(fā)環(huán)境：在控制面板的添加或刪除程序處安裝internet 信息服務(wù)管理器，安裝完成好后設(shè)置網(wǎng)站目錄，及權(quán)限的配置，在WEB 服務(wù)擴(kuò)展出啟用部分選項(xiàng)，設(shè)置默認(rèn)內(nèi)容文檔。接下來(lái)就是安裝Visual Studio.NET 2005，ASP. NET 是.NET Framework 平臺(tái)上開(kāi)發(fā)動(dòng)態(tài)Web 應(yīng)用的一項(xiàng)新技術(shù)，全面支持面向?qū)ο蟮脑O(shè)計(jì)思想，因而使 Web 應(yīng)用的桌面設(shè)計(jì)更加簡(jiǎn)單、高效，使所建立的Web 應(yīng)用功能更為強(qiáng)大，特別是對(duì)標(biāo)準(zhǔn)化 Web 服務(wù)的支持能力。Visual Studio.NET 2005一般是按項(xiàng)目來(lái)管理程序的，在開(kāi)發(fā)Web 程序前，先應(yīng)新建相應(yīng)的項(xiàng)目。Visual Studio.NET常見(jiàn)的Web 文件有“Web 窗體”、“Web 用戶控件”等。編寫(xiě)程序時(shí)，.NET 有兩個(gè)文件，一是以HTML 代碼形式表示的界面文件，二是程序代碼文件，這樣有效地解決了代碼管理維護(hù)難等問(wèn)題，而且讓封裝Web 程序變得簡(jiǎn)單。例如新建一個(gè)Web 窗體，文件名為WebForm.asp ，現(xiàn)在要在這個(gè)頁(yè)面上寫(xiě)C#代碼，只需雙擊頁(yè)面空白處，或右擊頁(yè)面空白處，選擇“查看代碼”命令，即可進(jìn)入一個(gè)名為WebForm.asp.cs 的文件，這便是個(gè)純C#代碼文件。

3.2網(wǎng)站后臺(tái)管理系統(tǒng)

網(wǎng)站后臺(tái)管理系統(tǒng)的核心思想是對(duì)于信息的存儲(chǔ)、分析、統(tǒng)計(jì)、查詢和管理，降低網(wǎng)站運(yùn)營(yíng)成本，提高網(wǎng)站管理效率，減輕維護(hù)人員的工作量。網(wǎng)站后臺(tái)維護(hù)系統(tǒng)為網(wǎng)站提供全面的后臺(tái)管理與維護(hù)，即使是非專業(yè)的網(wǎng)站管理員也能夠很容易地通過(guò)該系統(tǒng)發(fā)布動(dòng)態(tài)新聞，實(shí)時(shí)動(dòng)態(tài)更新維護(hù)各欄目，處理反饋信息，并對(duì)使用該系統(tǒng)的用戶進(jìn)行權(quán)限管理。后臺(tái)管理系統(tǒng)在整個(gè)網(wǎng)站系統(tǒng)中起中心作用，本地調(diào)試的文件上傳到服務(wù)器遠(yuǎn)程空間，就可以通過(guò)URL 地址登錄網(wǎng)站后臺(tái)管理系統(tǒng)，其通過(guò)對(duì)數(shù)據(jù)庫(kù)的存儲(chǔ)讀取，對(duì)網(wǎng)站進(jìn)行管理更新，然后生產(chǎn)HTML 等可視化頁(yè)面在瀏覽器呈現(xiàn)處來(lái)，通過(guò)互聯(lián)網(wǎng)，人們就可以瀏覽到頁(yè)面的內(nèi)容，整個(gè)網(wǎng)站后臺(tái)系統(tǒng)的構(gòu)架如下圖所示：

后臺(tái)管理主是通過(guò)以下幾個(gè)功能模塊來(lái)實(shí)現(xiàn)的：系統(tǒng)登錄模塊，該模塊將用戶分為普通用戶和超級(jí)用戶，從而實(shí)現(xiàn)用戶權(quán)限的管理。新聞欄目管理模塊：權(quán)限用戶可在該模塊中增加、修改、刪除一級(jí)、二級(jí)新聞欄目。新聞添加，編輯和刪除模塊：按不同支持文本，格式或源代碼欄目添加新聞顯示。支持圖片上傳和附件上傳，還可在編輯狀態(tài)下更新，刪除不需要的文章。文章管理，該模塊負(fù)責(zé)分頁(yè)羅列登錄的注冊(cè)用戶曾發(fā)布；用戶可以對(duì)該條新聞進(jìn)行刪除 修改過(guò)且未刪除的新聞信

息、非新聞發(fā)布者除系統(tǒng)管理員外不具有對(duì)該條新聞的處理權(quán)限，所以不同用戶進(jìn)入此頁(yè)面將顯示不同的內(nèi)容，還具有搜索管理，登陸的注冊(cè)用戶可以搜索管理自己發(fā)布的新聞，還可以進(jìn)行分類管理新聞。

圖2 網(wǎng)站后臺(tái)系統(tǒng)的構(gòu)架圖

3.3網(wǎng)站后臺(tái)數(shù)據(jù)庫(kù)

數(shù)據(jù)庫(kù)，把整個(gè)系統(tǒng)分為三層架構(gòu)，即用戶層(界面層) 、應(yīng)用層(執(zhí)行層) 、數(shù)據(jù)層。

網(wǎng)站除了要設(shè)計(jì)網(wǎng)頁(yè)外，還要通過(guò)數(shù)據(jù)庫(kù)和編程序來(lái)使網(wǎng)站具有更多自動(dòng)的和高級(jí)的功能。例如，網(wǎng)站里的文章資料和圖片數(shù)量很多、種類很多，為方便瀏覽者查找，就應(yīng)通過(guò)數(shù)據(jù)庫(kù)編程來(lái)在網(wǎng)頁(yè)上實(shí)現(xiàn)自動(dòng)搜索；如果信息經(jīng)常變動(dòng)和增加，也應(yīng)通過(guò)數(shù)據(jù)庫(kù)編程來(lái)制作網(wǎng)站，這樣就可以通過(guò)后臺(tái)管理系統(tǒng)方便的管理網(wǎng)站，如更換、增加資料和圖片等等；還有像會(huì)員管理系統(tǒng)、新聞發(fā)布系統(tǒng)、購(gòu)物系統(tǒng)、BBS 系統(tǒng)等都是用數(shù)據(jù)庫(kù)來(lái)做成的。

ADO.NET 是.NET Framework SDK中用于操作數(shù)據(jù)庫(kù)的類庫(kù)的總稱，主要用于與數(shù)據(jù)庫(kù)的數(shù)據(jù)進(jìn)行交互。連接數(shù)據(jù)庫(kù)ADO.NET 應(yīng)用程序要從數(shù)據(jù)源里讀取數(shù)據(jù)，首先要?jiǎng)?chuàng)建一個(gè)連接對(duì)象。這個(gè)連接對(duì)象可以是SQL Connection或是ADOConnection ，這取決于所采用的目標(biāo)提供程序。SQL Server連接字符串：“server=servername;database=dataname;uid=userid;pwd=password”創(chuàng)建了Connection 對(duì)象，提供了Connection 字符串后，就可以使用Connection 對(duì)象了。

在數(shù)據(jù)庫(kù)中建立數(shù)據(jù)庫(kù)關(guān)系表，目的是為了能夠?qū)W(wǎng)站各個(gè)部分的內(nèi)容列出一個(gè)好的數(shù)據(jù)關(guān)系表，清楚各個(gè)部分間的聯(lián)系，如Admin 管理員表單，Article 文章表單，Author 作者等都必須先建立好關(guān)系才能設(shè)計(jì)出合理的數(shù)據(jù)庫(kù)。關(guān)系型表單間聯(lián)系如下圖所示：

圖4 關(guān)系型表單間聯(lián)系

具備數(shù)據(jù)庫(kù)的網(wǎng)站具有很好的管理數(shù)據(jù)資料的好處，一方面，在前臺(tái)（即在網(wǎng)頁(yè)上）訪問(wèn)者可以利用查詢功能很快的找到自己要的地理資料；另一方面，在后臺(tái)（任何一臺(tái)連上互聯(lián)網(wǎng)的計(jì)算機(jī)），網(wǎng)站管理者通過(guò)量身定做的后臺(tái)管理系統(tǒng)很方便的管理網(wǎng)站，而且后臺(tái)管理系統(tǒng)界面很直觀。 具備數(shù)據(jù)庫(kù)的網(wǎng)站所使用的網(wǎng)站空間與普通網(wǎng)站是不一樣的，它的空間必須是能運(yùn)行數(shù)據(jù)庫(kù)的，而且服務(wù)器還必須提供相應(yīng)的數(shù)據(jù)庫(kù)供使用，以常用的Microsoft SQL Server 數(shù)據(jù)庫(kù)及小數(shù)據(jù)庫(kù)ACCESS 等。

3.4虛擬主機(jī)管理

虛擬主機(jī)也稱虛擬服務(wù)器或共享服務(wù)器，即多個(gè)用戶共用一臺(tái)服務(wù)器，因?yàn)橥ǔＦ髽I(yè)或個(gè)人在因特網(wǎng)上建立網(wǎng)站需要有24小時(shí)接入互聯(lián)網(wǎng)的專業(yè)服務(wù)器，并有專業(yè)人員維護(hù)，而在因特網(wǎng)上的專用服務(wù)器以及網(wǎng)絡(luò)接入的費(fèi)用都是比較昂貴的，但如果有幾十個(gè)企業(yè)或個(gè)人來(lái)共用一臺(tái)這樣的服務(wù)器并有專業(yè)的網(wǎng)絡(luò)服務(wù)公司人員來(lái)維護(hù)，那么建立一個(gè)虛擬主機(jī)網(wǎng)站的費(fèi)用來(lái)得低得多。所以建立中小規(guī)模的網(wǎng)站如果采用虛擬主機(jī)方案的話，可以用比較低的代價(jià)來(lái)獲得更專業(yè)的服務(wù)。所以虛擬主機(jī)的定義也就是多用戶共享服務(wù)器。 而對(duì)于地理學(xué)科網(wǎng)站的特性，大量生動(dòng)豐富多彩的文字、圖表、圖片、和錄像片等各種各樣的多媒體資源，需要空間足夠大，訪問(wèn)速度的需求，決定了地理學(xué)科網(wǎng)站在選用虛擬主機(jī)的時(shí)候更多的要求高質(zhì)量。

虛擬主機(jī)都有控制面板，方便的操作界面有助于高效的管理網(wǎng)站文件的上傳下載更新，文件的權(quán)限設(shè)置，數(shù)據(jù)庫(kù)的備份，可以對(duì)網(wǎng)站的訪問(wèn)流量進(jìn)行分析，空間使用情況等，操作界面如下：

圖5 虛擬主機(jī)控制面板示意圖

4網(wǎng)站的頁(yè)面設(shè)計(jì)

目前瀏覽者多使用 800* 600和 1024*768兩種分辨率，為了在這兩種分辨率下都能看到布局美觀的網(wǎng)頁(yè)，一般采用在網(wǎng)頁(yè)中插入一個(gè)大的表格，表格寬度設(shè)置在760～770像素之間，并讓表格居中，網(wǎng)頁(yè)內(nèi)容在這個(gè)表格中再作布局。這樣，在兩種分辨率下都能達(dá)到較好的視覺(jué)效果。另一種辦法是在 800*600和 1024*768兩種分辨率下分別設(shè)計(jì)一個(gè)適合本分辨率的主頁(yè)，再制作索引頁(yè) index.htm ，在索引頁(yè)中制作出對(duì)應(yīng)兩個(gè)主頁(yè)的鏈接，運(yùn)行索引頁(yè)時(shí)由瀏覽者根據(jù)自己的分辨率自行選擇。

我們用的最多的網(wǎng)頁(yè)編輯工具是Macromedia Dreamweaver，我們開(kāi)始必須先建立站點(diǎn)，輸入網(wǎng)站的名字，選擇網(wǎng)站所在的目錄，加載緩存信息就可以建立站點(diǎn)了。剛開(kāi)始站點(diǎn)的文件很少，從設(shè)計(jì)圖中我們可以逐個(gè)添加文件。

什么是相對(duì)路徑？相對(duì)路徑就是指由這個(gè)文件所在的路徑引起的跟其它文件(或文件夾) 的路徑關(guān)系。使用相對(duì)路徑可以為我們帶來(lái)非常多的便利。下面舉實(shí)例詳解：

一、例如在本地硬盤(pán)有如下兩文件，它們要互做超鏈接

G: g eographyindex.htm

G: geographywebarticle
.htm

index.htm 要想鏈接到01.htm 這個(gè)文件，正確的鏈接應(yīng)該是：鏈接文字，這是標(biāo)準(zhǔn)的相對(duì)路徑。這樣做是為了避免在設(shè)計(jì)的時(shí)候插入圖片可以瀏覽，但是在其他機(jī)子上看不到圖片只有紅叉。相對(duì)路徑在設(shè)計(jì)時(shí)插入圖片可以默認(rèn)路徑，方便了許多，不必每次都找到存放的文件夾。

4.1色彩搭配

色彩在人們對(duì)于網(wǎng)頁(yè)信息的選擇和判斷中，充當(dāng)了重要角色。人們對(duì)色彩的感覺(jué)，往往是最敏銳的。在人們的視覺(jué)習(xí)慣中，鮮艷的色彩可以瞬間被記住。所以，在網(wǎng)頁(yè)設(shè)計(jì)中，成功的色彩搭配，能夠令人過(guò)目不忘。平穩(wěn)的色彩可以舒緩我們的視覺(jué)疲勞；暖色可以增加企業(yè)的親和力；冷色可以塑造企業(yè)嚴(yán)謹(jǐn)可靠的形象。色彩是我們的第一視覺(jué)反應(yīng)，也是最富有情感的傳達(dá)方式。所有網(wǎng)頁(yè)上的顏色，在HTML 文檔中都是以顏色的英文單詞或者十六進(jìn)制的表示方法（如#000000表示黑色）。地理學(xué)科網(wǎng)站所涉及的內(nèi)容的有山，水，土地等等，給人安靜柔和的感覺(jué)，適應(yīng)的色彩類型有：

1. 柔和的、潔凈的、明朗的色彩

圖6 柔和的、潔凈的、明朗的色彩

網(wǎng)站的首頁(yè)可以采用這種色彩，增加網(wǎng)站的明朗，給人很舒服的感覺(jué)，而且有容易讓人對(duì)網(wǎng)站的內(nèi)容有一目了然的效果。首頁(yè)采用寬屏式界面，讓人真正感覺(jué)到地球的博大與深邃，所以界面上焦點(diǎn)視角處采用了寬幅廣告畫(huà)。如下圖地理學(xué)科網(wǎng)站(www.nnnug.com)的首頁(yè)所示：

圖8（地理學(xué)科網(wǎng)站首頁(yè)）

2. 冷靜的、自然的色彩

圖7 冷靜的、自然的色彩

地理學(xué)科接觸的以自然地物為主，綠色代表了充滿青春的活力，舒適，希望等等，所以網(wǎng)站的頁(yè)面可以采用青綠色為主色調(diào)。如人文地理學(xué)科的主頁(yè)面：

圖8 人文地理學(xué)科的主頁(yè)面

但是網(wǎng)站不可能單一的運(yùn)用一種顏色，讓人感覺(jué)單調(diào)，乏味；但是也不可能將所有的顏色都運(yùn)用到網(wǎng)站中，讓人感覺(jué)輕浮，花俏。一個(gè)網(wǎng)站有一種或兩種主題色，不至于讓客戶迷失方向，也不到于單調(diào)，乏味。所以確定網(wǎng)站的主題色也是設(shè)計(jì)者必須考慮的問(wèn)題之一。一個(gè)頁(yè)面盡量不要超過(guò)4種色彩，用太多的色彩讓人沒(méi)有方向，沒(méi)有側(cè)重。當(dāng)主題色確定好以后，考慮其它配色時(shí)，一定

要考慮其它配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果。另外哪種因素占主要地位，是明度，純度還是色相。

4.2頁(yè)面排版

畢竟地理學(xué)科網(wǎng)站的圖片信息量大，而且?guī)в械亩嗝襟w文件體積較大，所以合理排版才會(huì)使得頁(yè)面打開(kāi)的速度提高。針對(duì)地理學(xué)科網(wǎng)站圖片較多的情況，在設(shè)計(jì)頁(yè)面時(shí)不能采取太多的表格嵌套。這樣會(huì)使得網(wǎng)頁(yè)打開(kāi)很慢，不方便大眾瀏覽網(wǎng)頁(yè)。采用表格分離方法改善頁(yè)面的打開(kāi)方式，根據(jù)使得瀏覽器打開(kāi)一個(gè)大表格的時(shí)候就開(kāi)始顯示表格里面的內(nèi)容，等一個(gè)大表格的內(nèi)容都加載完了才開(kāi)始加載下個(gè)大表格的內(nèi)容，這樣可以使得瀏覽者在沒(méi)有等IE 瀏覽器加載完就可以看到網(wǎng)站的內(nèi)容信息了。頁(yè)面設(shè)計(jì)可以和CSS 層疊樣式表配合，我們采用的是外鏈接式的樣式表，也就是CSS 單獨(dú)一個(gè)文件單獨(dú)存放，在頁(yè)面打開(kāi)的時(shí)候自動(dòng)加載，這樣可以減少頁(yè)面的體積也能使得在頁(yè)面排版的時(shí)候統(tǒng)一使用，方便適用。

Web 上的內(nèi)容包羅萬(wàn)象，版式豐富多彩，但無(wú)論怎樣的變化，好的Web 站點(diǎn)總是有許多共同之處，例如：精心組織的內(nèi)容；格式美觀的正文；和諧的色彩搭配；較好的對(duì)比度，使得文字具有較強(qiáng)的可讀性；生動(dòng)背景圖案；頁(yè)面元素大小適中，布局勻稱；不同元素之間留有足夠空白，給人視覺(jué)上休息的機(jī)會(huì)；各元素之間保持平衡；文字準(zhǔn)確無(wú)誤，無(wú)錯(cuò)別字、無(wú)拼寫(xiě)錯(cuò)誤。初學(xué)網(wǎng)頁(yè)制作的人往往喜歡多用動(dòng)畫(huà)和閃爍文字，來(lái)增加網(wǎng)頁(yè)的生動(dòng)性和吸引力，但大量的動(dòng)畫(huà)和閃爍文字不僅拖慢了網(wǎng)頁(yè)的顯示速度，而且會(huì)引起瀏覽者視覺(jué)疲勞，反而影響瀏覽者訪問(wèn)網(wǎng)站的其他內(nèi)容。畢竟是學(xué)科學(xué)術(shù)型網(wǎng)站，以我們這次所設(shè)計(jì)的界面中盡量減少動(dòng)畫(huà)和閃爍文字的使用量。

表格是有經(jīng)驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)師控制頁(yè)面布局的重要工具。初學(xué)網(wǎng)頁(yè)制作的人，都比較喜歡用圖層排版，結(jié)果是在編輯狀態(tài)下看起來(lái)不錯(cuò)的頁(yè)面，一到瀏覽器里很可能走了樣。

網(wǎng)頁(yè)文字與樣式表，網(wǎng)頁(yè)中所有的字號(hào)都應(yīng)該用樣式表來(lái)實(shí)現(xiàn)，否則不同的瀏覽者設(shè)置的文字大小不同，頁(yè)面會(huì)發(fā)生很大的混亂。使用 CSS 層疊樣式表定義網(wǎng)頁(yè)文字的樣式，對(duì)固定整個(gè)網(wǎng)頁(yè)的風(fēng)格方面有著不可替代的作用。如果希望所有網(wǎng)頁(yè)中的正文文字采用一種格式，而標(biāo)題文字采用另一種格式，那么用CSS 為它們分別定義就可以了。如果需要改變網(wǎng)頁(yè)風(fēng)格，將所有正文文字或標(biāo)題文字換一種格式，那么只要簡(jiǎn)單地改變CSS 的定義就可以了，如此能極大地減少網(wǎng)頁(yè)設(shè)計(jì)者的工作量。

5網(wǎng)站功能的實(shí)現(xiàn) 5.1討論區(qū)的設(shè)計(jì)

為了方便學(xué)員之間的學(xué)問(wèn)交流，討論區(qū)是不可或缺的一個(gè)欄目。下面就介紹討論區(qū)的設(shè)計(jì)，啟動(dòng)Microsoft SQL Server的企業(yè)管理器，新建一個(gè)名為GuestBook 的數(shù)據(jù)庫(kù)，用來(lái)存放討論區(qū)欄目信息的。然后在GuestBook 數(shù)據(jù)庫(kù)中創(chuàng)建一個(gè)名為Gontent 的表，用于存放留言信息及回復(fù)信息。詳細(xì)描述如下表：

然后設(shè)計(jì)個(gè)password 的表，是管理員專用的，字段名為PassWord 。在Web.config 中加入如下數(shù)據(jù)庫(kù)連接字符串：

建立好了數(shù)據(jù)庫(kù)的鏈接就可以在V isual Studio 2005 新建個(gè)GuestBook.cs 類文件輸入代碼。討論區(qū)都要個(gè)首頁(yè)index.aspx 的Web 窗體，.aspx 是.NET 的文件后綴名。接下來(lái)就是添加名為L(zhǎng)ogin.aspx 的Web 窗體，用于管理員對(duì)討論區(qū)的內(nèi)容進(jìn)行管理用的，后面就是接著對(duì)各個(gè)文件輸入代碼，討論區(qū)就可以完成，卻地理學(xué)科性質(zhì)的網(wǎng)站，會(huì)員發(fā)表信息可能含有大量的圖片，在設(shè)計(jì)回復(fù)或發(fā)表頁(yè)面時(shí)，文本框盡量夠大，而且可以將圖片顯示設(shè)置為成比例自動(dòng)縮小。相關(guān)代碼如下所示： //改變圖片大小 function resizepic(thispic) {

if(thispic.width>500){thispic.height=thispic.height*700/thispic.width;thispic.width=500;} }

5.2在線考試系統(tǒng)的實(shí)現(xiàn)

地理學(xué)科網(wǎng)站的考試系統(tǒng)，為遠(yuǎn)程教學(xué)提供了方便。與傳統(tǒng)考試模式相比，網(wǎng)上考試具有無(wú)可比擬的優(yōu)越性，它可以將傳統(tǒng)考試過(guò)程中的試卷組織、審定印制、傳送收集、登記發(fā)放、評(píng)判歸檔各個(gè)環(huán)節(jié)縮小到一至兩個(gè)環(huán)節(jié)，幾乎屏蔽了所有人工直接干預(yù)考試活動(dòng)的可能性，不但能夠節(jié)約大量的時(shí)日、人力、物力與財(cái)力，而且還可以大幅度提高考試成績(jī)的客觀性和公正性。在各地的學(xué)員只要能都上網(wǎng)，都可以進(jìn)入這個(gè)考試系統(tǒng)，可以進(jìn)行在線考試，教師通過(guò)對(duì)后臺(tái)文件中的試題進(jìn)行修改，修改后的試題即可在考試界面出現(xiàn)，考生通過(guò)輸入學(xué)號(hào)、姓名還有選中考試題目就可以登錄進(jìn)入考試界面。

學(xué)生考試模塊是網(wǎng)上考試系統(tǒng)的核心部分，能夠?qū)崿F(xiàn)單選擇、多項(xiàng)選擇、判斷等客觀題型的隨機(jī)組卷考試，并且具有試計(jì)時(shí)、自動(dòng)評(píng)分、顯示成績(jī)等功能。教師啟動(dòng)考試后，學(xué)生便可以在局域網(wǎng)中的任何一臺(tái)計(jì)機(jī)上通過(guò) 瀏覽器進(jìn)行登陸。在主頁(yè)面中，學(xué)生必須輸入自己的姓名、學(xué)號(hào)和選擇考試科目等信息，如果輸入正確，學(xué)生就以在成功登陸后進(jìn)入考試。開(kāi)始考試后，考試題目就會(huì)在試庫(kù)里按照考試前設(shè)定的數(shù)量隨機(jī)抽取出來(lái)，組成考卷。另外，統(tǒng)會(huì)自動(dòng)計(jì)時(shí)，當(dāng)學(xué)生主動(dòng)交卷或者考試時(shí)間結(jié)束后，系統(tǒng)立即進(jìn)行試卷評(píng)分并顯示成績(jī)。學(xué)生進(jìn)入考試后，考試窗口的狀態(tài)欄會(huì)動(dòng)