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

I

II

目 錄

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

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

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

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

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

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

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

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

2.1.3、 HTML 簡介 ...................................... 10

2.1.4、 IIS簡介 ....................................... 12

2.1.5、 ASP簡介 ....................................... 14

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

2.2、社會可行性研究 ....................................... 18

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

2.2.2、同類課題存在的問題 .............................. 18

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

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

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

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

3.1.3網(wǎng)頁藝術(shù)設(shè)計的特點 ................................ 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)頁的整體布局和導(dǎo)航 .............................. 25

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

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

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

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

4.1站點 ................................................. 28

4.1.1創(chuàng)建和設(shè)計站點 ................................... 28

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

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

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

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

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

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

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

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

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

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

八、參考文獻 ............................................... 42

九、附錄 ................................... 錯誤！未定義書簽。

V

引 言

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

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

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

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

1

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

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

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

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

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

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

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

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

2

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

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

3

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

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

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

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

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

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

主要功能

4

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

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

2. 集成的工作流

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

3. 完整的 CSS 支持

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

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

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

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

利用對領(lǐng)先 Web 開發(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ù)淖侄瓮戏诺侥捻撁嫔稀?/p>

7.FLV 支持

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

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

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

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

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

10. 跨平臺支持

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

5