個人網(wǎng)站設(shè)計及實(shí)現(xiàn)畢業(yè)設(shè)計論文

1、<p><b>　　個人網(wǎng)站設(shè)計及實(shí)現(xiàn)</b></p><p><b>　　摘 要：</b></p><p>　　網(wǎng)絡(luò)發(fā)展到今天，建立網(wǎng)站已經(jīng)成為一個很普遍的問題了。對于企業(yè)家來說，建立好的網(wǎng)站可以搶占新世紀(jì)發(fā)展的戰(zhàn)略要點(diǎn)。建立新的企業(yè)形象，直接開拓國際市場。對于個人來說，建設(shè)好的個人網(wǎng)站可以更加方便的收集信息，開展更加直接的網(wǎng)絡(luò)

2、交流，使用自己構(gòu)造的平臺，可以為畢業(yè)后找工作做好充分的準(zhǔn)備。在我的個人網(wǎng)站制作過程中，主要是針對我網(wǎng)站設(shè)計的方向和目的、網(wǎng)站設(shè)計的整個流程出發(fā)，然后通過自己設(shè)計的這個個人網(wǎng)站作品來說明并演示一個網(wǎng)站制作過程。這篇論文的主要內(nèi)容是個人網(wǎng)站的設(shè)計思想，整體規(guī)化及相關(guān)的基礎(chǔ)科知識。網(wǎng)站的規(guī)化又包括網(wǎng)頁的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)頁的風(fēng)格、顏色的搭配、版面的布局、文字圖片的運(yùn)用等。</p><p>　　關(guān)鍵詞：網(wǎng)站設(shè)計；網(wǎng)站規(guī)

3、化；網(wǎng)站主題</p><p>　　隨著經(jīng)濟(jì)的發(fā)展，計算機(jī)以被應(yīng)用到社會生活的各個領(lǐng)域。這給人們的生活帶來很大的方便。如今，已成為人們?nèi)粘Ｉ钪胁豢苫蛉鄙俚牟糠?。人們可以足不出戶上網(wǎng)購物，隨時查詢股票信息，在自己的博客上盡情發(fā)表言論……以上這些都離不開最基本的網(wǎng)頁設(shè)計和制作[1]。</p><p>　　網(wǎng)站作為網(wǎng)絡(luò)信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者，在互聯(lián)網(wǎng)上表現(xiàn)出及其重要的地

4、位，并發(fā)揮著及其重要的作用，無論是在國內(nèi)還是國外都得以迅速的發(fā)展和壯大，并被人們重視和關(guān)注。網(wǎng)站的迷人之處在于綜合使用文本、圖像、聲音、動畫視頻信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動特點(diǎn)。毋庸置疑，網(wǎng)站已成為最吸引人的也是最有效的信息傳遞的手段和方式。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)，個人網(wǎng)站也成為了一種時尚，越來越多的人希望擁有自己的網(wǎng)站，開辟網(wǎng)絡(luò)世界的一片天地，展示自己的才華和風(fēng)格[2]。</p><p>

5、;　　個人網(wǎng)站是指個人因某種興趣、擁有某種專業(yè)技術(shù)，提供某種服務(wù)或把自己的作品、商品展示銷售而制作的具有獨(dú)立空間域名的網(wǎng)站。所謂個人網(wǎng)站，就是指網(wǎng)站內(nèi)容是介紹自己的或是以自己的信息為中心的網(wǎng)站[3]。</p><p><b>　　一 網(wǎng)站設(shè)計規(guī)化</b></p><p><b>　　1.1 什么是網(wǎng)站</b></p><p&g

6、t;　　網(wǎng)站是因特網(wǎng)上的一個信息集中點(diǎn)，可以通過域名進(jìn)行訪問。網(wǎng)站要存儲在獨(dú)立服務(wù)器或者服務(wù)器的虛擬主機(jī)上才能接受訪問。網(wǎng)站是有獨(dú)立域名、獨(dú)立存放空間的內(nèi)容集合，這些內(nèi)容可能是網(wǎng)頁，也可能是程序或其他文件，不一定要有很多網(wǎng)頁，只要有獨(dú)立域名和空間，哪怕只有一個頁面也叫網(wǎng)站。</p><p>　　網(wǎng)站就是在互聯(lián)網(wǎng)上的一塊固定的面向全世界發(fā)布消息的地方，它由域名和網(wǎng)站空間構(gòu)成。衡量一個網(wǎng)站的性能通常從網(wǎng)站空間大小、網(wǎng)

7、站位置、網(wǎng)站連接速度、網(wǎng)站軟件配置、網(wǎng)站提供服務(wù)等幾方面考慮。</p><p>　　1.2 網(wǎng)站建設(shè)的目的</p><p>　　網(wǎng)站的建設(shè)不僅僅是制作主頁的問題，還需要考慮網(wǎng)站的定位、目標(biāo)用戶、網(wǎng)站內(nèi)容、服務(wù)事項(xiàng)、空間方案、安全性、藝術(shù)設(shè)計等等。任何網(wǎng)站在建設(shè)之前都必須明確文向、用途和服務(wù)群體等一系列的問題，寫出詳細(xì)的建站計劃，可以說這是網(wǎng)站建設(shè)的根源和核心所在。這里我的個人網(wǎng)站主要是讓更

8、多的人認(rèn)識到我，了解我。借助網(wǎng)絡(luò)的這個平臺來展示我自己，還有我希望能交到和我一樣懷著夢想起航的朋友。</p><p>　　1.3 本站的明確目的</p><p>　　不同的網(wǎng)站目的要求通過不同的方式來實(shí)現(xiàn)。一個展示個人能力的網(wǎng)站與一個以花卉種植為主題的網(wǎng)站，以及一個大型門戶網(wǎng)站和一個小型企業(yè)網(wǎng)站，其出發(fā)點(diǎn)和建站目的都有所不同。在整個網(wǎng)站的建設(shè)規(guī)化方面的要求也是肯定不一樣的。因此在規(guī)化我的網(wǎng)

9、站時，我選擇的是與我本人相關(guān)的內(nèi)容來作為主題的。</p><p>　　網(wǎng)站預(yù)計的用戶群體：對于網(wǎng)站的設(shè)計者和建設(shè)者來說，在設(shè)計規(guī)化網(wǎng)站時必須要明確自己網(wǎng)站的瀏覽都，也就是確定自己的用戶群體。在已經(jīng)確定了建設(shè)目的的前提下，應(yīng)根據(jù)建站方向所會導(dǎo)致出現(xiàn)的不同用戶群體的需求來規(guī)化設(shè)計整個網(wǎng)站。我的這個網(wǎng)站就確定了以懷著夢想奮斗的人為用戶群體。</p><p><b>　　1.4 軟件準(zhǔn)備

10、</b></p><p>　　在網(wǎng)頁的設(shè)計過程中，因人而宜，每個人使用的軟件也許不同。 Dreamweaver與Flash、 Fireworks這3者被用戶稱為“網(wǎng)頁設(shè)計三劍客”。Dreamweaver的優(yōu)勢在于它不僅是優(yōu)秀的所見即所得的編輯軟件，同時也兼顧了HTML源代碼，可以讓用戶很方便地在兩種模式之間的切換。</p><p>　　Dreamweaver采用“所見即所得”的

11、直觀設(shè)計模式，充分尊重設(shè)計人員的原始意識和想像力，它成功地將網(wǎng)頁設(shè)計功能中的技術(shù)實(shí)現(xiàn)部分和設(shè)計部分分開，還提供眾多的可視化設(shè)計工具、應(yīng)用開發(fā)環(huán)境以及代碼編輯支持。如利用鼠標(biāo)拖曳來添加表格、圖像等元素，在方檔中直接輸入文本，直接插入一些常用的特殊符號對象等。用戶在沒有輸入代碼的情況下完成了上述工作，Dreamweaver自動將結(jié)果轉(zhuǎn)換為HTML源代碼。用戶也可以隨時查看方檔的HTML源代碼，在代碼視圖中進(jìn)行修改。</p>&

12、lt;p><b>　　二 網(wǎng)站的總體設(shè)計</b></p><p>　　2.1 確定網(wǎng)站主題</p><p>　　做網(wǎng)站，首先必須要解決的就是網(wǎng)站內(nèi)容問題，即確定網(wǎng)站的主題。如果自己在某些方面有興趣，或掌握的資料越多，也可以做一個自己感興趣的東西。你可以有自己的見解，做出自己的特色。對于內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。不要去試圖制作一個包羅萬

13、象的站點(diǎn)，這往往會失去網(wǎng)站的特色，也會帶來高強(qiáng)度的勞動，給網(wǎng)站的及時更新帶來困難。我的網(wǎng)站主題是以我個人相關(guān)的資料來制作的。</p><p>　　2.2 確定網(wǎng)站形象</p><p>　　網(wǎng)站形象的設(shè)計可以從網(wǎng)站標(biāo)志、網(wǎng)站色彩、網(wǎng)站字體網(wǎng)絡(luò)宣傳語等這些方面著手。</p><p>　　網(wǎng)站色彩，網(wǎng)站給人的第一印象來自視覺沖擊，不同的色彩搭配產(chǎn)生不同的效果，并可能影響到

14、訪問者的情緒。“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，給人以整體統(tǒng)一的感覺。我個人網(wǎng)站的色彩是以粉色為主，淡粉色和冰粉色為輔，給人一種浪漫的感覺，仿佛生活在虛幻的世界里。</p><p>　　網(wǎng)站字體，和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)題、主菜單的特有字體。為了體現(xiàn)網(wǎng)站的特有風(fēng)格，可以根據(jù)自已網(wǎng)站所表達(dá)的內(nèi)涵，選擇更貼切的字體。我的個人網(wǎng)站的標(biāo)準(zhǔn)字體是幼圓。給人一種沉穩(wěn)而不失俏皮的感覺。</p>

15、;<p>　　2.3 確定網(wǎng)站風(fēng)格</p><p>　　風(fēng)格是抽象的，是指網(wǎng)站的整體形象給瀏覽者的綜合感受。這個“整體形象”包括網(wǎng)站的標(biāo)志、色彩、字體、標(biāo)語等諸多因素。網(wǎng)站是可以平易近人、生動活潑的，也可以是專業(yè)嚴(yán)肅的。不管是色彩、技術(shù)、文字、布局、還是交互方式，只要你能由此讓瀏覽者明確的分辨出這是你網(wǎng)站獨(dú)所有的，這就形成了風(fēng)格。</p><p>　　風(fēng)格是有人性的，通過網(wǎng)站

16、的色彩、技術(shù)、文字、布局、交互方式可以概括出一個網(wǎng)站的個性；我的網(wǎng)站風(fēng)格是以浪漫為主，給人一種夢幻的感覺。</p><p>　　2.4 確定網(wǎng)站內(nèi)容</p><p>　　我的個人網(wǎng)站大體上包括了一些內(nèi)容：首頁、網(wǎng)頁設(shè)計、動畫特效、網(wǎng)頁素材、相關(guān)軟件、作品展示、本站論壇、游客留言等網(wǎng)站常用內(nèi)容，方便大家瀏覽。</p><p><b>　　三 具體實(shí)現(xiàn)與分析&

17、lt;/b></p><p><b>　　3.1 首頁</b></p><p>　　一個網(wǎng)站的首頁是一個文檔，當(dāng)一個網(wǎng)站服務(wù)器收到一臺電腦上網(wǎng)絡(luò)瀏覽器的訊息連結(jié)請求時，便會向這臺電腦發(fā)送這個文檔。當(dāng)在瀏覽器的位址列輸入域名，而未指向特定目錄或檔案時，通常瀏覽器也會打開網(wǎng)站的首頁。 </p><p>　　網(wǎng)站首頁往往會被編輯得易于了解該網(wǎng)站

18、提供的資訊，并引導(dǎo)互聯(lián)網(wǎng)用戶瀏覽網(wǎng)站其他部分的內(nèi)容。這部分內(nèi)容一般被認(rèn)為是一個目錄性質(zhì)的內(nèi)容，如圖1。</p><p><b>　　圖1</b></p><p>　　3.2 網(wǎng)頁設(shè)計模塊</p><p>　　為了滿足廣大網(wǎng)頁制作愛好者的學(xué)習(xí)需求，本網(wǎng)站推出新版的網(wǎng)頁制作教程，該教程使用Dreamweaver CS5作為開發(fā)工具，結(jié)合老師的網(wǎng)站開

19、發(fā)經(jīng)驗(yàn)，為大家講解網(wǎng)頁制作的每個環(huán)節(jié)。希望通過本套課程的學(xué)習(xí)，大家能靈活運(yùn)用Dreaweaver完成網(wǎng)站的開發(fā)，如圖2。</p><p><b>　　圖2</b></p><p>　　3.3 網(wǎng)頁特效模塊</p><p>　　提供包括鼠標(biāo)類類、文字類、菜單類、背景類、圖形類、播放器等網(wǎng)頁特效代碼，力求做到收集最全網(wǎng)站?？赡艿年P(guān)注這方面的最新發(fā)展

20、趨勢，不斷更新自己的網(wǎng)站，盡可能的收集最新的網(wǎng)頁特效代碼。如圖3</p><p><b>　　圖3</b></p><p>　　3.4 網(wǎng)頁素材模塊</p><p>　　提供各種新式素材包含圖片、動畫、flash、音樂等方便網(wǎng)頁及網(wǎng)站制作時參考即借鑒之用，如圖4。</p><p><b>　　圖4</b&

21、gt;</p><p>　　3.5 相關(guān)軟件下載模塊</p><p>　　提供網(wǎng)站及網(wǎng)頁制作所需的必要工具如Dreamweaver、Flash、 Fireworks等相關(guān)必備軟件下載，如圖5。</p><p><b>　　圖5</b></p><p>　　3.6 作品展示模塊</p><p>　　

22、提供多種多樣名人或企業(yè)個人網(wǎng)站供大家學(xué)習(xí)參考，豐富大家的知識，詳細(xì)內(nèi)容如圖6所示。</p><p><b>　　圖6</b></p><p>　　3.7 論壇及留言模塊</p><p>　　論壇又名網(wǎng)絡(luò)論壇BBS，全稱為Bulletin Board System（電子公告板）或者Bulletin Board Service（公告板服務(wù)）。是In

23、ternet上的一種電子信息服務(wù)系統(tǒng)。它提供一塊公共電子白板，每個用戶都可以在上面書寫，通過留言的方式可發(fā)布信息或提出看法。它是一種交互性強(qiáng)，內(nèi)容豐富而及時的Internet電子信息服務(wù)系統(tǒng)。用戶在BBS站點(diǎn)上可以獲得各種信息服務(wù)，發(fā)布信息，進(jìn)行討論，聊天等等如圖7所示。</p><p><b>　　圖7</b></p><p><b>　　四 總結(jié)<

24、/b></p><p>　　經(jīng)過老師耐心細(xì)致的指導(dǎo)，及同學(xué)之間的相互交流，同時翻閱了大量的資料(包括網(wǎng)上資料、書本及學(xué)校的一些相關(guān)資料)，經(jīng)過近一段時間的努力，個人網(wǎng)站的設(shè)計制作告一段落?？偨Y(jié)這次“揚(yáng)帆起航-個人網(wǎng)站”開發(fā)制作過程，我使用了目前因特網(wǎng)上比較流行的各種靜態(tài)制作方法及交互動態(tài)網(wǎng)站的制作設(shè)計手段，并對初步利用后臺程序完成了網(wǎng)站的動態(tài)響應(yīng)與生成網(wǎng)頁的技術(shù)，同時也從中學(xué)習(xí)了對靜態(tài)網(wǎng)頁的處理風(fēng)格，色彩搭

25、配，頁面導(dǎo)航方面有了一定的經(jīng)驗(yàn)。</p><p>　　目前網(wǎng)站的制作技術(shù)與要求，都已經(jīng)告別了因特網(wǎng)初期網(wǎng)站制作的“幼稚”期，隨著各類網(wǎng)站的迅速增加與瀏覽者需求的提高，無不要求網(wǎng)站從立意、策劃、頁面設(shè)計到后臺程序的全面提高。無論是個人網(wǎng)站還是企業(yè)網(wǎng)站都必須被要求從瀏覽者角度出發(fā)，最大限度的滿足用戶的要求，這也是以后各類網(wǎng)站發(fā)展競爭的真正實(shí)質(zhì)所在。</p><p>　　本次設(shè)計由于設(shè)計時間比較

26、緊，且相關(guān)模塊比較多，加之設(shè)計經(jīng)驗(yàn)的不足，在網(wǎng)站的整體設(shè)計及各模塊功能可能設(shè)計的不完全，有待于進(jìn)一步的完善和改進(jìn)。</p><p><b>　　參 考 文 獻(xiàn)</b></p><p>　　[4]李沖．Dreamweaver網(wǎng)頁設(shè)計[M]．清華大學(xué)出版社．2011．</p><p>　　[5]王寶軍．計算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用[M]．中國勞動社會出版保

27、障出版社．2002．</p><p>　　[6]岳鴻．計算機(jī)應(yīng)用基礎(chǔ)[M]．國防科技大學(xué)出版社．2006．</p><p>　　[7]宋虹．Photoshop圖形圖像處理[M]．湖南大學(xué)出版社．2011．</p><p>　　[8]姬付梓．創(chuàng)意設(shè)計[M]．大學(xué)出版社．2011．</p><p><b>　　Abstract</

28、b></p><p>　　the network development to today, to establish the website has become a very common problem. For the entrepreneur, build good website can seize strategic points of development in the new centu

29、ry. To establish a new corporate image, to open up international market directly. For an individual, build good personal website can be more convenient to collect information, carry out more direct communication, using t

30、he constructed their own platform, can find a job after graduation fully prepared.</p><p>　　In my personal website design process, is mainly based on our web site design, web site design purpose and directio

31、n of the entire process, and through their own design of this personal website works to explain and demonstrate a website production process. The main content of this thesis is a personal website design, overall planning

32、 and related basic knowledge. Site planning and webpage structure, section design, webpage style, color, layout of the layout, text and images using. There are the t</p><p>　　Keywords: website design； websit