《新編網(wǎng)頁制作三劍客培訓(xùn)教程》課件第13章

教學(xué)目標(biāo)：本章對在AdobeFireworksCS3中如何創(chuàng)建與使用熱點、圖像切片、按鈕、導(dǎo)航欄、優(yōu)化和導(dǎo)出圖像等進(jìn)行了詳細(xì)的講解。本章要點： 創(chuàng)建與編輯熱點 創(chuàng)建與編輯圖像切片 為切片和熱點附加行為 創(chuàng)建與編輯按鈕和導(dǎo)航欄 優(yōu)化和導(dǎo)出圖像

第13章使用FireworksCS3輸出網(wǎng)頁圖像13.1創(chuàng)建與編輯熱點13.2創(chuàng)建與編輯圖像切片13.3為切片和熱點附加行為13.4創(chuàng)建與編輯按鈕和導(dǎo)航條13.5優(yōu)化與導(dǎo)出圖像13.6上機(jī)實訓(xùn)第13章使用FireworksCS3輸出網(wǎng)頁圖像13.1.1創(chuàng)建與設(shè)置熱點13.1.2編輯與輸出熱點13.1創(chuàng)建與編輯熱點

熱點是出現(xiàn)在Web頁面中的一個圖形或一組圖形。當(dāng)鼠標(biāo)指針經(jīng)過熱點時，鼠標(biāo)指針將變?yōu)槭中?。在默認(rèn)情況下，單擊此熱點，將打開相關(guān)的網(wǎng)頁。Web頁面的HTML文件定義了每個熱點的尺寸和位置。13.1創(chuàng)建與編輯熱點

13.1.1創(chuàng)建與設(shè)置熱點(1)打開素材圖片“飲品.png”，如圖13-1所示。所用素材見“站點實例”(WebDemo\ch13)。

圖13-1打開素材圖片13.1.1創(chuàng)建與設(shè)置熱點(2)在工具箱中選擇【矩形熱點】工具，移動鼠標(biāo)至工作區(qū)，在需要創(chuàng)建熱點的位置拖拽鼠標(biāo)創(chuàng)建一個矩形熱點，如圖13-2所示。

圖13-2創(chuàng)建矩?zé)狳c13.1.1創(chuàng)建與設(shè)置熱點(3)在工作區(qū)中單擊【預(yù)覽】按鈕，切換到預(yù)覽狀態(tài)，此時將鼠標(biāo)移動到創(chuàng)建熱點的位置時，鼠標(biāo)指針變?yōu)樾螤?，如圖13-3所示。

圖13-3建的熱點13.1.1創(chuàng)建與設(shè)置熱點(4)回到原始窗口，使用選擇類工具，選中所創(chuàng)建的熱點，在【屬性】面板中，為熱點指定URL、替代文本、打開鏈接網(wǎng)頁的瀏覽器窗口和熱點名稱等，如圖13-4所示。

圖13-4【性】面板13.1.2編輯與輸出熱點1.編輯熱點熱點是網(wǎng)頁對象，并且同其他許多對象一樣，可使用【指針】工具、【部分選定】工具和【變形】工具對其進(jìn)行編輯?？梢允褂谩緦傩浴棵姘寤颉拘畔ⅰ棵姘?，以數(shù)字方式更改熱點的位置和大小。還可以使用【屬性】面板更改熱點的形狀13.1.2編輯與輸出熱點2.輸出熱點

Fireworks可以輸出客戶端圖像映像，其中包含圖像文件以及包含熱點信息和相關(guān)URL鏈接的HTML文件。輸出熱點的操作步驟如下。

(1)在軟件的右側(cè)打開【優(yōu)化】面板如圖13-5所示，設(shè)置優(yōu)化選項。圖13-5【優(yōu)化】面板13.1.2編輯與輸出熱點

(2)在菜單欄中選擇【文件】→【導(dǎo)出】命令，彈出【導(dǎo)出】對話框，如圖13-6所示。在此對話框中設(shè)置好文件的名稱，選擇保存類型為【HTML和圖像】，單擊【導(dǎo)出】按鈕。輸出HTML文件和圖像文件，如圖13-7所示。圖13-6【導(dǎo)出】對話框圖13-7導(dǎo)出的HTML文件和像文件13.2.1創(chuàng)建切片13.2.2編輯切片13.2創(chuàng)建與編輯圖像切片

13.2.1創(chuàng)建切片

切割圖像和創(chuàng)建選區(qū)一樣都很容易，讀者可能初學(xué)這個軟件，對這個名詞比較陌生，但只要慢慢讀下去，一定會受益匪淺。Fireworks有兩個工具用于切割圖像，即【切片】工具和【多邊形切片】工具。用戶所繪制的圖像是切片對象，在進(jìn)行切割時，顯示出來的紅色線條是切片引導(dǎo)線，它決定圖像被切割成幾個部分。也可以拖拽引導(dǎo)線來調(diào)整切片的大小。13.2.1創(chuàng)建切片1.創(chuàng)建矩形切片下面介紹矩形切片的創(chuàng)建方法。

(1)打開一張素材圖片(任意一幅圖片)，如圖13-8所示。在工具箱中選擇【切片】工具。圖13-8打素材圖片13.2.1創(chuàng)建切片(2)移動鼠標(biāo)到工作區(qū)，拖拽鼠標(biāo)創(chuàng)建矩形切片對象，則切片對象和切片輔助線顯示在【層】面板的【網(wǎng)頁層】中，畫面效果如圖13-9所示，【層】面板如圖13-10所示。圖13-9創(chuàng)建矩形切片圖13-10【層】面板13.2.1創(chuàng)建切片2.創(chuàng)建HTML切片HTML切片指定瀏覽器中出現(xiàn)普通HTML文本的區(qū)域。HTML切片不導(dǎo)出圖像，它導(dǎo)出出現(xiàn)在由切片定義的表格單元格中的HTML文本。如果要快速更新出現(xiàn)在站點中的文本而無須創(chuàng)建新圖形，則HTML切片很有用。下面介紹HTML切片的創(chuàng)建方法。13.2.1創(chuàng)建切片1.創(chuàng)建矩形切片下面介紹矩形切片的創(chuàng)建方法。

(1)打開一張素材圖片(任意一幅圖片)，如圖13-8所示。在工具箱中選擇【切片】工具。13.2.1創(chuàng)建切片

(1)打開一幅素材圖片(獅子.jpg)，如圖13-11所示。在工具箱中選擇【矩形切片】工具，在打開的圖像中創(chuàng)建一個矩形切片，如圖13-12所示。實例最終效果文件及所用素材見“站點實例”(WebDemo\ch13)。圖13-11打開素材圖片圖13-12創(chuàng)建矩形切片13.2.1創(chuàng)建切片

(2)保持切片處于選中狀態(tài)，在【屬性】面板的【類型】下拉列表框中選擇【HTML】選項，如圖13-13所示。圖13-13選擇【HTML】選項13.2.1創(chuàng)建切片

(3)單擊【屬性】面板中的【編輯】按鈕，彈出【編輯HTML切片】對話框，如圖13-14所示。圖13-14【編輯HTML切片】對話框13.2.1創(chuàng)建切片

(4)在【編輯HTML切片】對話框的窗口中輸入文本，如圖13-15所示，單擊【確定】按鈕。圖13-15輸入文本13.2.1創(chuàng)建切片

(5)在菜單欄中選擇【文件】→【導(dǎo)出】命令，彈出【導(dǎo)出】對話框，在此對話框中設(shè)置好文件的名稱，選擇保存類型為【HTML和圖像】的選項，單擊【導(dǎo)出】按鈕，輸出HTML文件和圖像文件，如圖13-16所示。圖13-16導(dǎo)出的HTML文件和圖像文件13.2.2編輯切片在Fireworks中，可以對切片進(jìn)行布局操作。當(dāng)拖動切片輔助線以調(diào)整切片大小時，F(xiàn)ireworks也將自動調(diào)整所有相鄰矩形切片的大小。另外，可以使用【屬性】面板來調(diào)整切片大小以及將切片變形，就像對待矢量對象和位圖對象一樣。此外，在導(dǎo)出帶切片的文件時，將生成多幅圖像文件與一個HTML文件。因此，使用切片最大的優(yōu)點就是：可以將一幅大圖片分割成多個小圖片，從而加快網(wǎng)頁的下載速度。13.3.1行為與事件13.3.2為切片或熱點創(chuàng)建彈出菜單13.3為切片和熱點附加行為

13.3.1行為與事件

在Fireworks中，系統(tǒng)提供一些【簡單變換圖像】、【交換圖像】、【恢復(fù)交換圖像】、【設(shè)置導(dǎo)航欄圖像】及【設(shè)置彈出菜單】等行為。下面對【行為】面板的操作作一簡單介紹。圖13-1打開素材圖片

圖13-17【行為】面板圖13-18添加行為命令菜單13.3.1創(chuàng)建與設(shè)置熱點在菜單欄中選擇【窗口】→【行為】命令，打開【行為】面板，如圖13-17所示。在【行為】面板中單擊【增加】按鈕，彈出如圖13-18所示的添加行為命令菜單，可以在菜單中選擇任意一種行為命令進(jìn)行添加，并可以多次添加。如果單擊【刪除】按鈕，會刪除行為命令?！拘袨椤棵姘逯械摹臼录堪粹o用于指明執(zhí)行某種動作的條件，如鼠標(biāo)指針移動到對象上方、離開對象、單擊對象等。13.3.2為切片或熱點創(chuàng)建彈出菜單

在工作區(qū)中選中一個熱點或切片，打開【行為】面板，單擊【行為】面板中的【增加】按鈕，在彈出的菜單中選擇【設(shè)置彈出菜單】命令，彈出【彈出菜單編輯器】對話框，如圖13-19所示。此對話框可以引導(dǎo)用戶完成創(chuàng)建彈出菜單的整個過程。圖13-19【出菜單編輯器】對話框13.4.1使用元件13.4.2創(chuàng)建與編輯按鈕13.4.3創(chuàng)建與編輯導(dǎo)航欄13.4.4導(dǎo)入元件與按鈕13.4創(chuàng)建與編輯按鈕和導(dǎo)航條

13.4.1使用元件

(1)新建一個350*260的空白文檔。(2)在菜單欄中選擇【編輯】→【插入】→【新建元件】命令，彈出【元件屬性】對話框。設(shè)置如圖13-20所示，單擊【確定】按鈕，進(jìn)入元件編輯窗口。圖13-20元件屬性】對話框13.4.1使用元件

(3)在工具箱中選擇【矩形】工具，在【屬性】面板中對其屬性進(jìn)行設(shè)置，如圖13-21所示。圖13-21【矩形】工具的【屬】面板13.4.1使用元件(4)在工作區(qū)中拖拽鼠標(biāo)，繪制一個矩形，如圖13-22所示。圖13-22繪制形13.4.1使用元件(5)在矩形處于選中的狀態(tài)下，在【屬性】面板中為其添加濾鏡效果——【斜面與浮雕】，如圖13-23所示。圖13-23添加濾鏡效果13.4.1使用元件(5)在矩形處于選中的狀態(tài)下，在【屬性】面板中為其添加濾鏡效果——【斜面與浮雕】，如圖13-23所示。(6)單擊元件編輯器窗口左上角的【完成】按鈕，關(guān)閉元件編輯器窗口。此時，【文檔】窗口與【庫】面板中將顯示所制作的元件，如圖13-24所示。此時可以從【庫】面板中拖拽元件進(jìn)入【文檔】窗口中，也可以雙擊元件，在【屬性】面板中對其進(jìn)行調(diào)整，調(diào)整好以后，【文檔】窗口中的圖形也會隨之改變。圖13-24【庫】面板13.4.2創(chuàng)建與編輯按鈕按鈕是網(wǎng)頁的導(dǎo)航元素。大部分按鈕都至少有兩種狀態(tài)，即釋放和滑過的狀態(tài)。在按鈕編輯器中創(chuàng)建的按鈕具有以下特點。幾乎可以將任何圖形或文本對象制作成按鈕?？梢詣?chuàng)建新按鈕，也可以將現(xiàn)有對象轉(zhuǎn)換為按鈕，或者導(dǎo)入已創(chuàng)建好的按鈕。按鈕是一種特殊類型的元件，可以將它的實例從元件庫拖到文檔中?？梢栽诟牧藛蝹€按鈕的圖形外觀后，自動更新導(dǎo)航欄中所有按鈕實例的外觀。可以在不影響同一按鈕的其他實例并且不斷開元件和實例之間關(guān)系的前提下，編輯某個按鈕實例的文本、URL和目標(biāo)屬性。13.4.2創(chuàng)建與編輯按鈕按鈕實例是經(jīng)過封裝的。在文檔中拖動按鈕實例時，F(xiàn)ireworks會移動與之關(guān)聯(lián)的所有組件和狀態(tài)，因此無需進(jìn)行多幀編輯。按鈕易于編輯。雙擊畫布上的實例后，就可以在按鈕編輯器或【屬性】面板中對其進(jìn)行更改。同其他元件一樣，按鈕也有注冊點。注冊點即一個中心點，該中心點有助于在按鈕編輯器中將文本和不同的按鈕狀態(tài)對齊。13.4.2創(chuàng)建與編輯按鈕在Fireworks中，用戶可以直接創(chuàng)建新按鈕，也可以將已有對象的翻轉(zhuǎn)圖片轉(zhuǎn)換為按鈕。下面介紹按鈕的創(chuàng)建方法。(1)新建一個空白文檔，在菜單欄中選擇【編輯】→【插入】→【新建按鈕】命令，進(jìn)入【按鈕】編輯窗口，如圖13-25所示。圖13-25【按】編輯窗口13.4.2創(chuàng)建與編輯按鈕(2)在工具箱中選擇【圓角矩形】工具，在【按鈕】編輯窗口中繪制一個圓角矩形，并在【屬性】面板中為其設(shè)置好顏色并添加其他效果。如圖13-26所示。圖13-26繪制圓角矩形并設(shè)置其屬性13.4.2創(chuàng)建與編輯按鈕(3)在工具箱中選擇【文本】工具，在繪制的圖形上添加文字，如圖13-27所示。(4)在【按鈕】編輯窗口中單擊【滑過】選項卡，創(chuàng)建按鈕的【滑過】狀態(tài)。然后單擊【復(fù)制彈起時的圖形】按鈕，將【釋放】狀態(tài)按鈕的圖形復(fù)制到【滑過】狀態(tài)的編輯窗口中，然后選擇復(fù)制的圖形，在【屬性】面板中對其顏色進(jìn)行修改，如圖13-28所示。圖13-27輸入文字圖13-28修改圖形顏色13.4.2創(chuàng)建與編輯按鈕(5)在【按鈕】編輯窗口中單擊【有效區(qū)域】選項卡，【按鈕】編輯窗口將自動創(chuàng)建與按鈕元件尺寸相同的切片，如圖13-29所示。如果對按鈕進(jìn)行修改，此切片也會自動更新。圖13-29在【有效區(qū)域】選項卡中創(chuàng)建切片13.4.2創(chuàng)建與編輯按鈕(6)圖形編輯完成后，單擊【按鈕】編輯窗口中的【完成】按鈕，關(guān)閉【按鈕】編輯窗口。此時，所創(chuàng)建的按鈕會出現(xiàn)在【庫】面板中，該按鈕實例也會出現(xiàn)在【文檔】窗口中，如圖13-30所示。圖13-30【庫】面板13.4.3創(chuàng)建與編輯導(dǎo)航欄(1)新建一個空白文檔，按<Ctrl>+<F8>組合鍵，在彈出的【元件屬性】對話框的【名稱】文本框中輸入“公司說明”，在【類型】選項區(qū)中點選【按鈕】單選鈕。如圖13-31所示。設(shè)置完成后單擊【確定】按鈕。圖13-31【元件屬性】對話框13.4.3創(chuàng)建與編輯導(dǎo)航欄(2)在按鈕的【釋放】狀態(tài)下輸入文字“公司簡介”，并設(shè)置好輸入文字的屬性，效果如圖13-32所示。(3)單擊【按鈕】編輯窗口的【滑過】選項卡，創(chuàng)建按鈕的【滑過】狀態(tài)。單擊【復(fù)制彈起時的圖案】按鈕，復(fù)制【釋放】狀態(tài)下的按鈕，選擇輸入的文字，在【屬性】面板中更改文字的顏色，并稍微移動一下它的位置，如圖13-33所示。圖13-32輸入文字效果圖13-33編輯輸入的文字13.4.3創(chuàng)建與編輯導(dǎo)航欄(4)單擊【完成】按鈕，關(guān)閉【按鈕】編輯窗口。此時【庫】面板中已經(jīng)存在一個名為“公司說明”的按鈕元件了，如圖13-34所示。圖13-34【庫】面板13.4.3創(chuàng)建與編輯導(dǎo)航欄(5)從【庫】面板中多次拖拽實例至工作區(qū)，并調(diào)整其位置與順序。選擇所需要的實例，然后在【屬性】面板中根據(jù)需要進(jìn)行修改，在【文本】編輯框中輸入文本，以更改實例的名稱。如圖13-35所示。圖13-35更改實例名稱13.4.3創(chuàng)建與編輯導(dǎo)航欄(6)打開一幅素材圖片，如圖13-36所示。圖13-36打開素材圖片13.4.3創(chuàng)建與編輯導(dǎo)航欄(7)將制作的實例放在打開素材的合適位置，如圖13-37所示。(8)在菜單欄中選擇【文件】→【導(dǎo)出】命令，彈出【導(dǎo)出】對話框，在此對話框中設(shè)置好文件的名稱，選擇保存類型為【HTML文件和圖像文件】選項。然后單擊【導(dǎo)出】按鈕，導(dǎo)出HTML文件和圖像文件，當(dāng)鼠標(biāo)移到按鈕上時，按鈕會發(fā)生變化，如圖13-38所示。圖13-37將實例放在打開的素材中圖13-38導(dǎo)出的HTML文件和圖像文件13.4.4導(dǎo)入元件與按鈕在Fireworks中，系統(tǒng)為用戶提供了豐富的元件和按鈕，在菜單欄中選擇【編輯】→【庫】命令，在其子菜單中可以進(jìn)行選擇，如圖13-40所示。在選擇每一個菜單命令時，都會彈出相應(yīng)的對話框。例如，選擇【按鈕】命令，彈出【導(dǎo)入元件：Buttons】對話框，如圖13-41所示。圖13-40【庫】子菜單圖13-41【導(dǎo)入元件：Buttons】對話框13.5.1網(wǎng)頁圖像類型13.5.2優(yōu)化圖像13.5.3導(dǎo)出向?qū)?3.5優(yōu)化與導(dǎo)出圖像

13.5.1網(wǎng)頁圖像類型可以在Fireworks中處理各種類型的文件。例如，開始時可以使用PNG格式的文件，然后將其另存為JPEG格式或GIF格式。用戶可以創(chuàng)建包含JavaScript代碼的HTML文件。如果想使用其他應(yīng)用程序(如Photoshop或MacromediaFlash)繼續(xù)編輯圖像，還可以將其導(dǎo)出或另存為特定于該應(yīng)用程序的文件類型。13.5.2優(yōu)化圖像在Fireworks中，優(yōu)化設(shè)置僅適用于導(dǎo)出圖像，用戶可以對圖像進(jìn)行優(yōu)化并調(diào)整優(yōu)化的設(shè)置，而不必?fù)?dān)心會損壞原圖。用戶可以使用【優(yōu)化】面板調(diào)整優(yōu)化的參數(shù)，也可以使用【導(dǎo)出預(yù)覽】對話框來優(yōu)化圖像。(1)打開一幅素材圖片，如圖13-42所示。圖13-42打開素材圖片13.5.2優(yōu)化圖像(2)打開【優(yōu)化】面板，在該面板中可以看出打開圖像的格式為GIF格式，如圖13-43所示。(3)在【優(yōu)化】面板的【保存設(shè)置】下拉列表框中選擇【GIF接近網(wǎng)頁128色】選項(表示將圖像處理為只包含128種網(wǎng)頁安全色的GIF格式文件)，如圖13-44所示。圖13-43【優(yōu)化】面板圖13-44【保存設(shè)置】選擇13.5.2優(yōu)化圖像(4)通過以上設(shè)置，便完成了圖像的優(yōu)化工作。在實際的優(yōu)化過程中，用戶可以根據(jù)需要進(jìn)行相應(yīng)的設(shè)置。13.5.2優(yōu)化圖像(1)打開一張JPEG格式的素材圖片，在【優(yōu)化】面板中選擇軟件預(yù)先設(shè)置的圖片壓縮方式，比如選擇【JPEG-較小文件】選項?！緝?yōu)化】面板中顯示【JPEG-較小文件】選項的詳細(xì)設(shè)置，如圖13-45所示。圖13-45【JPEG-較小文件】

選項設(shè)置13.5.2優(yōu)化圖像可以在Fireworks中處理各種類型的文件。例如，開始時可以使用PNG格式的文件，然后將其另存為JPEG格式或GIF格式。用戶可以創(chuàng)建包含JavaScript代碼的HTML文件。如果想使用其他應(yīng)用程序(如Photoshop或MacromediaFlash)繼續(xù)編輯圖像，還可以將其導(dǎo)出或另存為特定于該應(yīng)用程序的文件類型。13.5.2優(yōu)化圖像(2)從上圖中可以看出，圖像的壓縮品質(zhì)為“60%”，平滑度為“2”。用戶可以通過單擊右側(cè)的滑塊，來改變圖片的壓縮品質(zhì)，數(shù)值越大，則圖片的失真越小?？梢酝ㄟ^下面的兩張圖片來做一下對比，如圖13-46所示為“100%”的像素品質(zhì)和圖13-47所示為“20%”的圖像品質(zhì)。圖13-46“100%”的圖像品質(zhì)圖13-47“20%”的圖像品質(zhì)13.5.2優(yōu)化圖像(3)【平滑】度的參數(shù)值，可以對硬邊進(jìn)行模糊處理。通常情況下，數(shù)值設(shè)為“3”，不僅可以保障圖像的品質(zhì)，還可以減小圖像的大小。(4)可以通過單擊【優(yōu)化】面板右上方的【選項】按鈕，在彈出的菜單中選擇【優(yōu)化指定大小】命令，彈出【優(yōu)化到指定大小】對話框，在對話框中輸入文件大小的數(shù)值，如圖13-48所示。(5)在設(shè)置好優(yōu)化的各種屬性后，單擊【優(yōu)化】面板右上方的【選項】按鈕，在彈出的菜單中選擇【保存設(shè)置】命令，彈出【預(yù)設(shè)名稱】對話框，如圖13-49所示。13.5.2優(yōu)化圖像圖13-48【優(yōu)化到指定大小】對話框圖13-49【預(yù)設(shè)名稱】對話框13.5.3導(dǎo)出向?qū)М?dāng)用戶對優(yōu)化和導(dǎo)出操作更加嫻熟后，可能希望使用【優(yōu)化】面板和【文檔】窗口中的【預(yù)覽】按鈕來優(yōu)化圖形。它們比【導(dǎo)出向?qū)А繉υ捒蚋奖?，并且為熟悉?yōu)化過程的用戶提供了更多的優(yōu)化控制。在菜單欄中選擇【文件】→【圖像預(yù)覽】命令，便可以彈出【圖像預(yù)覽】對話框，如圖13-50所示。圖13-50【圖像預(yù)覽】對話框13.6上機(jī)實訓(xùn)1.實訓(xùn)目的結(jié)合上述內(nèi)容，做一個如圖13-51所示的網(wǎng)頁實例。本實例主要基于以上所講的熱點的創(chuàng)建、切片的創(chuàng)建、按鈕的制作等綜合知識，來完成一個網(wǎng)頁的制作并對其進(jìn)行切片操作。實例最終效果文件及所用素材見“站點實例”(WebDemo\ch13)。圖13-51實例效果13.6上機(jī)實訓(xùn)2.實訓(xùn)步驟在菜單欄中選擇【文件】→【打開】命令，彈出【打開】對話框，打開第12章“上機(jī)實訓(xùn)”中所保存的文件(樂安亭網(wǎng)頁.png)。使用【指針】工具選擇“文化街簡介”文字，右擊，在彈出右鍵快捷的