1 本網(wǎng)站設(shè)計(jì)規(guī)劃1 .1 本網(wǎng)站建設(shè)的方向和目的1.1.1 網(wǎng)站建設(shè)目的網(wǎng)站的建設(shè)不僅僅是制作主頁的問題，還需要考慮網(wǎng)站的定位、目標(biāo)用戶、網(wǎng)站內(nèi)容、服務(wù)事項(xiàng)、空間方案、安全性、藝術(shù)設(shè)計(jì)、數(shù)據(jù)庫

1 本網(wǎng)站設(shè)計(jì)規(guī)劃

1 .1 本網(wǎng)站建設(shè)的方向和目的

1.1.1 網(wǎng)站建設(shè)目的

網(wǎng)站的建設(shè)不僅僅是制作主頁的問題，還需要考慮網(wǎng)站的定位、目標(biāo)用戶、網(wǎng)站內(nèi)容、服務(wù)事項(xiàng)、空間方案、安全性、藝術(shù)設(shè)計(jì)、數(shù)據(jù)庫技術(shù)等等。任何網(wǎng)站在建設(shè)之前就必須明確方向、用途和服務(wù)群體等一系列的問題，寫出詳盡的建站計(jì)劃，可以說這是網(wǎng)站建設(shè)的根源和核心所在。這里就以我做的這個個人網(wǎng)站為實(shí)例給大家簡述這個問題，如我設(shè)計(jì)的個人網(wǎng)站：http://www.liu18.tk 。作為一個個人興趣網(wǎng)站，我的服務(wù)群體及訪問者都定位在有廣泛興趣的網(wǎng)民，為網(wǎng)民服務(wù)就是我的這個網(wǎng)站的目的和方向。從整個頁面上可以看出，我的這個整個網(wǎng)站涉及新聞資訊、博文天下、在線留言等等都是關(guān)于個人興趣愛好的。整個網(wǎng)站的結(jié)構(gòu)和內(nèi)容都是在開始設(shè)計(jì)之前就已經(jīng)經(jīng)過詳細(xì)的計(jì)劃的。其實(shí)任何網(wǎng)站都一樣：企業(yè)網(wǎng)站的宗旨就是對外宣傳企業(yè)形象，發(fā)布企業(yè)最新的企業(yè)產(chǎn)品，其服務(wù)群體就是為對其產(chǎn)品感興趣的客戶或者正在使用企業(yè)產(chǎn)品的用戶服務(wù)，這就是企業(yè)網(wǎng)站的建設(shè)方向；個人網(wǎng)站的宗旨就是宣傳自己，提供一個自身和外界交流的場所；由此可見，網(wǎng)站的設(shè)計(jì)方向是依據(jù)網(wǎng)站的客戶、服務(wù)群體等多方面來確定的。

1.1.2 本站明確的目的

不同的網(wǎng)站目的要求通過不同的方式來實(shí)現(xiàn)。一個展示個人能力的網(wǎng)站與一個以花卉種植為主題的網(wǎng)站，以及一個大型門戶網(wǎng)站和一個小型企業(yè)網(wǎng)站，其出發(fā)點(diǎn)和建站目的都有所不同，在整個網(wǎng)站的建設(shè)規(guī)劃方面的要求也是肯定是大不一樣的。因此在規(guī)劃我的這個網(wǎng)站時，我選擇了個人興趣相關(guān)聯(lián)的主題。

本網(wǎng)站預(yù)計(jì)的用戶群體：對于網(wǎng)站的設(shè)計(jì)者和建設(shè)者來說，在設(shè)計(jì)規(guī)劃網(wǎng)站時必須要明確自己網(wǎng)站的瀏覽者，也就是確定自己的用戶群體。在已經(jīng)確定了建設(shè)目的的前提下，應(yīng)根據(jù)建站方向所會導(dǎo)致出現(xiàn)的不同用戶群體的需求來規(guī)劃設(shè)計(jì)整個網(wǎng)站。我的這個網(wǎng)站就確定了以喜愛分享自己的愛好興趣為用戶群體。

本網(wǎng)站的結(jié)構(gòu)和風(fēng)格：網(wǎng)站的風(fēng)格反映了一個網(wǎng)站的特色，它具有很大的

1

代表性。出色的網(wǎng)站吸引人的地方不僅僅在于其內(nèi)容，鮮明的結(jié)構(gòu)和獨(dú)特的風(fēng)格往往能起到畫龍點(diǎn)睛的作用。一個網(wǎng)站即使內(nèi)容再豐富，如果網(wǎng)站的結(jié)構(gòu)和風(fēng)格不能吸引人，那也是毫無價值的。往往整個網(wǎng)站的風(fēng)格是一個網(wǎng)站吸引瀏覽者的魅力所在，因此應(yīng)當(dāng)根據(jù)網(wǎng)站的主題、內(nèi)容和瀏覽者的要求來設(shè)計(jì)自己獨(dú)特的網(wǎng)站風(fēng)格。那么什么是網(wǎng)站的結(jié)構(gòu)和風(fēng)格呢？網(wǎng)站的結(jié)構(gòu)是連接網(wǎng)站內(nèi)容之間的支架。網(wǎng)站的結(jié)構(gòu)是網(wǎng)站的核心和骨架，如果沒有網(wǎng)站結(jié)構(gòu)，網(wǎng)站將會變得一團(tuán)糟。現(xiàn)在，只有高度發(fā)展、高度結(jié)構(gòu)化、易用且能獨(dú)立行走的網(wǎng)站才受瀏覽者的歡迎。

圖1-1 網(wǎng)站導(dǎo)航欄

如圖所示，我的這個網(wǎng)站的結(jié)構(gòu)主要由首頁、網(wǎng)站簡介、資訊信息、博聞天下、精品圖集、加入我們、留言中心等幾大部分組成。這些部分組成了我的整個網(wǎng)站的結(jié)構(gòu)，使得整個站點(diǎn)不會因?yàn)閮?nèi)容過多而顯得雜亂無章。 2 網(wǎng)站設(shè)計(jì)的前期準(zhǔn)備

2.1 軟件準(zhǔn)備和ISS 5.0的安裝與設(shè)置

2.1.1 軟件準(zhǔn)備

在網(wǎng)頁的設(shè)計(jì)過程中，因人而宜，每個人使用的軟件也許不同，如比較有名的網(wǎng)站設(shè)計(jì)軟件有ADODB 公司出品的網(wǎng)頁設(shè)計(jì)“三劍客”、有微軟的Frontpage 、還有國產(chǎn)的“東方網(wǎng)頁王”等等。在這里，我們主要說的是ADODB 公司出品的“三劍客”。

這“三劍客”包括Dreamweaver CS4、Fireworks CS4和Flash CS4，其中，Dreamweaver CS4是網(wǎng)頁編輯軟件，F(xiàn)ireworks CS4是圖形/圖像處理軟件，F(xiàn)lash CS4是矢量動畫編輯軟件。當(dāng)然現(xiàn)在網(wǎng)頁三劍客已經(jīng)出來CS4了，新的版本功能更加強(qiáng)大。ADODB 公司一向以其優(yōu)良的設(shè)計(jì)、友好的用戶界面和強(qiáng)大的功能而著稱，這三個軟件也不例外，它們是ADODB 公司專門為網(wǎng)頁設(shè)計(jì)、制作開發(fā)

2

的系列軟件套件，三者之間可以無縫集成，能夠有效地解決網(wǎng)絡(luò)帶寬問題，是設(shè)計(jì)動畫網(wǎng)頁的最佳工具。

Dreamweaver 采用“所見即所得”的直觀設(shè)計(jì)模式，充分尊重設(shè)計(jì)人員的原始意識和想象力。她成功地將網(wǎng)頁設(shè)計(jì)功能中的技術(shù)實(shí)現(xiàn)部分和設(shè)計(jì)部分分離開來，使用戶只需專注于設(shè)計(jì)，而其余的工作由Dreamweaver8自動完成。另外，還有一點(diǎn)值得說明的是，DreamweaverCS4可以控制和刪除冗余代碼，減小網(wǎng)頁文件的大小。從而能夠快速上傳和下載。

Fireworks 的獨(dú)特之處在于它能夠優(yōu)化、切分圖片映射圖，并提供了功能強(qiáng)大的翻滾圖工具。它是基于WEB 應(yīng)用的圖形/圖象處理軟件，提供了一種革命性的新方法來創(chuàng)建WEB 圖形，并且具有所有其他圖形處理工具的諸多優(yōu)點(diǎn)。Fireworks 最大優(yōu)勢就在于它在任何時候可以從任何階段開始設(shè)計(jì)工作，這樣既可以節(jié)約時間又可以對產(chǎn)品進(jìn)行擴(kuò)展。另外，F(xiàn)ireworks CS4中的諸多功能都是面向WEB 應(yīng)用的，因此對于WEB 設(shè)計(jì)新手來說也很容易學(xué)習(xí)的。

Flash 是比較另類、超前的一種網(wǎng)頁動畫制作軟件，它不僅能夠滿足網(wǎng)頁設(shè)計(jì)的諸多要求，更為網(wǎng)頁多媒體的使用者帶來了前所未有的便利。Flash 提供了廣泛的平臺支持，它不需要任何編程工作就能夠制作出精彩的動態(tài)效果。由于Flash 采用矢量圖形格式來制作動畫，因此在低寬帶的網(wǎng)絡(luò)環(huán)境中仍然可以具有高品質(zhì)的畫面以及存儲空間小的優(yōu)點(diǎn)，從而是瀏覽者能夠快速的下載效果非凡的動畫。

在我設(shè)計(jì)我的個人網(wǎng)站的過程中，我選擇了DreamwearCS4和Flash CS4和 Photoshop CS4三種軟件。因?yàn)樽约合驅(qū)τ谄渌能浖碚f，這三個還算是比較熟悉的。由于我用DIV CSS布局頁面，因此為了更好的實(shí)時查看網(wǎng)頁，我一般都用記事本編寫代碼，然后保存為.asp 格式，修改時，直接將.asp 文件用記事本打開在里面修改，然后保存，最后刷新瀏覽器即可，方便又快捷。

2.1.2 IIS的安裝與設(shè)置

IIS 是Internet Information Server的縮寫，它是微軟公司主推的Web 服務(wù)器， 最新的版本是Windows2000里面包含的IIS 5.0，IIS 與WindowNT Server 完全集成在一起， 因而用戶能夠利用Windows NT Server和NTFS （NT File System ，NT 的文件系統(tǒng)）內(nèi)置的安全特性， 建立強(qiáng)大、靈活而安全的Internet 和Intranet 站點(diǎn)。 IIS的一個重要特性是支持ASP 。IIS 3.0版本以后引入了

3

ASP ，可以很容易的張貼動態(tài)內(nèi)容和開發(fā)基于Web 的應(yīng)用程序。

IIS 的安裝步驟：

(1)點(diǎn)擊：【開始】->【控制面板】->【添加/刪除程序】，打開“添加/刪除程序”對話框。

(2)點(diǎn)擊左邊菜單欄中“添加/刪除Windows 組件”項(xiàng)，打開“Windows 組件向?qū)А睂υ捒颍ㄟ@個過程可能要花幾十秒鐘），在對話框“組件”列表中，選中“Internet 信息服務(wù)（IIS ）”項(xiàng)。

(3)將“Windows 2000”安裝盤放入光驅(qū)中，然后點(diǎn)擊“下一步”。這個步驟可能會花幾分鐘。

(4)點(diǎn)擊“完成”按鈕，完成IIS 的安裝。

可以添加一個默認(rèn)文檔作為主頁。選擇“添加”按鈕，在彈出的對話框中輸入文檔名。為下一節(jié)的實(shí)例輸入“index.asp ”作為網(wǎng)頁首頁，然后單擊左邊的向上和向下箭頭改變默認(rèn)文檔的次序。

2.2系統(tǒng)概述

本系統(tǒng)開發(fā)工具是ASP 與數(shù)據(jù)庫技術(shù)，ASP 技術(shù)被廣泛運(yùn)用在動態(tài)網(wǎng)頁設(shè)計(jì)中。這項(xiàng)技術(shù)也以優(yōu)異的性能得到了大多程序開發(fā)者的青睞。

2.2.1 開發(fā)工具ASP 的優(yōu)勢

Active Server Pages：“動態(tài)服務(wù)器網(wǎng)頁”，一般簡稱為“ASP”，ASP 之所以能受到大家的重視與使用的原因，主要在于所產(chǎn)生的執(zhí)行結(jié)果都是標(biāo)準(zhǔn)的HTML 格式，而且這些程序是在網(wǎng)絡(luò)服務(wù)端中執(zhí)行，使用一般的瀏覽器（如IE 或Netscape ）都可以正確地獲得ASP 的“執(zhí)行”結(jié)果，并且將這ASP 執(zhí)行的結(jié)果直接在瀏覽器中“瀏覽”，不像VBScript 或JavaScript 是在客戶端

（Client ）的瀏覽器上執(zhí)行，若使用VBScript 來設(shè)計(jì)程序，客戶端（client ）在IE 瀏覽器中可以顯示程序執(zhí)行的結(jié)果，可是，客戶端（client ）若使用Netscape 瀏覽器就無法顯示VBScript 的執(zhí)行結(jié)果。

2.2.2 ASP的特點(diǎn)

ASP 的特點(diǎn)為：

任何開發(fā)工具皆可發(fā)展ASP ，只要使用一般的文書編輯程序，如Windows 記事本，就可以編輯。當(dāng)然，其他網(wǎng)頁發(fā)展工具，例如，F(xiàn)rontPage Express、 FrontPage 等也都可以；不過還是建議你用記事本來寫，既省錢又方便，若是

4

使用那些所見即所得的網(wǎng)頁編輯來寫ASP ，可能會發(fā)生一些意想不到的離奇狀態(tài)。通吃各家瀏覽由于ASP 程序是在網(wǎng)絡(luò)服務(wù)器端中執(zhí)行，執(zhí)行結(jié)果所產(chǎn)生的HTML 文件適用于不同的瀏覽器。

1、語言相容性能

ASP與所有的ActiveX Script語言都相容，除了可結(jié)合HTML ，VBScript 、Java Script、Active X服務(wù)器組件來設(shè)計(jì)外，并可經(jīng)由“plug-In （外掛組件模組）的方式，使用其他廠商（Third Party）所提供的語言。

2、 隱密安全性高

如果我們在瀏覽器中直接查看網(wǎng)頁的原始代碼，就只能看到HTML 文件，原始的ASP 程序代碼是看不到的！這是應(yīng)屆ASP 程序先于網(wǎng)站服務(wù)（Web Server ）端執(zhí)行后，將結(jié)果轉(zhuǎn)換成標(biāo)準(zhǔn)HTML 文件，再傳送到客戶端（Client ）的瀏覽器上，因此，我們所辛苦撰寫的ASP 程序并不會輕易地被看見進(jìn)而被盜用。 3、 易于操控?cái)?shù)據(jù)庫

ASP 可以輕易地通過ODBC(Open Database Connectivity)驅(qū)動程序連接各種不同的數(shù)據(jù)庫，例如：Access 、FoxPro 、dBase 、Oracle 等等，另外，ASP 亦可將“文本文件”或是“Excel” 文件當(dāng)成數(shù)據(jù)庫用。

4、面向?qū)ο髮W(xué)習(xí)容易

ASP 具備有面向?qū)ο螅╫bject-Oriented ）功能，學(xué)習(xí)容易，ASP 提供了五種方便能力強(qiáng)大的內(nèi)建對象：Request 、Response 、Sever 、Application 以及Session ，同時，若使用ASP 內(nèi)建的“Application”對象或”Session”對象所撰寫出來的ASP 程序可以在多個網(wǎng)頁之間暫時保存必要的信息。

5、對象名稱 功能描述

RequestResponseServerSessionApplicationObjectContext 從客戶端取得信息將信息送給客戶端提供一些Web 服務(wù)器工具儲存在一個Session 內(nèi)的用戶信息，該信息僅可被該用戶訪問在一個ASP-Application 中讓不同的客戶端共享信息可以用來配合Microsoft Transaction服務(wù)器進(jìn)行分布式事務(wù)處理。

2.3開發(fā)工具數(shù)據(jù)庫介紹

2.3.1數(shù)據(jù)庫Access 的簡介

Access 數(shù)據(jù)庫是集成在Microsoft 公司開發(fā)的產(chǎn)品更新?lián)Q代Office 系統(tǒng)

5

中的集成軟件[10]。

ODBC （Open Database Connectivity開放式數(shù)據(jù)庫互聯(lián)）是微軟推出的一種工業(yè)標(biāo)準(zhǔn)，一種開放的獨(dú)立于廠商的API 應(yīng)用程序接口，可以跨平臺訪問各種個人計(jì)算機(jī)、小型機(jī)以及主機(jī)系統(tǒng)[11]。ODBC 作為一個工業(yè)標(biāo)準(zhǔn)，絕大多數(shù)數(shù)據(jù)庫廠商、大多數(shù)應(yīng)用軟件和工具軟件廠商都為自己的產(chǎn)品提供了ODBC 接口或提供了ODBC 支持，這其中就包括常用的SQL SERVER、ORACAL 、INFORMIX 等，當(dāng)然也包括了Access 。

ASP 訪問數(shù)據(jù)庫的幾種方式：在ASP 腳本中可以通過三種方式訪問數(shù)據(jù)庫： ? IDC （Internet Database Connector）方式；

? ADO （ActiveX Data Objects）方式；

? RDS （Remote Data Service）方式；

這三種訪問方式對數(shù)據(jù)庫的訪問是由Internet Information Server來完成的。Web 瀏覽器用HTTP 協(xié)議向Internet 信息服務(wù)器（IIS ）遞交請求。Internet 信息服務(wù)器執(zhí)行訪問數(shù)據(jù)庫的操作，并以一個HTML 格式的文檔作為回答[12]。在本程序中我使用的是第二種方式，即ADO 方式。

2.3.2 SQL語言簡介

SQL 功能強(qiáng)大，是一種完備的數(shù)據(jù)處理語言，不僅用于數(shù)據(jù)庫查詢，而且用于數(shù)據(jù)庫中的數(shù)據(jù)修改和更新。下面是一個簡單SQL 語句的例子：

我們使用SQL 語句來從Book 中檢索‘借書證號’為‘000001’的借閱者姓名：

SELECT 姓名 FROM Book WHERE借書證號 = ‘000001’

2.3.3 ASP訪問數(shù)據(jù)庫的原理

ASP 是服務(wù)器端的腳本執(zhí)行環(huán)境，可用來產(chǎn)生和執(zhí)行動態(tài)的高性能的WEB 服務(wù)器程序。當(dāng)用戶使用瀏覽器請求ASP 主頁時，WEB 服務(wù)器響應(yīng)，調(diào)用ASP 引擎來執(zhí)行ASP 文件，并解釋其中的腳本語言（javascript 或vbscript ），通過ODBC 連接數(shù)據(jù)庫，由數(shù)據(jù)庫訪問組件ADO （active data objects）完成數(shù)據(jù)庫操作，最后ASP 生成包含有數(shù)據(jù)查詢結(jié)果的HTML 主頁返回用戶端顯示。

ASP 連接數(shù)據(jù)庫共有三種方式：

（1） 基于ODBC 數(shù)據(jù)源的連接方式

<

6

Dim conn ‘聲明一個對象實(shí)例變量

Set conn=Server.CreateObject(“ADODB.Connection ”)

‘給對象實(shí)例變量賦值

Conn.Open “Dsn=address” ‘連接數(shù)據(jù)源adress

>

(2)基于ODBC ，但是不用數(shù)據(jù)源的連接方式

使用數(shù)據(jù)源的連接方式盡管簡單，但是需要在服務(wù)器端設(shè)置數(shù)據(jù)源。如果希望把一個程序從一個服務(wù)器移植到另一個服務(wù)器上，還需要在另一臺服務(wù)器上設(shè)置數(shù)據(jù)源，比較麻煩。下面是不利用數(shù)據(jù)源的直接連接方法：

< Dim conn Set conn=Server.CreateObject(“ADODB.Connection ”)

Acess Driver Conn.Open“Driver={Microsoft

(*.mdb)};Dbq=C:Inetpubwwwrootasptempchapter8?ress.mdb” >

對于方式2，通?？梢岳肧erver 對象的MapPath 方法將相對路徑轉(zhuǎn)換為物理路徑：

< Dim conn Set conn=Server.CreateObject(“ADODB.Connection ”)

Conn.Open“Driver={Microsoft Acess Driver (*.mdb)};Dbq=”& Server.MapPath(“ adress.mdb”)

>

（3）基于OLE DB的連接方式

OLE DB 是一種使用底層技術(shù)，效率更高的連接數(shù)據(jù)庫的方式，也是微軟目前推崇的連接方式。

<

Dim conn

Set conn=Server.CreateObject(“ADODB.Connection ”)

7

Conn.Open“Provider={Microsoft.jet.OLEDB.4.0;Data

C:Inetpubwwwrootasptempchapter8?ress.mdb”

> Source=

自然，方式3中也可以使用Server.MapPath 方法將相對路徑轉(zhuǎn)化為物理路徑： <

Dim conn

Set conn=Server.CreateObject(“ADODB.Connection ”)

Conn.Open“Provider={Microsoft.jet.OLEDB.4.0;Data

Server.MapPath(“ adress.mdb”)

>

在我的個人網(wǎng)站中我用的是第三種方式連接數(shù)據(jù)庫。 Source=”&

3 網(wǎng)站主要頁面制作及程序設(shè)計(jì)

3.1 DIV CSS布局網(wǎng)頁

3.1.1 DIV CSS網(wǎng)頁布局簡要介紹

在以前網(wǎng)站布局大都用table 布局，現(xiàn)在比較流行Div CSS網(wǎng)頁布局，而用表格裝數(shù)據(jù)。用css 布局方便以后的改版以及其他頁面布局。但css 有一點(diǎn)值得注意，那就是瀏覽器兼容問題。比如當(dāng)一個用css 布局的網(wǎng)站在以IE 為內(nèi)核的瀏覽器里顯示正常，但到了火狐等其他之類的瀏覽器中顯示就異常了。下面舉一個瀏覽器兼容的例子方便大家理解。

圖3-1 IE中顯示兩色塊

這是在IE 中顯示的兩個方塊，此時的只在紅色色塊中加入了float:left;左側(cè)浮動，而沒有在藍(lán)色方塊中加入此句。下面是在火狐瀏覽器中顯示的結(jié)果：

8

圖3-2 FF中顯示兩色塊

這時，由于前面區(qū)域浮動了，后面的那個區(qū)域很有可能就會和前面的區(qū)域發(fā)生重疊并錯位。

怎么才能解決這個問題，解決個瀏覽器兼容的問題，很容易，只需要在藍(lán)色方塊的CSS 代碼中也加入“float:left;”，問題就解決了，加上試試，藍(lán)色與紅色顯示在同一行且不重疊了。這只是關(guān)于瀏覽器兼容的一個小的方面，其他的需要在開發(fā)過程中多次調(diào)試并解決。雖然如此，css 布局頁面還是有很多優(yōu)點(diǎn)的。

1. 內(nèi)容和形式分離，網(wǎng)頁前臺只需要顯示內(nèi)容就行，形式上的美工交給css

來處理。生成的HTML 文件代碼精簡，更小打開更快。

2. 改版網(wǎng)站更簡單容易了，不用重新設(shè)計(jì)排版網(wǎng)頁，甚至不用動原網(wǎng)站的任

何HTML 和程序頁面，只需要改動CSS 文件就完成了所有改版。對于門戶網(wǎng)站來說改版就像換衣服一樣簡單容易。

3. 搜索引擎更友好，排名更容易靠前。

3.1.2 本站網(wǎng)頁布局

圖3-3 本站首頁布局

這張圖可以說明我的首頁的網(wǎng)頁布局。

9

DIV 結(jié)構(gòu)如下：

Body {} /*這是一個HTML 元素，整個頁面的最底層*/

#Container {} /*頁面層容器*/

#Header {} /*頁面頭部*/ #Banner{} /* Banner */ #Nav{}/*導(dǎo)航欄*/ #Content {} /*頁面主體*/ # contentLeft{} /*側(cè)邊欄*/ # contentRight{}/*主體內(nèi)容*/ #Footer{}/*頁面底部*/

這是我首頁的頁面布局最終圖：

圖3-4 網(wǎng)站首頁效果

首頁頁面布局奠定了我其他頁面的布局，其他頁面都在首頁的基礎(chǔ)上或多或少的修改了一點(diǎn)，但整體還是和首頁布局相同的。

3.2 首頁Banner 的制作

首頁Banner 很重要，Banner 主要體現(xiàn)中心意旨，形象鮮明表達(dá)最主要的情感思想或宣傳中心。

我的Banner 簡潔明了，與我整個網(wǎng)站的風(fēng)格相一致。對于Banner 的制作

10