計算機(jī)網(wǎng)絡(luò)課程設(shè)計個人網(wǎng)站設(shè)計

1、計算機(jī)網(wǎng)絡(luò)課程設(shè)計個人網(wǎng)站設(shè)計學(xué)院：信息工程學(xué)院班級：xxxx學(xué)號：xxxx姓名：xxx2007年1月12目 錄第一章 諸論11.1 設(shè)計思想11.2 開發(fā)工具的選用及介紹1第二章 網(wǎng)站總體分析與設(shè)計32.1 網(wǎng)站系統(tǒng)分析32.2 主頁設(shè)計32.2.1風(fēng)格定位32.2.2版面編排32.2.3色彩處理42.2.4最終設(shè)計4第三章 網(wǎng)站詳細(xì)設(shè)計63.1 網(wǎng)站的功能及結(jié)構(gòu)63.1.1 網(wǎng)站的功能63.1.2 網(wǎng)站的目錄結(jié)構(gòu)設(shè)計63.2 主頁模版的具體設(shè)計63.1.1版式63.1.2頂端的圖片73.1.3菜單73.1.4分時問候73.1.5版權(quán)信息73.3 主頁的設(shè)計73.4 個人簡歷頁面的設(shè)計103

2、.5 學(xué)校簡介頁面的設(shè)計103.6 美文欣賞頁面的設(shè)計103.7 網(wǎng)站地圖頁面的設(shè)計103.8 關(guān)于頁面的設(shè)計113.9 開發(fā)過程中遇到的問題及解決方案：11第四章 系統(tǒng)的使用說明與安裝134.1 運(yùn)行環(huán)境要求134.2 安裝設(shè)置13第五章 參考文獻(xiàn)13第一章 諸論在已跨入21世紀(jì)的今天，人類使用和學(xué)習(xí)信息的方式以及信息的包裝方式正在進(jìn)行著不可阻擋的革命，這次革命將比印刷術(shù)的出現(xiàn)所產(chǎn)生的影響以及對社會發(fā)展的推動遠(yuǎn)為復(fù)雜而巨大。目前，我國上網(wǎng)的人口已近一個億，成立世界上網(wǎng)民最多的國家，許多人在需要查詢信息，首先想到的就是上網(wǎng)。網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動畫和視頻的信息和內(nèi)容，具

3、有豐富的多媒體表現(xiàn)與互動特點，無可置疑， 網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式。因此網(wǎng)站建設(shè)在internet應(yīng)用上的地位顯而易見，它已成為組織和個人在信息化建設(shè)中的的重要組成部分，備受人們的重視。為了更好的讓人們了解自己，提高就業(yè)的機(jī)會，特制作個人簡介網(wǎng)站。1.1 設(shè)計思想通過網(wǎng)站，全面宣傳自己，并展示學(xué)校風(fēng)采、優(yōu)點與特色，展示自己的優(yōu)勢，并加入自己的聯(lián)系方式，在internt上實現(xiàn)自我宣傳和體現(xiàn)自我價值，從而達(dá)到宣傳自我，提高就業(yè)幾率，提高學(xué)校知名度的目的。1.2 開發(fā)工具的選用及介紹1.2.1 html：hyper text markup language ，既“超文本標(biāo)記語

4、言”，一般簡稱為“html”，是 www的描述語言，由 tim berners-lee提出。任何開發(fā)工具皆可發(fā)展html，只要使用一般的文書編輯程序，如windows記事本，就可以編輯。當(dāng)然，其他網(wǎng)頁發(fā)展工具，例如，dreamweaver、frontpage express、 frontpage等也都可以。安全性高，由于html是在客戶機(jī)上執(zhí)行，因此，即使黑客上傳木馬，也沒辦法執(zhí)行取得密碼。另外，目前絕大多數(shù)的免費空間提供為靜態(tài)空間，因此采用html代碼編寫本網(wǎng)站。1.2.2 csscss是cascading style sheet 的縮寫。譯作層疊樣式表單。是用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將

5、樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 在主頁制作時采用css技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。 它的作用可以達(dá)到： （1）在幾乎所有的瀏覽器上都可以使用。 （2）以前一些非得通過圖片轉(zhuǎn)換實現(xiàn)的功能，現(xiàn)在只要用css就可以輕松實現(xiàn)，從而更快地下載頁面。 （3）使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。 （4）你可以輕松地控制頁面的布局 。 （5）你可以將許多網(wǎng)頁的風(fēng)格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網(wǎng)頁風(fēng)格都使用一個

6、css文件進(jìn)行控制，只要修改這個css文件中相應(yīng)的行，那么整個站點的所有頁面都會隨之發(fā)生變動。 1.2.3 dreamweaverdreamweaver是當(dāng)前最流行的網(wǎng)頁設(shè)計軟件，它與同為macromedia公司出品的fireworks和flash一道，被譽(yù)為網(wǎng)頁制作三劍客。dreamweaver與其它同類軟件相比主要有以下優(yōu)點：不生成冗余代碼?？梢暬木W(wǎng)頁編輯器，都要把使用者的操作轉(zhuǎn)換成html代碼。一般的編輯器都會生成大量的冗余代碼，給網(wǎng)頁以后的修改帶來了極大的不方便，同時還增加了網(wǎng)頁文件的大小。dreamweaver則在使用時完全不生成冗余代碼，避免了諸多麻煩。而且，通過設(shè)置，還可用dr

7、eamweaver清除掉網(wǎng)頁文件原有的冗余代碼。方便的代碼編輯：可視化編輯和源代碼編輯都有其長處和短處。有時候，直接用源代碼編輯會很有效。dreamweaver提供了html快速編輯器和自建的html編輯器，能方便自如的在可視化編輯狀態(tài)和源代碼編輯狀態(tài)間切換。操作簡便：首先，dreamweaver提供的歷史面板、html樣式、模版、庫等功能避免了重復(fù)勞動，使用者不必重復(fù)輸入相同的內(nèi)容、格式。其次，dreamweaver能直接往頁面中插入flash、shockwave等插件，經(jīng)過設(shè)置后還可直接調(diào)用相應(yīng)的軟件對這些插件進(jìn)行編輯。最后，dreamweaver與fireworks集成緊密，可直接調(diào)用f

8、ireworks對頁面的圖象進(jìn)行修改、優(yōu)化。優(yōu)秀的網(wǎng)站管理功能：在定義的本地站點中，改變文件的名稱、位置，dreamweaver會自動更新相應(yīng)的超級鏈接。check in和check out功能可協(xié)調(diào)多個使用者對遠(yuǎn)程站點的管理。便于擴(kuò)展：使用者可給dreamweaver安裝各種插件，使其功能更強(qiáng)大。使用者若有興趣，還可自己給dreamweaver制作插件，使dreamweaver更適應(yīng)個人的需求。綜合上面所述，所以我選擇了html+css結(jié)合dreamweaver架構(gòu)自己的個人簡介網(wǎng)站。第二章 網(wǎng)站總體分析與設(shè)計2.1 網(wǎng)站系統(tǒng)分析根據(jù)前面的設(shè)計思想進(jìn)行分析，按照系統(tǒng)開發(fā)的基本觀點對網(wǎng)站進(jìn)行分

9、解，從內(nèi)容上可對網(wǎng)站作如下劃分： 首頁 對網(wǎng)站主要內(nèi)容做一預(yù)覽導(dǎo)航，讓讀者有個印象； 個人簡歷 通過表格的形式，介紹自己； 學(xué)校簡介 以圖片+文字的形式介紹學(xué)校，展現(xiàn)美麗校園； 美文欣賞 網(wǎng)上搜集來的文章，共享給更多的人； 網(wǎng)站地圖 以層次形式，展示本網(wǎng)站的主要鏈接欄目； 關(guān)于 網(wǎng)站制作的工具，感謝受到的幫助。2.2 主頁設(shè)計2.2.1風(fēng)格定位主頁的美化首先要考慮風(fēng)格的定位。任何主頁都要根據(jù)主題的內(nèi)容決定其風(fēng)格與形式，因為只有形式與內(nèi)容的完美統(tǒng)一，才能達(dá)到理想的宣傳效果。目前主頁的應(yīng)用范圍日益擴(kuò)大，幾乎包括了所有的行業(yè)，林林總總，包羅萬象，但歸納起來大體有這么幾個大類：新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教

10、文化、娛樂藝術(shù)、電子商務(wù)、網(wǎng)絡(luò)中心等。對于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的主頁風(fēng)格，就像穿著打扮，應(yīng)依不同的性別以及年齡層次而異一樣。例如：政府部門的主頁風(fēng)格一般應(yīng)比較莊重，而娛樂行業(yè)則可以活潑生動一些；文化教育部門的主頁風(fēng)格應(yīng)該高雅大方，而商務(wù)主頁則可以貼近民俗，使大眾喜聞樂見。主頁風(fēng)格的形成主要依賴于主頁的版式設(shè)計，依賴于頁面的色調(diào)處理，還有圖片與文字的組合形式等。這些問題看似簡單，但往往需要主頁的設(shè)計和制作者具有一定的美術(shù)素質(zhì)和修養(yǎng)。還有，動畫效果也不宜在主頁設(shè)計中濫用，特別是一些內(nèi)容比較嚴(yán)肅的主頁。主頁畢竟主要依靠文字和圖片來傳播信息，它不是動畫片，更不是電視或電影。至于在主頁中適當(dāng)鏈接

11、一些影視作品，那是另外一回事。2.2.2版面編排主頁的設(shè)計首先涉及到的是頁面的版面編排問題。版面編排實際上就是中國古代畫論中的經(jīng)營位置。主頁作為一種版面，既有文字，又有圖片。文字有大有小，還有標(biāo)題和正文之分；圖片也有大小，而且有橫有豎之別。圖片和文字都需要同時展示給觀眾，總不能簡單地羅列在一個頁面上，這樣往往會搞得雜亂無章。因此必須根據(jù)內(nèi)容的需要，將這些圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們組成一個有機(jī)的整體，展現(xiàn)給廣大的觀眾?？梢砸罁?jù)如下幾條來做： 1.主次分明，中心突出。在一個頁面上，必然考慮視覺的中心，這個中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖

12、片一般可以安排在這個部位，在視覺中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁面上就突出了重點，做到了主次有別。2.大小搭配，相互呼應(yīng)。較長的文章或標(biāo)題，不要編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對待圖片的安排也是這樣，要互相錯開，造成大小之間有一定的間隔，這樣可以使頁面錯落有致，避免重心的偏離。 3.圖文并茂，相得益彰。文字和圖片具有一種相互補(bǔ)充的視覺關(guān)系，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖片太多，缺少文字，必然就會減少頁面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內(nèi)容。2.2.3色彩處理色彩是人

13、的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是總體協(xié)調(diào)，局部對比，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運(yùn)用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。因為色彩具有象征性，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對于色彩的喜好也存在著較大的差異。充分運(yùn)用色彩的這些特性，可

14、以使我們的主頁具有深刻的藝術(shù)內(nèi)涵，從而提升主頁的文化品位。下面介紹幾種常用的配色方案： 1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。3.對比色調(diào)。即把色性完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配，可以產(chǎn)生強(qiáng)烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。當(dāng)然，對比色調(diào)如果用得不好，會適得其反，產(chǎn)生俗氣、刺眼的不良效果。這就要把握大調(diào)和，小對比這一個重要原則，即總體的色調(diào)應(yīng)該是統(tǒng)一和諧的，局部的地方可以有一些小

15、的強(qiáng)烈對比。最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個術(shù)語，就是高調(diào)和低調(diào)。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文字或圖片）。這種深淺的變化在色彩學(xué)中稱為明度變化。有些主頁，底色是黑的，但文字也選用了較深的色彩，由于色彩的明度比較接近，讀者在閱覽時，眼睛就會感覺很吃力，影響了閱讀效果。當(dāng)然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強(qiáng)，同樣也會使讀者的眼睛受不了。2.2.4最終設(shè)計綜合上述幾點，本網(wǎng)站定位為個人網(wǎng)站，莊重而不失活潑，高雅而

16、不俗氣；主色調(diào)偏中性，又有桔紅的點綴；圖文與文字的組合形式展示網(wǎng)頁；為了使800600的分辨率也能正確顯示本網(wǎng)站，將主要區(qū)域設(shè)置為747像素，頁面的編排效果如圖1顯示：圖1 網(wǎng)站模版主框架構(gòu)造圖將色彩效果加入到框架設(shè)計中，并且加入網(wǎng)站的內(nèi)容板塊，其最終設(shè)計效果圖如圖2所示。圖2 網(wǎng)站模版最終設(shè)計效果圖第三章 網(wǎng)站詳細(xì)設(shè)計3.1 網(wǎng)站的功能及結(jié)構(gòu)3.1.1 網(wǎng)站的功能在對大量原始資料進(jìn)行完全分析，目前絕大多數(shù)的免費空間提供為靜態(tài)空間，因此，將網(wǎng)站的功能定義為靜態(tài)模塊，采用靜態(tài)頁面，再將靜態(tài)模塊細(xì)分為：首頁、個人簡歷、學(xué)校簡介、美文欣賞、網(wǎng)站地圖、關(guān)于等六個功能頁面。3.1.2 網(wǎng)站的目錄結(jié)構(gòu)設(shè)計

17、網(wǎng)站的目錄結(jié)構(gòu)目錄的規(guī)劃，也就是網(wǎng)頁的物理保存位置的規(guī)劃。一些人將存放網(wǎng)頁的文件夾只分兩個目錄，一個用來存放網(wǎng)頁，一個用來放圖片。更有甚者，將所有的東西都放在一個文檔中。這樣做的害處很明顯，當(dāng)所有的東西都很少時，這或者不是什么問題，而一旦你的網(wǎng)站做大時，才去考慮這個問題，修改起來將會十分麻煩。即使你嚴(yán)格遵守了一套合理的命名規(guī)則，但面對如此多的文件，也將無濟(jì)于事。網(wǎng)站的文件結(jié)構(gòu)的組織類型有分層樹狀結(jié)構(gòu)、線性結(jié)構(gòu)、可選擇的線性結(jié)構(gòu)、web結(jié)構(gòu)等，考慮到網(wǎng)站的管理的方便性和日后的可維護(hù)性，本次設(shè)計決定采用分層樹狀目錄來構(gòu)架整個網(wǎng)站，這種結(jié)構(gòu)的優(yōu)點是層次分明、系統(tǒng)的擴(kuò)展性很好、可以分類管理各子功能模塊

18、的網(wǎng)頁、圖片和相關(guān)數(shù)據(jù)等，它的缺點是各頁面的在作鏈接時易出錯，但只要仔細(xì)一些，這個缺點也是可以避免的。圖3 網(wǎng)站的目錄結(jié)構(gòu)3.2 主頁模版的具體設(shè)計3.1.1版式如圖1所示，采用一欄式，最終版面效果如圖4：圖4 最終版面效果3.1.2頂端的圖片放置在頂端的圖片和網(wǎng)站名稱，圖片的顏色基調(diào)網(wǎng)站相對應(yīng)，加入網(wǎng)站名稱，給以桔紅背景的點綴，使整個頁面生動活潑，躍然紙上。3.1.3菜單菜單即為導(dǎo)航菜單，有“首頁、個人簡歷、學(xué)校簡介、美文欣賞、網(wǎng)站地圖、關(guān)于”，方便瀏覽導(dǎo)航。3.1.4分時問候利用菜單右側(cè)的剩余空間，加入人性化問候，06點問候凌晨好，68點問候早上好，812點問候上午好，1214點問候中午好

19、，1417點問候下午好，1722點問候晚上好，220點問候夜里好，效果如圖4。程序代碼為：now = new date(),hour = now.gethours()if (hour06) document.write(凌晨好！)else if (hour08) document.write(早上好！)else if (hour12) document.write(上午好！)else if (hour14) document.write(中午好！)else if (hour17) document.write(下午好！)else if (hour22) document.write(晚上好！)

20、else document.write(夜里好！)3.1.5版權(quán)信息在頁面底欄加入版權(quán)信息： “ mydoing. all rights reserved. design by xxx. 長安大學(xué)信息工程學(xué)院 自動化二班 19號 ” ，效果如圖4。3.3 主頁的設(shè)計主頁是網(wǎng)站的門面，放置的內(nèi)容應(yīng)體現(xiàn)網(wǎng)站的主要內(nèi)容，因此，在網(wǎng)站主頁中放入以下模塊：網(wǎng)站開發(fā)簡介，自我介紹和長安大學(xué)學(xué)校簡介。另外，在輔助導(dǎo)航欄內(nèi)加入日歷表，可以自動顯示當(dāng)前日期和現(xiàn)在時間，源代碼如下：function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)

21、 this0 = m0;this1 = m1;this2 = m2;this3 = m3;this4 = m4;this5 = m5;this6 = m6;this7 = m7;this8 = m8;this9 = m9;this10 = m10;this11 = m11;/實現(xiàn)月歷function calendar() var monthnames = janfebmaraprmayjunjulaugsepoctnovdec;var today = new date();var thisday;var monthdays = new montharr(31, 28, 31, 30, 31,

22、30, 31, 31, 30, 31, 30, 31);year = today.getyear() +1900;thisday = today.getdate();if (year % 4 = 0) & (year % 100 != 0) | (year % 400 = 0) monthdays1 = 29;ndays = monthdaystoday.getmonth();firstday = today;firstday.setdate(1);testme = firstday.getdate();if (testme = 2) firstday.setdate(0);startday

23、= firstday.getday();document.write()document.write();document.write();var daynames = new array(星期日,星期一,星期二,星期三,星期四,星期五,星期六);var monthnames = new array(1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月);var now = new date();document.writeln( +now.getyear()+ 年+ monthnamesnow.getmonth() + + now.getdate() + 日 + da

24、ynamesnow.getday() + );document.writeln(日);document.writeln(一);document.writeln(二);document.writeln(三);document.writeln(四);document.writeln(五);document.writeln(六);document.writeln();column = 0;for (i=0; istartday; i+) document.writeln(n );column+;for (i=1; i=ndays; i+) if (i = thisday) document.writ

25、eln()else document.writeln();document.writeln(i);if (i = thisday) document.writeln()column+;if (column = 7) document.writeln(); column = 0;document.writeln()document.writeln()document.writeln(北京時間)document.writeln();var timerid = null;var timerrunning = false;function stopclock ()if(timerrunning)cle

26、artimeout(timerid);timerrunning = false;/顯示當(dāng)前時間function showtime () var now = new date();var hours = now.gethours();var minutes = now.getminutes();var seconds = now.getseconds()var timevalue = +(hours = 12) ? 下午 : 上午 )timevalue += (hours 12) ? hours -12 :hours)timevalue += (minutes 10) ? :0 : :) + m

27、inutestimevalue += (seconds 10) ? :0 : :) + secondsdocument.clock.face.value = timevalue;timerid = settimeout(showtime(),1000);/設(shè)置超時,使時間動態(tài)顯示timerrunning = true;function startclock () stopclock();showtime();3.4 個人簡歷頁面的設(shè)計用表格的形式制作個人簡歷，頂端顯示姓名和聯(lián)系方式，突出顯示，便于聯(lián)系；另外，加入介紹內(nèi)容：教育經(jīng)歷、培訓(xùn)經(jīng)歷、社會實踐、在校期間任職情況、計算機(jī)技能、外語技能、獎

28、勵和自我評價。3.5 學(xué)校簡介頁面的設(shè)計加入學(xué)校的簡介，包括學(xué)校歷史、合并情況、院系設(shè)置和教學(xué)實力等等的綜合介紹，為使更多的人了解長安大學(xué)，同時還加入了分校區(qū)的校景，如校本部、渭水校區(qū)、雁塔校區(qū)和太白基地，運(yùn)用flash圖片瀏覽，增加了動感色彩。 圖5 校本部圖6 渭水校區(qū) 圖7 雁塔校區(qū)圖8 太白實習(xí)基地3.6 美文欣賞頁面的設(shè)計書籍是人類知識的源泉，本內(nèi)容板塊安排了許多從網(wǎng)上搜集的好文章，包括清新散文、心靈雜文和心情感悟三大版塊，每個版塊下又分別包括6篇文章，分別為清新散文：幸福其實很簡單、聽雪、棉花、（北方人，南方人）、鄉(xiāng)村的夜晚、最后一朵玫瑰；心靈雜文：心的存折、別讓灰塵落到心上、（烏鴉、蚊子、大熊貓）、教養(yǎng)的證據(jù)、給自己多點愛心、人生的意義與價值；心情感悟：飄香的生命、泥巴和星星之間、對月、一生的功課、受用一生的話、丟棄的日子；3.7 網(wǎng)站地圖