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

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

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

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

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

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

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

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

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

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

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

(2)在菜單欄中選擇【文件】→【導(dǎo)出】命令，彈出【導(dǎo)出】對(duì)話框，如圖13-6所示。在此對(duì)話框中設(shè)置好文件的名稱，選擇保存類型為【HTML和圖像】，單擊【導(dǎo)出】按鈕。輸出HTML文件和圖像文件，如圖13-7所示。圖13-6【導(dǎo)出】對(duì)話框圖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é)這個(gè)軟件，對(duì)這個(gè)名詞比較陌生，但只要慢慢讀下去，一定會(huì)受益匪淺。Fireworks有兩個(gè)工具用于切割圖像，即【切片】工具和【多邊形切片】工具。用戶所繪制的圖像是切片對(duì)象，在進(jìn)行切割時(shí)，顯示出來的紅色線條是切片引導(dǎo)線，它決定圖像被切割成幾個(gè)部分。也可以拖拽引導(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)移動(dòng)鼠標(biāo)到工作區(qū)，拖拽鼠標(biāo)創(chuàng)建矩形切片對(duì)象，則切片對(duì)象和切片輔助線顯示在【層】面板的【網(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)在站點(diǎ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)建一個(gè)矩形切片，如圖13-12所示。實(shí)例最終效果文件及所用素材見“站點(diǎn)實(shí)例”(WebDemo\ch13)。圖13-11打開素材圖片圖13-12創(chuàng)建矩形切片13.2.1創(chuàng)建切片

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

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

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

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

13.3.1行為與事件

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

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

在工作區(qū)中選中一個(gè)熱點(diǎn)或切片，打開【行為】面板，單擊【行為】面板中的【增加】按鈕，在彈出的菜單中選擇【設(shè)置彈出菜單】命令，彈出【彈出菜單編輯器】對(duì)話框，如圖13-19所示。此對(duì)話框可以引導(dǎo)用戶完成創(chuàng)建彈出菜單的整個(gè)過程。圖13-19【出菜單編輯器】對(duì)話框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)新建一個(gè)350*260的空白文檔。(2)在菜單欄中選擇【編輯】→【插入】→【新建元件】命令，彈出【元件屬性】對(duì)話框。設(shè)置如圖13-20所示，單擊【確定】按鈕，進(jìn)入元件編輯窗口。圖13-20元件屬性】對(duì)話框13.4.1使用元件

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

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