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

1、<p><b>　　計(jì)算機(jī)網(wǎng)絡(luò)課程設(shè)計(jì)</b></p><p><b>　　——個(gè)人網(wǎng)站設(shè)計(jì)</b></p><p><b>　　學(xué)院：信息工程學(xué)院</b></p><p><b>　　班級(jí)：XXXX</b></p><p><b>　

2、　學(xué)號(hào)：XXXX</b></p><p><b>　　姓名：XXX</b></p><p><b>　　2007年1月</b></p><p><b>　　目 錄</b></p><p><b>　　第一章 諸論1</b></p>

3、;<p>　　1.1 設(shè)計(jì)思想1</p><p>　　1.2 開(kāi)發(fā)工具的選用及介紹1</p><p>　　第二章 網(wǎng)站總體分析與設(shè)計(jì)3</p><p>　　2.1 網(wǎng)站系統(tǒng)分析3</p><p>　　2.2 主頁(yè)設(shè)計(jì)3</p><p>　　2.2.1風(fēng)格定位3</p><p

4、>　　2.2.2版面編排3</p><p>　　2.2.3色彩處理4</p><p>　　2.2.4最終設(shè)計(jì)4</p><p>　　第三章 網(wǎng)站詳細(xì)設(shè)計(jì)6</p><p>　　3.1 網(wǎng)站的功能及結(jié)構(gòu)6</p><p>　　3.1.1 網(wǎng)站的功能6</p><p>　　3.1.

5、2 網(wǎng)站的目錄結(jié)構(gòu)設(shè)計(jì)6</p><p>　　3.2 主頁(yè)模版的具體設(shè)計(jì)6</p><p><b>　　3.1.1版式6</b></p><p>　　3.1.2頂端的圖片7</p><p><b>　　3.1.3菜單7</b></p><p>　　3.1.4分時(shí)問(wèn)候

6、7</p><p>　　3.1.5版權(quán)信息7</p><p>　　3.3 主頁(yè)的設(shè)計(jì)7</p><p>　　3.4 個(gè)人簡(jiǎn)歷頁(yè)面的設(shè)計(jì)10</p><p>　　3.5 學(xué)校簡(jiǎn)介頁(yè)面的設(shè)計(jì)10</p><p>　　3.6 美文欣賞頁(yè)面的設(shè)計(jì)10</p><p>　　3.7 網(wǎng)站地圖頁(yè)面

7、的設(shè)計(jì)10</p><p>　　3.8 關(guān)于頁(yè)面的設(shè)計(jì)11</p><p>　　3.9 開(kāi)發(fā)過(guò)程中遇到的問(wèn)題及解決方案：11</p><p>　　第四章 系統(tǒng)的使用說(shuō)明與安裝13</p><p>　　4.1 運(yùn)行環(huán)境要求13</p><p>　　4.2 安裝設(shè)置13</p><p>

8、　　第五章 參考文獻(xiàn)13</p><p><b>　　第一章 諸論</b></p><p>　　在已跨入21世紀(jì)的今天，人類(lèi)使用和學(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)站的迷

9、人之處在于綜合使用文本、圖象、聲音、動(dòng)畫(huà)和視頻的信息和內(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)站。</p><p><b>　　1.1 設(shè)計(jì)思想</b><

10、;/p><p>　　通過(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é)校知名度的目的。</p><p>　　1.2 開(kāi)發(fā)工具的選用及介紹</p><p>　　1.2.1 HTML：</p><p>　　Hyper Text

11、Markup Language ，既“超文本標(biāo)記語(yǔ)言”，一般簡(jiǎn)稱為“HTML”，是 WWW的描述語(yǔ)言，由 Tim Berners-lee提出。</p><p>　　任何開(kāi)發(fā)工具皆可發(fā)展HTML，只要使用一般的文書(shū)編輯程序，如Windows記事本，就可以編輯。當(dāng)然，其他網(wǎng)頁(yè)發(fā)展工具，例如，Dreamweaver、FrontPage Express、 FrontPage等也都可以。</p><p&

12、gt;　　安全性高，由于HTML是在客戶機(jī)上執(zhí)行，因此，即使黑客上傳木馬，也沒(méi)辦法執(zhí)行取得密碼。</p><p>　　另外，目前絕大多數(shù)的免費(fèi)空間提供為靜態(tài)空間，因此采用HTML代碼編寫(xiě)本網(wǎng)站。</p><p><b>　　1.2.2 CSS</b></p><p>　　CSS是Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式

13、表單」。是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 </p><p>　　在主頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。</p><p>　　只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。 </p><p>　　它的作用可以達(dá)到： &

14、lt;/p><p>　　（1）在幾乎所有的瀏覽器上都可以使用。 </p><p>　?。?）以前一些非得通過(guò)圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn)，從而更快地下載頁(yè)面。 </p><p>　?。?）使頁(yè)面的字體變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目。 </p><p>　　（4）你可以輕松地控制頁(yè)面的布局 。 </p>

15、<p>　?。?）你可以將許多網(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)。 </p><p>　　1.2.3 Dreamweaver</p><p>　　Dreamweaver是當(dāng)前最流行的網(wǎng)頁(yè)設(shè)計(jì)軟件，它與同為Macromedia公司出品的

16、Fireworks和Flash一道，被譽(yù)為網(wǎng)頁(yè)制作三劍客。</p><p>　　Dreamweaver與其它同類(lèi)軟件相比主要有以下優(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è)置，還可用Dreamwea

17、ver清除掉網(wǎng)頁(yè)文件原有的冗余代碼。</p><p>　　方便的代碼編輯：可視化編輯和源代碼編輯都有其長(zhǎng)處和短處。有時(shí)候，直接用源代碼編輯會(huì)很有效。Dreamweaver提供了html快速編輯器和自建的html編輯器，能方便自如的在可視化編輯狀態(tài)和源代碼編輯狀態(tài)間切換。</p><p>　　操作簡(jiǎn)便：首先，Dreamweaver提供的歷史面板、html樣式、模版、庫(kù)等功能避免了重復(fù)勞動(dòng)，使

18、用者不必重復(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)化。</p><p>　　優(yōu)秀的網(wǎng)站管理功能：在定義的本地站點(diǎn)中，改變文件的名稱、位置，Dreamweaver會(huì)自動(dòng)更新相應(yīng)的超級(jí)鏈接。

19、Check in和Check out功能可協(xié)調(diào)多個(gè)使用者對(duì)遠(yuǎn)程站點(diǎn)的管理。</p><p>　　便于擴(kuò)展：使用者可給Dreamweaver安裝各種插件，使其功能更強(qiáng)大。使用者若有興趣，還可自己給Dreamweaver制作插件，使Dreamweaver更適應(yīng)個(gè)人的需求。</p><p>　　綜合上面所述，所以我選擇了HTML+CSS結(jié)合Dreamweaver架構(gòu)自己的個(gè)人簡(jiǎn)介網(wǎng)站。</

20、p><p>　　第二章 網(wǎng)站總體分析與設(shè)計(jì)</p><p>　　2.1 網(wǎng)站系統(tǒng)分析</p><p>　　根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開(kāi)發(fā)的基本觀點(diǎn)對(duì)網(wǎng)站進(jìn)行分解，從內(nèi)容上可對(duì)網(wǎng)站作如下劃分：</p><p>　　首頁(yè) 對(duì)網(wǎng)站主要內(nèi)容做一預(yù)覽導(dǎo)航，讓讀者有個(gè)印象；</p><p>　　個(gè)人簡(jiǎn)歷 通過(guò)

21、表格的形式，介紹自己；</p><p>　　學(xué)校簡(jiǎn)介 以圖片+文字的形式介紹學(xué)校，展現(xiàn)美麗校園；</p><p>　　美文欣賞 網(wǎng)上搜集來(lái)的文章，共享給更多的人；</p><p>　　網(wǎng)站地圖 以層次形式，展示本網(wǎng)站的主要鏈接欄目；</p><p>　　關(guān)于 網(wǎng)站制作的工具，感謝受到的幫助。</p>&l

22、t;p><b>　　2.2 主頁(yè)設(shè)計(jì)</b></p><p><b>　　2.2.1風(fēng)格定位</b></p><p>　　主頁(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)大體有這么

23、幾個(gè)大類(lèi)：新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教文化、娛樂(lè)藝術(shù)、電子商務(wù)、網(wǎng)絡(luò)中心等。對(duì)于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的主頁(yè)風(fēng)格，就像穿著打扮，應(yīng)依不同的性別以及年齡層次而異一樣。例如：政府部門(mén)的主頁(yè)風(fēng)格一般應(yīng)比較莊重，而娛樂(lè)行業(yè)則可以活潑生動(dòng)一些；文化教育部門(mén)的主頁(yè)風(fēng)格應(yīng)該高雅大方，而商務(wù)主頁(yè)則可以貼近民俗，使大眾喜聞樂(lè)見(jiàn)。</p><p>　　主頁(yè)風(fēng)格的形成主要依賴于主頁(yè)的版式設(shè)計(jì)，依賴于頁(yè)面的色調(diào)處理，還有圖片與文字的組

24、合形式等。這些問(wèn)題看似簡(jiǎn)單，但往往需要主頁(yè)的設(shè)計(jì)和制作者具有一定的美術(shù)素質(zhì)和修養(yǎng)。</p><p>　　還有，動(dòng)畫(huà)效果也不宜在主頁(yè)設(shè)計(jì)中濫用，特別是一些內(nèi)容比較嚴(yán)肅的主頁(yè)。主頁(yè)畢竟主要依靠文字和圖片來(lái)傳播信息，它不是動(dòng)畫(huà)片，更不是電視或電影。至于在主頁(yè)中適當(dāng)鏈接一些影視作品，那是另外一回事。</p><p><b>　　2.2.2版面編排</b></p>

25、<p>　　主頁(yè)的設(shè)計(jì)首先涉及到的是頁(yè)面的版面編排問(wèn)題。"版面編排"實(shí)際上就是中國(guó)古代畫(huà)論中的"經(jīng)營(yíng)位置"。主頁(yè)作為一種版面，既有文字，又有圖片。文字有大有小，還有標(biāo)題和正文之分；圖片也有大小，而且有橫有豎之別。圖片和文字都需要同時(shí)展示給觀眾，總不能簡(jiǎn)單地羅列在一個(gè)頁(yè)面上，這樣往往會(huì)搞得雜亂無(wú)章。因此必須根據(jù)內(nèi)容的需要，將這些圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們組成一個(gè)

26、有機(jī)的整體，展現(xiàn)給廣大的觀眾。可以依據(jù)如下幾條來(lái)做： </p><p>　　1.主次分明，中心突出。在一個(gè)頁(yè)面上，必然考慮視覺(jué)的中心，這個(gè)中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個(gè)部位，在視覺(jué)中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁(yè)面上就突出了重點(diǎn)，做到了主次有別。</p><p>　　2.大小搭配，相互呼應(yīng)。較長(zhǎng)的文章或標(biāo)題，不要

27、編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對(duì)待圖片的安排也是這樣，要互相錯(cuò)開(kāi)，造成大小之間有一定的間隔，這樣可以使頁(yè)面錯(cuò)落有致，避免重心的偏離。 </p><p>　　3.圖文并茂，相得益彰。文字和圖片具有一種相互補(bǔ)充的視覺(jué)關(guān)系，頁(yè)面上文字太多，就顯得沉悶，缺乏生氣。頁(yè)面上圖片太多，缺少文字，必然就會(huì)減少頁(yè)面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁(yè)面，又使主

28、頁(yè)有豐富的內(nèi)容。</p><p><b>　　2.2.3色彩處理</b></p><p>　　色彩是人的視覺(jué)最敏感的東西。主頁(yè)的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是"總體協(xié)調(diào)，局部對(duì)比"，也就是：主頁(yè)的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。在色彩的運(yùn)用上，可以根據(jù)主頁(yè)內(nèi)容的需要

29、，分別采用不同的主色調(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è)的文化品位。下面介紹幾種常用的配色方案

30、： </p><p>　　1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁(yè)呈現(xiàn)溫馨、和煦、熱情的氛圍。</p><p>　　2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁(yè)呈現(xiàn)寧?kù)o、清涼、高雅的氛圍。</p><p>　　3.對(duì)比色調(diào)。即把色性完全相反的色彩搭配在同一個(gè)空間里。例如：紅與綠、黃與紫、橙與藍(lán)等。這種色彩的搭

31、配，可以產(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ì)比。</p><p>　　最后，還要考慮主頁(yè)底色（背景色）的深、淺，這里借用攝影中的一個(gè)術(shù)語(yǔ)，就是"高調(diào)"和"低調(diào)"。底色淺的稱為

32、高調(diào)；底色深的稱為低調(diào)。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文字或圖片）。這種深淺的變化在色彩學(xué)中稱為"明度變化"。有些主頁(yè)，底色是黑的，但文字也選用了較深的色彩，由于色彩的明度比較接近，讀者在閱覽時(shí)，眼睛就會(huì)感覺(jué)很吃力，影響了閱讀效果。當(dāng)然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強(qiáng)，同樣也會(huì)使讀者的眼睛受不了。

33、</p><p><b>　　2.2.4最終設(shè)計(jì)</b></p><p>　　綜合上述幾點(diǎn)，本網(wǎng)站定位為個(gè)人網(wǎng)站，莊重而不失活潑，高雅而不俗氣；主色調(diào)偏中性，又有桔紅的點(diǎn)綴；圖文與文字的組合形式展示網(wǎng)頁(yè)；為了使800×600的分辨率也能正確顯示本網(wǎng)站，將主要區(qū)域設(shè)置為747像素，頁(yè)面的編排效果如圖1顯示：</p><p>　　圖1

34、網(wǎng)站模版主框架構(gòu)造圖</p><p>　　將色彩效果加入到框架設(shè)計(jì)中，并且加入網(wǎng)站的內(nèi)容板塊，其最終設(shè)計(jì)效果圖如圖2所示。</p><p>　　圖2 網(wǎng)站模版最終設(shè)計(jì)效果圖</p><p>　　第三章 網(wǎng)站詳細(xì)設(shè)計(jì)</p><p>　　3.1 網(wǎng)站的功能及結(jié)構(gòu)</p><p>　　3.1.1 網(wǎng)站的功能</p&g

35、t;<p>　　在對(duì)大量原始資料進(jìn)行完全分析，目前絕大多數(shù)的免費(fèi)空間提供為靜態(tài)空間，因此，將網(wǎng)站的功能定義為靜態(tài)模塊，采用靜態(tài)頁(yè)面，再將靜態(tài)模塊細(xì)分為：首頁(yè)、個(gè)人簡(jiǎn)歷、學(xué)校簡(jiǎn)介、美文欣賞、網(wǎng)站地圖、關(guān)于等六個(gè)功能頁(yè)面。</p><p>　　3.1.2 網(wǎng)站的目錄結(jié)構(gòu)設(shè)計(jì)</p><p>　　網(wǎng)站的目錄結(jié)構(gòu)目錄的規(guī)劃，也就是網(wǎng)頁(yè)的物理保存位置的規(guī)劃。一些人將存放網(wǎng)頁(yè)的文件夾只分

36、兩個(gè)目錄，一個(gè)用來(lái)存放網(wǎng)頁(yè)，一個(gè)用來(lái)放圖片。更有甚者，將所有的東西都放在一個(gè)文檔中。這樣做的害處很明顯，當(dāng)所有的東西都很少時(shí)，這或者不是什么問(wèn)題，而一旦你的網(wǎng)站做大時(shí)，才去考慮這個(gè)問(wèn)題，修改起來(lái)將會(huì)十分麻煩。即使你嚴(yán)格遵守了一套合理的命名規(guī)則，但面對(duì)如此多的文件，也將無(wú)濟(jì)于事。</p><p>　　網(wǎng)站的文件結(jié)構(gòu)的組織類(lèi)型有分層樹(shù)狀結(jié)構(gòu)、線性結(jié)構(gòu)、可選擇的線性結(jié)構(gòu)、WEB結(jié)構(gòu)等，考慮到網(wǎng)站的管理的方便性和日后的可

37、維護(hù)性，本次設(shè)計(jì)決定采用分層樹(shù)狀目錄來(lái)構(gòu)架整個(gè)網(wǎng)站，這種結(jié)構(gòu)的優(yōu)點(diǎn)是層次分明、系統(tǒng)的擴(kuò)展性很好、可以分類(lèi)管理各子功能模塊的網(wǎng)頁(yè)、圖片和相關(guān)數(shù)據(jù)等，它的缺點(diǎn)是各頁(yè)面的在作鏈接時(shí)易出錯(cuò)，但只要仔細(xì)一些，這個(gè)缺點(diǎn)也是可以避免的。</p><p>　　圖3 網(wǎng)站的目錄結(jié)構(gòu)</p><p>　　3.2 主頁(yè)模版的具體設(shè)計(jì)</p><p><b>　　3.1.1版式&

38、lt;/b></p><p>　　如圖1所示，采用一欄式，最終版面效果如圖4：</p><p><b>　　圖4 最終版面效果</b></p><p>　　3.1.2頂端的圖片</p><p>　　放置在頂端的圖片和網(wǎng)站名稱，圖片的顏色基調(diào)網(wǎng)站相對(duì)應(yīng)，加入網(wǎng)站名稱，給以桔紅背景的點(diǎn)綴，使整個(gè)頁(yè)面生動(dòng)活潑，躍然紙上。

39、</p><p><b>　　3.1.3菜單</b></p><p>　　菜單即為導(dǎo)航菜單，有“首頁(yè)、個(gè)人簡(jiǎn)歷、學(xué)校簡(jiǎn)介、美文欣賞、網(wǎng)站地圖、關(guān)于”，方便瀏覽導(dǎo)航。</p><p><b>　　3.1.4分時(shí)問(wèn)候</b></p><p>　　利用菜單右側(cè)的剩余空間，加入人性化問(wèn)候，0～6點(diǎn)問(wèn)候凌晨好

40、，6～8點(diǎn)問(wèn)候早上好，8～12點(diǎn)問(wèn)候上午好，12～14點(diǎn)問(wèn)候中午好，14～17點(diǎn)問(wèn)候下午好，17～22點(diǎn)問(wèn)候晚上好，22～0點(diǎn)問(wèn)候夜里好，效果如圖4。程序代碼為：</p><p>　　<script language="javaScript"></p><p>　　now = new Date(),hour = now.getHours()</p>

41、;<p>　　if (hour<06) {document.write("凌晨好！")}</p><p>　　else if (hour<08) {document.write("早上好！")}</p><p>　　else if (hour<12) {document.write("上午好！")}

42、</p><p>　　else if (hour<14) {document.write("中午好！")}</p><p>　　else if (hour<17) {document.write("下午好！")}</p><p>　　else if (hour<22) {document.write(&quo

43、t;晚上好！")}</p><p>　　else {document.write("夜里好！")}</p><p><b>　　</script></b></p><p><b>　　3.1.5版權(quán)信息</b></p><p>　　在頁(yè)面底欄加入版權(quán)信息：

44、“ © MyDoing. All rights reserved. Design by XXX. 長(zhǎng)安大學(xué)信息工程學(xué)院 自動(dòng)化二班 19號(hào) ” ，效果如圖4。</p><p><b>　　3.3 主頁(yè)的設(shè)計(jì)</b></p><p>　　主頁(yè)是網(wǎng)站的門(mén)面，放置的內(nèi)容應(yīng)體現(xiàn)網(wǎng)站的主要內(nèi)容，因此，在網(wǎng)站主頁(yè)中放入以下模塊：網(wǎng)站開(kāi)發(fā)簡(jiǎn)介，自我介紹和長(zhǎng)安大學(xué)學(xué)校

45、簡(jiǎn)介。</p><p>　　另外，在輔助導(dǎo)航欄內(nèi)加入日歷表，可以自動(dòng)顯示當(dāng)前日期和現(xiàn)在時(shí)間，源代碼如下：</p><p>　　<SCRIPT language=JavaScript type=text/javascript></p><p>　　function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m

46、9, m10, m11) </p><p><b>　　{</b></p><p>　　this[0] = m0;</p><p>　　this[1] = m1;</p><p>　　this[2] = m2;</p><p>　　this[3] = m3;</p><p>

47、;　　this[4] = m4;</p><p>　　this[5] = m5;</p><p>　　this[6] = m6;</p><p>　　this[7] = m7;</p><p>　　this[8] = m8;</p><p>　　this[9] = m9;</p><p>　　t

48、his[10] = m10;</p><p>　　this[11] = m11;</p><p><b>　　}</b></p><p><b>　　//實(shí)現(xiàn)月歷</b></p><p>　　function calendar() {</p><p>　　var monthN

49、ames = "JanFebMarAprMayJunJulAugSepOctNovDec";</p><p>　　var today = new Date();</p><p>　　var thisDay;</p><p>　　var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31,

50、 30, 31, 30, 31);</p><p>　　year = today.getYear() +1900;</p><p>　　thisDay = today.getDate();</p><p>　　if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthD

51、ays[1] = 29;</p><p>　　nDays = monthDays[today.getMonth()];</p><p>　　firstDay = today;</p><p>　　firstDay.setDate(1);</p><p>　　testMe = firstDay.getDate();</p><

52、;p>　　if (testMe == 2) firstDay.setDate(0);</p><p>　　startDay = firstDay.getDay();</p><p>　　document.write("<TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' AL

53、IGN='CENTER' BGCOLOR='#FFFFFF'>")</p><p>　　document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='#F4F4EF&#

54、39;>");</p><p>　　document.write("<TR><th colspan='7' bgcolor='#FCFCFA'>");</p><p>　　var dayNames = new Array("星期日","星期一","星

55、期二","星期三","星期四","星期五","星期六");</p><p>　　var monthNames = new Array("1月","2月","3月","4月","5月","6月","

56、7月","8月","9月","10月","11月","12月");</p><p>　　var now = new Date();</p><p>　　document.writeln("<FONT STYLE='font-size:8pt;Color:#8

57、C8C73'>" +now.getYear()+ "年"+ monthNames[now.getMonth()] + "" + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>");</p><p>　　document.writeln

58、("</TH></TR><TR><TH BGCOLOR='#8C8C73'><FONT STYLE='font-size:8pt;Color:White'>日</FONT></TH>");</p><p>　　document.writeln("<th bgcol

59、or='#8C8C73'><FONT STYLE='font-size:8pt;Color:White'>一</FONT></TH>");</p><p>　　document.writeln("<TH BGCOLOR='#8C8C73'><FONT STYLE='font-si

60、ze:8pt;Color:White'>二</FONT></TH>");</p><p>　　document.writeln("<TH BGCOLOR='#8C8C73'><FONT STYLE='font-size:8pt;Color:White'>三</FONT></TH>

61、;");</p><p>　　document.writeln("<TH BGCOLOR='#8C8C73'><FONT STYLE='font-size:8pt;Color:White'>四</FONT></TH>");</p><p>　　document.writeln(&q

62、uot;<TH BGCOLOR='#8C8C73'><FONT STYLE='font-size:8pt;Color:White'>五</FONT></TH>");</p><p>　　document.writeln("<TH BGCOLOR='#8C8C73'><FONT ST

63、YLE='font-size:8pt;Color:White'>六</FONT></TH>");</p><p>　　document.writeln("</TR><TR>");</p><p>　　column = 0;</p><p>　　for (i=0; i&

64、lt;startDay; i++) {</p><p>　　document.writeln("\n<TD><FONT STYLE='font-size:8pt'> </FONT></TD>");</p><p><b>　　column++;</b></p><p

65、><b>　　}</b></p><p>　　for (i=1; i<=nDays; i++) {</p><p>　　if (i == thisDay) {</p><p>　　document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='

66、#FF8040'><FONT STYLE='font-size:8pt;Color:#ffffff'><B>")</p><p><b>　　}</b></p><p><b>　　else {</b></p><p>　　document.writeln(&

67、quot;</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:8pt;font-family:Arial;font-weight:bold;Color:#8C8C73'>");</p><p><b>　　}</b><

68、;/p><p>　　document.writeln(i);</p><p>　　if (i == thisDay) document.writeln("</FONT></TD>")</p><p><b>　　column++;</b></p><p>　　if (column

69、== 7) {</p><p>　　document.writeln("<TR>"); </p><p>　　column = 0;</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　docum

70、ent.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#FCFCFA'>")</p><p>　　document.writeln("<FORM NAME='clock' onSubmit=

71、'0'><FONT STYLE='font-size:8pt;Color:#8C8C73'>")</p><p>　　document.writeln("<strong>北京時(shí)間</strong><br><INPUT TYPE='Text' NAME='face' ALI

72、GN='TOP' style='font-size: 9pt;color:#8C8C73;border:0;' size=12></FONT></TD></TR></TABLE>")</p><p>　　document.writeln("</TD></TR></TABLE>

73、;</FORM>");</p><p><b>　　}</b></p><p><b>　　</SCRIPT></b></p><p>　　<SCRIPT language=JavaScript></p><p>　　var timerID = null

74、;</p><p>　　var timerRunning = false;</p><p>　　<!-- 此特效使用《網(wǎng)頁(yè)特效精靈》編輯--></p><p>　　<!-- XXX2007年1月13日修改--></p><p>　　function stopclock (){</p><p>　

75、　if(timerRunning)</p><p>　　clearTimeout(timerID);</p><p>　　timerRunning = false;}</p><p><b>　　//顯示當(dāng)前時(shí)間</b></p><p>　　function showtime () {</p><p&

76、gt;　　var now = new Date();</p><p>　　var hours = now.getHours();</p><p>　　var minutes = now.getMinutes();</p><p>　　var seconds = now.getSeconds()</p><p>　　var timeValue

77、= "" +((hours >= 12) ? "下午 " : "上午 " )</p><p>　　timeValue += ((hours >12) ? hours -12 :hours)</p><p>　　timeValue += ((minutes < 10) ? ":0" : &quo

78、t;:") + minutes</p><p>　　timeValue += ((seconds < 10) ? ":0" : ":") + seconds</p><p>　　document.clock.face.value = timeValue;</p><p>　　timerID = setTimeo

79、ut("showtime()",1000);//設(shè)置超時(shí),使時(shí)間動(dòng)態(tài)顯示</p><p>　　timerRunning = true;}</p><p>　　function startclock () {</p><p>　　stopclock();</p><p>　　showtime();}</p>&

80、lt;p><b>　　</SCRIPT></b></p><p>　　3.4 個(gè)人簡(jiǎn)歷頁(yè)面的設(shè)計(jì)</p><p>　　用表格的形式制作個(gè)人簡(jiǎn)歷，頂端顯示姓名和聯(lián)系方式，突出顯示，便于聯(lián)系；另外，加入介紹內(nèi)容：教育經(jīng)歷、培訓(xùn)經(jīng)歷、社會(huì)實(shí)踐、在校期間任職情況、計(jì)算機(jī)技能、外語(yǔ)技能、獎(jiǎng)勵(lì)和自我評(píng)價(jià)。</p><p>　　3.5 學(xué)校

81、簡(jiǎn)介頁(yè)面的設(shè)計(jì)</p><p>　　加入學(xué)校的簡(jiǎn)介，包括學(xué)校歷史、合并情況、院系設(shè)置和教學(xué)實(shí)力等等的綜合介紹，為使更多的人了解長(zhǎng)安大學(xué)，同時(shí)還加入了分校區(qū)的校景，如校本部、渭水校區(qū)、雁塔校區(qū)和太白基地，運(yùn)用Flash圖片瀏覽，增加了動(dòng)感色彩。</p><p>　　圖5 校本部圖6 渭水校區(qū)</p><p>　　圖7 雁塔校區(qū)圖8 太白實(shí)習(xí)基地</p>

82、;<p>　　3.6 美文欣賞頁(yè)面的設(shè)計(jì)</p><p>　　書(shū)籍是人類(lèi)知識(shí)的源泉，本內(nèi)容板塊安排了許多從網(wǎng)上搜集的好文章，包括清新散文、心靈雜文和心情感悟三大版塊，每個(gè)版塊下又分別包括6篇文章，分別為清新散文：幸福其實(shí)很簡(jiǎn)單、聽(tīng)雪、棉花、（北方人，南方人）、鄉(xiāng)村的夜晚、最后一朵玫瑰；心靈雜文：心的存折、別讓灰塵落到心上、（烏鴉、蚊子、大熊貓）、教養(yǎng)的證據(jù)、給自己多點(diǎn)愛(ài)心、人生的意義與價(jià)值；心情感悟

83、：飄香的生命、泥巴和星星之間、對(duì)月、一生的功課、受用一生的話、丟棄的日子；</p><p>　　3.7 網(wǎng)站地圖頁(yè)面的設(shè)計(jì)</p><p>　　為了幫助讀者更好的瀏覽本站點(diǎn)，不會(huì)有所遺漏，制作了本頁(yè)面。本地圖以層次的形式展示所有主要頁(yè)面，MyDoing為站點(diǎn)名稱以藍(lán)色顯示，下面為一級(jí)子頁(yè)面，顏色為棕色，再下面一級(jí)即為一級(jí)子頁(yè)面包含的主要頁(yè)面，最終效果如圖9所示。</p>&l

84、t;p><b>　　圖9 網(wǎng)站地圖</b></p><p>　　3.8 關(guān)于頁(yè)面的設(shè)計(jì)</p><p>　　關(guān)于頁(yè)面較隨意的加入幾個(gè)內(nèi)容，反應(yīng)了自己的一面，其中提到了關(guān)于網(wǎng)站布局、關(guān)于制作工具和感謝。</p><p>　　關(guān)于網(wǎng)站布局是真實(shí)的反映了自己做網(wǎng)頁(yè)的情況，制作工具提到了自己在網(wǎng)頁(yè)制作中所用到的工具，感謝部分是對(duì)幫助自己制作網(wǎng)頁(yè)的

85、人表示的感謝，真的謝謝你們。</p><p>　　3.9 開(kāi)發(fā)過(guò)程中遇到的問(wèn)題及解決方案：</p><p>　　1、背景音樂(lè)的不連續(xù)播放問(wèn)題</p><p>　　剛開(kāi)始在每個(gè)頁(yè)面中加入背景音樂(lè)，但是隨著頁(yè)面的跳轉(zhuǎn)，背景音樂(lè)會(huì)中斷重新開(kāi)始，感覺(jué)很不好，怎么能夠讓其能夠循環(huán)不斷的播放呢？</p><p>　　經(jīng)過(guò)查閱資料，沒(méi)找到介紹的，經(jīng)過(guò)冥思苦

86、想，后來(lái)想到框架頁(yè)面，將背景音樂(lè)和主頁(yè)面放到兩個(gè)不同的頁(yè)面中，然后將音樂(lè)頁(yè)面設(shè)為0，即為隱藏，則主頁(yè)面的瀏覽跳轉(zhuǎn)不會(huì)影響背景音樂(lè)的播放，主頁(yè)面的源代碼為：</p><p>　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" </p><p>　　"http://www.w3.org/T

87、R/xhtml1/DTD/xhtml1-frameset.dtd"></p><p>　　<html xmlns="http://www.w3.org/1999/xhtml"></p><p><b>　　<head></b></p><p>　　<meta http-equiv

88、="Content-Type" content="text/html; charset=gb2312" /></p><p>　　<title>計(jì)算機(jī)網(wǎng)絡(luò)課程設(shè)計(jì) by 2401030219 MyDoing</title></p><p><b>　　</head></b></p&

89、gt;<p>　　<frameset rows="0,*" frameborder="no" border="0" framespacing="0"></p><p>　　<frame src="music.html" name="topFrame" scroll

90、ing="no" noresize="noresize" id="topFrame" title="topFrame" /></p><p>　　<frame src="index.html" name="mainFrame" id="mainFrame" tit

91、le="mainFrame" /></p><p>　　</frameset></p><p>　　<noframes></p><p>　　<body></body></p><p>　　</noframes></p><p>&l

92、t;b>　　</html></b></p><p>　　2、Flash的透明顯示效果</p><p>　　剛開(kāi)始放置Flash，會(huì)擋住一些背景，變得不漂亮，不知道是什么原因，經(jīng)過(guò)一番搜索，是由于沒(méi)有Flash透明效果，具體設(shè)置為：</p><p>　　在Dreamweaver中單擊選中Flash，在屬性面板單擊“參數(shù)”按鈕，增加參數(shù)“w

93、mode”，參數(shù)的值為transparent，在代碼段中反映為</p><p>　　<param name="wmode" value="transparent" /> 。</p><p>　　第四章 系統(tǒng)的使用說(shuō)明與安裝</p><p>　　4.1 運(yùn)行環(huán)境要求</p><p>　　Win

94、dows XP SP2</p><p>　　Ajiu AspWebServer V1.0（AWS）</p><p><b>　　4.2 安裝設(shè)置</b></p><p>　　A. 將本網(wǎng)站拷貝到硬盤(pán)上的某一目錄下，如：拷貝至c:\mydoing下；</p><p>　　B. 將AWS拷貝自上述文件夾，既c:\mydoin

95、g，運(yùn)行AWS；</p><p>　　C. 訪問(wèn)：在瀏覽器的地址欄中輸入http://localhost或http://127.0.0.1 ，回車(chē)即可訪問(wèn)。</p><p><b>　　第五章 參考文獻(xiàn)</b></p><p>　　[1] W3C school網(wǎng)站 《HTML幫助》網(wǎng)絡(luò)電子教程</p><p>　　[2]