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

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

美化網(wǎng)頁

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

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

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

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

增強的色彩功能，提供了更廣泛的色彩范圍。

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

10.1.1Photoshop的特點及功能

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

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

10.1.2Photoshop7.0的基本操作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1．制作首頁特效圖片

2．“辦公電話”頁面中“美麗的校園”圖片的處理

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

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

（1）標題欄

Fireworks8中的標題欄主要用于顯示軟件名稱和當前所編輯文件的名稱。（2）菜單欄

Fireworks8的菜單欄中提供了10項下拉式菜單功能，使用這些菜單中的各個命令可以完成對于當前文件的編輯操作。

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

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

（7）浮動面板

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

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

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

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

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

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

③層（Layer）層是為了方便操作者制作復(fù)雜的Flash動畫作品而引入的一種手段。在時間線面板上，每個層都有各自的時間線。在每個層中都包含了一系列的幀，在各層中所使用的幀均是獨立的。可用控制器來播放某個場景的動畫效果。播放動畫時，會從每個層的第一幀開始播放（即同步播放），不同層中的幀在同時播放中可以得到綜合的效果。

④

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

影片一個或幾個場景就可以組成一個影片。

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

（2）Flash8的界面組成①

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

③控制工具條

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

⑥屬性面板使用屬性面板可以輕松地訪問和更改文檔最常見的屬性。用戶可以在屬性面板中更改文檔屬性，而不用訪問包含這些功能的菜單或面板。⑦時間線面板時間線面板是浮動面板，其預(yù)設(shè)位置在標準工具欄的下方，是用來管理不同場景中的層與處理幀的。

①幀的操作

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

（3）Flash8中的一些基本操作幀的選擇用鼠標單擊某一幀，該幀即被選中，并且成為當前幀，同時在工作區(qū)中顯示出該幀中的內(nèi)容。如果想一次選取許多幀，可以在所要選取的起始幀處，按下鼠標左鍵不放，同時拖曳鼠標至所需位置即可?；蛘呦扔檬髽藛螕羝鹗紟?，然后按下“Shift”鍵不放，在所要選取的終止幀處單擊鼠標左鍵，這樣做也可以同時選中多個幀。

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

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

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

②

層的操作

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

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

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

刪除層選取要刪除的層，在其上按住鼠標不放，把它拖至時間線面板上的層編輯區(qū)右下角的“刪除層”按鈕處即可；或在要刪除的層上單擊鼠標右鍵，從彈出的菜單中選取“刪除層”命令。

③

場景的操作

新增場景選擇“插入”|“場景”命令，即可新建一個場景；或選擇“窗口”|“場景”命令，此時會彈出一個“場景”對話框，在對話框中單擊添加場景按鈕即可。

場景的更名選擇“窗口”|“場景”命令，在打開的場景對話框中選中要更名的場景，然后雙擊鼠標左鍵，出現(xiàn)一個文本框，直接輸入一個名稱即可。

當前場景的切換

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

刪除場景的方法如下：選擇“插入”|“刪除場景”菜單命令，即可將當前的場景刪除；或選擇“窗口”|“場景”命令，在彈出的場景對話框中，選擇要刪除的場景名，然后單擊“Delete”按鈕即可。

（1）Flash動畫的類型

Flash動畫分為兩種類型：逐幀動畫（frame-by-frameanimation）和過渡動畫（tweenedanimation）。

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

2．利用Flash8制作網(wǎng)頁動畫

①

創(chuàng)建逐幀動畫

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

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