計算機網絡課程設計-個人網站設計.doc

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