教學目標：本章對在AdobeFireworksCS3中如何創建與使用熱點、圖像切片、按鈕、導航欄、優化和導出圖像等進行了詳細的講解。本章要點： 創建與編輯熱點 創建與編輯圖像切片 為切片和熱點附加行為 創建與編輯按鈕和導航欄 優化和導出圖像

第13章使用FireworksCS3輸出網頁圖像13.1創建與編輯熱點13.2創建與編輯圖像切片13.3為切片和熱點附加行為13.4創建與編輯按鈕和導航條13.5優化與導出圖像13.6上機實訓第13章使用FireworksCS3輸出網頁圖像13.1.1創建與設置熱點13.1.2編輯與輸出熱點13.1創建與編輯熱點

熱點是出現在Web頁面中的一個圖形或一組圖形。當鼠標指針經過熱點時，鼠標指針將變為手形。在默認情況下，單擊此熱點，將打開相關的網頁。Web頁面的HTML文件定義了每個熱點的尺寸和位置。13.1創建與編輯熱點

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

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

圖13-2創建矩熱點13.1.1創建與設置熱點(3)在工作區中單擊【預覽】按鈕，切換到預覽狀態，此時將鼠標移動到創建熱點的位置時，鼠標指針變為形狀，如圖13-3所示。

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

圖13-4【性】面板13.1.2編輯與輸出熱點1.編輯熱點熱點是網頁對象，并且同其他許多對象一樣，可使用【指針】工具、【部分選定】工具和【變形】工具對其進行編輯?？梢允褂谩緦傩浴棵姘寤颉拘畔ⅰ棵姘澹詳底址绞礁臒狳c的位置和大小。還可以使用【屬性】面板更改熱點的形狀13.1.2編輯與輸出熱點2.輸出熱點

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

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

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

13.2.1創建切片

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

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

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

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

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

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

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

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

13.3.1行為與事件

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

圖13-17【行為】面板圖13-18添加行為命令菜單13.3.1創建與設置熱點在菜單欄中選擇【窗口】→【行為】命令，打開【行為】面板，如圖13-17所示。在【行為】面板中單擊【增加】按鈕，彈出如圖13-18所示的添加行為命令菜單，可以在菜單中選擇任意一種行為命令進行添加，并可以多次添加。如果單擊【刪除】按鈕，會刪除行為命令。【行為】面板中的【事件】按鈕用于指明執行某種動作的條件，如鼠標指針移動到對象上方、離開對象、單擊對象等。13.3.2為切片或熱點創建彈出菜單

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

13.4.1使用元件

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

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

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

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