I ,II ,目 錄引 言 ...................................................... 1

I

II

目 錄

引 言 ...................................................... 1

一、網(wǎng)頁(yè)設(shè)計(jì)的需求 .......................................... 2

1.1、 網(wǎng)站開(kāi)發(fā)的背景 ....................................... 2

1.2、 網(wǎng)頁(yè)的開(kāi)發(fā)環(huán)境 ....................................... 2

二、網(wǎng)站規(guī)劃相關(guān)技術(shù)綜述 .................................... 4

2.1、網(wǎng)站開(kāi)發(fā)工具的介紹及選擇 .............................. 4

2.1.1、網(wǎng)站開(kāi)發(fā)工具Dreamweaver cs3介紹 .................. 4

2.1.2 、CSS DIV 介紹 .................................... 6

2.1.3、 HTML 簡(jiǎn)介 ...................................... 10

2.1.4、 IIS簡(jiǎn)介 ....................................... 12

2.1.5、 ASP簡(jiǎn)介 ....................................... 14

2.1.6、數(shù)據(jù)庫(kù)技術(shù)簡(jiǎn)介 .................................. 16

2.2、社會(huì)可行性研究 ....................................... 18

2.2.1、本課題的研究意義 ................................ 18

2.2.2、同類課題存在的問(wèn)題 .............................. 18

2.2.3、本課題要達(dá)到的設(shè)計(jì)目標(biāo)........................... 18 三、 網(wǎng)站總體設(shè)計(jì)與規(guī)劃 . ................................... 20

3.1網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)介紹 ...................................... 20

3.1.1網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的內(nèi)容 ................................ 20

3.1.2網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的原則 ................................ 21

3.1.3網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的特點(diǎn) ................................ 23 III

3.2網(wǎng)站的整體布局及結(jié)構(gòu)................................... 25

3.2.1確定建設(shè)網(wǎng)站的主題與規(guī)劃網(wǎng)站 ...................... 25

3.2.2網(wǎng)頁(yè)的整體布局和導(dǎo)航 .............................. 25

3.3網(wǎng)站畫(huà)面風(fēng)格的設(shè)計(jì)及素材處理 ........................... 26

3.3.1網(wǎng)頁(yè)畫(huà)面風(fēng)格設(shè)計(jì).................................. 26

3.3.2網(wǎng)頁(yè)素材處理技術(shù).................................. 26

3.3.3網(wǎng)站欄目介紹及功能簡(jiǎn)介 ............................ 27 四、 網(wǎng)站的詳細(xì)設(shè)計(jì)與制作 . ................................. 28

4.1站點(diǎn) ................................................. 28

4.1.1創(chuàng)建和設(shè)計(jì)站點(diǎn) ................................... 28

4.2網(wǎng)頁(yè)制作 .............................................. 31

4.2.1創(chuàng)建文件夾 ....................................... 31

4.2.2創(chuàng)建文件 ......................................... 31

4.2.3創(chuàng)建歡迎flash 動(dòng)畫(huà) ................................ 32

4.2.4創(chuàng)建主頁(yè)面1.asp .................................. 33

4.2.5留言板及個(gè)人心情網(wǎng)頁(yè)設(shè)計(jì) .......................... 33

4.2.6網(wǎng)站實(shí)現(xiàn)的主要功能 ................................ 36 五、 網(wǎng)站的調(diào)試及維護(hù) . ..................................... 38

5.1網(wǎng)站系統(tǒng)測(cè)試 .......................................... 38

5.2系統(tǒng)維護(hù) .............................................. 39 六、 結(jié)論 . ................................. 錯(cuò)誤！未定義書(shū)簽。

七、結(jié)束語(yǔ) ................................................. 41 IV

八、參考文獻(xiàn) ............................................... 42

九、附錄 ................................... 錯(cuò)誤！未定義書(shū)簽。

V

引 言

隨著時(shí)代的發(fā)展，網(wǎng)站建設(shè)越來(lái)越接近于一門(mén)藝術(shù)而不僅僅是一項(xiàng)技術(shù)。網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)，日益被網(wǎng)站建設(shè)者所注重。在目前國(guó)內(nèi)對(duì)此領(lǐng)域研究甚少的情況下，作者將網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)與其他藝術(shù)設(shè)計(jì)形式進(jìn)行比較，嘗試從網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的內(nèi)容、原則和特點(diǎn)等三個(gè)方面，對(duì)這個(gè)新的藝術(shù)設(shè)計(jì)領(lǐng)域進(jìn)行初步的歸納總結(jié)和理論探討。作者認(rèn)為網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)是藝術(shù)與技術(shù)的高度統(tǒng)一，指出網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)包含視聽(tīng)元素與版式設(shè)計(jì)兩項(xiàng)內(nèi)容；以主題鮮明、形式與內(nèi)容相統(tǒng)一、強(qiáng)調(diào)整體為設(shè)計(jì)原則；具有交互性與持續(xù)性、多維性、綜合性、版式的不可控性、藝術(shù)與技術(shù)結(jié)合的緊密性等五個(gè)特點(diǎn)。在明確了網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)與網(wǎng)站主題的關(guān)系的基礎(chǔ)上，提出了“美”和“功能”都是為了更好地表達(dá)網(wǎng)站主題這一觀點(diǎn)。

網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)是伴隨著計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)的產(chǎn)生而形成的視聽(tīng)設(shè)計(jì)新課題，是網(wǎng)頁(yè)設(shè)計(jì)者以所處時(shí)代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為基礎(chǔ)，依照設(shè)計(jì)目的和要求自覺(jué)地對(duì)網(wǎng)頁(yè)的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動(dòng)，必然要成為設(shè)計(jì)藝術(shù)的重要組成部分，并隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。表面上看，它不過(guò)是關(guān)于網(wǎng)頁(yè)版式編排的技巧與方法，而實(shí)際上，它不僅是一種技能，更是藝術(shù)與技術(shù)的高度統(tǒng)一。

網(wǎng)站數(shù)量的激增，意味著網(wǎng)絡(luò)深遠(yuǎn)的影響力已經(jīng)越來(lái)越多地為人們所共識(shí)，網(wǎng)絡(luò)已經(jīng)實(shí)實(shí)在在地為人們帶來(lái)了財(cái)富和知名度。于是，很多單位和個(gè)人都開(kāi)始準(zhǔn)備建立自己的網(wǎng)站。不論出于什么目的，所有人都希望自己建立的網(wǎng)站信息量豐富，功能盡可能強(qiáng)大。

自己選擇的這個(gè)個(gè)人的網(wǎng)站設(shè)計(jì)，首先，能豐富自己的文化知識(shí)，在建設(shè)網(wǎng)站的過(guò)程中能學(xué)到實(shí)際的網(wǎng)絡(luò)知識(shí)；其次，對(duì)與即將畢業(yè)的學(xué)生，個(gè)人網(wǎng)站是一個(gè)很好的網(wǎng)絡(luò)身份證明，可以讓別人對(duì)自己有更好的了解。最后，有這么一個(gè)自己設(shè)計(jì)和制作的網(wǎng)站，可以證明用有了一定的計(jì)算機(jī)水平，這樣比簡(jiǎn)單空白的文本式建立要更有說(shuō)服力。

1

一、網(wǎng)頁(yè)設(shè)計(jì)的需求

1.1、 網(wǎng)站開(kāi)發(fā)的背景

近幾年來(lái)，博客及博客文化正成為互聯(lián)網(wǎng)的熱點(diǎn)，并被視為繼e －mail 、bbs 和icq 之后出現(xiàn)的第四種網(wǎng)絡(luò)交流方式。在網(wǎng)絡(luò)上發(fā)表Blog 的構(gòu)想始于1998年，但到了2000年才真正開(kāi)始流行。而2000年博客開(kāi)始進(jìn)入中國(guó)，并迅速發(fā)展，但都業(yè)績(jī)平平。直到2004年木子美事件，才讓中國(guó)民眾了解到了博客，并運(yùn)用博客。2005年，國(guó)內(nèi)各門(mén)戶網(wǎng)站，如新浪、搜狐，原不看好博客業(yè)務(wù)，也加入博客陣營(yíng)，開(kāi)始進(jìn)入博客春秋戰(zhàn)國(guó)時(shí)代。起初，Bloggers 將其每天瀏覽網(wǎng)站的心得和意見(jiàn)記錄下來(lái)，并予以公開(kāi)，來(lái)給其他人參考和遵循。但隨著B(niǎo)logging 快速擴(kuò)張，它的目的與最初已相去甚遠(yuǎn)。目前網(wǎng)絡(luò)上數(shù)以千計(jì)的Bloggers 發(fā)表和張貼Blog 的目的有很大的差異。不過(guò)，由于溝通方式比電子郵件、討論群組更簡(jiǎn)單和容易，Blog 已成為家庭、公司、部門(mén)和團(tuán)隊(duì)之間越來(lái)越盛行的溝通工具，因?yàn)樗仓饾u被應(yīng)用在企業(yè)內(nèi)部網(wǎng)絡(luò)（Intranet ）。博客正在改變社會(huì)交流方式。目前，全球參與博客的人數(shù)已經(jīng)達(dá)到千萬(wàn)之眾，而且每幾秒鐘，都有一名新的博客用戶加盟進(jìn)來(lái)。

很多記者、律師、教授、學(xué)者、專家，甚至法官和議員都有了自己的博客網(wǎng)站，形成了獨(dú)特的博客文化。美國(guó)總統(tǒng)候選人樂(lè)于開(kāi)設(shè)博客站點(diǎn)，作為競(jìng)選的重要手段。企業(yè)界也正在把博客方式引入企業(yè)內(nèi)部網(wǎng)和公司網(wǎng)站，用于非正式的知識(shí)管理和網(wǎng)絡(luò)營(yíng)銷等。政府部門(mén)和教育領(lǐng)域都在嘗試?yán)貌┛蜆?gòu)建內(nèi)部知識(shí)管理和溝通交流的新體系，可以讓職員發(fā)表評(píng)論，積累知識(shí)，鏈接有意思的網(wǎng)絡(luò)資源，促進(jìn)彼此的交流溝通。

顯然，博客的發(fā)展對(duì)應(yīng)了全球范圍內(nèi)知識(shí)社會(huì)來(lái)臨的背景。對(duì)于中國(guó)，這樣一個(gè)組織機(jī)構(gòu)信息化仍處于初級(jí)階段的國(guó)家，博客這種充分發(fā)揮個(gè)人主導(dǎo)性和積極性的非正式知識(shí)管理工具和其深度溝通交流的功能，對(duì)于我們國(guó)家的知識(shí)傳播、知識(shí)擴(kuò)散和有效提升組織的學(xué)習(xí)和創(chuàng)新能力，具有更特殊的意義。博客用戶的快速增長(zhǎng)以及組織機(jī)構(gòu)對(duì)它的廣泛應(yīng)用，有助于推動(dòng)中國(guó)向?qū)W習(xí)型社會(huì)演進(jìn)。

本系統(tǒng)根據(jù)現(xiàn)實(shí)的情況以及博客互動(dòng)性的特點(diǎn)進(jìn)行設(shè)計(jì)開(kāi)發(fā)，旨在為用戶提供一個(gè)交流的平臺(tái)，促進(jìn)用戶間的深度溝通；并根據(jù)博客共享性的特點(diǎn)，促進(jìn)用戶之間的知識(shí)交流，使其成為一個(gè)學(xué)習(xí)的園地。

1.2、 網(wǎng)頁(yè)的開(kāi)發(fā)環(huán)境

網(wǎng)頁(yè)在制作的前期一定要考慮到網(wǎng)頁(yè)的開(kāi)發(fā)環(huán)境，因?yàn)檫@直接影響到網(wǎng)頁(yè)在網(wǎng)絡(luò)上的使用情況。同時(shí)伴隨著計(jì)算機(jī)和應(yīng)用軟件的快速發(fā)展，系統(tǒng)的開(kāi)發(fā)環(huán)境對(duì)與一大部分的軟件已經(jīng)不是那么重要，然而現(xiàn)階段大多數(shù)用戶所使用的的系統(tǒng)環(huán)境基本上是一樣的，因此我們還是必須在通用性的基礎(chǔ)上考慮到大多數(shù)用戶的系統(tǒng)環(huán)境開(kāi)發(fā)環(huán)境。

2

第一是操作系統(tǒng)的選定。操作系統(tǒng)是計(jì)算機(jī)的操作平臺(tái)，是計(jì)算機(jī)的靈魂所在，因此必須先要決定軟件開(kāi)發(fā)所應(yīng)用的操作系統(tǒng)。操作系統(tǒng)相對(duì)比較分散，但是系統(tǒng)的大部分功能是通用的。如Windows xp、Win7操作系統(tǒng)，還有在網(wǎng)絡(luò)服務(wù)器上廣泛應(yīng)用的Unix 操作系統(tǒng)。根據(jù)應(yīng)用的廣泛性、普遍性和實(shí)用性，系統(tǒng)決定選用Win7操作系統(tǒng)作為軟件的操作系統(tǒng)平臺(tái)。 第二是數(shù)據(jù)庫(kù)軟件的選定。數(shù)據(jù)庫(kù)是以個(gè)數(shù)據(jù)的存儲(chǔ)中心，數(shù)據(jù)庫(kù)軟件就是這個(gè)存儲(chǔ)中心的締造者，數(shù)據(jù)庫(kù)的可用性直接影響著一個(gè)數(shù)據(jù)的多方功能。所以我選擇了Microsoft Access 可以方便地生成各種數(shù)據(jù)對(duì)象，利用存儲(chǔ)的數(shù)據(jù)建立窗體和報(bào)表，可視性好。作為Office 套件的一部分，可以與Office 集成，實(shí)現(xiàn)無(wú)縫連接。

第三是IIS 服務(wù)器的安裝。IIS 是Internet Information Server的縮寫(xiě)，它是微軟公司主推的服務(wù)器，最新的版本是Windows2003里面包含的IIS 6.0，IIS 與WindowNT Server 完全集成在一起，因而用戶能夠利用Windows NT Server 和NTFS （NT File System ，NT 的文件系統(tǒng)）內(nèi)置的安全特性，建立強(qiáng)大，靈活而安全的Internet 和Intranet 站點(diǎn)。 IIS 支持HTTP （Hypertext Transfer Protocol ，超文本傳輸協(xié)議），F(xiàn)TP （Fele Transfer Protocol ，文件傳輸協(xié)議）以及SMTP 協(xié)議，通過(guò)使用CGI 和ISAPI ，IIS 可以得到高度的擴(kuò)展。 IIS支持與語(yǔ)言無(wú)關(guān)的腳本編寫(xiě)和組件，通過(guò)IIS ，開(kāi)發(fā)人員就可以開(kāi)發(fā)新一代動(dòng)態(tài)的，富有魅力的Web 站點(diǎn)。IIS 不需要開(kāi)發(fā)人員學(xué)習(xí)新的腳本語(yǔ)言或者編譯應(yīng)用程序，IIS 完全支持VBScript ，JScript 開(kāi)發(fā)軟件以及Java ，它也支持CGI 和WinCGI ，以及ISAPI 擴(kuò)展和過(guò)濾器。IIS 的設(shè)計(jì)目的是建立一套集成的服務(wù)器服務(wù)，用以支持HTTP ，F(xiàn)TP 和SMTP ，它能夠提供快速且集成了現(xiàn)有產(chǎn)品，同時(shí)可擴(kuò)展的Internet 服務(wù)器。

3

二、網(wǎng)站規(guī)劃相關(guān)技術(shù)綜述

2.1、網(wǎng)站開(kāi)發(fā)工具的介紹及選擇

2.1.1、網(wǎng)站開(kāi)發(fā)工具Dreamweaver cs3介紹

Dreamweaver 是美國(guó)Adobe(原Macromedia ，2005年被Adobe 收購(gòu)) 公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。它不僅是優(yōu)秀的WYSIWYG 編輯器，更是優(yōu)秀的代碼編輯器，有代碼加亮，代碼提示等豐富功能，提供各種示例代碼，并支持Javascript,PHP,ASP,JSP 等多種腳本語(yǔ)言。

Dreamweaver 可以用最快速的方式將Fireworks ，F(xiàn)reeHand ，或Photoshop 等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dreamweaver 能與您喜愛(ài)的設(shè)計(jì)工具，如Playback Flash，Shockwave 和外掛模組等搭配，不需離開(kāi)Dreamweaver 便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver 自動(dòng)開(kāi)啟Firework 或Photoshop 來(lái)進(jìn)行編輯與設(shè)定圖檔的最佳化。

Dreamweaver 是唯一提供Roundtrip HTML 、視覺(jué)化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含HomeSite 和BBEdit 等主流文字編輯器。幀(frames)和表格的制作速度快的令您無(wú)法想像。進(jìn)階表格編輯功能使您簡(jiǎn)單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。所見(jiàn)即所得 Dreamweaver成功整合動(dòng)態(tài)式出版視覺(jué)編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party 廠商，包含ASP ， Apache，BroadVision ， Cold Fusion，iCAT ， Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver 在設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)，所見(jiàn)即所得的功能，讓您不需要透過(guò)瀏覽器就能預(yù)覽網(wǎng)頁(yè)。夢(mèng)幻樣版和XML Dreamweaver 將內(nèi)容與設(shè)計(jì)分開(kāi)，應(yīng)用于快速網(wǎng)頁(yè)更新和團(tuán)隊(duì)合作網(wǎng)頁(yè)編輯。建立網(wǎng)頁(yè)外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML 內(nèi)容。 全方位的呈現(xiàn)利用Dreamweaver 設(shè)計(jì)的網(wǎng)頁(yè)，可以全方位的呈現(xiàn)在任何平臺(tái)的熱門(mén)瀏覽器上。對(duì)于cascading style sheets的動(dòng)態(tài)HTML 支援和鼠標(biāo)換圖效果，聲音和動(dòng)畫(huà)的DHTML 效果資料庫(kù)可在Netscape 和Microsoft 瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver 可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時(shí)，只要從Dreamweaver 的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報(bào)告。

主要功能

4

1. 業(yè)界領(lǐng)先的工具

利用世界級(jí)的 Web 設(shè)計(jì)工具的所有靈活性和強(qiáng)大功能。在“設(shè)計(jì)”視圖中進(jìn)行像素完美型設(shè)計(jì), 在“代碼”視圖中制作復(fù)雜的代碼, 或?qū)９σ环矫娴难芯?。使用您的最佳工作方式工作?/p>

2. 集成的工作流

在 Dreamweaver CS3 內(nèi)設(shè)計(jì)、開(kāi)發(fā)和維護(hù)內(nèi)容, 同時(shí)利用與其他 Adobe 工具 (包括 Adobe Flash CS3 Professional、Fireworks CS3、Photoshop CS3、Contribute CS3 及用于創(chuàng)建移動(dòng)設(shè)備內(nèi)容的全新 Adobe Device Central CS3) 的智能集成。

3. 完整的 CSS 支持

發(fā)現(xiàn)可視 CSS 工具的優(yōu)勢(shì), 使用這些工具可以輕松地在文件內(nèi)或文件之間查看、編輯和移動(dòng)樣式, 以及查明您的更改將如何影響設(shè)計(jì)。借助全新的 CSS 布局加速您的工作流, 并借助全新的瀏覽器兼容性檢查測(cè)試您的設(shè)計(jì)。

4. 集成的編碼環(huán)境

借助代碼折疊、顏色編碼、行號(hào)及帶有注釋/取消注釋和代碼片斷的編碼工具欄, 組織并加速您的編碼。應(yīng)用適用于 HTML 和服務(wù)器語(yǔ)言的代碼提示。

5. 支持領(lǐng)先的技術(shù)

利用對(duì)領(lǐng)先 Web 開(kāi)發(fā)技術(shù) (包括 HTML、XHTML 、CSS 、XML 、Javas cript 、Ajax 、PHP 、Adobe ColdFusion、ASP 、ASP.NET 和 JSP) 的支持。

6. 輕松的 XML

使用 XSL 或適合于 Ajax 的 Spry 框架, 快速集成 XML 內(nèi)容。指向 XML 文件或 XML feed URL, Dreamweaver CS3 將顯示其內(nèi)容, 這使您能夠?qū)⑦m當(dāng)?shù)淖侄瓮戏诺侥捻?yè)面上。

7.FLV 支持

無(wú)需任何 Flash 知識(shí), 只需五次點(diǎn)擊, 即可輕松地將 FLV 文件添加到您的 Web 頁(yè)中。自定義視頻環(huán)境以匹配您的網(wǎng)站。

8. 學(xué)習(xí)資源

在您使用全面的教程、參考內(nèi)容和指導(dǎo)性模板的同時(shí)進(jìn)行學(xué)習(xí), 這樣可輕松擴(kuò)展您的技能集并采用最新的技術(shù)。

9. 擴(kuò)展的 Dreamweaver 社區(qū)

享受龐大的 Dreamweaver 社區(qū)的所有益處, 包括在線 Adobe 設(shè)計(jì)中心和 Adobe 開(kāi)發(fā)人員中心、培訓(xùn)和研討會(huì)、開(kāi)發(fā)人員認(rèn)證計(jì)劃、用戶論壇以及 Dreamweaver Exchange 中提供的超過(guò) 1,000 個(gè)可下載的擴(kuò)展。

10. 跨平臺(tái)支持

挑選您的平臺(tái): Dreamweaver CS3 可用于基于 Intel 或 PowerPC 的 Macintosh 計(jì)算機(jī), 也可用于 Windows XP 和 Windows Vista? 系統(tǒng)。在您的首選平臺(tái)中設(shè)計(jì), 然后跨平臺(tái)交付更加可靠、一致和高性能的結(jié)果。

5