第十章 美化網(wǎng)頁(yè)

通過(guò)本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容：Photoshop基本操作利用Photoshop7.0處理網(wǎng)頁(yè)圖像Fireworks8基本操作利用Fireworks8美化網(wǎng)頁(yè)圖像Flash8基本操作利用Flash8處理網(wǎng)頁(yè)動(dòng)畫(huà)第10章

美化網(wǎng)頁(yè)

10.1使用Photoshop7.0美化網(wǎng)頁(yè)

Photoshop是美國(guó)Adobe公司自80年代推出的圖像處理軟件，是目前功能最為強(qiáng)大、最為流行的圖形處理軟件之一。它以強(qiáng)大的圖像處理功能和豐富的美術(shù)處理技巧，為眾多專(zhuān)業(yè)人士所青睞。在進(jìn)行網(wǎng)頁(yè)制作時(shí)，Photoshop更是不可缺少的得力助手。它可以通過(guò)一些簡(jiǎn)單操作對(duì)已有的圖片、照片等素材進(jìn)行進(jìn)一步的修飾、合成，以達(dá)到美化網(wǎng)頁(yè)的效果。

支持大量的圖像文件格式。

文本處理更加方便，可以在任何時(shí)候修改文本內(nèi)容，并可以對(duì)文本層進(jìn)行多種格式設(shè)置。

增強(qiáng)的色彩功能，提供了更廣泛的色彩范圍。

增強(qiáng)圖層的功能，可以建立文本層、效果層，并增加了圖層操作命令。使用效果層可以輕而易舉地實(shí)現(xiàn)多種特效。

10.1.1Photoshop的特點(diǎn)及功能

豐富的濾鏡功能。新增了近百種濾鏡，能充分地展現(xiàn)出創(chuàng)作者的設(shè)計(jì)風(fēng)格。具有“Actions（動(dòng)作）選項(xiàng)板”，能對(duì)圖像處理操作進(jìn)行有效的控制管理，對(duì)于大量的圖像文件可進(jìn)行批處理操作。

無(wú)限的撤消和重復(fù)操作為圖像處理提供了更廣泛的空間。新增了“魔術(shù)棒”、“磁性套索”等工具，使選區(qū)更加精確，并可對(duì)圖像進(jìn)行旋轉(zhuǎn)、拉伸、扭曲等自由變換。

10.1.2Photoshop7.0的基本操作

菜單欄位于標(biāo)題欄的下方，其中包括有關(guān)圖像編輯處理的操作命令。共有9組下拉式菜單，即“文件”、“編輯”、“圖像”、“圖層”、“選擇”、“濾鏡”、“視圖”、“窗口”和“幫助”菜單。

（1）“文件”菜單文件菜單主要用于圖像文件的新建、打開(kāi)、保存、導(dǎo)入、導(dǎo)出、打印等。

1．菜單欄的使用（2）“編輯”菜單編輯菜單中包括了還原、消褪、剪切、拷貝合并拷貝、粘貼、粘貼入、清除、填充、描邊、自由變換、變形、定義圖案、清理、預(yù)置等操作命令。（3）“圖像”菜單“圖像”菜單中主要對(duì)圖像文件進(jìn)行模式變化、色彩調(diào)節(jié)、圖像的復(fù)制和混合、圖像和畫(huà)布大小調(diào)整、圖像的旋轉(zhuǎn)、裁切、修整等操作。（4）“圖層”菜單“圖層”菜單主要用來(lái)對(duì)圖層進(jìn)行各種操作和調(diào)整。

（5）“選擇”菜單“選擇”菜單中包括了全選、取消選擇、重新選擇、反選、色彩范圍、羽化、修改、擴(kuò)大選取、選取相似、變換選區(qū)、載入選區(qū)、存儲(chǔ)選區(qū)等操作命令。

（6）“濾鏡”菜單“濾鏡”菜單主要用來(lái)對(duì)圖像進(jìn)行特殊處理，使圖像的風(fēng)格發(fā)生改變。

（7）“視圖”菜單“視圖”菜單主要用來(lái)控制圖像顯示的形態(tài)。

（8）“窗口”菜單“窗口”菜單主要用來(lái)打開(kāi)Photoshop提供的各種浮動(dòng)式對(duì)話(huà)框。該菜單允許用戶(hù)將窗口層地疊或平鋪，排列圖標(biāo)，顯示或隱藏工具箱、選項(xiàng)欄、狀態(tài)欄、信息、導(dǎo)航器、顏色、樣式、圖層、通道、路徑、歷史記錄、動(dòng)作等控制面板。

（9）“幫助”菜單主要提供各種有關(guān)的幫助信息。

Photoshop的工具箱包括了選區(qū)工具、繪圖工具、編輯工具、填充工具、文本工具、前景和背景顏色選擇框以及顯示模式選擇等50多種工具，可分別用于繪圖、編輯處理圖像、選區(qū)設(shè)定、屏幕模式選擇等。工具箱一般出現(xiàn)在屏幕的左側(cè)，也可以用鼠標(biāo)按住其標(biāo)題欄，拖動(dòng)到屏幕的其他位置上。

（1）繪圖工具繪圖工具包括“毛筆”、“鉛筆”、“圖章”、“直線(xiàn)”工具等，利用這些工具可以在圖像或選區(qū)中直接進(jìn)行創(chuàng)作。2．工具箱的使用（2）選區(qū)工具“選區(qū)”工具用于在圖像上選出特定的區(qū)域。選區(qū)設(shè)定后，區(qū)域邊界上會(huì)出現(xiàn)不斷流動(dòng)的虛線(xiàn)，虛線(xiàn)內(nèi)部就是選定區(qū)域。（3）編輯工具編輯工具主要對(duì)圖像進(jìn)行進(jìn)一步的修飾。包括“移動(dòng)”、“橡皮擦”、“裁剪”、“涂抹”、“模糊”、“銳化”、“減淡”、“加深”、“海綿”工具等。

（4）填充工具填充工具可對(duì)封閉的選區(qū)填充顏色或圖案，包括“油漆桶工具”、“漸變工具”。（5）文字工具文字工具可以在圖像中加入文字對(duì)象。選中該工具在圖像區(qū)單擊，會(huì)彈出文字對(duì)話(huà)框。從中可設(shè)置字體、文字大小、間距、對(duì)齊方式等文字屬性，還可選擇文字顯示為扇形、弧形、貝殼形、波浪形等，也可選擇文字的排列方向?yàn)樨Q排或橫排。（1）導(dǎo)航器控制面板導(dǎo)航器控制面板用來(lái)觀察圖像，它以一個(gè)小窗口顯示整個(gè)圖像。（2）色板控制面板此面板也可用來(lái)改變前景色和背景色。（3）樣式控制面板在樣式控制面板中有許多現(xiàn)成的樣式供用戶(hù)直接使用。

3．控制面板的使用（4）圖層控制面板通常情況下，使用Photoshop軟件生成新文件時(shí)至少有一個(gè)背景層。用戶(hù)在進(jìn)行圖像創(chuàng)作時(shí)可增加若干層，將組成圖像的不同部分分別放在不同的層中。每個(gè)層都可以單獨(dú)操作，對(duì)當(dāng)前圖層進(jìn)行的操作不會(huì)影響到其他圖層。

（5）通道控制面板通道控制面板用于創(chuàng)建和管理通道。通道不僅可以存放圖像的顏色信息，還可以用來(lái)建立和存儲(chǔ)選擇區(qū)域。

（6）歷史記錄控制面板歷史記錄控制面板用來(lái)記錄用戶(hù)對(duì)圖像的每一個(gè)操作，并根據(jù)執(zhí)行的操作命令自動(dòng)命名。它可幫助用戶(hù)恢復(fù)到操作過(guò)程中的任何一步，可以完全恢復(fù)當(dāng)時(shí)的狀態(tài)。

10.1.3利用Photoshop美化網(wǎng)頁(yè)

在對(duì)Photoshop軟件有了初步認(rèn)識(shí)之后，下面結(jié)合示例網(wǎng)頁(yè)中的兩個(gè)具體圖片來(lái)介紹如何利用該軟件來(lái)美化網(wǎng)頁(yè)。示范演示：

1．制作首頁(yè)特效圖片

2．“辦公電話(huà)”頁(yè)面中“美麗的校園”圖片的處理

10.2利用Fireworks8美化網(wǎng)頁(yè)將Fireworks8程序安裝完畢后，單擊Windows“開(kāi)始”菜單按鈕，在顯示的菜單中選擇“程序”選項(xiàng)，在程序選項(xiàng)中此時(shí)將會(huì)顯示出Windows所安裝的程序列表，接著選擇“程序”列表中Macromedia下的MacromediaFireworks8選項(xiàng)，即可啟動(dòng)Fireworks8程序用戶(hù)界面。1．Fireworks8工作界面

10.2.1利用Fireworks8制作網(wǎng)頁(yè)圖片

（1）標(biāo)題欄

Fireworks8中的標(biāo)題欄主要用于顯示軟件名稱(chēng)和當(dāng)前所編輯文件的名稱(chēng)。（2）菜單欄

Fireworks8的菜單欄中提供了10項(xiàng)下拉式菜單功能，使用這些菜單中的各個(gè)命令可以完成對(duì)于當(dāng)前文件的編輯操作。

（3）工具箱在Fireworks8中，圖像處理工具都放在工具箱中。工具箱通常固定在窗口的左邊，也可以用鼠標(biāo)拖動(dòng)工具箱，改變它在窗口中的位置。（4）工具欄在Fireworks8的主要工具欄中提供了一些工作中常用的基本工具。這些工具按鈕是一些常用菜單命令式操作選項(xiàng)的快捷方式.（5）屬性面板屬性面板用來(lái)顯示所選對(duì)象或工具的屬性，用戶(hù)可以通過(guò)屬性面板來(lái)調(diào)節(jié)這些屬性。（6）狀態(tài)欄

Fireworks8的狀態(tài)欄位于用戶(hù)界面的最底部，是顯示用戶(hù)操作的信息的位置。

（7）浮動(dòng)面板

Fireworks8中的浮動(dòng)面板組位于用戶(hù)界面的右側(cè)，控制著對(duì)象的更大范圍的特征，包括對(duì)矢量對(duì)象的描邊、填充等。浮動(dòng)面板占去用戶(hù)界面上很多空間，有時(shí)對(duì)操作帶來(lái)不便。此時(shí)，可以按一下鍵盤(pán)上的“Tab”鍵，將顯示的浮動(dòng)面板一起隱藏，再一次按下鍵盤(pán)上的“Tab”鍵，還可以將浮動(dòng)面板還原顯示。2．Fireworks8基本操作（1）畫(huà)面顯示與調(diào)整與顯示相關(guān)的功能主要位于“視圖”菜單中。包括：放大、縮小、縮放比率、選區(qū)符合窗口大小、文檔符合窗口大小、完整顯示、隱藏所選、顯示全部等。（2）對(duì)象選擇方法和對(duì)象選擇相關(guān)的幾個(gè)工具為：“指針”工具、“部分選擇”工具、“選擇后方對(duì)象”工具、“導(dǎo)出區(qū)域”工具和位圖對(duì)象選擇工具。導(dǎo)航欄實(shí)際上是一組互斥按鈕，因此，只要?jiǎng)?chuàng)建一個(gè)按鈕，然后將其復(fù)制并適當(dāng)修改其文字提示及鏈接就可以了。示范演示：制作示例網(wǎng)頁(yè)導(dǎo)航欄3．利用Fireworks制作示例網(wǎng)頁(yè)導(dǎo)航欄10.2.2將Fireworks8制作的圖片放到網(wǎng)頁(yè)上將制作的圖片放到網(wǎng)頁(yè)中，需要進(jìn)行如下操作：（1）將圖片或符號(hào)文件復(fù)制到Dreamweaver8管理的網(wǎng)站的本地文件夾中；（2）在Dreamweaver8的網(wǎng)頁(yè)文件內(nèi)選定要放圖片的位置，然后選擇“插入”|“圖像”命令，打開(kāi)“選擇圖像源”對(duì)話(huà)框；（3）在“選擇圖像源”對(duì)話(huà)框內(nèi)選擇要使用的圖片或符號(hào)，然后單擊“確認(rèn)”按鈕。10.3利用Flash8制作網(wǎng)頁(yè)動(dòng)畫(huà)10.3.1利用Flash8制作網(wǎng)頁(yè)動(dòng)畫(huà)

Flash是美國(guó)Macromedia公司出品的矢量圖形編輯和動(dòng)畫(huà)創(chuàng)作專(zhuān)業(yè)軟件，被廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)和多媒體創(chuàng)作等領(lǐng)域。利用該軟件制作的圖形和動(dòng)畫(huà)具有文件品質(zhì)高、體積小、交互性強(qiáng)、可帶音效和兼容性好等特點(diǎn)，因而用它可創(chuàng)作出美觀生動(dòng)而極為復(fù)雜的網(wǎng)頁(yè)作品。1．Flash8簡(jiǎn)介

（1）有關(guān)動(dòng)畫(huà)的一些基本概念①幀（Frame）

Flash在制作動(dòng)畫(huà)時(shí)，是由若干個(gè)幀來(lái)組成一個(gè)動(dòng)畫(huà)效果的。幀是裝載Flash作品內(nèi)容、進(jìn)行Flash作品播放的基本單位，也是Flash動(dòng)畫(huà)的基本組成元素。Flash的時(shí)間線(xiàn)面板上的每一小格代表一幀。

幀有以下幾種類(lèi)型：關(guān)鍵幀、關(guān)鍵幀和中間過(guò)渡幀。

②組件（Symbol）與實(shí)例（Instance）組件只是一種人為的規(guī)范，它指的是動(dòng)畫(huà)中一些出現(xiàn)頻率較高的物件對(duì)象。組件通常存放在圖庫(kù)中，使用時(shí)再把它從圖庫(kù)中拖曳出來(lái)。有人把組件形象地比喻為存儲(chǔ)起來(lái)的演員，隨時(shí)可以調(diào)出來(lái)扮演角色。把組件從圖庫(kù)中拖曳到舞臺(tái)工作區(qū)中，就得到了組件的一個(gè)實(shí)例?？梢园呀M件想象成一個(gè)源文件，它的實(shí)例就是它在不同地方的復(fù)制。

③層（Layer）層是為了方便操作者制作復(fù)雜的Flash動(dòng)畫(huà)作品而引入的一種手段。在時(shí)間線(xiàn)面板上，每個(gè)層都有各自的時(shí)間線(xiàn)。在每個(gè)層中都包含了一系列的幀，在各層中所使用的幀均是獨(dú)立的?？捎每刂破鱽?lái)播放某個(gè)場(chǎng)景的動(dòng)畫(huà)效果。播放動(dòng)畫(huà)時(shí)，會(huì)從每個(gè)層的第一幀開(kāi)始播放（即同步播放），不同層中的幀在同時(shí)播放中可以得到綜合的效果。

④

場(chǎng)景（Scene）一個(gè)Flash作品可以由若干個(gè)場(chǎng)景組成，每個(gè)場(chǎng)景都分別擁有各自獨(dú)立的動(dòng)畫(huà)內(nèi)容。每個(gè)場(chǎng)景中的層和幀均相對(duì)獨(dú)立。在播放時(shí)，F(xiàn)lash會(huì)自動(dòng)按場(chǎng)景的順序進(jìn)行播放。⑤

影片一個(gè)或幾個(gè)場(chǎng)景就可以組成一個(gè)影片。

Flash8的界面由以下幾個(gè)部分組成：標(biāo)題欄、菜單欄、標(biāo)準(zhǔn)工具欄、繪圖工具欄、狀態(tài)欄、時(shí)間線(xiàn)面板、控制器、工作區(qū)等。

（2）Flash8的界面組成①

菜單欄除了繪圖命令以外的絕大多數(shù)命令都可以在菜單欄中實(shí)現(xiàn)。②常用工具欄常用工具欄也叫標(biāo)準(zhǔn)工具欄，它位于菜單欄的下方，該工具欄除了提供了多個(gè)用于文件和編輯操作常用的命令按鈕外，還提供了幾個(gè)Flash8所特有的工具按鈕。

③控制工具條

Flash8的控制器是用來(lái)控制動(dòng)畫(huà)播放的，它是浮動(dòng)面板，它可以在“窗口”菜單中的“工具欄”子菜單中打開(kāi)或關(guān)閉，也可以用鼠標(biāo)移動(dòng)其位置。④工具欄工具欄即繪圖工具欄，一般情況下出現(xiàn)在窗口的左邊，也可用鼠標(biāo)改變其位置。該工具欄提供了用于圖形繪制和編輯的各種工具按鈕。⑤工作區(qū)工作區(qū)位于窗口的中央，動(dòng)畫(huà)就是在這個(gè)舞臺(tái)上生成和演出的。

⑥屬性面板使用屬性面板可以輕松地訪(fǎng)問(wèn)和更改文檔最常見(jiàn)的屬性。用戶(hù)可以在屬性面板中更改文檔屬性，而不用訪(fǎng)問(wèn)包含這些功能的菜單或面板。⑦時(shí)間線(xiàn)面板時(shí)間線(xiàn)面板是浮動(dòng)面板，其預(yù)設(shè)位置在標(biāo)準(zhǔn)工具欄的下方，是用來(lái)管理不同場(chǎng)景中的層與處理幀的。

①幀的操作

改變幀的播放速率在默認(rèn)情況下，F(xiàn)lash動(dòng)畫(huà)每秒播放的幀數(shù)為12格（幀/秒）。數(shù)值越大，播放幀數(shù)就越多，速度也就越快，動(dòng)畫(huà)的效果就越順暢；反之，數(shù)值越小，速度就越慢，動(dòng)畫(huà)播放時(shí)就會(huì)有很明顯的停格的現(xiàn)象。

（3）Flash8中的一些基本操作幀的選擇用鼠標(biāo)單擊某一幀，該幀即被選中，并且成為當(dāng)前幀，同時(shí)在工作區(qū)中顯示出該幀中的內(nèi)容。如果想一次選取許多幀，可以在所要選取的起始幀處，按下鼠標(biāo)左鍵不放，同時(shí)拖曳鼠標(biāo)至所需位置即可。或者先用鼠標(biāo)單擊起始幀，然后按下“Shift”鍵不放，在所要選取的終止幀處單擊鼠標(biāo)左鍵，這樣做也可以同時(shí)選中多個(gè)幀。

創(chuàng)建各種類(lèi)型的幀

在時(shí)間線(xiàn)上需要新建靜止幀的位置處單擊鼠標(biāo)左鍵，然后選擇“插入”|“幀\關(guān)鍵幀

\空白關(guān)鍵幀”命令，或單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“插入幀”，就可在所需位置上創(chuàng)建一個(gè)包含有與前一幀相同內(nèi)容的幀。復(fù)制幀復(fù)制幀的方法為：首先將需要復(fù)制的一個(gè)或者多個(gè)幀選中；在其上單擊鼠標(biāo)右鍵，從彈出的菜單中選擇“復(fù)制幀”命令；用鼠標(biāo)單擊需要粘貼的位置，再單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“粘貼幀”命令，即可將相同的內(nèi)容復(fù)制到所需的位置上。刪除幀首先選取幀，然后選擇“插入”|“刪除幀”命令，或者是在被選中的幀上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“移除幀”命令，

②

層的操作

添加層在層編輯區(qū)的左下角的第一個(gè)按鈕為“插入層”按鈕，按下它之后，即可在當(dāng)前所編輯的層上面插入一個(gè)新層；也可以在當(dāng)前層上單擊鼠標(biāo)右鍵，從彈出的菜單中選擇“插入層”選項(xiàng)，來(lái)新增一個(gè)層。

層的重命名在默認(rèn)狀態(tài)下，層名為“層1”、“層2”、…、“層n”，若想改變層的名稱(chēng)，可先選中該層，然后在層名上雙擊鼠標(biāo)左鍵，此時(shí)出現(xiàn)一個(gè)小方框，只要在其中輸入新的層名即可。

調(diào)整層的順序如果想要改變層的先后順序，可以用以下的方法：先用鼠標(biāo)單擊所要調(diào)整的層，把它選中；然后按住鼠標(biāo)左鍵不放，同時(shí)拖動(dòng)之，把它拖到所要放置的地方；再放開(kāi)鼠標(biāo)左鍵。

刪除層選取要?jiǎng)h除的層，在其上按住鼠標(biāo)不放，把它拖至?xí)r間線(xiàn)面板上的層編輯區(qū)右下角的“刪除層”按鈕處即可；或在要?jiǎng)h除的層上單擊鼠標(biāo)右鍵，從彈出的菜單中選取“刪除層”命令。

③

場(chǎng)景的操作

新增場(chǎng)景選擇“插入”|“場(chǎng)景”命令，即可新建一個(gè)場(chǎng)景；或選擇“窗口”|“場(chǎng)景”命令，此時(shí)會(huì)彈出一個(gè)“場(chǎng)景”對(duì)話(huà)框，在對(duì)話(huà)框中單擊添加場(chǎng)景按鈕即可。

場(chǎng)景的更名選擇“窗口”|“場(chǎng)景”命令，在打開(kāi)的場(chǎng)景對(duì)話(huà)框中選中要更名的場(chǎng)景，然后雙擊鼠標(biāo)左鍵，出現(xiàn)一個(gè)文本框，直接輸入一個(gè)名稱(chēng)即可。

當(dāng)前場(chǎng)景的切換

場(chǎng)景切換可按如下方法進(jìn)行：在場(chǎng)景對(duì)話(huà)框中直接單擊所需場(chǎng)景名；或單擊“視圖”菜單，從中選擇“跳轉(zhuǎn)到”選項(xiàng)，在該選項(xiàng)中再選擇所需要的場(chǎng)景名稱(chēng)即可。刪除場(chǎng)景

刪除場(chǎng)景的方法如下：選擇“插入”|“刪除場(chǎng)景”菜單命令，即可將當(dāng)前的場(chǎng)景刪除；或選擇“窗口”|“場(chǎng)景”命令，在彈出的場(chǎng)景對(duì)話(huà)框中，選擇要?jiǎng)h除的場(chǎng)景名，然后單擊“Delete”按鈕即可。

（1）Flash動(dòng)畫(huà)的類(lèi)型

Flash動(dòng)畫(huà)分為兩種類(lèi)型：逐幀動(dòng)畫(huà)（frame-by-frameanimation）和過(guò)渡動(dòng)畫(huà)（tweenedanimation）。

逐幀動(dòng)畫(huà)是由位于時(shí)間線(xiàn)上的同一動(dòng)畫(huà)軌道上的一個(gè)連續(xù)的關(guān)鍵幀序列組成。每一個(gè)過(guò)渡動(dòng)畫(huà)序列由兩個(gè)處于兩端的關(guān)鍵幀和位于中間的一個(gè)過(guò)渡幀序列組成，兩個(gè)關(guān)鍵幀分別定義了該動(dòng)畫(huà)序列的開(kāi)始和結(jié)束的狀態(tài)，過(guò)渡幀序列產(chǎn)生動(dòng)畫(huà)的中間效果。

2．利用Flash8制作網(wǎng)頁(yè)動(dòng)畫(huà)

①

創(chuàng)建逐幀動(dòng)畫(huà)

由于逐幀動(dòng)畫(huà)需要對(duì)每一幀中的內(nèi)容進(jìn)行逐個(gè)的制作和編輯，因此對(duì)動(dòng)畫(huà)的效果具有很強(qiáng)的控制能力，適合于制作較為復(fù)雜的動(dòng)畫(huà)。但是，由于該類(lèi)動(dòng)畫(huà)數(shù)據(jù)量大、編輯工作既耗時(shí)又復(fù)雜艱巨，故除非確實(shí)需要如此，否則應(yīng)盡量避免采用該類(lèi)動(dòng)畫(huà)。

（2）Flash動(dòng)畫(huà)的制作②創(chuàng)建過(guò)渡動(dòng)畫(huà)與逐幀動(dòng)畫(huà)不同，過(guò)渡動(dòng)畫(huà)是由起始和終止兩個(gè)關(guān)鍵幀，以及由這兩個(gè)關(guān)鍵幀