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

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

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

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

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

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

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

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

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

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

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

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

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

20、;p>　　二、建設(shè)網(wǎng)站目的及功能定位（企業(yè)自行處理或與專業(yè)公司商議）</p><p>　　1、為什么要建立網(wǎng)站，是為了樹立企業(yè)形象，宣傳產(chǎn)品，進行電子商務(wù)，還是建立行業(yè)性網(wǎng)站？是企業(yè)的基本需要還是市場開拓的延伸？</p><p>　　2、整合公司資源，確定網(wǎng)站功能。根據(jù)公司的需要和計劃，確定網(wǎng)站的功能類型：</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)上營銷型、客戶服務(wù)型、電子商務(wù)型等。</p><p>　　3、根據(jù)網(wǎng)站功能，確定網(wǎng)站應(yīng)達到的目的作用。</p><p>　　4、企業(yè)內(nèi)部網(wǎng)（intranet）的建設(shè)情況和網(wǎng)站的可擴展性。</p><p>　　三、網(wǎng)站技術(shù)解決方案（與專業(yè)公司商議）</p><p>　　根

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

41、</p><p><b>　　3 總體設(shè)計</b></p><p><b>　　3.1站點設(shè)計</b></p><p>　　打開Dreamweaver 8→站點→新建站點；</p><p>　　進入【站點定義】窗口，點擊【高級】選項卡</p><p>　　進入【本地信息】分

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

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

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

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

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

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

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

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

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

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

52、頁面，制作相對簡單。</p><p>　　圖 3.2-4 個人網(wǎng)站留言效果圖</p><p>　　3.5最終效果圖美化頁面樣式</p><p>　　該網(wǎng)站我采用了CSS代碼進行細節(jié)美化，使頁面符合設(shè)計效果圖。</p><p>　　由于其他頁面和首頁的基本樣式布局相似，所以把首頁CSS代碼公共部分分離到外部樣式表文件中，實現(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è)置背景圖片和頁面垂直滾動條樣式</p><p>　?。ㄒ唬┯肅SS設(shè)置背景圖片</p><p>　　背景圖片我用的是body元素，設(shè)置背景垂直居中，還可通過C

54、SS代碼設(shè)置</p><p>　　導(dǎo)航條漸變背景，及主體內(nèi)容中各功能模塊的標題欄背景。導(dǎo)航條含4個超鏈接，</p><p>　　除了導(dǎo)航條本身的背景圖片，超鏈接在鼠標滑過時也有1個背景圖片。</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>　?。ǘ╉撁娲怪睗L動條樣式</p><p>　　瀏覽器的垂直滾動條的樣式和所屬瀏覽器的樣式保持一致。需要將樣式同時應(yīng)用與html標簽和body標簽。在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首頁添加動態(tài)行為</p><p>　　本

59、站首頁動態(tài)行為較少，主要利用JavaScript顯示用戶系統(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)站運行</b></p><p>　　4.1 ISS 的安裝與設(shè)置</p><p>　　在因特網(wǎng)/企業(yè)網(wǎng)上的基于瀏覽的開發(fā)方案中，Microsoft 的IIS起到客戶端與服務(wù)器端的連接作用。當訪問者在瀏覽器中鍵入對你服務(wù)器上的網(wǎng)頁進行訪問的請求，這個請求通過網(wǎng)絡(luò)路由到服務(wù)器端，然后服務(wù)

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

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

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

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

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

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

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

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

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

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

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

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