個人網站設計及實現畢業(yè)設計論文

1、<p>　　知識不僅是指課本的內容,還包括社會經驗、文明文化、時代精神等整體要素,才有競爭力,知識是新時代的資本,五六十年代人靠勤勞可以成事；今天的香港要搶知識,要以知識取勝</p><p><b>　　個人網站設計及實現</b></p><p>　　作 者：張 鐸</p><p><b>　　指導教師：劉向嬌<

2、;/b></p><p>　　摘要：網絡發(fā)展到今天</p><p>　　建立網站已經成為一個很普遍的問題了</p><p><b>　　對于企業(yè)家來說</b></p><p>　　建立好的網站可以搶占新世紀發(fā)展的戰(zhàn)略要點</p><p><b>　　建立新的企業(yè)形象</b&g

3、t;</p><p><b>　　直接開拓國際市場</b></p><p><b>　　對于個人來說</b></p><p>　　建設好的個人網站可以更加方便的收集信息</p><p>　　開展更加直接的網絡交流</p><p><b>　　使用自己構造的平臺<

4、;/b></p><p>　　可以為畢業(yè)后找工作做好充分的準備</p><p>　　在我的個人網站制作過程中</p><p>　　主要是針對我網站設計的方向和目的、網站設計的整個流程出發(fā)</p><p>　　然后通過自己設計的這個個人網站作品來說明并演示一個網站制作過程</p><p>　　這篇論文的主要內容是個

5、人網站的設計思想</p><p>　　整體規(guī)化及相關的基礎科知識</p><p>　　網站的規(guī)化又包括網頁的結構、欄目的設置、網頁的風格、顏色的搭配、版面的布局、文字圖片的運用等</p><p>　　關鍵詞：網站設計；網站規(guī)化；網站主題</p><p><b>　　隨著經濟的發(fā)展</b></p><p

6、>　　計算機以被應用到社會生活的各個領域</p><p>　　這給人們的生活帶來很大的方便</p><p><b>　　如今</b></p><p>　　已成為人們日常生活中不可或缺少的部分</p><p>　　人們可以足不出戶上網購物</p><p><b>　　隨時查詢股票信息

7、</b></p><p>　　在自己的博客上盡情發(fā)表言論......以上這些都離不開最基本的網頁設計和制作[1]</p><p>　　網站作為網絡信息主要的表現形式而且還是互聯網信息的主要承載者</p><p>　　在互聯網上表現出及其重要的地位</p><p>　　并發(fā)揮著及其重要的作用</p><p>

8、　　無論是在國內還是國外都得以迅速的發(fā)展和壯大</p><p><b>　　并被人們重視和關注</b></p><p>　　網站的迷人之處在于綜合使用文本、圖像、聲音、動畫視頻信息和內容</p><p>　　具有豐富的多媒體表現與互動特點</p><p><b>　　毋庸置疑</b></p&g

9、t;<p>　　網站已成為最吸引人的也是最有效的信息傳遞的手段和方式</p><p><b>　　隨著網絡技術的發(fā)展</b></p><p><b>　　各類網站紛紛出現</b></p><p>　　個人網站也成為了一種時尚</p><p>　　越來越多的人希望擁有自己的網站</

10、p><p>　　開辟網絡世界的一片天地</p><p>　　展示自己的才華和風格[2]</p><p>　　個人網站是指個人因某種興趣、擁有某種專業(yè)技術</p><p>　　提供某種服務或把自己的作品、商品展示銷售而制作的具有獨立空間域名的網站</p><p><b>　　所謂個人網站</b><

11、/p><p>　　就是指網站內容是介紹自己的或是以自己的信息為中心的網站[3]</p><p><b>　　一 網站設計規(guī)化</b></p><p><b>　　1.1 什么是網站</b></p><p>　　網站是因特網上的一個信息集中點</p><p>　　可以通過域名進行訪

12、問</p><p>　　網站要存儲在獨立服務器或者服務器的虛擬主機上才能接受訪問</p><p>　　網站是有獨立域名、獨立存放空間的內容集合</p><p><b>　　這些內容可能是網頁</b></p><p>　　也可能是程序或其他文件</p><p><b>　　不一定要有很多網

13、頁</b></p><p>　　只要有獨立域名和空間</p><p>　　哪怕只有一個頁面也叫網站</p><p>　　網站就是在互聯網上的一塊固定的面向全世界發(fā)布消息的地方</p><p>　　它由域名和網站空間構成</p><p>　　衡量一個網站的性能通常從網站空間大小、網站位置、網站連接速度、網站軟

14、件配置、網站提供服務等幾方面考慮</p><p>　　1.2 網站建設的目的</p><p>　　網站的建設不僅僅是制作主頁的問題</p><p>　　還需要考慮網站的定位、目標用戶、網站內容、服務事項、空間方案、安全性、藝術設計等等</p><p>　　任何網站在建設之前都必須明確文向、用途和服務群體等一系列的問題</p>&

15、lt;p><b>　　寫出詳細的建站計劃</b></p><p>　　可以說這是網站建設的根源和核心所在</p><p>　　這里我的個人網站主要是讓更多的人認識到我</p><p><b>　　了解我</b></p><p>　　借助網絡的這個平臺來展示我自己</p><

16、p>　　還有我希望能交到和我一樣懷著夢想起航的朋友</p><p>　　1.3 本站的明確目的</p><p>　　不同的網站目的要求通過不同的方式來實現</p><p>　　一個展示個人能力的網站與一個以花卉種植為主題的網站</p><p>　　以及一個大型門戶網站和一個小型企業(yè)網站</p><p>　　其出發(fā)

17、點和建站目的都有所不同</p><p>　　在整個網站的建設規(guī)化方面的要求也是肯定不一樣的</p><p>　　因此在規(guī)化我的網站時</p><p>　　我選擇的是與我本人相關的內容來作為主題的</p><p>　　網站預計的用戶群體：對于網站的設計者和建設者來說</p><p>　　在設計規(guī)化網站時必須要明確自己網站

18、的瀏覽都</p><p>　　也就是確定自己的用戶群體</p><p>　　在已經確定了建設目的的前提下</p><p>　　應根據建站方向所會導致出現的不同用戶群體的需求來規(guī)化設計整個網站</p><p>　　我的這個網站就確定了以懷著夢想奮斗的人為用戶群體</p><p><b>　　1.4 軟件準備&l

19、t;/b></p><p><b>　　在網頁的設計過程中</b></p><p><b>　　因人而宜</b></p><p>　　每個人使用的軟件也許不同</p><p>　　Dreamweaver與Flash、 Fireworks這3者被用戶稱為"網頁設計三劍客"&l

20、t;/p><p>　　Dreamweaver的優(yōu)勢在于它不僅是優(yōu)秀的所見即所得的編輯軟件</p><p>　　同時也兼顧了HTML源代碼</p><p>　　可以讓用戶很方便地在兩種模式之間的切換</p><p>　　Dreamweaver采用"所見即所得"的直觀設計模式</p><p>　　充分尊重設

21、計人員的原始意識和想像力</p><p>　　它成功地將網頁設計功能中的技術實現部分和設計部分分開</p><p>　　還提供眾多的可視化設計工具、應用開發(fā)環(huán)境以及代碼編輯支持</p><p>　　如利用鼠標拖曳來添加表格、圖像等元素</p><p>　　在方檔中直接輸入文本</p><p>　　直接插入一些常用的特殊

22、符號對象等</p><p>　　用戶在沒有輸入代碼的情況下完成了上述工作</p><p>　　Dreamweaver自動將結果轉換為HTML源代碼</p><p>　　用戶也可以隨時查看方檔的HTML源代碼</p><p>　　在代碼視圖中進行修改</p><p><b>　　二 網站的總體設計</b&

23、gt;</p><p>　　2.1 確定網站主題</p><p><b>　　做網站</b></p><p>　　首先必須要解決的就是網站內容問題</p><p><b>　　即確定網站的主題</b></p><p>　　如果自己在某些方面有興趣</p><

24、;p><b>　　或掌握的資料越多</b></p><p>　　也可以做一個自己感興趣的東西</p><p><b>　　你可以有自己的見解</b></p><p><b>　　做出自己的特色</b></p><p><b>　　對于內容主題的選擇</b&

25、gt;</p><p><b>　　要做到小而精</b></p><p><b>　　主題定位要小</b></p><p><b>　　內容要精</b></p><p>　　不要去試圖制作一個包羅萬象的站點</p><p>　　這往往會失去網站的特色&l

26、t;/p><p>　　也會帶來高強度的勞動</p><p>　　給網站的及時更新帶來困難</p><p>　　我的網站主題是以我個人相關的資料來制作的</p><p>　　2.2 確定網站形象</p><p>　　網站形象的設計可以從網站標志、網站色彩、網站字體網絡宣傳語等這些方面著手</p><p&g

27、t;<b>　　網站色彩</b></p><p>　　網站給人的第一印象來自視覺沖擊</p><p>　　不同的色彩搭配產生不同的效果</p><p>　　并可能影響到訪問者的情緒</p><p>　　"標準色彩"是指能體現網站形象和延伸內涵的色彩</p><p>　　給人以整

28、體統一的感覺</p><p>　　我個人網站的色彩是以粉色為主</p><p><b>　　淡粉色和冰粉色為輔</b></p><p><b>　　給人一種浪漫的感覺</b></p><p>　　仿佛生活在虛幻的世界里</p><p><b>　　網站字體</

29、b></p><p><b>　　和標準色彩一樣</b></p><p>　　標準字體是指用于標題、主菜單的特有字體</p><p>　　為了體現網站的特有風格</p><p>　　可以根據自已網站所表達的內涵</p><p><b>　　選擇更貼切的字體</b><

30、;/p><p>　　我的個人網站的標準字體是幼圓</p><p>　　給人一種沉穩(wěn)而不失俏皮的感覺</p><p>　　2.3 確定網站風格</p><p><b>　　風格是抽象的</b></p><p>　　是指網站的整體形象給瀏覽者的綜合感受</p><p>　　這個&q

31、uot;整體形象"包括網站的標志、色彩、字體、標語等諸多因素</p><p>　　網站是可以平易近人、生動活潑的</p><p><b>　　也可以是專業(yè)嚴肅的</b></p><p>　　不管是色彩、技術、文字、布局、還是交互方式</p><p>　　只要你能由此讓瀏覽者明確的分辨出這是你網站獨所有的<

32、/p><p><b>　　這就形成了風格</b></p><p><b>　　風格是有人性的</b></p><p>　　通過網站的色彩、技術、文字、布局、交互方式可以概括出一個網站的個性；我的網站風格是以浪漫為主</p><p><b>　　給人一種夢幻的感覺</b></p

33、><p>　　2.4 確定網站內容</p><p>　　我的個人網站大體上包括了一些內容：首頁、網頁設計、動畫特效、網頁素材、相關軟件、作品展示、本站論壇、游客留言等網站常用內容</p><p><b>　　方便大家瀏覽</b></p><p><b>　　三 具體實現與分析</b></p>

34、<p><b>　　3.1 首頁</b></p><p>　　一個網站的首頁是一個文檔</p><p>　　當一個網站服務器收到一臺電腦上網絡瀏覽器的訊息連結請求時</p><p>　　便會向這臺電腦發(fā)送這個文檔</p><p>　　當在瀏覽器的位址列輸入域名</p><p>　　而

35、未指向特定目錄或檔案時</p><p>　　通常瀏覽器也會打開網站的首頁</p><p>　　網站首頁往往會被編輯得易于了解該網站提供的資訊</p><p>　　并引導互聯網用戶瀏覽網站其他部分的內容</p><p>　　這部分內容一般被認為是一個目錄性質的內容</p><p><b>　　如圖1</b

36、></p><p><b>　　圖1</b></p><p>　　3.2 網頁設計模塊</p><p>　　為了滿足廣大網頁制作愛好者的學習需求</p><p>　　本網站推出新版的網頁制作教程</p><p>　　該教程使用Dreamweaver CS5作為開發(fā)工具</p>

37、<p>　　結合老師的網站開發(fā)經驗</p><p>　　為大家講解網頁制作的每個環(huán)節(jié)</p><p>　　希望通過本套課程的學習</p><p>　　大家能靈活運用Dreaweaver完成網站的開發(fā)</p><p><b>　　如圖2</b></p><p><b>　　圖2&

38、lt;/b></p><p>　　3.3 網頁特效模塊</p><p>　　提供包括鼠標類類、文字類、菜單類、背景類、圖形類、播放器等網頁特效代碼</p><p>　　力求做到收集最全網站</p><p>　　可能的關注這方面的最新發(fā)展趨勢</p><p><b>　　不斷更新自己的網站</b&g

39、t;</p><p>　　盡可能的收集最新的網頁特效代碼</p><p><b>　　如圖3</b></p><p><b>　　圖3</b></p><p>　　3.4 網頁素材模塊</p><p>　　提供各種新式素材包含圖片、動畫、flash、音樂等方便網頁及網站制作時

40、參考即借鑒之用</p><p><b>　　如圖4</b></p><p><b>　　圖4</b></p><p>　　3.5 相關軟件下載模塊</p><p>　　提供網站及網頁制作所需的必要工具如Dreamweaver、Flash、 Fireworks等相關必備軟件下載</p>

41、<p><b>　　如圖5</b></p><p><b>　　圖5</b></p><p>　　3.6 作品展示模塊</p><p>　　提供多種多樣名人或企業(yè)個人網站供大家學習參考</p><p><b>　　豐富大家的知識</b></p><

42、p><b>　　詳細內容如圖6所示</b></p><p><b>　　圖6</b></p><p>　　3.7 論壇及留言模塊</p><p>　　論壇又名網絡論壇BBS</p><p>　　全稱為Bulletin Board System（電子公告板）或者Bulletin Board Se

43、rvice（公告板服務）</p><p>　　是Internet上的一種電子信息服務系統</p><p>　　它提供一塊公共電子白板</p><p>　　每個用戶都可以在上面書寫</p><p>　　通過留言的方式可發(fā)布信息或提出看法</p><p><b>　　它是一種交互性強</b></

44、p><p>　　內容豐富而及時的Internet電子信息服務系統</p><p>　　用戶在BBS站點上可以獲得各種信息服務</p><p><b>　　發(fā)布信息</b></p><p><b>　　進行討論</b></p><p><b>　　聊天等等如圖7所示<

45、;/b></p><p><b>　　圖7</b></p><p><b>　　四 總結</b></p><p>　　經過老師耐心細致的指導</p><p>　　及同學之間的相互交流</p><p>　　同時翻閱了大量的資料(包括網上資料、書本及學校的一些相關資料)&l

46、t;/p><p>　　經過近一段時間的努力</p><p>　　個人網站的設計制作告一段落</p><p>　　總結這次"揚帆起航-個人網站"開發(fā)制作過程</p><p>　　我使用了目前因特網上比較流行的各種靜態(tài)制作方法及交互動態(tài)網站的制作設計手段</p><p>　　并對初步利用后臺程序完成了網站的

47、動態(tài)響應與生成網頁的技術</p><p>　　同時也從中學習了對靜態(tài)網頁的處理風格</p><p><b>　　色彩搭配</b></p><p>　　頁面導航方面有了一定的經驗</p><p>　　目前網站的制作技術與要求</p><p>　　都已經告別了因特網初期網站制作的"幼稚&qu

48、ot;期</p><p>　　隨著各類網站的迅速增加與瀏覽者需求的提高</p><p>　　無不要求網站從立意、策劃、頁面設計到后臺程序的全面提高</p><p>　　無論是個人網站還是企業(yè)網站都必須被要求從瀏覽者角度出發(fā)</p><p>　　最大限度的滿足用戶的要求</p><p>　　這也是以后各類網站發(fā)展競爭的真

49、正實質所在</p><p>　　本次設計由于設計時間比較緊</p><p><b>　　且相關模塊比較多</b></p><p><b>　　加之設計經驗的不足</b></p><p>　　在網站的整體設計及各模塊功能可能設計的不完全</p><p>　　有待于進一步的完善和

50、改進</p><p><b>　　參 考 文 獻</b></p><p>　　[1] http://wenku.baidu.com/view/ef0e976548d7c1c708a14568.html</p><p>　　[2] http://wenku.baidu.com/view/1a6f9dba1a37f111f1855b03.html&

51、lt;/p><p>　　[3] http://wenku.baidu.com/view/f75ac32c647d27284b7351d0.html．</p><p>　　[4]李沖．Dreamweaver網頁設計[M]．清華大學出版社．2011．</p><p>　　[5]王寶軍．計算機網絡技術與應用[M]．中國勞動社會出版保障出版社．2002．</p>

52、<p>　　[6]岳鴻．計算機應用基礎[M]．國防科技大學出版社．2006．</p><p>　　[7]宋虹．Photoshop圖形圖像處理[M]．湖南大學出版社．2011．</p><p>　　[8]姬付梓．創(chuàng)意設計[M]．大學出版社．2011．</p><p>　　Personal website design and Realization</

53、p><p><b>　　Zhang Duo</b></p><p>　　Abstract: the network development to today</p><p>　　to establish the website has become a very common problem. For the entrepreneur</p&

54、gt;<p>　　build good website can seize strategic points of development in the new century. To establish a new corporate image</p><p>　　to open up international market directly. For an individual</p&

55、gt;<p>　　build good personal website can be more convenient to collect information</p><p>　　carry out more direct communication</p><p>　　using the constructed their own platform</p>

56、<p>　　can find a job after graduation fully prepared.</p><p>　　In my personal website design process</p><p>　　is mainly based on our web site design</p><p>　　web site design

57、purpose and direction of the entire process</p><p>　　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

58、personal website design</p><p>　　overall planning and related basic knowledge. Site planning and webpage structure</p><p>　　section design</p><p>　　webpage style</p><p>

59、;<b>　　color</b></p><p>　　layout of the layout</p><p>　　text and images using. There are the theme of the site is to be included in the main contents</p><p>　　a site must

60、 have a clear theme</p><p>　　especially the personal web site</p><p>　　not as separate webpage that becomes less content</p><p>　　while the single</p><p>　　so to find t

61、he content they are interested in</p><p><b>　　so deep</b></p><p>　　so thoroughly</p><p>　　show their own characteristics</p><p>　　so as to leave deep impres

62、sion.</p><p>　　Keywords: website design； website programming；website theme</p><p><b>　　??</b></p><p><b>　　??</b></p><p><b>　　??</b>&