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

計(jì)算機(jī)網(wǎng)絡(luò)課程設(shè)計(jì)個(gè)人網(wǎng)站設(shè)計(jì)學(xué)院：信息工程學(xué)院班級(jí)：XXXX學(xué)號(hào)：XXXX姓名：XXX2007年1月目錄第一章諸論.11.1設(shè)計(jì)思想.11.2開(kāi)發(fā)工具的選用及介紹.1第二章網(wǎng)站總體分析與設(shè)計(jì).32.1網(wǎng)站系統(tǒng)分析.32.2主頁(yè)設(shè)計(jì).32.2.1風(fēng)格定位.32.2.2版面編排.32.2.3色彩處理.42.2.4最終設(shè)計(jì).4第三章網(wǎng)站詳細(xì)設(shè)計(jì).63.1網(wǎng)站的功能及結(jié)構(gòu).63.1.1網(wǎng)站的功能.63.1.2網(wǎng)站的目錄結(jié)構(gòu)設(shè)計(jì).63.2主頁(yè)模版的具體設(shè)計(jì).63.1.1版式.63.1.2頂端的圖片.73.1.3菜單.73.1.4分時(shí)問(wèn)候.73.1.5版權(quán)信息.73.3主頁(yè)的設(shè)計(jì).73.4個(gè)人簡(jiǎn)歷頁(yè)面的設(shè)計(jì).103.5學(xué)校簡(jiǎn)介頁(yè)面的設(shè)計(jì).103.6美文欣賞頁(yè)面的設(shè)計(jì).103.7網(wǎng)站地圖頁(yè)面的設(shè)計(jì).103.8關(guān)于頁(yè)面的設(shè)計(jì).113.9開(kāi)發(fā)過(guò)程中遇到的問(wèn)題及解決方案：.11第四章系統(tǒng)的使用說(shuō)明與安裝.134.1運(yùn)行環(huán)境要求.134.2安裝設(shè)置.13第五章參考文獻(xiàn).131第一章諸論在已跨入21世紀(jì)的今天，人類使用和學(xué)習(xí)信息的方式以及信息的包裝方式正在進(jìn)行著不可阻擋的革命，這次革命將比印刷術(shù)的出現(xiàn)所產(chǎn)生的影響以及對(duì)社會(huì)發(fā)展的推動(dòng)遠(yuǎn)為復(fù)雜而巨大。目前，我國(guó)上網(wǎng)的人口已近一個(gè)億，成立世界上網(wǎng)民最多的國(guó)家，許多人在需要查詢信息，首先想到的就是上網(wǎng)。網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動(dòng)畫和視頻的信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動(dòng)特點(diǎn)，無(wú)可置疑，網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見(jiàn)，它已成為組織和個(gè)人在信息化建設(shè)中的的重要組成部分，備受人們的重視。為了更好的讓人們了解自己，提高就業(yè)的機(jī)會(huì)，特制作個(gè)人簡(jiǎn)介網(wǎng)站。1.1設(shè)計(jì)思想通過(guò)網(wǎng)站，全面宣傳自己，并展示學(xué)校風(fēng)采、優(yōu)點(diǎn)與特色，展示自己的優(yōu)勢(shì)，并加入自己的聯(lián)系方式，在Internt上實(shí)現(xiàn)自我宣傳和體現(xiàn)自我價(jià)值，從而達(dá)到宣傳自我，提高就業(yè)幾率，提高學(xué)校知名度的目的。1.2開(kāi)發(fā)工具的選用及介紹1.2.1HTML：HyperTextMarkupLanguage，既“超文本標(biāo)記語(yǔ)言”，一般簡(jiǎn)稱為“HTML”，是WWW的描述語(yǔ)言，由TimBerners-lee提出。任何開(kāi)發(fā)工具皆可發(fā)展HTML，只要使用一般的文書編輯程序，如Windows記事本，就可以編輯。當(dāng)然，其他網(wǎng)頁(yè)發(fā)展工具，例如，Dreamweaver、FrontPageExpress、FrontPage等也都可以。安全性高，由于HTML是在客戶機(jī)上執(zhí)行，因此，即使黑客上傳木馬，也沒(méi)辦法執(zhí)行取得密碼。另外，目前絕大多數(shù)的免費(fèi)空間提供為靜態(tài)空間，因此采用HTML代碼編寫本網(wǎng)站。1.2.2CSSCSS是CascadingStyleSheet的縮寫。譯作層疊樣式表單。是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。在主頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。它的作用可以達(dá)到：（1）在幾乎所有的瀏覽器上都可以使用。（2）以前一些非得通過(guò)圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn)，從而更快地下載頁(yè)面。2（3）使頁(yè)面的字體變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目。（4）你可以輕松地控制頁(yè)面的布局。（5）你可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地更新了。你可以將站點(diǎn)上所有的網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，那么整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生變動(dòng)。1.2.3DreamweaverDreamweaver是當(dāng)前最流行的網(wǎng)頁(yè)設(shè)計(jì)軟件，它與同為Macromedia公司出品的Fireworks和Flash一道，被譽(yù)為網(wǎng)頁(yè)制作三劍客。Dreamweaver與其它同類軟件相比主要有以下優(yōu)點(diǎn)：不生成冗余代碼?？梢暬木W(wǎng)頁(yè)編輯器，都要把使用者的操作轉(zhuǎn)換成html代碼。一般的編輯器都會(huì)生成大量的冗余代碼，給網(wǎng)頁(yè)以后的修改帶來(lái)了極大的不方便，同時(shí)還增加了網(wǎng)頁(yè)文件的大小。Dreamweaver則在使用時(shí)完全不生成冗余代碼，避免了諸多麻煩。而且，通過(guò)設(shè)置，還可用Dreamweaver清除掉網(wǎng)頁(yè)文件原有的冗余代碼。方便的代碼編輯：可視化編輯和源代碼編輯都有其長(zhǎng)處和短處。有時(shí)候，直接用源代碼編輯會(huì)很有效。Dreamweaver提供了html快速編輯器和自建的html編輯器，能方便自如的在可視化編輯狀態(tài)和源代碼編輯狀態(tài)間切換。操作簡(jiǎn)便：首先，Dreamweaver提供的歷史面板、html樣式、模版、庫(kù)等功能避免了重復(fù)勞動(dòng)，使用者不必重復(fù)輸入相同的內(nèi)容、格式。其次，Dreamweaver能直接往頁(yè)面中插入Flash、Shockwave等插件，經(jīng)過(guò)設(shè)置后還可直接調(diào)用相應(yīng)的軟件對(duì)這些插件進(jìn)行編輯。最后，Dreamweaver與Fireworks集成緊密，可直接調(diào)用Fireworks對(duì)頁(yè)面的圖象進(jìn)行修改、優(yōu)化。優(yōu)秀的網(wǎng)站管理功能：在定義的本地站點(diǎn)中，改變文件的名稱、位置，Dreamweaver會(huì)自動(dòng)更新相應(yīng)的超級(jí)鏈接。Checkin和Checkout功能可協(xié)調(diào)多個(gè)使用者對(duì)遠(yuǎn)程站點(diǎn)的管理。便于擴(kuò)展：使用者可給Dreamweaver安裝各種插件，使其功能更強(qiáng)大。使用者若有興趣，還可自己給Dreamweaver制作插件，使Dreamweaver更適應(yīng)個(gè)人的需求。綜合上面所述，所以我選擇了HTML+CSS結(jié)合Dreamweaver架構(gòu)自己的個(gè)人簡(jiǎn)介網(wǎng)站。3第二章網(wǎng)站總體分析與設(shè)計(jì)2.1網(wǎng)站系統(tǒng)分析根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開(kāi)發(fā)的基本觀點(diǎn)對(duì)網(wǎng)站進(jìn)行分解，從內(nèi)容上可對(duì)網(wǎng)站作如下劃分：首頁(yè)對(duì)網(wǎng)站主要內(nèi)容做一預(yù)覽導(dǎo)航，讓讀者有個(gè)印象；個(gè)人簡(jiǎn)歷通過(guò)表格的形式，介紹自己；學(xué)校簡(jiǎn)介以圖片+文字的形式介紹學(xué)校，展現(xiàn)美麗校園；美文欣賞網(wǎng)上搜集來(lái)的文章，共享給更多的人；網(wǎng)站地圖以層次形式，展示本網(wǎng)站的主要鏈接欄目；關(guān)于網(wǎng)站制作的工具，感謝受到的幫助。2.2主頁(yè)設(shè)計(jì)2.2.1風(fēng)格定位主頁(yè)的美化首先要考慮風(fēng)格的定位。任何主頁(yè)都要根據(jù)主題的內(nèi)容決定其風(fēng)格與形式，因?yàn)橹挥行问脚c內(nèi)容的完美統(tǒng)一，才能達(dá)到理想的宣傳效果。目前主頁(yè)的應(yīng)用范圍日益擴(kuò)大，幾乎包括了所有的行業(yè)，林林總總，包羅萬(wàn)象，但歸納起來(lái)大體有這么幾個(gè)大類：新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教文化、娛樂(lè)藝術(shù)、電子商務(wù)、網(wǎng)絡(luò)中心等。對(duì)于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的主頁(yè)風(fēng)格，就像穿著打扮，應(yīng)依不同的性別以及年齡層次而異一樣。例如：政府部門的主頁(yè)風(fēng)格一般應(yīng)比較莊重，而娛樂(lè)行業(yè)則可以活潑生動(dòng)一些；文化教育部門的主頁(yè)風(fēng)格應(yīng)該高雅大方，而商務(wù)主頁(yè)則可以貼近民俗，使大眾喜聞樂(lè)見(jiàn)。主頁(yè)風(fēng)格的形成主要依賴于主頁(yè)的版式設(shè)計(jì)，依賴于頁(yè)面的色調(diào)處理，還有圖片與文字的組合形式等。這些問(wèn)題看似簡(jiǎn)單，但往往需要主頁(yè)的設(shè)計(jì)和制作者具有一定的美術(shù)素質(zhì)和修養(yǎng)。還有，動(dòng)畫效果也不宜在主頁(yè)設(shè)計(jì)中濫用，特別是一些內(nèi)容比較嚴(yán)肅的主頁(yè)。主頁(yè)畢竟主要依靠文字和圖片來(lái)傳播信息，它不是動(dòng)畫片，更不是電視或電影。至于在主頁(yè)中適當(dāng)鏈接一些影視作品，那是另外一回事。2.2.2版面編排主頁(yè)的設(shè)計(jì)首先涉及到的是頁(yè)面的版面編排問(wèn)題。版面編排實(shí)際上就是中國(guó)古代畫論中的經(jīng)營(yíng)位置。主頁(yè)作為一種版面，既有文字，又有圖片。文字有大有小，還有標(biāo)題和正文之分；圖片也有大小，而且有橫有豎之別。圖片和文字都需要同時(shí)展示給觀眾，總不能簡(jiǎn)單地羅列在一個(gè)頁(yè)面上，這樣往往會(huì)搞得雜亂無(wú)章。因此必須根據(jù)內(nèi)容的需要，將這些圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們組成一個(gè)有機(jī)的整體，展現(xiàn)給廣大的觀眾。可以依據(jù)如下幾條來(lái)做：1.主次分明，中心突出。在一個(gè)頁(yè)面上，必然考慮視覺(jué)的中心，這個(gè)中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個(gè)部位，在視覺(jué)中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁(yè)面上就突出了重點(diǎn)，做到了主次有別。42.大小搭配，相互呼應(yīng)。較長(zhǎng)的文章或標(biāo)題，不要編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對(duì)待圖片的安排也是這樣，要互相錯(cuò)開(kāi)，造成大小之間有一定的間隔，這樣可以使頁(yè)面錯(cuò)落有致，避免重心的偏離。3.圖文并茂，相得益彰。文字和圖片具有一種相互補(bǔ)充的視覺(jué)關(guān)系，頁(yè)面上文字太多，就顯得沉悶，缺乏生氣。頁(yè)面上圖片太多，缺少文字，必然就會(huì)減少頁(yè)面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁(yè)面，又使主頁(yè)有豐富的內(nèi)容。2.2.3色彩處理色彩是人的視覺(jué)最敏感的東西。主頁(yè)的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是總體協(xié)調(diào)，局部對(duì)比，也就是：主頁(yè)的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。在色彩的運(yùn)用上，可以根據(jù)主頁(yè)內(nèi)容的需要，分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍?，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺(jué)，例如冷、暖的感覺(jué)，進(jìn)、退的效果等。另外，色彩還有民族性，各個(gè)民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對(duì)于色彩的喜好也存在著較大的差異。充分運(yùn)用色彩的這些特性，可以使我們的主頁(yè)具有深刻的藝術(shù)內(nèi)涵，從而提升主頁(yè)的文化品位。下面介紹幾種常用的配色方案：1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁(yè)呈現(xiàn)溫馨、和煦、熱情的氛圍。2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁(yè)呈現(xiàn)寧?kù)o、清涼、高雅的氛圍。3.對(duì)比色調(diào)。即把色性完全相反的色彩搭配在同一個(gè)空間里。例如：紅與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配，可以產(chǎn)生強(qiáng)烈的視覺(jué)效果，給人亮麗、鮮艷、喜慶的感覺(jué)。當(dāng)然，對(duì)比色調(diào)如果用得不好，會(huì)適得其反，產(chǎn)生俗氣、刺眼的不良效果。這就要把握大調(diào)和，小對(duì)比這一個(gè)重要原則，即總體的色調(diào)應(yīng)該是統(tǒng)一和諧的，局部的地方可以有一些小的強(qiáng)烈對(duì)比。最后，還要考慮主頁(yè)底色（背景色）的深、淺，這里借用攝影中的一個(gè)術(shù)語(yǔ)，就是高調(diào)和低調(diào)。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文字或圖片）。這種深淺的變化在色彩學(xué)中稱為明度變化。有些主頁(yè)，底色是黑的，但文字也選用了較深的色彩，由于色彩的明度比較接近，讀者在閱覽時(shí)，眼睛就會(huì)感覺(jué)很吃力，影響了閱讀效果。當(dāng)然，色彩的明度也不能變化太