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

1、<p><b>　　畢業(yè)論文（設(shè)計(jì)）</b></p><p>　　論文題目： 個(gè)人網(wǎng)站設(shè)計(jì) </p><p>　　系 別：　軟件工程系 　</p><p>　　專 業(yè)：　系統(tǒng)維護(hù) 　　</p><p>　　班 級(jí)：　　　　　　　　 </p><p>　　

2、學(xué) 號(hào)：　　　　　　　　 </p><p>　　學(xué)生姓名：　　　　　　　 </p><p>　　指導(dǎo)教師：　　　　　　　　 </p><p><b>　　目 錄</b></p><p><b>　　1緒言2</b></p><p>　　1.1萬維網(wǎng)概述2&

3、lt;/p><p>　　1.2制作網(wǎng)頁(yè)工用到的工具介紹4</p><p>　　1.2.1 Adobe Dreamweaver CS34</p><p>　　1.2.2 Adobe Photoshop CS55</p><p>　　1.2.3 Ulead GIF Animator 56</p><p>　　2個(gè)人

4、網(wǎng)站設(shè)計(jì)分析7</p><p>　　2.1相關(guān)術(shù)語及解釋7</p><p>　　2.2個(gè)人網(wǎng)站的由來8</p><p>　　2.3我的個(gè)人網(wǎng)站的設(shè)計(jì)與規(guī)劃9</p><p>　　2.3.1我的個(gè)人網(wǎng)站概貌9</p><p>　　2.3.2 板塊劃分9</p><p>　　3網(wǎng)站設(shè)計(jì)過

5、程10</p><p>　　3.1建立站點(diǎn)10</p><p>　　3.2開場(chǎng)動(dòng)畫的制作11</p><p>　　3.3主頁(yè)的制作14</p><p>　　3.4各子網(wǎng)頁(yè)制作18</p><p>　　3.4.1背景“下雪”、“花瓣飄動(dòng)”制作18</p><p>　　3.4.2小標(biāo)題制

6、作19</p><p>　　3.4.3 頁(yè)面間跳轉(zhuǎn) “上一頁(yè)” “下一頁(yè)”制作21</p><p>　　3.4.4模板的制作22</p><p>　　3.4.5軟件下載鏈接，郵箱鏈接設(shè)置23</p><p>　　3.4.6鼠標(biāo)經(jīng)過圖像時(shí)產(chǎn)生效果制作24</p><p><b>　　4總結(jié)26<

7、;/b></p><p>　　摘 要:本篇論文對(duì)我的個(gè)人網(wǎng)站制作過程進(jìn)行了分析與研究。主要內(nèi)容是：對(duì)web網(wǎng)頁(yè)進(jìn)行概述；對(duì)制作過程使用的軟件進(jìn)行介紹；對(duì)網(wǎng)站建設(shè)中提及到的術(shù)語進(jìn)行了解釋，并對(duì)個(gè)人網(wǎng)站的由來和發(fā)展進(jìn)行了論述；對(duì)自己的個(gè)人網(wǎng)站制作過程進(jìn)行了分析。 </p><p>　　關(guān)鍵詞: 網(wǎng)站 色彩搭配 建設(shè) 風(fēng)格 創(chuàng)意</p><p>&

8、lt;b>　　1緒言</b></p><p>　　在科技飛速發(fā)展的今天，在我國(guó)互聯(lián)網(wǎng)用戶數(shù)由幾千萬躍升至幾億，上升了20多倍；互聯(lián)網(wǎng)站由幾千家躍升至數(shù)萬家，增長(zhǎng)了10多倍。是世界上網(wǎng)民最多的國(guó)家，許多人在需要查詢信息，首先想到的就是上網(wǎng)。網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動(dòng)畫和視頻的信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動(dòng)特點(diǎn)，無可置疑， 網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式

9、。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)。個(gè)人網(wǎng)站也成為了一種時(shí)尚。越來越多的人希望擁有自己的網(wǎng)站，開辟網(wǎng)絡(luò)世界的一片天地，展示自己的才華和風(fēng)格。</p><p><b>　　1.1萬維網(wǎng)概述</b></p><p>　　WWW（world wide web 萬維網(wǎng)）由遍布在互聯(lián)網(wǎng)中的web服務(wù)器和安裝了web瀏覽器的計(jì)算機(jī)組成，它是一種基于超文本方式工作的信息系統(tǒng)。作

10、為一個(gè)能夠處理文字，圖像，聲音，視頻等多媒體信息的綜合系統(tǒng)，它提供了豐富的信息資源，這些信息資源以web頁(yè)面的形式分別存放在各個(gè)web服務(wù)器上，用戶可以通過瀏覽器選擇并瀏覽所需的信息。它的影響已經(jīng)進(jìn)入了Internet上的廣告、新聞、電子商務(wù)和展示信息等各個(gè)服務(wù)領(lǐng)域。</p><p>　　Web采用瀏覽器/服務(wù)器（B/S）工作模式，其運(yùn)作模式可以描述為：請(qǐng)求→處理→應(yīng)答。</p><p>

11、　　Web以超文本標(biāo)記語言HTML(Hyper Text Markup Language)與超文本傳輸協(xié)議HTTP(Hyper Text Transfer Protocol)為基礎(chǔ)，通過瀏覽器為用戶提供方便友好的信息瀏覽界面。</p><p>　　Web技術(shù)涉及諸多技術(shù)領(lǐng)域：</p><p><b>　　1）網(wǎng)絡(luò)硬件技術(shù)</b></p><p>

12、;　　從兩臺(tái)或多臺(tái)機(jī)器組成的對(duì)等網(wǎng)，到主機(jī)控制的以太網(wǎng)，再到生動(dòng)活潑的因特網(wǎng)，每一處都需要有特定的硬件支持。1968年，當(dāng)“LOGIN”的“LO”從美國(guó)加州洛杉磯分校的電腦屏幕跳到斯坦福大學(xué)的電腦屏幕上時(shí)，標(biāo)志著人類首次組網(wǎng)的成功！組網(wǎng)技術(shù)經(jīng)過幾十年的錘煉，而今已經(jīng)相當(dāng)成熟了。</p><p>　　網(wǎng)絡(luò)硬件技術(shù)包括很多方面，其主要的作用就是把網(wǎng)絡(luò)中的各種資源通過相關(guān)網(wǎng)絡(luò)連接設(shè)備連接起來，實(shí)施網(wǎng)絡(luò)通信和達(dá)到共享網(wǎng)絡(luò)

13、資源的目的。</p><p><b>　　2）Web管理技術(shù)</b></p><p>　　網(wǎng)絡(luò)管理技術(shù)是一個(gè)永久的話題。網(wǎng)絡(luò)管理的難點(diǎn)是安全性問題，涉及到防止來自內(nèi)部和外部的攻擊，這對(duì)管理員自身的技術(shù)是一個(gè)嚴(yán)峻的考驗(yàn)。一個(gè)合格的網(wǎng)管人員，除了管好網(wǎng)絡(luò)，還得和黑客做技術(shù)上的較量。網(wǎng)絡(luò)管理涉及的方面可謂種類繁多，簡(jiǎn)單地說，網(wǎng)絡(luò)管理就是為保證網(wǎng)絡(luò)系統(tǒng)能夠持續(xù)、穩(wěn)定、安全、可

14、靠和高效地運(yùn)行，不受外界干擾，而維持網(wǎng)絡(luò)系統(tǒng)設(shè)施所采取的一系列方式和措施。網(wǎng)絡(luò)管理由網(wǎng)管員通過駕馭網(wǎng)絡(luò)操作系統(tǒng)和網(wǎng)絡(luò)管理軟件來實(shí)現(xiàn)。</p><p>　　Web管理則是在網(wǎng)絡(luò)管理的基礎(chǔ)上，針對(duì)網(wǎng)絡(luò)建設(shè)和維護(hù)所進(jìn)行的一系列管理。諸如架設(shè)Web服務(wù)器、文件傳輸服務(wù)器、郵件服務(wù)器、域名服務(wù)器、代理服務(wù)器以及用戶管理和計(jì)費(fèi)管理等等。</p><p>　　1.2制作網(wǎng)頁(yè)工用到的工具介紹</p&

15、gt;<p>　　1.2.1 Adobe Dreamweaver CS3</p><p>　　Adobe Dreamweaver是建立Web站點(diǎn)和應(yīng)用程序的專業(yè)工具。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起,其功能強(qiáng)大，使得各個(gè)層次的開發(fā)人員和設(shè)計(jì)人員都能夠快速創(chuàng)建基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序的優(yōu)美界面。Dreamweaver是在網(wǎng)頁(yè)設(shè)計(jì)與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強(qiáng)大的軟

16、件。它集網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開發(fā)和站點(diǎn)管理功能于一身，具有可視化、支持多平臺(tái)和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計(jì)、開發(fā)、制作的首選工具。</p><p>　　1)、靈活的編寫方式：Dreamweaver具有靈活編寫網(wǎng)頁(yè)的特點(diǎn)，不但將世界一流水平的“設(shè)計(jì)”和“代碼”編輯器合二為一，而且在設(shè)計(jì)窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。</p><p>　　2)、可視化編輯界面：Dre

17、amweaver是一種所見即所得的HTML編輯器，可實(shí)現(xiàn)頁(yè)面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫，同時(shí)亦保證了其專業(yè)性和兼容性，并且可以對(duì)內(nèi)部的HTML編輯器和任何第三方的HTML編輯器進(jìn)行實(shí)時(shí)的訪問。無論用戶習(xí)慣手工輸入HTML源代碼還是使用可視化的編輯界面，Dreamweaver都能提供便捷的方式使得用戶設(shè)計(jì)網(wǎng)頁(yè)和管理網(wǎng)站變得更容易。</p><p>　　3)、功能更多的CSS支持——CSS可

18、視化設(shè)計(jì)、CSS檢查工具</p><p>　　4)、動(dòng)態(tài)跨瀏覽器驗(yàn)證：當(dāng)保存時(shí)系統(tǒng)自動(dòng)檢查當(dāng)前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測(cè)試用瀏覽器，同時(shí)系統(tǒng)自動(dòng)檢驗(yàn)以確定頁(yè)面有沒有目標(biāo)瀏覽器不支持的tags或CSS結(jié)構(gòu)。動(dòng)態(tài)跨瀏覽器有效性檢查功能可以自動(dòng)核對(duì)tags和CSS規(guī)則是否適應(yīng)目前的主瀏覽器。</p><p>　　5)、強(qiáng)大的WEB站點(diǎn)管理功能</p><p&

19、gt;　　6)、內(nèi)建的圖形編輯引擎</p><p>　　7)、Dreamweave的集成特性：Dreamweaver cs3繼承了Fireworks、Flash和Shockwave的集成特性，可以在這些Web創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實(shí)用的網(wǎng)頁(yè)。</p><p>　　8)、豐富的媒體支持能力：可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒體。D

20、reamweaver具有強(qiáng)大的多媒體處理功能，在設(shè)計(jì)DHTML和CSS方面表現(xiàn)得極為出色，它利用JavaScript和DHTML語言代碼輕松地實(shí)現(xiàn)網(wǎng)頁(yè)元素的動(dòng)作和交互操作。Dreamweaver還提供行為和時(shí)間線兩種控件來產(chǎn)生交互式響應(yīng)和進(jìn)行動(dòng)畫處理。</p><p>　　9)、超強(qiáng)的擴(kuò)展能力：Dreamweaver還支持第三方插件，任何人都可以根據(jù)自己的需要擴(kuò)展Dreamweaver的功能，并且可以發(fā)布這些插件

21、。</p><p>　　1.2.2 Adobe Photoshop CS5</p><p>　　Adobe Photoshop CS5是目前最流行的圖形、圖像編輯設(shè)計(jì)軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設(shè)計(jì)、封面設(shè)計(jì)、美術(shù)繪畫、網(wǎng)頁(yè)設(shè)計(jì)等領(lǐng)域都被廣泛地應(yīng)用。</p><p><b>　　軟件功能：</b></p><p

22、>　　1）平面設(shè)計(jì)是PHOTOSHOP應(yīng)用最為廣泛的領(lǐng)域，無論是我們正在閱讀的圖書封面，還是大街上看到的招帖、海報(bào)，這些具有豐富圖像的平面印刷品，基本上都需要PHOTOSHOP軟件對(duì)圖像進(jìn)行處理。</p><p>　　2）修復(fù)照片,PHOTOSHOP具有強(qiáng)大的圖像修飾功能。利用這些功能，可以快速修復(fù)一張破損的老照片，也可以修復(fù)人臉上的斑點(diǎn)等缺陷。</p><p>　　3）影像創(chuàng)意是P

23、HOTOSHOP的特長(zhǎng)，通過PHOTOSHOP的處理可以將原本風(fēng)馬牛不相及的對(duì)象組合在一起，也可以使用“貍貓換太子”的手段使圖像發(fā)生面目全非的巨大變化。</p><p>　　4）藝術(shù)文字,當(dāng)文字遇到PHOTOSHOP處理，就已經(jīng)注定不再普通。利用PHOTOSHOP可以使文字發(fā)生各種各樣的變化，并利用這些藝術(shù)化處理后的文字為圖像增加效果。</p><p>　　5）網(wǎng)頁(yè)制作,網(wǎng)絡(luò)的普及是促使更

24、多人需要掌握PHOTOSHOP的一個(gè)重要原因。因?yàn)樵谥谱骶W(wǎng)頁(yè)時(shí)該軟件是必不可少的網(wǎng)頁(yè)圖像處理軟件。</p><p>　　6）婚紗照片設(shè)計(jì),當(dāng)前越來越多的婚紗影樓開始使用數(shù)碼相機(jī)，這也便得婚紗照片設(shè)計(jì)的處理成為一個(gè)新興的行業(yè)。</p><p>　　7）視覺創(chuàng)意,視覺創(chuàng)意與設(shè)計(jì)是設(shè)計(jì)藝術(shù)的一個(gè)分支，此類設(shè)計(jì)通常沒有非常明顯的商業(yè)目的，但由于他為廣大設(shè)計(jì)愛好者提供了廣闊的設(shè)計(jì)空間，因此越來越多的

25、設(shè)計(jì)愛好者開始了學(xué)習(xí)PHOTOSHOP，并進(jìn)行具有個(gè)人特色與風(fēng)格的視覺創(chuàng)意。</p><p>　　8）界面設(shè)計(jì)是一個(gè)新興的領(lǐng)域，已經(jīng)受到越來越多的軟件企業(yè)及開發(fā)者的重視，雖然暫時(shí)還未成為一種全新的職業(yè)，但相信不久一定會(huì)出現(xiàn)專業(yè)的界面設(shè)計(jì)師職業(yè)；在當(dāng)前還沒有用于做界面設(shè)計(jì)的專業(yè)軟件，因此絕大多數(shù)設(shè)計(jì)者使用的都是PHOTOSHOP。</p><p>　　1.2.3 Ulead GIF Anim

26、ator 5</p><p>　　Ulead GIF Animator 5 是友立公司出版的動(dòng)畫GIF制作軟件，內(nèi)建的Plugin有許多現(xiàn)成的特效可以立即套用，可將AVI文件轉(zhuǎn)成動(dòng)畫GIF文件，而且還能將動(dòng)畫GIF圖片最佳化，能將你放在網(wǎng)頁(yè)上的動(dòng)畫GIF圖檔減肥，以便讓人能夠更快速的瀏覽網(wǎng)頁(yè)。</p><p>　　它是一個(gè)簡(jiǎn)單、快速、靈活，功能強(qiáng)大的GIF動(dòng)畫編輯軟件。同時(shí)，也是一款不錯(cuò)的

27、網(wǎng)頁(yè)設(shè)計(jì)輔助工具，還可以作為Photoshop的插件使用，豐富而強(qiáng)大的內(nèi)制動(dòng)畫選項(xiàng)，讓我們更方便地制作符合要求的GIF動(dòng)畫。</p><p><b>　　2個(gè)人網(wǎng)站設(shè)計(jì)分析</b></p><p>　　2.1相關(guān)術(shù)語及解釋</p><p>　　1）Internet</p><p>　　互聯(lián)網(wǎng)（internetwork，簡(jiǎn)

28、稱internet），始于1969年的美國(guó)，又稱因特網(wǎng)，是全球性的網(wǎng)絡(luò)，是一種公用信息的載體，是大眾傳媒的一種。具有快捷性、普及性，是現(xiàn)今最流行、最受歡迎的傳媒之一。這種大眾傳媒比以往的任何一種通訊媒體都要快?；ヂ?lián)網(wǎng)是由一些使用公用語言互相通信的計(jì)算機(jī)連接而成的網(wǎng)絡(luò)，即廣域網(wǎng)、局域網(wǎng)及單機(jī)按照一定的通訊協(xié)議組成的國(guó)際計(jì)算機(jī)網(wǎng)絡(luò)。</p><p><b>　　2）站點(diǎn)</b></p>

29、;<p>　　所謂站點(diǎn)，就是將網(wǎng)頁(yè)文件和素材文件，有條理地放置站點(diǎn)文件夾里，這些文件與文件夾就構(gòu)成了網(wǎng)站的實(shí)質(zhì)內(nèi)容。站點(diǎn)文件夾里除了網(wǎng)頁(yè)文件還有素材文件，所謂素材就是網(wǎng)頁(yè)中所用到的圖像、聲音、視頻等，這些內(nèi)容是以單獨(dú)文件的形式存在。</p><p><b>　　3）超鏈接</b></p><p>　　我們?cè)跒g覽網(wǎng)頁(yè)時(shí)，當(dāng)鼠標(biāo)指針指向某段文本或是某個(gè)圖像，

30、鼠標(biāo)指針變成小手狀，單擊鼠標(biāo)可以打開其他的網(wǎng)頁(yè)或是跳轉(zhuǎn)到其他的網(wǎng)站，這就是超鏈接。采用超鏈接技術(shù)可以將不同的網(wǎng)站、網(wǎng)站中的不同網(wǎng)頁(yè)、網(wǎng)頁(yè)中的不同位置彼此串在一起，實(shí)現(xiàn)相互間的跳轉(zhuǎn)，方便信息的瀏覽和查找。人們通過超鏈接可以很方便很迅速地訪問分布于全球計(jì)算機(jī)上的海量資源，實(shí)現(xiàn)在互聯(lián)網(wǎng)中的漫游。超鏈接能使Web服務(wù)存在廣泛和持久的生命力，超鏈接可以說是Web的靈魂。</p><p><b>　　4）URL&l

31、t;/b></p><p>　　URL（Uniform Resource Locator的縮寫），統(tǒng)一資源定位器。互聯(lián)網(wǎng)中某種信息資源以某種方式存儲(chǔ)在網(wǎng)絡(luò)中的某處，必須用一個(gè)惟一的URL來進(jìn)行標(biāo)識(shí)，這樣才能方便查找。對(duì)于Web來說，可以簡(jiǎn)單并通俗把URL理解為網(wǎng)址。每個(gè)Web網(wǎng)頁(yè)都有自己的網(wǎng)址，在瀏覽器地址欄里輸入網(wǎng)頁(yè)的URL，就可以訪問這個(gè)網(wǎng)頁(yè)。例如，http://www.baidu.com/index.

32、html，其意思就是采用http超文本傳輸協(xié)議訪問新百度的首頁(yè)，由于網(wǎng)頁(yè)均是通過http超文本傳輸協(xié)議進(jìn)行訪問，默認(rèn)下，“http://”可以省略不輸。</p><p><b>　　5）IP地址</b></p><p>　　為了使互聯(lián)網(wǎng)上的電腦主機(jī)在通信時(shí)能夠相互識(shí)別，每臺(tái)主機(jī)都分配一個(gè)能表示其位置的IP（Internet Protocol）地址，這如同公用電話網(wǎng)中電

33、話的號(hào)碼一樣。IP地址是由專門的互聯(lián)網(wǎng)機(jī)構(gòu)來分配。IP地址具有惟一性，是由32位二進(jìn)制數(shù)組成，分為四組，每組8位，每組之間用小數(shù)點(diǎn)分隔，在實(shí)際之中常轉(zhuǎn)換成十進(jìn)制數(shù)表示。</p><p>　　2.2個(gè)人網(wǎng)站的由來</p><p>　　1994年中國(guó)科學(xué)院高能物理研究所設(shè)立了國(guó)內(nèi)第一個(gè)Web服務(wù)器，推出一個(gè)叫做“中國(guó)之窗”的網(wǎng)頁(yè)，這可能是國(guó)內(nèi)Internet上出現(xiàn)的第一個(gè)Web網(wǎng)頁(yè)，1995年

34、開始，中國(guó)教育科研網(wǎng)，中國(guó)科技網(wǎng)，中國(guó)公用計(jì)算機(jī)互聯(lián)網(wǎng)以及中國(guó)金橋網(wǎng)這構(gòu)成中國(guó)數(shù)字神經(jīng)系統(tǒng)的四大互聯(lián)網(wǎng)絡(luò)相繼建成，使互聯(lián)網(wǎng)在中國(guó)開始真正進(jìn)入社會(huì)生活之中。</p><p>　　這時(shí)期，個(gè)人網(wǎng)站出現(xiàn)的條件還很不成熟，國(guó)內(nèi)上網(wǎng)的人數(shù)很少，也缺乏支持</p><p>　　個(gè)人建站的環(huán)境，用戶很難找到理想的個(gè)人主頁(yè)存放地。</p><p>　　個(gè)人網(wǎng)站發(fā)展的第二階段是從19

35、97年初到1998年，這段時(shí)間，中國(guó)網(wǎng)民數(shù)量飛速增長(zhǎng)，個(gè)人網(wǎng)站日漸繁榮，個(gè)人主頁(yè)的數(shù)量急劇增加。同時(shí)，越來越多的商業(yè)網(wǎng)站開始免費(fèi)提供個(gè)人主頁(yè)空間，這些良好的外部極大地促進(jìn)了個(gè)人網(wǎng)站的發(fā)展，涌現(xiàn)了一批很著名的個(gè)人網(wǎng)頁(yè)，從1998年下半年開始，隨著互聯(lián)網(wǎng)應(yīng)用的深入的普及，隨著眾多主頁(yè)制作工具的出現(xiàn)，使得建站成為一件非常容易的事，創(chuàng)建一個(gè)能充分體現(xiàn)自我風(fēng)格和特色的個(gè)人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。</p><p>　

36、　2.3我的個(gè)人網(wǎng)站的設(shè)計(jì)與規(guī)劃</p><p>　　2.3.1我的個(gè)人網(wǎng)站概貌</p><p>　　通常情況下，架設(shè)個(gè)人網(wǎng)站主要是為了通過互聯(lián)網(wǎng)表達(dá)個(gè)人在商業(yè)、科技、交際、生活等方面的信息需求或者進(jìn)行信息的交流，具有較強(qiáng)的目的性，我的個(gè)人網(wǎng)站主要體現(xiàn)在：介紹自己的學(xué)校、班級(jí)的生活和一些與自己相關(guān)的東西，展現(xiàn)自己。</p><p>　　2.3.2 板塊劃分</

37、p><p><b>　　1）我的家鄉(xiāng)</b></p><p>　　說明了我家鄉(xiāng)的地理位置，對(duì)家鄉(xiāng)進(jìn)行了小介紹。介紹了家鄉(xiāng)的風(fēng)景名勝。</p><p><b>　　2）我的學(xué)校</b></p><p>　　對(duì)自己現(xiàn)在所在的學(xué)院進(jìn)行了介紹。學(xué)院的辦學(xué)條件、師資隊(duì)伍、專業(yè)與課程建設(shè)、實(shí)訓(xùn)基地建設(shè)、學(xué)生職業(yè)能力

38、以及學(xué)校的校區(qū)、校訓(xùn)。</p><p><b>　　4）班級(jí)生活</b></p><p>　　對(duì)班級(jí)里的生活，進(jìn)行了照片記錄，在同一個(gè)班級(jí)里大家一起生活了2年多，發(fā)</p><p>　　生了很多值得留念的事。</p><p><b>　　5）我的日志</b></p><p>

39、　　記錄了一些我覺得很不錯(cuò)的名言警句、人生道理，也有一些幽默的故事。</p><p><b>　　6）我的工具</b></p><p>　　介紹了我常常用到的覺得挺好用的工具。</p><p><b>　　7）聯(lián)系方式</b></p><p>　　通過這個(gè)聯(lián)系到我本人。</p><

40、;p><b>　　3網(wǎng)站設(shè)計(jì)過程</b></p><p><b>　　3.1建立站點(diǎn)</b></p><p>　　我設(shè)計(jì)制作的網(wǎng)站主要是先用Photoshop設(shè)計(jì)網(wǎng)頁(yè)的圖片，然后在把圖片跟文字導(dǎo)入Dreamweaver，Dreamweaver的作用是做一個(gè)框架容納我的網(wǎng)頁(yè)內(nèi)容。</p><p>　　做網(wǎng)站前，先要新建

41、一個(gè)站點(diǎn)來存放網(wǎng)頁(yè)及內(nèi)容。用Dreamweaver非常簡(jiǎn)單的就新建了一個(gè)站點(diǎn)。</p><p><b>　　圖3- 1</b></p><p>　　3.2開場(chǎng)動(dòng)畫的制作</p><p>　　由于是個(gè)人網(wǎng)站，我給自己的網(wǎng)站取名叫“我的小窩”，“開場(chǎng)動(dòng)畫”這個(gè)頁(yè)面就像是我進(jìn)入我家的門，是個(gè)門面，點(diǎn)擊即可進(jìn)入我的“家”。</p><

42、;p>　　一進(jìn)入的時(shí)候會(huì)看到整個(gè)頁(yè)面很暗，然后由暗變亮。頁(yè)面中間還有兩只小蝴蝶飛舞。然后出現(xiàn)了“點(diǎn)擊進(jìn)入”字樣。在這個(gè)頁(yè)面還會(huì)聽到背景音樂。</p><p>　　1）為了實(shí)現(xiàn)這個(gè)效果，我先是用PS把我從網(wǎng)絡(luò)上下載來的素材進(jìn)行編輯。</p><p>　　把素材加上文字，用“圖層樣式”設(shè)置文字效果。</p><p><b>　　圖3- 2</b&g

43、t;</p><p>　　2）對(duì)圖片進(jìn)行“色階”調(diào)整，制作5張由暗到亮的圖片，分別保存好。然后用Ulead GIF Animator 5， GIF動(dòng)畫制作軟件將這5張圖片制成GIF動(dòng)態(tài)圖，就出現(xiàn)了由暗到亮的效果了。</p><p><b>　　圖3- 3</b></p><p><b>　　圖3- 4</b></p&

44、gt;<p>　　3）網(wǎng)頁(yè)上飛舞的兩只蝴蝶其實(shí)就是一個(gè)GIF素材文件，用Dreamweaver插入一個(gè)層，放進(jìn)去就可以了。用Dreamweaver創(chuàng)建一個(gè)表格來布局，把內(nèi)容填進(jìn)入就實(shí)現(xiàn)了“開場(chǎng)動(dòng)畫”頁(yè)面的效果了。背景音樂是在Dreamweaver的“行為”窗口中選擇“播放聲音”瀏覽導(dǎo)入聲音文件，這樣當(dāng)停留在這個(gè)網(wǎng)頁(yè)時(shí)就會(huì)聽到音樂。</p><p><b>　　圖3- 5</b>

45、</p><p><b>　　3.3主頁(yè)的制作</b></p><p>　　整個(gè)頁(yè)面的大背景是一個(gè)木紋效果，周圍有綠葉的襯托，給人一種親近自然的感覺。頁(yè)面中自動(dòng)播放一些個(gè)人的照片。旁邊是導(dǎo)航條。</p><p><b>　　圖3- 6</b></p><p>　　以下是制作出這個(gè)效果的過程：<

46、/p><p>　　1）網(wǎng)頁(yè)的綠葉邊框我從一個(gè)素材中扣圖出來，然后復(fù)制很多個(gè)，旋轉(zhuǎn)拼湊而成?！皩ふ覍儆谧约旱奶炜铡弊謽游沂抢玫腜S的“圖層樣式”做的效果。導(dǎo)航條本來只有三個(gè)框，我先將其扣圖出來，然后用PS的框選工具復(fù)制多個(gè)，制作而成。</p><p><b>　　圖3- 7</b></p><p><b>　　圖3- 8</b>

47、;</p><p>　　2）現(xiàn)在像QQ空間、51空間把照片上傳到這些空間的相冊(cè)，里面有“制作相冊(cè)MV”，可以把你的照片一張張以各種效果切換，觀賞。我直接將照片傳到這些空間，別用它的功能，自動(dòng)生成了照片以各種方式切換的效果，然后使用“屏幕錄相專家”把它錄制成AVI格式，在用格式轉(zhuǎn)換器，轉(zhuǎn)換成Flash格式，導(dǎo)入自己的網(wǎng)頁(yè)。</p><p><b>　　圖3- 9</b>

48、</p><p>　　3）最后用Dreamweaver把我制作的東西拼湊起來。</p><p>　　4）導(dǎo)航條上的文字，我是用Dreamweaver設(shè)置超鏈接，鏈接到各個(gè)子網(wǎng)頁(yè)。對(duì)這些文字我用了CSS樣式，鼠標(biāo)沒經(jīng)過時(shí)的狀態(tài)“a:link”、鼠標(biāo)經(jīng)過時(shí)的狀態(tài)“a:hover”、鼠標(biāo)單擊時(shí)的狀態(tài)“a:active”、和已經(jīng)訪問過的狀態(tài)“a:visited”。</p><p

49、><b>　　圖3- 10</b></p><p><b>　　3.4各子網(wǎng)頁(yè)制作</b></p><p>　　這里說明了我的各個(gè)子網(wǎng)頁(yè)的一些技術(shù)點(diǎn)，一些具體功能是如何實(shí)現(xiàn)的。</p><p>　　3.4.1背景“下雪”、“花瓣飄動(dòng)”制作</p><p>　　有些頁(yè)面頂上會(huì)出現(xiàn)“下雪”、“花瓣

50、飄動(dòng)”的效果如下圖：</p><p><b>　　圖3- 11</b></p><p><b>　　圖3- 12</b></p><p>　　實(shí)現(xiàn)這個(gè)效果要有這些背景透明的GIF素材，然后在Dreamweaver里表格的單元格里在建一個(gè)表格，把這GIF素材設(shè)置成表格的背景，這樣效果就實(shí)現(xiàn)了.</p><

51、p><b>　　圖3- 13</b></p><p>　　3.4.2小標(biāo)題制作</p><p>　　像一些簡(jiǎn)單的圖片制作就直接用美圖秀秀來完成，這樣可加快速度：</p><p>　　制作以下效果圖片，用作網(wǎng)頁(yè)標(biāo)題。</p><p><b>　　圖3- 14</b></p><

52、;p>　　先導(dǎo)入一張全白色的圖片到美圖秀秀，選擇“邊框”，加一個(gè)如下邊框：</p><p><b>　　圖3- 15</b></p><p>　　然后選擇“文字”加上文字，保存成GIF格式圖片，就實(shí)現(xiàn)了上面效果。</p><p><b>　　圖3- 16</b></p><p>　　在將其導(dǎo)入

53、到Dreamweaver里就可以了。</p><p><b>　　圖3- 17</b></p><p>　　3.4.3 頁(yè)面間跳轉(zhuǎn) “上一頁(yè)” “下一頁(yè)”制作</p><p>　　在網(wǎng)絡(luò)上找到了一張符合我網(wǎng)站風(fēng)格的圖片，用來制作這個(gè)，但是圖片上有很多水印，我用PS的“修補(bǔ)工具”把水印一點(diǎn)一點(diǎn)給去掉，然后加上自己的文字，完成如下：</p&g

54、t;<p><b>　　圖3- 18</b></p><p>　　這個(gè)要實(shí)現(xiàn)點(diǎn)擊一下“下一頁(yè)”或者“上一頁(yè)”真的實(shí)現(xiàn)網(wǎng)頁(yè)跳轉(zhuǎn)，這是一個(gè)圖片，要在一張圖片上創(chuàng)建多個(gè)鏈接去打開不同的網(wǎng)頁(yè)就要用到Dreamweaver的熱區(qū)鏈接功能來實(shí)現(xiàn)。</p><p><b>　　圖3- 19</b></p><p>　　3.

55、4.4模板的制作</p><p>　　由于我的站點(diǎn)有好多相似的網(wǎng)頁(yè)，我設(shè)計(jì)了幾個(gè)網(wǎng)頁(yè)布局，保存成了模板（.dwt格式），然后利用模板創(chuàng)建相同布局的網(wǎng)頁(yè)，這樣大大提高了我的工作效率。</p><p><b>　　圖3- 20</b></p><p><b>　　圖3- 21</b></p><p>　

56、　3.4.5軟件下載鏈接，郵箱鏈接設(shè)置</p><p>　　使用Dreamweaver可以很方便的制作下載鏈接：先把要提供給人下載的軟件壓縮成壓縮包放入站點(diǎn)的一個(gè)文件夾里，然后在Dreamweaver里的“點(diǎn)擊下載”處制作熱點(diǎn)鏈接，直接輸入鏈接的路徑，點(diǎn)擊就可以下載了。</p><p><b>　　圖3- 22</b></p><p>　　郵箱

57、鏈接的設(shè)置跟上面方法差不多，在輸入鏈接地址時(shí)，輸入如下:</p><p><b>　　圖3- 23</b></p><p>　　3.4.6鼠標(biāo)經(jīng)過圖像時(shí)產(chǎn)生效果制作</p><p>　　我的網(wǎng)站很多地方都用到了鼠標(biāo)經(jīng)過產(chǎn)生效果。</p><p>　　Dreamweaver提供了一個(gè)鼠標(biāo)經(jīng)過這張圖片時(shí)，圖片自己換成另一張。

58、但是這個(gè)用這個(gè)功能的話，經(jīng)過圖像的大小會(huì)變成跟原圖像相同，而我要實(shí)現(xiàn)經(jīng)過的圖像放大的效果。</p><p><b>　　圖3- 24</b></p><p>　　我想到了一個(gè)辦法，我用PS制作了如下圖所示的兩張圖片，原圖像跟經(jīng)過圖像是一樣大的，原圖像的透明區(qū)域在網(wǎng)頁(yè)上是看不出來的，這樣鼠標(biāo)經(jīng)過后就會(huì)給人放大的效果。</p><p><b&

59、gt;　　圖3- 25</b></p><p>　　像下面兩張圖的做法是直接制作兩張圖，一張?jiān)瓐D一張經(jīng)過效果圖。</p><p><b>　　圖3- 26</b></p><p><b>　　圖3- 27</b></p><p>　　然后用Dreamweaver的“插入鼠標(biāo)過的圖像”功能

60、就可以實(shí)現(xiàn)。</p><p><b>　　圖3- 28</b></p><p>　　至此，我已經(jīng)基本說明了我的個(gè)人網(wǎng)站設(shè)計(jì)過程，以及對(duì)很多地方是如何實(shí)現(xiàn)的進(jìn)行了解說。</p><p><b>　　4總結(jié)</b></p><p>　　現(xiàn)在，計(jì)算機(jī)和網(wǎng)絡(luò)已經(jīng)深入到了我們生活中的方方面面，也已經(jīng)成了生活中

61、不可缺少的一部分，網(wǎng)絡(luò)成了我們獲取知識(shí)和信息的一種便捷工具，現(xiàn)在的網(wǎng)民也在不斷的增多，所以，了解和學(xué)習(xí)網(wǎng)絡(luò)知識(shí)是我們迫切所需的，通過這次的網(wǎng)頁(yè)設(shè)計(jì)制作我對(duì)Dreamweaver和photoshop的應(yīng)用更加的熟練了，我制作了57個(gè)頁(yè)面。我做的是個(gè)人網(wǎng)站所以網(wǎng)頁(yè)的布局，整體美觀度很重要，在制作過程中我很多次詢問同學(xué)，并讓他們對(duì)我的網(wǎng)頁(yè)給出意見以及良好的建議，讓我能更好的制作完成這個(gè)美觀度很高的個(gè)人網(wǎng)站。在制作過程中幾乎每個(gè)頁(yè)面我都花了很多

62、時(shí)間去調(diào)整去布局，做到美觀。</p><p>　　在設(shè)計(jì)制作整個(gè)網(wǎng)頁(yè)的過程中雖然還有很多不足，但是我的確能夠感到在我制作過程中技能的提高。在今后的學(xué)習(xí)生活中，我將不斷提高自己網(wǎng)頁(yè)設(shè)計(jì)與制作的能力和水平，從而彌補(bǔ)在本次畢業(yè)設(shè)計(jì)中的不足。</p><p><b>　　參考文獻(xiàn): </b></p><p>　　[1]吳教育.Dreamweaver C

63、S3中文版實(shí)例[M].北京：人民郵電出版社.2008年</p><p>　　[2]郭萬軍.Photoshop CS3實(shí)用教程[M].北京：人民郵電出版社.2009年</p><p>　　[3]武創(chuàng). 網(wǎng)頁(yè)設(shè)計(jì)探索之旅[M].北京. 電子工業(yè)出版社.2010年</p><p>　　[4]任學(xué)文. 網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京. 中國(guó)科學(xué)技術(shù)出版社.2010年</p