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

2、學 號：　　　　　　　　 </p><p>　　學生姓名：　　　　　　　 </p><p>　　指導教師：　　　　　　　　 </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)頁工用到的工具介紹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個人

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30、鼠標指針變成小手狀，單擊鼠標可以打開其他的網(wǎng)頁或是跳轉(zhuǎn)到其他的網(wǎng)站，這就是超鏈接。采用超鏈接技術(shù)可以將不同的網(wǎng)站、網(wǎng)站中的不同網(wǎng)頁、網(wǎng)頁中的不同位置彼此串在一起，實現(xiàn)相互間的跳轉(zhuǎn)，方便信息的瀏覽和查找。人們通過超鏈接可以很方便很迅速地訪問分布于全球計算機上的海量資源，實現(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)中某種信息資源以某種方式存儲在網(wǎng)絡(luò)中的某處，必須用一個惟一的URL來進行標識，這樣才能方便查找。對于Web來說，可以簡單并通俗把URL理解為網(wǎng)址。每個Web網(wǎng)頁都有自己的網(wǎng)址，在瀏覽器地址欄里輸入網(wǎng)頁的URL，就可以訪問這個網(wǎng)頁。例如，http://www.baidu.com/index.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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