個(gè)人網(wǎng)站設(shè)計(jì) 畢業(yè)論文

1、<p><b>　　畢 業(yè) 論 文</b></p><p>　　題 目 個(gè)人網(wǎng)站設(shè)計(jì) </p><p>　　英文題目Personal website design </p><p>　　院 系 信息科學(xué)與技術(shù)學(xué)院 </p><p>　　專(zhuān) 業(yè) 計(jì)算機(jī)應(yīng)用

2、技術(shù) </p><p><b>　　摘 要</b></p><p>　　當(dāng)前，隨著計(jì)算機(jī)技術(shù)與通信技術(shù)的發(fā)展，網(wǎng)絡(luò)的規(guī)模也逐漸增大。網(wǎng)絡(luò)的元素也隨之而不斷增加。有的利用其進(jìn)行通信，有的利用其作為商業(yè)用途，在網(wǎng)絡(luò)上進(jìn)行出售、收購(gòu)、宣傳等用途。從而使得網(wǎng)絡(luò)越來(lái)越成為現(xiàn)今社會(huì)上必不可少的元素，而網(wǎng)站就是這個(gè)網(wǎng)絡(luò)里的一個(gè)很大的元素。</p><p

3、>　　所謂網(wǎng)站(Website)，就是指在網(wǎng)際網(wǎng)路（因特網(wǎng)）上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。簡(jiǎn)單地說(shuō)，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開(kāi)的資訊（信息），或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)路服務(wù)（網(wǎng)絡(luò)服務(wù)）。人們可以通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)訪(fǎng)問(wèn)網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)路服務(wù)。隨著時(shí)代的發(fā)展，生活水平的提高，人民對(duì)于娛樂(lè)的方式也越發(fā)豐富，而以記錄點(diǎn)滴生

4、活為主的文章網(wǎng)則是其中一種較為受廣大人民群眾喜愛(ài)的消遣方式。</p><p>　　本作品在內(nèi)容的組織安排上盡量做到結(jié)構(gòu)合理、內(nèi)容翔實(shí)、通俗易懂，有利于讀者理解本作品的制作流程、結(jié)構(gòu)等。在本作品里主要有主頁(yè)、相冊(cè)、留言、日志和簡(jiǎn)歷的功能。</p><p>　　關(guān)鍵字：個(gè)人網(wǎng)頁(yè)系統(tǒng),HTML,JavaScript</p><p><b>　　Abstract&

5、lt;/b></p><p>　　At present, with computer technology and communication technology, network size also increases. Elements of the network also will be increasing. Some use their communication, and some use

6、it as a commercial use on the network for the sale, purchase, promotion and other purposes. So that the network is increasingly becoming an essential element of modern society, and the site where the network is a big ele

7、ment. The so-called website (Website), refers to the Internet (the Internet), according</p><p>　　With the development, improvement of living standards, people are more and more entertaining way for the

8、rich, but to record the bit of life based network is one of the </p><p>　　article is more loved by the masses pastime. </p><p>　　The content of this work as far as possible on the organization o

9、f structured, informative, easy to understand, is conducive to the reader to understand the work of the production process and structure. in this works mainly with The home page photo album, guestbook, log and resume fun

10、ction.</p><p>　　Key words: Personal Web Pages system, HTML, JavaScript</p><p><b>　　目 錄</b></p><p><b>　　摘 要I</b></p><p>　　AbstractII</p&g

11、t;<p><b>　　1 網(wǎng)站的概要</b></p><p>　　1.1網(wǎng)站的背景(1)</p><p>　　1.2網(wǎng)站的目的(1)</p><p>　　1.3網(wǎng)站的分類(lèi)(4)</p><p><b>　　2 網(wǎng)站的分析</b></p><p>　　

12、2.1 技術(shù)可行性分析(6)</p><p>　　2.2 經(jīng)濟(jì)可行性分析(6)</p><p>　　2.3 操作可行性分析(7)</p><p><b>　　3 總體設(shè)計(jì)</b></p><p>　　3.1 站點(diǎn)設(shè)計(jì)(8)</p><p>　　3.2 資源目錄規(guī)劃(8)</p&

13、gt;<p>　　3.3 板塊設(shè)計(jì)(9)</p><p>　　3.4功能分析(10)</p><p>　　3.5 最終效果圖美化頁(yè)面樣式 (15)</p><p>　　3.6首頁(yè)添加動(dòng)態(tài)行為(16)</p><p><b>　　4 網(wǎng)站運(yùn)行</b></p><p>　　4.

14、1 IIS的安裝于設(shè)置(18)</p><p>　　4.2 模塊測(cè)試(18)</p><p><b>　　5 總結(jié)</b></p><p><b>　　致謝(21)</b></p><p><b>　　參考文獻(xiàn)(22)</b></p><p>

15、<b>　　1 網(wǎng)站的概述</b></p><p><b>　　1.1網(wǎng)站背景</b></p><p>　　當(dāng)前，隨著計(jì)算機(jī)技術(shù)與通信技術(shù)的發(fā)展，網(wǎng)絡(luò)的規(guī)模也逐漸增大。網(wǎng)絡(luò)的元素也隨之而不斷增加。有的利用其進(jìn)行進(jìn)行通信，有的利用其作為商業(yè)用途，在網(wǎng)絡(luò)上進(jìn)行出售、收購(gòu)、宣傳等用途。從而使得網(wǎng)絡(luò)越來(lái)越成為現(xiàn)今社會(huì)上必不可少的元素，而網(wǎng)站就是這個(gè)網(wǎng)絡(luò)

16、的一個(gè)很大的元素。</p><p>　　所謂網(wǎng)站(Website)，就是指在網(wǎng)際網(wǎng)路（因特網(wǎng)）上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用於展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。簡(jiǎn)單地說(shuō)，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開(kāi)的資訊（信息），或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)路服務(wù)（網(wǎng)絡(luò)服務(wù)）。人們可以通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)訪(fǎng)問(wèn)網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)路服務(wù)。</p>

17、<p><b>　　1.2網(wǎng)站的目的</b></p><p>　　一個(gè)網(wǎng)站的成功與否與建站前的網(wǎng)站規(guī)劃有著極為重要的關(guān)系。網(wǎng)站建設(shè)公司提示在建立網(wǎng)站前應(yīng)明確建設(shè)網(wǎng)站的目的，確定網(wǎng)站的功能，確定網(wǎng)站規(guī)模、投入費(fèi)用，進(jìn)行必要的市場(chǎng)分析等。只有詳細(xì)的規(guī)劃，才能避免在網(wǎng)站建設(shè)中出現(xiàn)的很多問(wèn)題，使網(wǎng)站建設(shè)能順利進(jìn)行。</p><p>　　網(wǎng)站規(guī)劃是指在網(wǎng)站建設(shè)前對(duì)市場(chǎng)

18、進(jìn)行分析、確定網(wǎng)站的目的和功能，并根據(jù)需要對(duì)網(wǎng)站建設(shè)中的技術(shù)、內(nèi)容、費(fèi)用、測(cè)試、維護(hù)等做出規(guī)劃。網(wǎng)站規(guī)劃對(duì)網(wǎng)站建設(shè)起到計(jì)劃和指導(dǎo)的作用，對(duì)網(wǎng)站的內(nèi)容和維護(hù)起到定位作用。</p><p>　　網(wǎng)站規(guī)劃書(shū)出應(yīng)該盡可能涵蓋網(wǎng)站規(guī)劃中的各個(gè)方面，網(wǎng)站規(guī)劃書(shū)的寫(xiě)作要科學(xué)、認(rèn)真、實(shí)事求是。</p><p>　　企業(yè)網(wǎng)站建設(shè)方案包含的內(nèi)容</p><p>　　一、建設(shè)網(wǎng)站前的市場(chǎng)

19、分析（企業(yè)自行處理）</p><p>　　1、相關(guān)行業(yè)的市場(chǎng)是怎樣的,市場(chǎng)有什么樣的特點(diǎn)，是否能夠在互聯(lián)網(wǎng)上開(kāi)展公司業(yè)務(wù)。</p><p>　　2、市場(chǎng)主要競(jìng)爭(zhēng)者分析，競(jìng)爭(zhēng)對(duì)手上網(wǎng)情況及其網(wǎng)站策劃、功能作用。</p><p>　　3、公司自身?xiàng)l件分析、公司概況、市場(chǎng)優(yōu)勢(shì)，可以利用網(wǎng)站提升哪些競(jìng)爭(zhēng)力，建設(shè)網(wǎng)站的能力（費(fèi)用、技術(shù)、人力等）。</p><

20、;p>　　二、建設(shè)網(wǎng)站目的及功能定位（企業(yè)自行處理或與專(zhuān)業(yè)公司商議）</p><p>　　1、為什么要建立網(wǎng)站，是為了樹(shù)立企業(yè)形象，宣傳產(chǎn)品，進(jìn)行電子商務(wù)，還是建立行業(yè)性網(wǎng)站？是企業(yè)的基本需要還是市場(chǎng)開(kāi)拓的延伸？</p><p>　　2、整合公司資源，確定網(wǎng)站功能。根據(jù)公司的需要和計(jì)劃，確定網(wǎng)站的功能類(lèi)型：</p><p>　　企業(yè)型網(wǎng)站、應(yīng)用型網(wǎng)站、商業(yè)型網(wǎng)

21、站（行業(yè)型網(wǎng)站）、電子商務(wù)型網(wǎng)站；企業(yè)網(wǎng)站又分為企業(yè)形象型、產(chǎn)品宣傳型、網(wǎng)上營(yíng)銷(xiāo)型、客戶(hù)服務(wù)型、電子商務(wù)型等。</p><p>　　3、根據(jù)網(wǎng)站功能，確定網(wǎng)站應(yīng)達(dá)到的目的作用。</p><p>　　4、企業(yè)內(nèi)部網(wǎng)（intranet）的建設(shè)情況和網(wǎng)站的可擴(kuò)展性。</p><p>　　三、網(wǎng)站技術(shù)解決方案（與專(zhuān)業(yè)公司商議）</p><p>　　根

22、據(jù)網(wǎng)站的功能確定網(wǎng)站技術(shù)解決方案。</p><p>　　1、采用自建服務(wù)器，還是租用虛擬主機(jī)。</p><p>　　2、選擇操作系統(tǒng)，用window2000/nt還是unix,linux。分析投入成本、功能、開(kāi)發(fā)、穩(wěn)定性和安全性等。</p><p>　　3、采用模板自助建站、建站套餐還是個(gè)性化開(kāi)發(fā)。</p><p>　　4、網(wǎng)站安全性措施，防

23、黑、防病毒方案（如果采用虛擬主機(jī)，則該項(xiàng)由專(zhuān)業(yè)公司代勞）。</p><p>　　5、選擇什么樣的動(dòng)態(tài)程序及相應(yīng)數(shù)據(jù)庫(kù)。如程序asp、jsp、php；數(shù)據(jù)庫(kù)sql、access、oracle等。</p><p>　　四、網(wǎng)站內(nèi)容及實(shí)現(xiàn)方式（與專(zhuān)業(yè)公司商議）</p><p>　　1、根據(jù)網(wǎng)站的目的確定網(wǎng)站的結(jié)構(gòu)導(dǎo)航。</p><p>　　一般企業(yè)

24、型網(wǎng)站應(yīng)包括：公司簡(jiǎn)介、企業(yè)動(dòng)態(tài)、產(chǎn)品介紹、客戶(hù)服務(wù)、聯(lián)系方式、在線(xiàn)留言等基本內(nèi)容。更多內(nèi)容如：常見(jiàn)問(wèn)題、營(yíng)銷(xiāo)網(wǎng)絡(luò)、招賢納士、在線(xiàn)論壇、英文版等等。</p><p>　　2、根據(jù)網(wǎng)站的目的及內(nèi)容確定網(wǎng)站整合功能。</p><p>　　如flash引導(dǎo)頁(yè)、會(huì)員系統(tǒng)、網(wǎng)上購(gòu)物系統(tǒng)、在線(xiàn)支付、問(wèn)卷調(diào)查系統(tǒng)、在線(xiàn)支付、信息搜索查詢(xún)系統(tǒng)、流量統(tǒng)計(jì)系統(tǒng)等。</p><p>　　

25、3、確定網(wǎng)站的結(jié)構(gòu)導(dǎo)航中的每個(gè)頻道的子欄目。</p><p>　　如公司簡(jiǎn)介中可以包括：總裁致詞、發(fā)展歷程、企業(yè)文化、核心優(yōu)勢(shì)、生產(chǎn)基地、科技研發(fā)、合作伙伴、主要客戶(hù)、客戶(hù)評(píng)價(jià)等；客戶(hù)服務(wù)可以包括：服務(wù)熱線(xiàn)、服務(wù)宗旨、服務(wù)項(xiàng)目等。</p><p>　　4、確定網(wǎng)站內(nèi)容的實(shí)現(xiàn)方式。</p><p>　　如產(chǎn)品中心使用動(dòng)態(tài)程序數(shù)據(jù)庫(kù)還是靜態(tài)頁(yè)面；營(yíng)銷(xiāo)網(wǎng)絡(luò)是采用列表方式還

26、是地圖展示。</p><p><b>　　五、網(wǎng)頁(yè)設(shè)計(jì)</b></p><p>　　1、網(wǎng)頁(yè)設(shè)計(jì)美術(shù)設(shè)計(jì)要求，網(wǎng)頁(yè)美術(shù)設(shè)計(jì)一般要與企業(yè)整體形象一致，要符合企業(yè)ci規(guī)范。要注意網(wǎng)頁(yè)色彩、圖片的應(yīng)用及版面策劃，保持網(wǎng)頁(yè)的整體一致性。</p><p>　　2、在新技術(shù)的采用上要考慮主要目標(biāo)訪(fǎng)問(wèn)群體的分布地域、年齡階層、網(wǎng)絡(luò)速度、閱讀習(xí)慣等。</

27、p><p>　　3、制定網(wǎng)頁(yè)改版計(jì)劃，如半年到一年時(shí)間進(jìn)行較大規(guī)模改版等。</p><p><b>　　六、費(fèi)用預(yù)算</b></p><p>　　1、 企業(yè)建站費(fèi)用的初步預(yù)算</p><p>　　一般根據(jù)企業(yè)的規(guī)模、建站的目的而定。</p><p>　　2、專(zhuān)業(yè)建站公司提供詳細(xì)的功能描述及報(bào)價(jià)，企業(yè)進(jìn)

28、行性?xún)r(jià)比研究。</p><p>　　3、 網(wǎng)站的價(jià)格從幾千元到十幾萬(wàn)元不等。如果排除模板式自助建站（通常認(rèn)為企業(yè)的網(wǎng)站無(wú)論大小，必須有排他性，如果千篇一律對(duì)企業(yè)形象的影響極大）和牟取暴利的因素，網(wǎng)站建設(shè)的費(fèi)用一般與功能要求是成正比的。</p><p><b>　　七、網(wǎng)站維護(hù)</b></p><p>　　1、服務(wù)器及相關(guān)軟硬件的維護(hù)，對(duì)可能出現(xiàn)

29、的問(wèn)題進(jìn)行評(píng)估，制定響應(yīng)時(shí)間。</p><p>　　2、數(shù)據(jù)庫(kù)維護(hù)，有效地利用數(shù)據(jù)是網(wǎng)站維護(hù)的重要內(nèi)容，因此數(shù)據(jù)庫(kù)的維護(hù)要受到重視。</p><p>　　3、內(nèi)容的更新、調(diào)整等。</p><p>　　4、制定相關(guān)網(wǎng)站維護(hù)的規(guī)定，將網(wǎng)站維護(hù)制度化、規(guī)范化。</p><p>　　5、說(shuō)明：動(dòng)態(tài)信息的維護(hù)通常由企業(yè)安排相應(yīng)人員進(jìn)行在線(xiàn)的更新管理；靜

30、態(tài)信息（即沒(méi)用動(dòng)態(tài)程序數(shù)據(jù)庫(kù)支持）可由專(zhuān)業(yè)公司進(jìn)行維護(hù)。</p><p><b>　　八、網(wǎng)站測(cè)試</b></p><p>　　網(wǎng)站發(fā)布前要進(jìn)行細(xì)致周密的測(cè)試，以保證正常瀏覽和使用。主要測(cè)試內(nèi)容：</p><p>　　1、文字、圖片是否有錯(cuò)誤。</p><p>　　2、程序及數(shù)據(jù)庫(kù)測(cè)試。</p><p

31、>　　3、鏈接是否有錯(cuò)誤。</p><p>　　4、服務(wù)器穩(wěn)定性、安全性。</p><p>　　5、網(wǎng)頁(yè)兼容性測(cè)試，如瀏覽器、顯示器。</p><p>　　本設(shè)計(jì)的主要目標(biāo)是開(kāi)發(fā)名為《個(gè)人網(wǎng)站》的文章網(wǎng)類(lèi)型網(wǎng)站，用戶(hù)可通過(guò)本網(wǎng)站瀏覽一些關(guān)于各類(lèi)文章的資訊或信息，例如：歷史、各國(guó)的行程或相關(guān)等。而且還可以通過(guò)留言板發(fā)表留言、互相討論。</p>&l

32、t;p>　　按時(shí)保質(zhì)地完成《個(gè)人網(wǎng)站》網(wǎng)站，并掌握到制作系統(tǒng)的過(guò)程與技術(shù)。</p><p><b>　　1.3網(wǎng)站的分類(lèi)</b></p><p>　　當(dāng)今時(shí)代,隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的發(fā)展，按用途來(lái)分類(lèi)，網(wǎng)站基本分為三大類(lèi)。</p><p>　　1.3.1搜索引擎類(lèi)</p><p>　　這一類(lèi)的網(wǎng)站是最為普遍的，而且商

33、業(yè)用途也很廣泛。無(wú)論對(duì)于一般網(wǎng)民，或者辦公人員都是必不可少的網(wǎng)站。（如http：//www.baidu.com這是一個(gè)名為“百度”的搜索引擎網(wǎng)站）</p><p><b>　　1.3.2資源共享</b></p><p>　　這一類(lèi)的網(wǎng)站主要體現(xiàn)于美文雜文、論壇（即BBS）、社區(qū)、平臺(tái)和電子郵件（即Email）網(wǎng)站。這種類(lèi)型的網(wǎng)站是當(dāng)今時(shí)代計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的代表。<

34、/p><p>　　1.3.3專(zhuān)題網(wǎng)站類(lèi)</p><p>　　這一類(lèi)的網(wǎng)站根據(jù)性質(zhì)可分為兩類(lèi)：</p><p>　　企業(yè)商品類(lèi)，這一類(lèi)的網(wǎng)站主要是圍繞一個(gè)商品或一個(gè)企業(yè)而產(chǎn)生的專(zhuān)題網(wǎng)站。</p><p>　　個(gè)人專(zhuān)題類(lèi)，這一類(lèi)的網(wǎng)站主要是由一些有一定網(wǎng)站設(shè)計(jì)基礎(chǔ)的人員，設(shè)計(jì)出來(lái)的一些無(wú)商業(yè)涉及的專(zhuān)題網(wǎng)站。而設(shè)計(jì)這一類(lèi)網(wǎng)站的人員基本上都是按自己的喜好

35、來(lái)設(shè)計(jì)的。（本網(wǎng)站就是這一類(lèi)網(wǎng)站）。</p><p><b>　　2 網(wǎng)站的分析</b></p><p>　　2.1技術(shù)可行性分析</p><p>　　在制作個(gè)人主頁(yè)網(wǎng)站的過(guò)程中需要考慮到技術(shù)可行性的問(wèn)題，對(duì)制作人員一般都要求掌握計(jì)算機(jī)技術(shù)，具有一定的html基礎(chǔ)，至少熟悉運(yùn)用一個(gè)網(wǎng)頁(yè)制作的軟件（如：Dreamweaver），并對(duì)多媒體軟件具

36、有一定的熟悉（如：Photoshop、Flash等等）。作為一個(gè)組織或個(gè)人在萬(wàn)維網(wǎng)上開(kāi)始點(diǎn)的頁(yè)面稱(chēng)為主頁(yè)Homepage，或首頁(yè)，主頁(yè)中通常包括有指向其他相關(guān)頁(yè)面或其他節(jié)點(diǎn)的指針（超級(jí)鏈接）。在邏輯上將視為一個(gè)整體的一系列頁(yè)面的有機(jī)集合稱(chēng)為網(wǎng)站（Website或Site）。</p><p>　　Web頁(yè)面也就是通常所說(shuō)的網(wǎng)頁(yè)，在這里不作區(qū)分。</p><p>　　HTML是一種規(guī)范，一種標(biāo)

37、準(zhǔn)，它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫(huà)面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書(shū)寫(xiě)出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過(guò)程，編制者只能通過(guò)顯示效果來(lái)分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全相同的解釋?zhuān)蚨赡軙?huì)

38、有不同的顯示效果。</p><p>　　HTML之所以稱(chēng)為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。所謂超級(jí)鏈接，就是一種URL指針，通過(guò)激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁(yè)。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。</p><p>　　由此可見(jiàn)，網(wǎng)頁(yè)的本質(zhì)就是HTML，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、CGI、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，

39、HTML是Web編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。</p><p>　　2.2經(jīng)濟(jì)可行性分析 </p><p>　　本作品制作全程基于個(gè)人網(wǎng)站管理系統(tǒng)的開(kāi)發(fā)，因此無(wú)需太多的人力和物力，管理方便，所以無(wú)需龐大的費(fèi)用。同時(shí)本作品是一個(gè)靜網(wǎng)頁(yè)，每次瀏覽都需要一個(gè)Web服務(wù)器支持，所以從經(jīng)濟(jì)上完全是可行的。</p><p>　　2.3操作可行性分析 &

40、lt;/p><p>　　本作品操作簡(jiǎn)單、界面簡(jiǎn)潔清晰, 對(duì)于那些有一般的計(jì)算機(jī)知識(shí)的人員就可以輕松上手。并兼容與所有網(wǎng)頁(yè)瀏覽的軟件(如: Internet Explorer)</p><p>　　由此可見(jiàn)，該網(wǎng)站的操作是可行的，有必要開(kāi)發(fā)本網(wǎng)站。</p><p>　　綜合以上方面，本網(wǎng)站具有很高的開(kāi)發(fā)可行性，無(wú)論是從技術(shù)上，經(jīng)濟(jì)上或者社會(huì)因素方面還是操作上都是可行的。

41、</p><p><b>　　3 總體設(shè)計(jì)</b></p><p><b>　　3.1站點(diǎn)設(shè)計(jì)</b></p><p>　　打開(kāi)Dreamweaver 8→站點(diǎn)→新建站點(diǎn)；</p><p>　　進(jìn)入【站點(diǎn)定義】窗口，點(diǎn)擊【高級(jí)】選項(xiàng)卡</p><p>　　進(jìn)入【本地信息】分

42、類(lèi)窗口分別輸入：</p><p>　　進(jìn)入【測(cè)試服務(wù)器】窗口，分別選擇</p><p>　　點(diǎn)擊【確定】按鈕完成站點(diǎn)設(shè)置。</p><p>　　完成后右下角的站點(diǎn)窗口會(huì)顯示一個(gè)新的站點(diǎn)如圖3.1-1。</p><p><b>　　圖 3.1-1</b></p><p><b>　　3.2

43、資源目錄規(guī)劃</b></p><p>　　創(chuàng)建1個(gè)網(wǎng)站需要獨(dú)立的網(wǎng)站根目錄，里面除了各種各樣的HTML文檔外，還有很多資源文件。創(chuàng)建網(wǎng)站目錄時(shí)，需要按類(lèi)別創(chuàng)建相應(yīng)的資源子目錄，用于存放圖片文件、Flash動(dòng)畫(huà)、CSS文件和JavaScript文件。</p><p>　　圖 3.1-2 規(guī)劃資源目錄</p><p><b>　　3.3版塊設(shè)計(jì)&l

44、t;/b></p><p>　　3.3.1功能模塊圖</p><p>　　圖 3.2-1 功能模塊圖</p><p><b>　　3.3.2頁(yè)面設(shè)計(jì)</b></p><p>　　為了統(tǒng)一全站風(fēng)格，本站5個(gè)頁(yè)面采用統(tǒng)一的頭部和尾部。頭部為視覺(jué)形象部分和導(dǎo)航條部分，底部為個(gè)人信息部分。該網(wǎng)站效果圖使用了比較簡(jiǎn)單的顏色構(gòu)

45、成，可以給人比較清爽的感覺(jué)。網(wǎng)頁(yè)設(shè)計(jì)效果圖如下。</p><p>　　圖 3.2-1個(gè)人網(wǎng)站效果圖</p><p><b>　　3.4功能分析</b></p><p>　　本網(wǎng)站主要是個(gè)人網(wǎng)站，主要內(nèi)容有首頁(yè)、日志、相冊(cè)、簡(jiǎn)歷、留言頁(yè)面，是一個(gè)小型的靜態(tài)網(wǎng)站</p><p><b>　　首頁(yè)</b>

46、</p><p>　　用CSS代碼進(jìn)行布局，并設(shè)置初步的樣式屬性。</p><p><b>　　(二)日志</b></p><p>　　日志頁(yè)面一次顯示5條日志，并加了“下一頁(yè)”超鏈接。其在頁(yè)面中的文章標(biāo)題部分也加了超鏈接，為了使瀏覽者單擊后可以瀏覽具體內(nèi)容。在實(shí)際的網(wǎng)站制作中，瀏覽文章功能有服務(wù)器端完成，這里我采用了JavaScript程序顯

47、示。</p><p>　　將頁(yè)面中5條日志的具體內(nèi)容分別放入可視的p元素中，默認(rèn)瀏覽者只能看到1行。在頁(yè)面添加1個(gè)隱藏的并且絕對(duì)定位的容器，當(dāng)用戶(hù)單擊日志標(biāo)題后，將p元素內(nèi)容及相應(yīng)的標(biāo)題和日期傳遞給這個(gè)容器，并顯示該容器，為了考慮不同分辨率的瀏覽器，隱藏容器的寬度必須使用自適應(yīng)值，通過(guò)CSS設(shè)置將其定位與列表重合，即遮擋日志列表。</p><p>　　圖 3.2-2 個(gè)人網(wǎng)站日志效果圖&l

48、t;/p><p>　　單擊日志的標(biāo)題就會(huì)出現(xiàn)如下圖3.2-2 個(gè)人網(wǎng)站日志效果圖。</p><p>　　圖 3.2-3 個(gè)人網(wǎng)站日志效果圖</p><p><b>　?。ㄈ┫鄡?cè)</b></p><p>　　相冊(cè)中包含了我收藏的個(gè)人照片，班級(jí)照片等內(nèi)容。相冊(cè)頁(yè)面可展示多張圖片縮略圖，其img元素同樣加上了和標(biāo)題內(nèi)容一樣的超鏈

49、接，用戶(hù)單擊該鏈接時(shí)，執(zhí)行openContent（）函數(shù)，并穿遞參數(shù)。超鏈接傳遞的參數(shù)為img元素在代碼中出現(xiàn)的順序，方便getElementsByTagName（）訪(fǎng)問(wèn)。這里同樣有絕對(duì)定位的隱藏容器，不過(guò)有2個(gè)，1個(gè)用于顯示黑色半透明背景，另一個(gè)用于顯示大尺寸圖片。在代碼中先編寫(xiě)第1個(gè)隱藏容器，所以第1個(gè)隱藏容器的z-index屬性值較第2 個(gè)容器低，所以大尺寸圖片將顯示于黑色背景上面。</p><p>　　其

50、代碼將對(duì)應(yīng)的大小尺寸圖片路徑存放于縮略圖img元素的alt屬性中，當(dāng)執(zhí)行openContent（）函數(shù)時(shí)將其賦值給隱藏容器中img元素的src屬性。</p><p>　　圖 3.2-4 個(gè)人網(wǎng)站相冊(cè)效果圖</p><p>　　點(diǎn)擊圖片上方的字或點(diǎn)擊圖片就可把圖片放大如下圖3.2-5。</p><p>　　圖 3.2-5 個(gè)人網(wǎng)站相冊(cè)效果圖</p>&l

51、t;p><b>　?。ㄋ模┖?jiǎn)歷</b></p><p>　　簡(jiǎn)歷是用表單制作的，主要是我的個(gè)人信息，和在學(xué)校里的表現(xiàn)及我的興趣愛(ài)好和我的特長(zhǎng)。從這里我們</p><p>　　圖 3.2-5 個(gè)人網(wǎng)站簡(jiǎn)歷效果圖</p><p><b>　?。ㄎ澹┝粞?lt;/b></p><p>　　這是一個(gè)無(wú)連接的

52、頁(yè)面，制作相對(duì)簡(jiǎn)單。</p><p>　　圖 3.2-4 個(gè)人網(wǎng)站留言效果圖</p><p>　　3.5最終效果圖美化頁(yè)面樣式</p><p>　　該網(wǎng)站我采用了CSS代碼進(jìn)行細(xì)節(jié)美化，使頁(yè)面符合設(shè)計(jì)效果圖。</p><p>　　由于其他頁(yè)面和首頁(yè)的基本樣式布局相似，所以把首頁(yè)CSS代碼公共部分分離到外部樣式表文件中，實(shí)現(xiàn)全站CSS代碼復(fù)用。

53、在E\presonal\目錄下創(chuàng)建CSS樣式文件。命名為style.css其部分代碼如下：</p><p>　　圖3.2-2網(wǎng)站公共樣式表文件</p><p>　　3..5.1用CSS設(shè)置背景圖片和頁(yè)面垂直滾動(dòng)條樣式</p><p>　?。ㄒ唬┯肅SS設(shè)置背景圖片</p><p>　　背景圖片我用的是body元素，設(shè)置背景垂直居中，還可通過(guò)C

54、SS代碼設(shè)置</p><p>　　導(dǎo)航條漸變背景，及主體內(nèi)容中各功能模塊的標(biāo)題欄背景。導(dǎo)航條含4個(gè)超鏈接，</p><p>　　除了導(dǎo)航條本身的背景圖片，超鏈接在鼠標(biāo)滑過(guò)時(shí)也有1個(gè)背景圖片。</p><p>　　形象展示塊的背景可直接設(shè)置如下圖。</p><p>　　圖 3.2-3 板塊背景</p><p>　　將上面

55、圖片放在E:\personal\img目錄，由于這些背景設(shè)置屬于全站共用的樣式，所以CSS代碼在style.Css文件中添加。其部分代碼如下：</p><p>　　body{background:#d9d7cb url(../img/body_bg.jpg) repeat-y center;</p><p>　　font-size:12px;}</p><p>　　

56、#vi{height:85px;</p><p>　　background:#98a363 url(../img/vi.jpg) no-repeat;}</p><p>　?。ǘ╉?yè)面垂直滾動(dòng)條樣式</p><p>　　瀏覽器的垂直滾動(dòng)條的樣式和所屬瀏覽器的樣式保持一致。需要將樣式同時(shí)應(yīng)用與html標(biāo)簽和body標(biāo)簽。在style.css中加入以下代碼：</p

57、><p>　　html,body{scrollbar-face-color: #98a363;</p><p>　　scrollbar-highlight-color: #e3e69d;</p><p>　　scrollbar-shadow-color: #999;</p><p>　　scrollbar-3dlight-color: #000;

58、</p><p>　　scrollbar-arrow-color: #000;</p><p>　　scrollbar-track-color: #f4f4f0;</p><p>　　scrollbar-darkshadow-color: #666;}</p><p>　　3.6首頁(yè)添加動(dòng)態(tài)行為</p><p>　　本

59、站首頁(yè)動(dòng)態(tài)行為較少，主要利用JavaScript顯示用戶(hù)系統(tǒng)信息。在E:\personnal\js\目錄下創(chuàng)建JavaScript文件，命名為main.js，其代碼如下：</p><p>　　function sys(){</p><p>　　if(navigator.appName=='Microsoft Internet Explorer'){</p>&

60、lt;p>　　document.getElementById("sysmsg").innerHTML='您使用的瀏覽器是微軟公司的IE瀏覽器<br />';</p><p><b>　　}</b></p><p>　　document.getElementById("sysmsg").inner

61、HTML+='您的屏幕分辨率為'+screen.width+'×'+screen.height;</p><p><b>　　}</b></p><p>　　function addFav(title) {</p><p>　　var url=location.href;</p><

62、p>　　if (window.sidebar) { </p><p>　　window.sidebar.addPanel(title, url,""); </p><p>　　} else if( document.all ) {</p><p>　　window.external.AddFavorite( url, title);<

63、/p><p>　　} else if( window.opera && window.print ) {</p><p>　　return true;</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　window

64、.onload=sys;</p><p><b>　　4 網(wǎng)站運(yùn)行</b></p><p>　　4.1 ISS 的安裝與設(shè)置</p><p>　　在因特網(wǎng)/企業(yè)網(wǎng)上的基于瀏覽的開(kāi)發(fā)方案中，Microsoft 的IIS起到客戶(hù)端與服務(wù)器端的連接作用。當(dāng)訪(fǎng)問(wèn)者在瀏覽器中鍵入對(duì)你服務(wù)器上的網(wǎng)頁(yè)進(jìn)行訪(fǎng)問(wèn)的請(qǐng)求，這個(gè)請(qǐng)求通過(guò)網(wǎng)絡(luò)路由到服務(wù)器端，然后服務(wù)

65、器再將它交給IIS處理。IIS檢索所請(qǐng)求的頁(yè)，并根據(jù)請(qǐng)求的文件名對(duì)該網(wǎng)頁(yè)進(jìn)行相應(yīng)的處理。如果該文件是以.htm為擴(kuò)展名或者該文件是某種類(lèi)型的請(qǐng)求文件，那么IIS將對(duì)該頁(yè)面上的代碼進(jìn)行處理。</p><p>　　步驟 1 首先，我選擇“開(kāi)始”—>“設(shè)置”—>“控制面板”，在“控制面板”中選擇“添加或刪除程序”后，彈出“添加/刪除程序”對(duì)話(huà)框。</p><p>　　步驟

66、2 在左邊4個(gè)可選擇的導(dǎo)航欄中選擇“添加/刪除Windows組建”按扭，彈出一個(gè)新的對(duì)話(huà)框。</p><p>　　步 驟 3 在顯示的組建里面，選中“Internet信息服務(wù)（IIS）”組建的復(fù)選框，單擊“下一步”按鈕，就進(jìn)入了IIS 的安裝。</p><p><b>　　4.2模塊測(cè)試 </b></p><p>　　模塊測(cè)試的目的是保證每個(gè)模

67、塊作為一個(gè)單元能正確運(yùn)行，所以模塊測(cè)試通常又被稱(chēng)為單元測(cè)試。在這個(gè)測(cè)試步驟中所發(fā)現(xiàn)的往往是編碼和詳細(xì)設(shè)計(jì)的錯(cuò)誤。</p><p>　　在瀏覽器中輸入http://localhost/personal/index.htm就可測(cè)試本網(wǎng)站，分別可以單擊首頁(yè)、簡(jiǎn)歷、日志、相冊(cè)、留言來(lái)測(cè)試網(wǎng)站，將呈現(xiàn)出不同的頁(yè)面。網(wǎng)站測(cè)試部分結(jié)果圖如下所示。</p><p>　　圖 5.2-1 測(cè)試首頁(yè)</p

68、><p><b>　　總 結(jié)</b></p><p>　　2014年10月，我開(kāi)始了我的畢業(yè)設(shè)計(jì)工作，時(shí)至今日，設(shè)計(jì)基本完成。從最初的茫然，到慢慢的進(jìn)入狀態(tài)，再到對(duì)思路逐漸的清晰，整個(gè)寫(xiě)作過(guò)程難以用語(yǔ)言來(lái)表達(dá)。歷經(jīng)了幾個(gè)月的奮戰(zhàn)，緊張而又充實(shí)的畢業(yè)設(shè)計(jì)終于落下了帷幕?；叵脒@段日子的經(jīng)歷和感受，我感慨萬(wàn)千，在這次畢業(yè)設(shè)計(jì)的過(guò)程中，我擁有了無(wú)數(shù)難忘的回憶和收獲。</p

69、><p>　　個(gè)人網(wǎng)站作為本次畢業(yè)設(shè)計(jì)的主題。由于網(wǎng)頁(yè)設(shè)計(jì)我沒(méi)學(xué)怎么學(xué)好，所以當(dāng)畢業(yè)設(shè)計(jì)的任務(wù)目標(biāo)定下來(lái)的時(shí)候，我當(dāng)時(shí)便立刻著手資料的收集工作中，當(dāng)時(shí)面對(duì)浩瀚的書(shū)海真是有些茫然，不知如何下手。在搜集資料的過(guò)程中，我破天荒的去到學(xué)校圖書(shū)館搜集資料，還在網(wǎng)上查找各類(lèi)相關(guān)資料，將這些寶貴的資料全部記在U盤(pán)上，盡量使我的資料完整、精確、數(shù)量多，這有利于論文的撰寫(xiě)。然后我將收集到的資料仔細(xì)整理分類(lèi)，及時(shí)與同學(xué)進(jìn)行溝通。<

70、/p><p>　　資料已經(jīng)查找完畢了，我開(kāi)始著手論文的寫(xiě)作。在寫(xiě)作過(guò)程中遇到困難我就及時(shí)上網(wǎng)找資料或者去吳老師處找一些比較好的范文來(lái)參考，并和同學(xué)互相交流。在大家的幫助下，困難一個(gè)一個(gè)解決掉，論文也慢慢成型。 </p><p>　　論文的大致思路已經(jīng)完成。在設(shè)計(jì)初期，由于沒(méi)有設(shè)計(jì)經(jīng)驗(yàn)，覺(jué)得無(wú)從下手，空有很多設(shè)計(jì)思想，卻不知道應(yīng)該如何寫(xiě)，經(jīng)過(guò)老師的指導(dǎo)，同學(xué)的幫忙。我的設(shè)計(jì)終于完成了</p

71、><p>　　當(dāng)我終于完成了所有打字、繪圖、排版、校對(duì)的任務(wù)后整個(gè)人都很累，但同時(shí)看著電腦熒屏上的畢業(yè)設(shè)計(jì)稿件我的心里是甜的，我覺(jué)得這一切都值了。這次畢業(yè)論文的制作過(guò)程是我的一次再學(xué)習(xí)，再提高的過(guò)程。</p><p><b>　　致 謝</b></p><p>　　畢業(yè)論文暫告收尾，這也意味著我在**的兩年多的學(xué)習(xí)生活既將結(jié)束?；厥准韧约阂簧?/p>

72、最寶貴的時(shí)光能于這樣的校園之中，能在眾多學(xué)富五車(chē)、才華橫溢的老師們的熏陶下度過(guò)，實(shí)是榮幸之極。在這兩年多的時(shí)間里，我在學(xué)習(xí)上和思想上都受益非淺。這除了自身努力外，與老師、同學(xué)和朋友的關(guān)心、支持和鼓勵(lì)是分不開(kāi)的。</p><p>　　網(wǎng)頁(yè)制作是枯燥繁瑣而又富有挑戰(zhàn)的。但老師的諄諄誘導(dǎo)、同學(xué)的出謀劃策及家長(zhǎng)的支持鼓勵(lì)，是我堅(jiān)持完成論文的動(dòng)力源泉。在此，我特別要感謝教導(dǎo)我網(wǎng)頁(yè)制作的老師以及教導(dǎo)我的多媒體實(shí)用軟件的老師。

73、沒(méi)有他們的悉心教導(dǎo)我也不可能這么快掌握網(wǎng)頁(yè)制作這門(mén)技能，所以在此我要衷心地感謝這兩位老師。 感謝12級(jí)計(jì)算機(jī)應(yīng)用及技術(shù)的各位同學(xué)，與他們的交流使我受益頗多。最后要感謝我的家人以及我的朋友們對(duì)我的理支持、鼓勵(lì)和幫助，正是因?yàn)橛辛怂麄?，我所做的一切才更有意義；也正是因?yàn)橛辛怂麄?，我才有了追求進(jìn)步的勇氣。 時(shí)間的倉(cāng)促及自身專(zhuān)業(yè)水平的不足，整篇論文肯定存在尚未發(fā)現(xiàn)的缺點(diǎn)和錯(cuò)誤。懇請(qǐng)閱讀此篇論文的老師、同學(xué)，多予指正，不勝感激。&

74、lt;/p><p><b>　　參考文獻(xiàn)</b></p><p>　　[1] 鄧佑權(quán)，呂洋波.零基礎(chǔ)學(xué)Dreamweaver CS3+ASP[Z].機(jī)械工業(yè)出版社，2007.108~115</p><p>　　[2] 藝博，張明真.網(wǎng)頁(yè)設(shè)計(jì)與制作—Macromedia Dreamweaver 8[Z].高等教育出版社,2007.99~104&l

75、t;/p><p>　　[3] （美）菲拉納根.JavaScript權(quán)威指南[Z].機(jī)械工業(yè)出版，2007. 67~85</p><p>　　[4] 王紅衛(wèi).完全掌握Photoshop CS4超級(jí)手冊(cè)[Z].機(jī)械工業(yè)出版社,2010.55~60</p><p>　　[5] 溫謙.HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局從入門(mén)到精通[Z]. 人民郵電出版社2008. 52~59&

76、lt;/p><p>　　[6] (美)約克.CSS入門(mén)經(jīng)典[Z].清華大學(xué)出版社，2008.105~109</p><p>　　[7] 張長(zhǎng)富，黃中敏.JavaScript動(dòng)態(tài)網(wǎng)頁(yè)編程實(shí)例手冊(cè)[Z].海洋出社，2005.110</p><p><b>　　~116</b></p><p>　　[8] （美）奧利弗莫里森.