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

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

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

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

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

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

6、t;　　網(wǎng)站是因特網(wǎng)上的一個(gè)信息集中點(diǎn)，可以通過(guò)域名進(jìn)行訪問(wèn)。網(wǎng)站要存儲(chǔ)在獨(dú)立服務(wù)器或者服務(wù)器的虛擬主機(jī)上才能接受訪問(wèn)。網(wǎng)站是有獨(dú)立域名、獨(dú)立存放空間的內(nèi)容集合，這些內(nèi)容可能是網(wǎng)頁(yè)，也可能是程序或其他文件，不一定要有很多網(wǎng)頁(yè)，只要有獨(dú)立域名和空間，哪怕只有一個(gè)頁(yè)面也叫網(wǎng)站。</p><p>　　網(wǎng)站就是在互聯(lián)網(wǎng)上的一塊固定的面向全世界發(fā)布消息的地方，它由域名和網(wǎng)站空間構(gòu)成。衡量一個(gè)網(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è)不僅僅是制作主頁(yè)的問(wèn)題，還需要考慮網(wǎng)站的定位、目標(biāo)用戶、網(wǎng)站內(nèi)容、服務(wù)事項(xiàng)、空間方案、安全性、藝術(shù)設(shè)計(jì)等等。任何網(wǎng)站在建設(shè)之前都必須明確文向、用途和服務(wù)群體等一系列的問(wèn)題，寫(xiě)出詳細(xì)的建站計(jì)劃，可以說(shuō)這是網(wǎng)站建設(shè)的根源和核心所在。這里我的個(gè)人網(wǎng)站主要是讓更

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

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

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

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

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

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

14、訪問(wèn)者的情緒?！皹?biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，給人以整體統(tǒng)一的感覺(jué)。我個(gè)人網(wǎng)站的色彩是以粉色為主，淡粉色和冰粉色為輔，給人一種浪漫的感覺(jué)，仿佛生活在虛幻的世界里。</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)涵，選擇更貼切的字體。我的個(gè)人網(wǎng)站的標(biāo)準(zhǔn)字體是幼圓。給人一種沉穩(wěn)而不失俏皮的感覺(jué)。</p>

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

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

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

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

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

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

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

22、提供多種多樣名人或企業(yè)個(gè)人網(wǎng)站供大家學(xué)習(xí)參考，豐富大家的知識(shí)，詳細(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)。它提供一塊公共電子白板，每個(gè)用戶都可以在上面書(shū)寫(xiě)，通過(guò)留言的方式可發(fā)布信息或提出看法。它是一種交互性強(qiáng)，內(nèi)容豐富而及時(shí)的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)過(guò)老師耐心細(xì)致的指導(dǎo)，及同學(xué)之間的相互交流，同時(shí)翻閱了大量的資料(包括網(wǎng)上資料、書(shū)本及學(xué)校的一些相關(guān)資料)，經(jīng)過(guò)近一段時(shí)間的努力，個(gè)人網(wǎng)站的設(shè)計(jì)制作告一段落?？偨Y(jié)這次“揚(yáng)帆起航-個(gè)人網(wǎng)站”開(kāi)發(fā)制作過(guò)程，我使用了目前因特網(wǎng)上比較流行的各種靜態(tài)制作方法及交互動(dòng)態(tài)網(wǎng)站的制作設(shè)計(jì)手段，并對(duì)初步利用后臺(tái)程序完成了網(wǎng)站的動(dòng)態(tài)響應(yīng)與生成網(wǎng)頁(yè)的技術(shù)，同時(shí)也從中學(xué)習(xí)了對(duì)靜態(tài)網(wǎng)頁(yè)的處理風(fēng)格，色彩搭

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

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

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