婚紗攝影網(wǎng)站設(shè)計畢業(yè)論文

1、<p><b>　　畢業(yè)設(shè)計（論文）</b></p><p>　　愛、婚紗攝影網(wǎng)站設(shè)計</p><p>　　年 級: ************ </p><p>　　學(xué) 號: ********* </p><p>　　姓 名: ***** </

2、p><p>　　專 業(yè): 網(wǎng)絡(luò)數(shù)字媒體 </p><p>　　指導(dǎo)老師: ***** </p><p><b>　　二零一一年十二月</b></p><p><b>　　摘 要</b></p><p>　　Internet的作用在今

3、天顯得越來越重要，網(wǎng)站的數(shù)量和規(guī)模發(fā)展迅猛。在Internet的早期，網(wǎng)站只能保存單純的文本。經(jīng)過幾年的發(fā)展，圖像、聲音、動畫、視頻、甚至3D技術(shù)也開始在Internet上流行，網(wǎng)站也發(fā)展成為今天我們看到的圖文并茂的樣子。在制作網(wǎng)站的過程中Photoshop\Dreamweaver\Flash是必不可少的網(wǎng)頁圖像處理軟件。Photoshop\Dreamweaver\Flash等軟件的功能及其強大，在圖像、圖形、動畫、文字、視頻等方面都有

4、涉及，良好的運用Photoshop\Dreamweaver\Flash這些軟件能在網(wǎng)站開發(fā)及后期發(fā)展中起到很重大的作用。</p><p>　　對于愛婚紗攝影網(wǎng)站的而言，在制作過程中使用了Photoshop\Flash\Dreamweaver等軟件工具，充分利用各個軟件的優(yōu)點，制作出動態(tài)靜態(tài)的相結(jié)合的網(wǎng)站。將各個網(wǎng)頁融匯起來。</p><p>　　關(guān)鍵詞： Dreamweaver； Flas

5、h； Photoshop； div+Css技術(shù)</p><p><b>　　目 錄</b></p><p>　　第1章 網(wǎng)站制作分析1</p><p>　　第2章 軟件工具介紹2</p><p>　　2.1 Dreamweaver軟件2</p><p>　　2.2 Photoshop 軟件

6、3</p><p>　　2.3.Flash 軟件5</p><p>　　2.4 Div+css技術(shù)7</p><p>　　第3章 網(wǎng)站制作過程10</p><p>　　3.1網(wǎng)站的頁面制作10</p><p>　　3.2對五個頁面進(jìn)行切片并保存到站點下13</p><p>　　3.3

7、制作Flash動畫13</p><p>　　3.4對五個頁面分別進(jìn)行頁面鏈接14</p><p>　　3.5在五個頁面中分別加入特效14</p><p>　　3.5.1鼠標(biāo)跟隨代碼15</p><p>　　3.5.2字體向上走，鼠標(biāo)經(jīng)過時文字停止，字體變色代碼16</p><p>　　3.5.3加入背景音樂

8、18</p><p><b>　　結(jié) 論19</b></p><p><b>　　致 謝20</b></p><p><b>　　參考文獻(xiàn)21</b></p><p>　　第1章 網(wǎng)站制作分析</p><p>　　1.愛、婚紗攝影網(wǎng)站的設(shè)

9、計思路</p><p>　　要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，體現(xiàn)網(wǎng)站的內(nèi)容，通過文字、Flash動畫、圖形使網(wǎng)站不過于呆板。首先利用Photoshop軟件制作出網(wǎng)站的各個頁面，其次并使用Flash軟件制作動畫增加網(wǎng)站的動態(tài)效果，最后在Dream waver實現(xiàn)整個網(wǎng)站得運作。</p><p>　　2.愛、婚紗攝影網(wǎng)站的主題</p><p>　　網(wǎng)站主

10、頁采用靜、動相結(jié)合的方式，即靜態(tài)的主畫面和動態(tài)的圖片相結(jié)合，體現(xiàn)婚紗攝影網(wǎng)站的優(yōu)雅、浪漫。動態(tài)主頁方式介紹愛、婚紗攝影，作品欣賞，關(guān)于我們、品牌服務(wù)等；動態(tài)運用flash動畫給人們直觀動感的效果。網(wǎng)站主頁本著簡單美觀全面的原則，以暗綠色及灰色為背景，黃色相間，漂亮且動感的flash讓你感受到溫馨浪漫的氣息。</p><p>　　3.愛、婚紗攝影網(wǎng)站的內(nèi)容</p><p>　　該網(wǎng)站主要擁有

11、5個頁面，包括：</p><p>　　首頁：動畫和鼠標(biāo)特效的結(jié)合對本網(wǎng)站進(jìn)行介紹。</p><p>　　品牌服務(wù)：此功能介紹了愛、婚紗攝影店的品質(zhì)服務(wù)。</p><p>　　聯(lián)系我們：方便及時和我們進(jìn)行聯(lián)系和我們的最新優(yōu)惠活動。</p><p>　　關(guān)于我們：傳達(dá)本網(wǎng)站的有關(guān)信息，增加對愛、婚紗攝影的理解。</p><p&

12、gt;　　作品欣賞：通過點擊圖片切換大小的方式展示我們的作品。</p><p>　　每個頁面采用不同的方式來實現(xiàn)出簡單美觀的網(wǎng)站。</p><p>　　4.網(wǎng)頁設(shè)計中色彩的運用</p><p>　　色彩是藝術(shù)表現(xiàn)的要素之一，在網(wǎng)頁設(shè)計中，根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進(jìn)行組合，搭配起來構(gòu)成美麗的頁面。所以在對愛、婚紗攝影店進(jìn)行設(shè)計時采用了淡雅而沉靜的顏

13、色：暗綠色，灰色，淺黃色，而不是大紅大紫的色彩。綠色代表生的希望，愛、婚紗攝影采用暗綠色調(diào)主要寓意著愛情的不斷成長、生機勃勃。</p><p>　　第2章 軟件工具介紹</p><p>　　2.1 Dreamweaver軟件</p><p>　　Dreamweaver軟件由美國著名的網(wǎng)站應(yīng)用開發(fā)軟件開發(fā)工具生產(chǎn)商Adobe Macromedia于2005年6月推出并

14、正式投入市場以來，已經(jīng)發(fā)展相當(dāng)成熟。Dreamweaver是一款簡單的中文軟件，可以在Win2003\Win2000\Win9x\Winxp中運行。Macromedia Dreamweaver 是建立 Web 站點和應(yīng)用程序的專業(yè)工具。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，其功能強大，使得各個層次的開發(fā)人員和設(shè)計人員都能夠快速創(chuàng)建界面吸引人的基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。從對基于 CSS 的設(shè)計的領(lǐng)先支持到手工編碼功能

15、，Dreamweaver 提供了專業(yè)人員在一個集成、高效的環(huán)境中所需的工具。開發(fā)人員可以使用 Dreamweaver 及所選擇的服務(wù)器技術(shù)來創(chuàng)建功能強大的 Internet 應(yīng)用程序，從而使用戶能連接到數(shù)據(jù)庫、Web 服務(wù)和舊式系統(tǒng)。</p><p>　　Dreamweaver是在網(wǎng)頁設(shè)計與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強大的軟件，隨著Dreamweaver 8的發(fā)布，更堅定Dreamweaver在該領(lǐng)域的

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

17、戶界面。</p><p><b>　　2、可視化編輯界面</b></p><p>　　Dreamweaver是一種所見即所得的HTML編輯器，可實現(xiàn)頁面元素的插入和生成。或視化編輯環(huán)境大量減少了代碼的編寫，同時亦保證了其專業(yè)性和兼容性，并且可以對內(nèi)部的HTML編輯器和任何第三方的HTML編輯器進(jìn)行實時的訪問。無論用戶習(xí)慣手工輸入HTML源代碼還是使用可視化的編輯界面，

18、Dreamweaver都能提供便捷的方式使用戶設(shè)計網(wǎng)頁和管理網(wǎng)站變得更容易。</p><p>　　3、功能更多的CSS支持——CSS可視化設(shè)計、CSS檢查工具</p><p>　　4、動態(tài)跨瀏覽器驗證</p><p>　　當(dāng)保存時系統(tǒng)自動檢查當(dāng)前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測試用瀏覽器，同時系統(tǒng)自動檢驗以確定頁面有沒有目標(biāo)瀏覽器不支持的tags或CSS

19、結(jié)構(gòu)。動態(tài)跨瀏覽器有效性檢查功能可以自動核對tags和CSS規(guī)則是否適應(yīng)目前的主瀏覽器。</p><p>　　5、強大的WEB站點管理功能</p><p>　　6、內(nèi)建的圖形編輯引擎</p><p>　　7、Dreamweaver的集成特性</p><p>　　Dreamweaver 8繼承了Fireworks、Flash和Shockwave

20、的集成特性，可以在這些Web創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實用的網(wǎng)頁。</p><p>　　8、豐富的媒體支持能力</p><p>　　可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒體。Dreamweaver具有強大的多媒體處理功能，在設(shè)計DHTML和CSS方面表現(xiàn)得極為出色，它利用JavaScript和DHTML語言代碼輕松地實現(xiàn)網(wǎng)頁元素的動作和

21、交互操作。Dreamweaver還提供行為和時間線兩種控件來產(chǎn)生交互式響應(yīng)和進(jìn)行動畫處理。</p><p><b>　　9、超強的擴展能力</b></p><p>　　Dreamweaver還支持第三方插件，任何人都可以根據(jù)自己的需要擴展Dreamweaver的功能，并且可以發(fā)布這些插件。</p><p>　　2.2 Photoshop 軟件&

22、lt;/p><p>　　Photoshop功能豐富實用，界面簡潔。集成化程度高，Photoshop可分為圖像編輯器、圖像合成、校色調(diào)色及特效制作部分。</p><p>　　圖像編輯器時處理圖像處理的基礎(chǔ)，可以對圖像進(jìn)行各種變換，如放大縮小、旋轉(zhuǎn)、鏡像、透視等。也可以進(jìn)行復(fù)制、去除斑點、修補、修飾圖像的殘損等。這在婚紗攝影、廣告制作、人像處理制作中由著非常大的作用。當(dāng)前很多影樓都使用了Photo

23、shop設(shè)計婚紗照片，通過Photoshop的設(shè)計能是照片更加完美。</p><p>　　平面設(shè)計是PHOTOSHOP應(yīng)用最為廣泛的領(lǐng)域，無論是我們正在閱讀的圖書封面，還是大街上看到的招帖、海報，這些具有豐富圖像的平面印刷品，基本上都需要PHOTOSHOP軟件對圖像進(jìn)行處理。</p><p><b>　　修復(fù)照片</b></p><p>　　P

24、HOTOSHOP具有強大的圖像修飾功能。利用這些功能，可以快速修復(fù)一張破損的老照片，也可以修復(fù)人臉上的斑點等缺陷。</p><p><b>　　廣告攝影</b></p><p>　　廣告攝影作為一種對視覺要求非常嚴(yán)格的工作，其最終成品往往要經(jīng)過PHOTOSHOP的修改才能得到滿意的效果。</p><p><b>　　影像創(chuàng)意</

25、b></p><p>　　影像創(chuàng)意是PHOTOSHOP的特長，通過PHOTOSHOP的處理 ，PHOTOSHOP可以將原本風(fēng)馬牛不相及的對象組合在一起，也可以使用“貍貓換太子”的手段使圖像發(fā)生面目全非的巨大變化。</p><p><b>　　藝術(shù)文字</b></p><p>　　當(dāng)文字遇到PHOTOSHOP處理，就已經(jīng)注定不再普通。利用P

26、HOTOSHOP可以使文字發(fā)生各種各樣的變化，并利用這些藝術(shù)化處理后的文字為圖像增加效果。</p><p><b>　　網(wǎng)頁制作</b></p><p>　　網(wǎng)絡(luò)的普及是促使更多人需要掌握PHOTOSHOP的一個重要原因。因為在制作網(wǎng)頁時PHOTOSHOP是必不可少的網(wǎng)頁圖像處理軟件。</p><p><b>　　建筑效果圖后期修飾&

27、lt;/b></p><p>　　在制作建筑效果圖包括許多三維場景時，人物與配景包括場景的顏色常常需要在PHOTOSHOP中增加并調(diào)整。</p><p><b>　　繪畫</b></p><p>　　由于PHOTOSHOP具有良好的繪畫與調(diào)色功能，許多插畫設(shè)計制作者往往使用鉛筆繪制草稿，然后用PHOTOSHOP填色的方法來繪制插畫。 　　

28、除此之外，近些年來非常流行的像素畫也多為設(shè)計師使用PHOTOSHOP創(chuàng)作的作品。</p><p><b>　　繪制或處理三維帖圖</b></p><p>　　在三維軟件中，如果能夠制作出精良的模型，而無法為模型應(yīng)用逼真的帖圖，也無法得到較好的渲染效果。實際上在制作材質(zhì)時，除了要依靠軟件本身具有材質(zhì)功能外，利用PHOTOSHOP可以制作在三維軟件中無法得到的合適的材質(zhì)也

29、非常重要。</p><p><b>　　婚紗照片設(shè)計</b></p><p>　　當(dāng)前越來越多的婚紗影樓開始使用數(shù)碼相機，這也使得婚紗照片設(shè)計的處理成為一個新興的行業(yè)。</p><p><b>　　視覺創(chuàng)意</b></p><p>　　視覺創(chuàng)意與設(shè)計是設(shè)計藝術(shù)的一個分支，此類設(shè)計通常沒有非常明 &

30、lt;/p><p>　　顯的商業(yè)目的，但由于他為廣大設(shè)計愛好者提供了廣闊的設(shè)計空間，因此越來越多的設(shè)計愛好者開始了學(xué)習(xí)PHOTOSHOP，并進(jìn)行具有個人特色與風(fēng)格的視覺創(chuàng)意。</p><p><b>　　圖標(biāo)制作</b></p><p>　　雖然使用PHOTOSHOP制作圖標(biāo)在感覺上有些大材小用，但使用此軟件制作的圖標(biāo)的確非常精美。</p&g

31、t;<p><b>　　界面設(shè)計</b></p><p>　　界面設(shè)計是一個新興的領(lǐng)域，已經(jīng)受到越來越多的軟件企業(yè)及開發(fā)者的重視，雖然暫時還未成為一種全新的職業(yè)，但相信不久一定會出現(xiàn)專業(yè)的界面設(shè)計師職業(yè)。在當(dāng)前還沒有用于做界面設(shè)計的專業(yè)軟件，因此絕大多數(shù)設(shè)計者使用的都是PHOTOSHOP。上述列出了PHOTOSHOP應(yīng)用的13大領(lǐng)域，但實際上其應(yīng)用不止上述這些。例如，目前的影視

32、后期制作及二維動畫制作，PHOTOSHOP也有所應(yīng)用的。</p><p>　　2.3.Flash 軟件</p><p>　　FLASH簡介Flash是一種交互式矢量多媒體技術(shù)，他的前身是Futureplash，早期網(wǎng)上流行的矢量動畫插件。后來由于Macromedia公司收購了Future Splash以后便將其改名為 Flash2，到現(xiàn)在最新的flash4?，F(xiàn)在網(wǎng)上已經(jīng)有成千上萬個Flas

33、h站點，著名的如Macromedia專門ShockRave站點，全部采用了Shockwave Flash 和Director。可以說Flash已經(jīng)漸漸成為交互式知量的標(biāo)準(zhǔn)，未來網(wǎng)頁的一大主流。下面介紹Flash3及4版本的特點： </p><p>　　Flash3的功能特點，總結(jié)起來有如下特點： </p><p>　　■ 靈巧的繪圖工具 Flash本身具有極其靈巧的圖形繪制功能，更重要的是

34、他能導(dǎo)入專業(yè)級繪圖工具，如Macromedia FreeHand、Adobe Illustrator等繪制的圖形，并產(chǎn)生翻轉(zhuǎn)、拉伸、擦除、歪斜等效果，還可以將圖形打碎分成許多單一的元素進(jìn)行編輯，并改變其顏色亮度。由于Flash提供具有保真技術(shù)的繪圖工具，使圖形邊緣在經(jīng)過一系列加工后仍會保持平滑。 </p><p>　　■ 向量透明效果應(yīng)用 Flash3可以創(chuàng)建透明的圖形，并可以任意改變層次間透明的不同效果，如透明

35、度、傾斜度及透明的顏色等屬性。 </p><p>　　■ 具有動畫效果的按鈕和菜單 Flash采用精靈動畫的方式，在Flash3中可以隨意創(chuàng)建按鈕、多級彈出式菜單、復(fù)選框、以及復(fù)雜的交互式字謎 游戲。 </p><p>　　■ 物體的變形和形狀的漸變 在Flash3中產(chǎn)生物體的變形和形狀的漸變非常容易，其發(fā)生完全由Flash自動生成，無須人為地在兩個對象間插入關(guān)鍵幀。 </p>

36、<p>　　■ 增強對圖像的支持 Flash3不但可以對導(dǎo)入的圖像（jpg、gif）產(chǎn)生翻轉(zhuǎn)、拉伸、擦除、歪斜、改變顏色亮度等效果，還能利用新的套索工具或 魔術(shù)棒在圖像中選擇顏色相同的區(qū)域并創(chuàng)建遮罩（Mask）；將圖像打碎分成許多單一的元素進(jìn)行編輯，設(shè)置圖像的屬性，如產(chǎn)生平滑效果和質(zhì)量損失壓縮等。 </p><p>　　■ 聲音插入 Flash3支持同步WAV (Windows) 和 AIFF(Ma

37、cintosh)格式的聲音文件和聲音的連接，你可以用同一個主聲道中的一部分來產(chǎn) 生豐富的聲音效果，而無須改變文件量的大小。 </p><p>　　■ 自定義字體 Flash可以處理自定義的字體及其顏色、大小、字間距、行間距 、縮進(jìn)等多種格式。在Flash創(chuàng)建的網(wǎng)頁中，可以加入眼花繚亂的標(biāo)題和動態(tài)的文本，而數(shù)據(jù)量非常小，比位圖的下載速度還快。當(dāng)然為了防止客戶端字體短缺，你也可以將特殊字體轉(zhuǎn)換為位圖圖形。 </

38、p><p>　　■ 模擬傳輸 Flash3提供了一幅設(shè)置動畫播放方式的圖表，你可以在此設(shè)置你的目標(biāo)Modem速度，如28.8kb/s，然后進(jìn)行模擬傳輸，檢驗其播放是否流暢，在參照圖表中找出發(fā)生間斷的位置，并進(jìn)行優(yōu)化。最終確保動畫在客戶端播放流暢。 </p><p>　　■ 獨立性 Flash3可以將制作的影片生成獨立的可執(zhí)行文件（EXE文件），在不具備Flash播放器的平臺上，仍可運行該影片。

39、因此，除制作網(wǎng)頁外還可以將其應(yīng)用于商業(yè)演示及電子賀卡等。 </p><p>　　■ 界面親切 Flash3增加了Inspector窗口、手柄、加速鎖等新功能，比以往更加易于操作。 </p><p>　　Macromedia 6月16日發(fā)布了其新版的Flash 制作軟件Flash 4，該軟件的新特性將包括對高保真MP3 流式音頻的集成化支持和創(chuàng)建互動式網(wǎng)站命令。另外，F(xiàn)lash 4 還包含一

40、個改進(jìn)的創(chuàng)作環(huán)境以滿足創(chuàng)建高效帶寬Flash網(wǎng)站的需要。 </p><p>　　■ Flash 可創(chuàng)建基于矢量的網(wǎng)站，可以跨平臺、跨瀏覽器地顯示聲音、圖片、動畫和交互式等內(nèi)容。Flash 4 中的MP3 流式音頻支持可以幫助設(shè)計人創(chuàng)建網(wǎng)絡(luò)音頻應(yīng)用程序，比如帶有旁白和背景音樂的長動畫，同時還可以減少文件大小以適合低帶寬的網(wǎng)絡(luò)傳輸。 </p><p>　　■ Flash 4新增加的對文本輸入框

41、的支持，讓開發(fā)人可以創(chuàng)建網(wǎng)絡(luò)表格、應(yīng)用程序和電子商務(wù)片頭?，F(xiàn)在網(wǎng)站可以從應(yīng)用了Flash 技術(shù)的網(wǎng)頁中收集用戶數(shù)據(jù)，并把信息傳到網(wǎng)站服務(wù)器上。 </p><p>　　■ Flash 還可以控制用戶輸入的信息以何種方式顯示，F(xiàn)lash 4支持可拖動的界面組件、條件邏輯和基本數(shù)學(xué)運算，比如可以用在創(chuàng)建網(wǎng)上購物結(jié)算應(yīng)用程序上。 </p><p>　　■ Flash 4 創(chuàng)作工具的改良界面包括新的

42、監(jiān)視面板和繪圖工具及更多的可直視層，它的時間安排表和智能向?qū)Э蓭椭脩魟?chuàng)建動畫。此外還有一個發(fā)布命令可控制Flash 支持的輸出格式，包括多版本的HTML、壓縮位圖和新的Quicktime。</p><p>　　2.4 Div+css技術(shù)</p><p>　　CSS是Cascading style Sheets的簡稱，中文譯作“層疊樣式表單”，我把它叫作“層疊樣式表”，實際上它是一組樣式。

43、你可能對CSS這個名詞比較陌生，實際上無論你用Internet Explorer還是 Netscape Navigator在網(wǎng)上沖浪，幾乎隨時都在與CSS打交道，在網(wǎng)上沒有使用過CSS的網(wǎng)頁可能不好找。不管你用什么工 具軟件制作網(wǎng)頁，都有在有意無意地使用CSS。用好CSS能使你的網(wǎng)頁更加簡煉，為什么同樣內(nèi)容的網(wǎng)頁，有的人做出來有 幾十KB，而高手做出來只有十幾KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小經(jīng)驗以及一些

44、網(wǎng)友來信 提問的問題整理出來，供諸位參考。 </p><p>　　1、CSS在網(wǎng)頁制作中一般有三種方式的用法，那么具體在使用時該采用哪種用法？ </p><p>　　當(dāng)有多個網(wǎng)頁要用到的CSS，采用外連CSS文件的方式，這樣網(wǎng)頁的代碼大大減少，修改起來非常方便；只在單個網(wǎng)頁中使用的CSS，采用文檔頭部方式；只有在一個網(wǎng)頁一、兩個地方才用到的CSS，采用行內(nèi)插入方式。 </p>

45、<p>　　2、CSS的三種用法在一個網(wǎng)頁中要以混用嗎？ </p><p>　　三種用法可以混用，且不會造成混亂。這就是它為什么稱之為“層疊樣式表”的原因，瀏覽器在顯示網(wǎng)頁時是這樣處理的：先檢查有沒有行內(nèi)插入式CSS，有就執(zhí)行了，針對本句的其它CSS就不去管它了；其次檢查頭部方式的CSS，有就執(zhí)行了；在前兩者都沒有的情況下再檢查外連文件方式的CSS。因此可看出，三種CSS的執(zhí)行優(yōu)先級是：行內(nèi)插入式、頭

46、部方式、外連文件方式。 </p><p>　　3、在Dreamweaver3中如何使外部文件式CSS？ </p><p>　　在Dreamweaver3中使用外連文件式CSS并沒有特殊要求，同樣是用記事本創(chuàng)建一個*.css文件，在網(wǎng)頁的<head>與</head>之間加上一句這樣的代碼：<linkrel="stylesheet" href=

47、"在這里填上你的CSS文件地址（相對路徑+文件 </p><p>　　名）" type="text/css"> 就行了。 </p><p>　　4、如何用Dreamweaver3快速創(chuàng)建CSS外連式文件？ </p><p>　　對于一個初接觸CSS的網(wǎng)頁設(shè)計人員來講，要用記事之類的編輯器，去創(chuàng)建一個CSS外連式文件是相當(dāng)

48、困難的。由于 Dreamweaver3對CSS支持的很好，用它來幫助就輕松多了。具體可以這樣操作： </p><p>　　1）先在紙上寫好在網(wǎng)站的網(wǎng)頁中可能要用到的格名稱，然后在Dreamweaver3的編輯窗中調(diào)出CSS面板，一個一個地定 義，并在一個空白頁上適當(dāng)?shù)貙懸稽c相關(guān)內(nèi)容，邊定義邊試用，效果不滿意，立即修改； </p><p>　　2）全部定義好后，再用記事本創(chuàng)建一個空的CSS外

49、連式文件，把在<head>與</head>之間的那段定義好的CSS復(fù)制 到CSS文件中去，就大功告成了。整個過程就是點鼠標(biāo)，方便吧？ </p><p>　　5、在Dreamweaver3中采用行內(nèi)插入式CSS要手動寫代碼嗎？ </p><p>　　不用！先用CSS面板定義好要用的CSS，然后，在要插入CSS的標(biāo)記插入：style=""，再把你剛才

50、定義的CSS從<head> 后面拖到這個雙引號中來，把花括號以外的部分刪去就行了。 </p><p>　　6、在方檔頭部方式和外連文件方式的CSS中都有“<!--”和“-->”，好象沒什么用，不要可以嗎？ </p><p>　　這一對東東的作用是為了不引起低版本瀏覽器的錯誤。如果某個執(zhí)行此頁面的瀏覽器不支持CSS，它將忽略其中的內(nèi) 容。雖然現(xiàn)在使用不支持CSS瀏覽器

51、的人已很少了，由于互聯(lián)網(wǎng)上幾乎什么可能都會發(fā)生，所以還是留著為妙。 </p><p>　　7、如何給一部分文字加背景色？ </p><p>　　給文字加上不同顏色，在DW3中只要在屬性面板上選取文字的顏色就行了，非常方便，但要給部分文字加不同的背景色，卻沒有相應(yīng)的功能，我們可以先做一個定義背景色的CSS（如：bgstyle），在DW3中點幾下鼠就完成了。如一個定義淡黃色背景的CSS是這樣的

52、： </p><p>　　<style type="text/css"> </p><p><b>　　<!-- </b></p><p>　　.bgstyle { background: #FFFFCC} </p><p><b>　　--> </b>&

53、lt;/p><p><b>　　</style> </b></p><p>　　在要用時選取那段文字，再在CSS面板上點一下“bgstyle”就行了。 </p><p>　　8、如何給部分文字加背景圖像？ </p><p>　　與加背景色操作類似，中是在背景在選擇加載圖象就是了，一個定義好的加背景圖象的CSS例子

54、的代碼是這樣的： </p><p>　　<style type="text/css"> </p><p><b>　　<!-- </b></p><p>　　.imgbgstyle { background-image: url(/logo.gif)} </p><p><b&

55、gt;　　--> </b></p><p><b>　　</style> </b></p><p>　　在要用時選取那段文字，再在CSS面板上點一下“imgbgstyle”就行了。 </p><p>　　第3章 網(wǎng)站制作過程</p><p>　　3.1網(wǎng)站的頁面制作</p>&

56、lt;p>　?。?）index.psd的制作：新建文檔1024、768，打開背景圖片floor，新建圖層，用矩形工具分別繪制出黑色，米黃色矩形背景底紋，并調(diào)整其位置。打開收音機圖片，并添加陰影效果，同理插入鉛筆圖案。再次使用矩形工具繪制出中間部分，并添加陰影效果。下面打開三張圖片，使用裁剪工具進(jìn)行裁剪并將其拖入圖層，調(diào)整其大小，位置。最后制作導(dǎo)航條，使用圓角矩形工具繪出導(dǎo)航輪廓，使用油漆桶工具填充綠色，最后在導(dǎo)航條適當(dāng)位置加入導(dǎo)航

57、文本。效果圖如3-1所示。</p><p>　　圖3-1 index.psd效果圖</p><p>　?。?）gywm.psd的制作: 新建文檔1024、768，打開背景圖片，新建圖層，用矩形工具分別繪制出黑色，米黃色矩形背景底紋，并調(diào)整其位置。打開收音機圖片，并加入陰影效果。接下來制作中間部分，在此頁面中將導(dǎo)航條放置于右側(cè)改變一下版面，選取一張照片，使用橢圓選框選擇圖片，將其拖入頁面左下

58、角，添加投影效果。效果圖3-2所示：</p><p>　　圖3-2 gywm.psd效果圖</p><p>　?。?）zpxs.psd的制作：新建文檔1024、768，打開背景圖片，新建圖層，用矩形工具分別繪制出黑色，米黃色矩形背景底紋，并調(diào)整其位置。打開收音機圖片，加入陰影效果。此時將導(dǎo)航換掉，使用自定義形狀繪制圖標(biāo)，調(diào)整其位置并加入導(dǎo)航文本。效果如圖3-3所示：</p>

59、<p>　　圖3-3 zpxs.psd效果圖</p><p>　?。?）ppfw.psd的制作：新建文檔1024、768，打開背景圖片，背景圖片換成wallpaper新建圖層，用矩形工具分別繪制出黑色，米黃色矩形背景底紋，并調(diào)整其位置。打開收音機圖片在本頁面中，，其他步驟基本相同。效果如圖3-4所示：</p><p>　　圖3-4 ppfw.psd效果圖</p>&

60、lt;p>　?。?）lxwm.psd的制作：新建文檔1024、768，打開背景圖片，背景圖片換成wallpaper，去掉燈光效果。新建圖層，用矩形工具分別繪制出黑色，米黃色矩形背景底紋，并調(diào)整其位置。打開收音機圖片，并添加陰影效果，再次使用矩形工具繪制出中間部分，并添加陰制作方法同上進(jìn)行局部改動。在版面底部加入版權(quán)所有文字。</p><p>　　效果如圖3-5所示：</p><p>

61、　　圖3-5 lxwm.psd效果圖</p><p>　　3.2對五個頁面進(jìn)行切片并保存到站點下</p><p>　　在站點下新建不同頁面的文件夾，便于保存和修改。</p><p>　　3.3制作Flash動畫 </p><p>　?。?）搜集素材婚紗照片，并分類。</p><p>　?。?）打開Flash，設(shè)置文檔大

62、小，導(dǎo)入舞臺背景，新建圖層1，在圖層1上導(dǎo)入一張婚紗照圖片，在合適的位置按F6加入關(guān)鍵幀，右擊補間動畫，在第一個關(guān)鍵幀處調(diào)整圖片的透明度為10%，在第二處關(guān)鍵幀的位置設(shè)置不透明度為100%，實現(xiàn)圖片有透明到不透明的漸變；</p><p>　?。?）新建圖層2，導(dǎo)入一張婚紗照到庫，按照步驟2的基本步驟制作另一張圖片的漸變效果</p><p>　?。?）以此類推，新建多個圖層，按照步驟3的方法

63、，制作多張圖片的漸變效果。</p><p>　　（5）測試影片，發(fā)現(xiàn)影片中的不足之處，進(jìn)行調(diào)整修改。</p><p>　　3.4對五個頁面分別進(jìn)行頁面鏈接</p><p>　?。?）在Dream waver中打開index網(wǎng)頁，在需要鏈接地方分別進(jìn)行連接，同理的方法將5個頁面分別進(jìn)行鏈接。在鏈接時，注意不要漏掉鏈接。</p><p>　?。?

64、）在代碼中按Ctrl+a選中整個頁面，在設(shè)計中將頁面居中。每個頁面依此類推。將頁面居中；</p><p>　　3.5在五個頁面中分別加入特效</p><p>　　3.5.1鼠標(biāo)跟隨代碼</p><p><b>　　<head></b></p><p>　　<title>愛、婚紗攝影</tit

65、le><style type="text/css"></p><p>　　.spanstyle {</p><p>　　COLOR: #6600cc; FONT-FAMILY: 宋體; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible</p><

66、p><b>　　}</b></p><p><b>　　</style></b></p><p><b>　　<script></b></p><p><b>　　var x,y</b></p><p>　　var step=

67、18</p><p>　　var flag=0</p><p>　　// Your snappy message. Important: the space at the end of the sentence!!!</p><p>　　var message="瞬間的微笑，留下永遠(yuǎn)的回憶--愛、婚紗攝影。 "</p><p&

68、gt;　　message=message.split("")</p><p>　　var xpos=new Array()</p><p>　　for (i=0;i<=message.length-1;i++) {</p><p>　　xpos[i]=-50</p><p><b>　　} </b&g

69、t;</p><p>　　var ypos=new Array()</p><p>　　for (i=0;i<=message.length-1;i++) {</p><p>　　ypos[i]=-200</p><p><b>　　}</b></p><p>　　function hand

70、lerMM(e){</p><p>　　x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX</p><p>　　y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY</p><p>&

71、lt;b>　　flag=1</b></p><p><b>　　}</b></p><p>　　function makesnake() {</p><p>　　if (flag==1 && document.all) {</p><p>　　for (i=message.lengt

72、h-1; i>=1; i--) {</p><p>　　xpos[i]=xpos[i-1]+step</p><p>　　ypos[i]=ypos[i-1]</p><p><b>　　}</b></p><p>　　xpos[0]=x+step</p><p><b>　　ypo

73、s[0]=y</b></p><p>　　for (i=0; i<message.length-1; i++) {</p><p>　　var thisspan = eval("span"+(i)+".style")</p><p>　　thisspan.posLeft=xpos[i]</p>

74、<p>　　thisspan.posTop=ypos[i]</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　else if (flag==1 && document.layers) {</p><p>　　for (i

75、=message.length-1; i>=1; i--) {</p><p>　　xpos[i]=xpos[i-1]+step</p><p>　　ypos[i]=ypos[i-1]</p><p><b>　　}</b></p><p>　　xpos[0]=x+step</p><p>

76、<b>　　ypos[0]=y</b></p><p>　　for (i=0; i<message.length-1; i++) {</p><p>　　var thisspan = eval("document.span"+i)</p><p>　　thisspan.left=xpos[i]</p>&

77、lt;p>　　thisspan.top=ypos[i]</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　var timer=setTimeout("makesnake()",30)</p><p><b>　　}

78、</b></p><p><b>　　</script></b></p><p><b>　　</head></b></p><p><b>　　<body></b></p><p>　　<body onload="

79、;makesnake()"></p><p><b>　　<script></b></p><p>　　<!-- Beginning of JavaScript </p><p>　　for (i=0;i<=message.length-1;i++) {</p><p>　　doc

80、ument.write("<span id='span"+i+"' class='spanstyle'>")</p><p>　　document.write(message[i])</p><p>　　document.write("</span>")</p>

81、<p><b>　　}</b></p><p>　　if (document.layers){</p><p>　　document.captureEvents(Event.MOUSEMOVE);</p><p><b>　　}</b></p><p>　　document.onmous

82、emove = handlerMM;</p><p>　　// - End of JavaScript - --></p><p><b>　　</script></b></p><p><b>　　</body></b></p><p>　　效果：加入這些代碼將實現(xiàn)鼠

83、標(biāo)后跟隨文字的效果，是整個頁面不在單調(diào)。利用這個方法，分別對幾個頁面進(jìn)行加入，修改跟隨鼠標(biāo)的文字即可。是每個頁面各不相同。字體顏色可以在代碼中實現(xiàn)修改。</p><p>　　3.5.2字體向上走，鼠標(biāo)經(jīng)過時文字停止，字體變色代碼</p><p><b>　　</div></b></p><p>　　<div id="

84、demo" style="overflow:hidden;height:400px;width:200px; border:1px solid #dde5bc;"></p><p>　　<div id="demo1"> </p><p>　　<div align="center"><a

85、 href="#">There used to be a true love for me.But I didn't cherish it.曾經(jīng)，有一份真誠的愛情放在我面前， 我沒有珍惜， </a></p><p>　　<a href="#">And I was so repented of what I lost it.It is t

86、he largest pain in my life.等我失去的時候我才后悔莫及，人世間最痛苦的事莫過于此,你的劍在我的咽喉上割下去吧！ 不用再猶豫了 </a></p><p>　　<a href="#">If I have a chance to do it again I will tell the girl 3 words:I LOVE YOU!如果上天能夠給我一

87、個再來一次的機會， 我會對那個女孩子說三個字：我愛你。</a></p><p>　　<a href="#">And if I have to give a time limit for it,如果非要在這份愛上加上一個期限，</a></p><p>　　<a href="#">I hope it'

88、;s...... 10,000 years.我希望是…… 一萬年！ </a></p><p>　　<a href="#">bless the day I found you.</a></p><p>　　<a href="#">I want to stay aroud you.</a><

89、;/p><p>　　<a href="#">And so i beg you,Let it be me.</a></p><p>　　<a href="#">Don't take this heaven from me.</a></p><p>　　<a href=&q

90、uot;#">If you must cling to somebody, now and forever, let it be me.</a></p><p>　　<a href="#">If you must cling to somebody, now and forever, let it be me. </a></p>

91、<p>　　<a href="#">Each time we meet, love,I find complete love.Without your sweet love, </a></p><p>　　<a href="#">黃昏下起綿綿細(xì)雨是很平常的事，不想讓它感動的卻是在雨中的自已。 </p><p

92、>　　在雨中，我不斷懷想的故事，就留在遠(yuǎn)方梭磨河邊那方天空里。 </p><p>　　此時此刻，腦海里浮現(xiàn)出這樣一幅場景： </p><p>　　你長長地頭發(fā)如簾幕低垂，遮住了你美麗的臉， </p><p>　　你走過墜滿雨滴的芳草地，身后盡是些會說話的小花，朵朵綻放。 </p><p>　　我便認(rèn)識了你，認(rèn)識了那雙深潭似的讓我醉了整個

93、夏天的眼睛。 </p><p>　　相思總是緣于一種悠遠(yuǎn)的寂寞， </p><p>　　在雨夜里思念的遠(yuǎn)方的人以及往日種種情懷一同復(fù)活了起來。 </p><p>　　總想讓一些如水般的語言，淌成一條愛意融融的河，流向你在的天空。 </p><p>　　我知道，我愛之所系在水之湄，情感的指向， </p><p>　　注定

94、我要在源頭作長久的佇望。 </p><p>　　夢中的你，在眺望的下游，在情感河流的那邊。 </p><p>　　也許可以重新將段段往事，牢牢捆扎成筏, </p><p>　　在結(jié)束一段迷惘的眺望之后，沐著此時的雨霧， </p><p>　　破釜沉舟般乘槎而來，在某個夜晚闖入你長夜孤燈的世界。 </p><p>　　今

95、夜的雨叉讓我找回了失落的往事，讓我和已離去的點滴近了些， </p><p>　　我知道此時在河的那邊依然有你遙遠(yuǎn)的關(guān)切， </p><p>　　我想，雨過之后，應(yīng)該有一個月圓的日子了吧？ </a></p><p><b>　　</div></b></p><p>　　效果：加入這段代碼可以實現(xiàn)文字

96、向上滾動，同時鼠標(biāo)經(jīng)過時，字體停止向上，文字并出現(xiàn)變色。</p><p>　　3.5.3加入背景音樂</p><p>　　從網(wǎng)絡(luò)上下載MP3格式的輕音樂，下載完成后，在Dreamweaver軟件中打開網(wǎng)站首頁頁面，點擊代碼，在代碼的body中插入MP3，設(shè)置其屬性值。利用同樣的方法，打開不同頁面，加入音樂音樂，讓整個網(wǎng)站運作是不會顯得枯燥無味</p><p><

97、;b>　　結(jié) 論</b></p><p>　　經(jīng)過兩個多月的努力，愛、婚紗攝影網(wǎng)站分析面臨的問題及策略論文終于完成 在整個設(shè)計過程中，出現(xiàn)過很多的難題，但都在老師和同學(xué)的幫助下順利解決了，在不斷的學(xué)習(xí)過程中我體會到：</p><p>　　制作個人網(wǎng)站及寫論文是一個不斷學(xué)習(xí)的過程，從最初剛寫論文時對愛、婚紗攝影網(wǎng)站面臨的問題的模糊認(rèn)識到最后能夠?qū)υ搯栴}有深刻的認(rèn)識，我

98、體會到實踐對于學(xué)習(xí)的重要性，以前只是明白理論，沒有經(jīng)過實踐考察，對知識的理解不夠明確，通過這次的做，真正做到理論實踐相結(jié)合。</p><p>　　就愛、婚紗攝影網(wǎng)站的設(shè)計而言，中途出現(xiàn)了很多問題，例如：在對網(wǎng)站的各個頁面進(jìn)行切片時，如果不仔細(xì)的話很容易漏切，導(dǎo)致自己來回重復(fù)制作這一過程；除此之外，要想是網(wǎng)站看起來不單調(diào)，需要加入各種特效代碼，在使用這些代碼時，一定要仔細(xì)的了解、研究，并成功將其運用到網(wǎng)站中來。雖然

99、在使用過程中出現(xiàn)了許多問題，還是需要有耐心的去發(fā)現(xiàn)問題、分析問題、解決問題。</p><p>　　總之，通過畢業(yè)設(shè)計,我深刻體會到要做好一個完整的事情，需要有系統(tǒng)的思維方式和方法，對待要解決的問題、研究對網(wǎng)站的制作有了很大的幫助，所謂三人行，必有我?guī)?。在制作過程中不斷提高自己的實踐動手能力，思考問題的能力，同時也能培養(yǎng)團(tuán)結(jié)協(xié)作的力量是偉大的。在此我也深刻的認(rèn)識到，在對待一個新事物時，一定要從整體考慮，完成一步之后

100、再作下一步，這樣才能更加有效。</p><p><b>　　致 謝</b></p><p>　　將近兩個月的時間終于將這篇論文寫完，在論文的寫作過程中遇到了無數(shù)的困難和障礙，都在同學(xué)和老師的幫助下度過了。在這里我感受到了團(tuán)結(jié)合作的力量，尤其要強烈感謝我的論文指導(dǎo)老師—***老師，她對我進(jìn)行了無私的指導(dǎo)和幫助，不厭其煩的幫助進(jìn)行論文的修改和改進(jìn)。另外，在校圖書館查找資

101、料的時候，圖書館的老師也給我提供了很多方面的支持與幫助。在此向幫助和指導(dǎo)過我的各位老師表示最中心的感謝！</p><p>　　感謝這篇論文所涉及到的各位學(xué)者。本文引用了數(shù)位學(xué)者的研究文獻(xiàn)，如果沒有各位學(xué)者的研究成果的幫助和啟發(fā)，我將很難完成本篇論文的寫作。</p><p>　　感謝我的同學(xué)和朋友，在我寫論文的過程中給予我了很解決問題的幫助，還在論文的撰寫和排版等過程中提供熱情的幫助。<

102、;/p><p>　　由于我的學(xué)術(shù)水平有限，所寫論文難免有不足之處，懇請各位老師和學(xué)友批評和指正！</p><p>　　最后，再次對關(guān)心、幫助我的老師和同學(xué)表示衷心地感謝！</p><p><b>　　參考文獻(xiàn)</b></p><p>　　老虎工作室 趙博 艾萍. 《從零開始:Photoshop CS3中文版基礎(chǔ)培訓(xùn)教程》 第

103、1版 人民郵電出版社 2009年2月1日；</p><p>　　李澤采. 《DreamweaverCS3基礎(chǔ)與實例教程》 電子工業(yè)出版社 第六次印刷 2008年；</p><p>　　李超 《CSS網(wǎng)站布局實錄》科學(xué)出版社第二版 2007年9月1日 ；</p><p>　　[4] Andy Budd 陳建甌 .《高級Web解決方案》 人民電出版社 2006年<

104、;/p><p>　　[5] Andy Clarke 譚振林.《WEB設(shè)計藝術(shù)精髓》 人民郵電出版社 2007年</p><p>　　[6] 彼得斯 蘇金國. 《Flash ActionScript 3.0 動畫高級教程》人民郵電出版20010年1月</p><p>　　[7] 李振華 季小武. 《Dreamweaver基礎(chǔ)教程》 清華大學(xué) 2005年6月</