網(wǎng)頁(yè)制作教學(xué)課件 (10)

1、第10章 Fireworks 8Fireworks 8入門入門 初識(shí)初識(shí)Fireworks 8Fireworks 8矢量圖形繪制與編輯矢量圖形繪制與編輯10.1 10.1 初識(shí)初識(shí)Fireworks 8 Fireworks 8 Fireworks 8Fireworks 8同同Dreamweaver 8Dreamweaver 8的啟動(dòng)過(guò)程類似。的啟動(dòng)過(guò)程類似。啟動(dòng)啟動(dòng)Fireworks 8Fireworks 8后，系統(tǒng)會(huì)首先顯示起始頁(yè)。后，系統(tǒng)會(huì)首先顯示起始頁(yè)。 在起始頁(yè)的在起始頁(yè)的“新建新建”列中單擊列中單擊“FireworksFireworks文件文件”后，將打開(kāi)后，將打開(kāi)“新建文檔新建文檔

2、”對(duì)話框。設(shè)置各項(xiàng)參數(shù)對(duì)話框。設(shè)置各項(xiàng)參數(shù)后單擊后單擊“確定確定”按鈕，將進(jìn)入按鈕，將進(jìn)入Fireworks 8Fireworks 8的操的操作界面。作界面。 10.1.1 10.1.1 工具欄工具欄 Fireworks 8Fireworks 8的工具欄包括的工具欄包括“主要主要”工具欄和工具欄和“修改修改”工具欄。默認(rèn)狀態(tài)下，工具欄是關(guān)閉工具欄。默認(rèn)狀態(tài)下，工具欄是關(guān)閉的，選擇的，選擇“窗口窗口”“工具欄工具欄”菜單下的相應(yīng)菜單下的相應(yīng)選項(xiàng)，可打開(kāi)相應(yīng)的工具欄。選項(xiàng)，可打開(kāi)相應(yīng)的工具欄。 “主要主要”工具欄工具欄 “修改修改”工具欄工具欄 10.1.2 10.1.2 工具面板工具面板 默認(rèn)狀

3、態(tài)下，默認(rèn)狀態(tài)下，“工具工具”面面板位于工作界面的左側(cè)，板位于工作界面的左側(cè)，其中的工具被分成其中的工具被分成6 6個(gè)類個(gè)類別：選擇、位圖、矢量、別：選擇、位圖、矢量、網(wǎng)頁(yè)（網(wǎng)頁(yè)（WebWeb）、顏色和視）、顏色和視圖。如果某個(gè)工具圖標(biāo)的圖。如果某個(gè)工具圖標(biāo)的右下角有一個(gè)小黑三角符右下角有一個(gè)小黑三角符號(hào)，單擊并按住鼠標(biāo)不放號(hào)，單擊并按住鼠標(biāo)不放將打開(kāi)該工具的同位工具將打開(kāi)該工具的同位工具組。組。10.1.3 10.1.3 屬性面板屬性面板 “屬性屬性”面板是一個(gè)上下文關(guān)聯(lián)面板，它用來(lái)面板是一個(gè)上下文關(guān)聯(lián)面板，它用來(lái)顯示或設(shè)置當(dāng)前工具、對(duì)象或文檔的屬性。默顯示或設(shè)置當(dāng)前工具、對(duì)象或文檔的屬性。

4、默認(rèn)情況下，認(rèn)情況下，“屬性屬性”面板位于工作區(qū)底部。面板位于工作區(qū)底部。單擊此按鈕單擊此按鈕可展開(kāi)或折可展開(kāi)或折疊屬性面板疊屬性面板單擊此按鈕可以單擊此按鈕可以半高或全高方式半高或全高方式顯示屬性面板顯示屬性面板10.1.4 10.1.4 文檔編輯窗口文檔編輯窗口 顧名思義，文檔編輯窗口主要用于編輯文檔。顧名思義，文檔編輯窗口主要用于編輯文檔。Fireworks 8Fireworks 8的多文檔編輯界面可以使用戶同的多文檔編輯界面可以使用戶同時(shí)打開(kāi)和瀏覽多個(gè)文檔，單擊窗口左上方的文時(shí)打開(kāi)和瀏覽多個(gè)文檔，單擊窗口左上方的文檔標(biāo)簽可以在各個(gè)文檔之間切換。檔標(biāo)簽可以在各個(gè)文檔之間切換。 標(biāo)尺標(biāo)尺網(wǎng)

5、格網(wǎng)格“幀的播放幀的播放”工具欄工具欄 視圖控視圖控制欄制欄10.1.5 10.1.5 控制面板控制面板 默認(rèn)情況下，默認(rèn)情況下，F(xiàn)ireworksFireworks中的控制面板成組停中的控制面板成組停放在工作區(qū)右側(cè)。利用這些面板，可以方便地放在工作區(qū)右側(cè)。利用這些面板，可以方便地管理文檔中的層，設(shè)置文檔優(yōu)化參數(shù)，設(shè)置動(dòng)管理文檔中的層，設(shè)置文檔優(yōu)化參數(shù)，設(shè)置動(dòng)畫效果，以及插入特殊字符等。畫效果，以及插入特殊字符等。 范例范例1 1 制作一個(gè)簡(jiǎn)單廣告條制作一個(gè)簡(jiǎn)單廣告條 在認(rèn)識(shí)了在認(rèn)識(shí)了Fireworks 8Fireworks 8的操作界面后，下面通的操作界面后，下面通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)認(rèn)識(shí)一下

6、在過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)認(rèn)識(shí)一下在Fireworks 8Fireworks 8中工作的一般流程（具體操作見(jiàn)視頻中工作的一般流程（具體操作見(jiàn)視頻10-110-1）。）。 10.2 10.2 矢量圖形繪制與編輯矢量圖形繪制與編輯 圖像有位圖和矢量圖兩種。嚴(yán)格地說(shuō)，位圖被稱圖像有位圖和矢量圖兩種。嚴(yán)格地說(shuō)，位圖被稱為圖像，矢量圖被稱為圖形。它們之間最大的區(qū)為圖像，矢量圖被稱為圖形。它們之間最大的區(qū)別就是位圖放大到一定比例時(shí)會(huì)變得模糊，而矢別就是位圖放大到一定比例時(shí)會(huì)變得模糊，而矢量圖不管放到多大都不會(huì)模糊。平時(shí)我們拍攝的量圖不管放到多大都不會(huì)模糊。平時(shí)我們拍攝的照片、掃描的圖像等都屬于位圖。位圖與矢量圖

7、照片、掃描的圖像等都屬于位圖。位圖與矢量圖相比，優(yōu)點(diǎn)是所表現(xiàn)的效果更真實(shí)、細(xì)膩，常用相比，優(yōu)點(diǎn)是所表現(xiàn)的效果更真實(shí)、細(xì)膩，常用于廣告設(shè)計(jì)等領(lǐng)域；缺點(diǎn)是文件尺寸太大，且和于廣告設(shè)計(jì)等領(lǐng)域；缺點(diǎn)是文件尺寸太大，且和分辨率有關(guān)。分辨率有關(guān)。 10.2.1 10.2.1 設(shè)置筆觸與填充設(shè)置筆觸與填充 如果已經(jīng)確定了所要繪制圖形的顏色，最好在如果已經(jīng)確定了所要繪制圖形的顏色，最好在繪制前就設(shè)置好筆觸（描邊）和填充顏色。繪制前就設(shè)置好筆觸（描邊）和填充顏色。 此時(shí)將滴管移至文此時(shí)將滴管移至文檔區(qū)單擊可將文檔檔區(qū)單擊可將文檔中的現(xiàn)有顏色設(shè)置中的現(xiàn)有顏色設(shè)置為筆觸或填充色為筆觸或填充色單擊此按鈕表單擊此按鈕表

8、示不要筆觸示不要筆觸單擊此按鈕表單擊此按鈕表示不要填充示不要填充10.2.2 10.2.2 繪制線條繪制線條 在在FireworksFireworks中，用來(lái)繪制線條的工具有中，用來(lái)繪制線條的工具有“直線直線”工具、工具、“鋼筆鋼筆”工具、工具、“矢量路徑矢量路徑”工具以及工具以及“重繪路徑重繪路徑”工具，本節(jié)重點(diǎn)介紹工具，本節(jié)重點(diǎn)介紹“鋼筆鋼筆”工具工具的應(yīng)用。的應(yīng)用。選中選中“鋼筆鋼筆”工具后，在不同位置單擊可繪制連工具后，在不同位置單擊可繪制連續(xù)的直線段。如在某點(diǎn)單擊并拖動(dòng)，則可繪制曲續(xù)的直線段。如在某點(diǎn)單擊并拖動(dòng)，則可繪制曲線路徑，此時(shí)將在節(jié)點(diǎn)位置出現(xiàn)調(diào)整桿。線路徑，此時(shí)將在節(jié)點(diǎn)位置出

9、現(xiàn)調(diào)整桿。 10.2.3 10.2.3 繪制形狀繪制形狀 利用利用FireworksFireworks提供的其他繪畫工具可以非常方提供的其他繪畫工具可以非常方便地繪制橢圓、矩形、星形等。其中，使用便地繪制橢圓、矩形、星形等。其中，使用“矩矩形形”工具和工具和“橢圓橢圓”工具時(shí)，如果按住工具時(shí)，如果按住【ShiftShift】鍵單擊并拖動(dòng)，則可繪制正方形和圓形。按住鍵單擊并拖動(dòng)，則可繪制正方形和圓形。按住【AltAlt】鍵單擊并拖動(dòng)可繪制中心對(duì)稱矩形和橢鍵單擊并拖動(dòng)可繪制中心對(duì)稱矩形和橢圓。按住圓。按住【Shift+AltShift+Alt】組合鍵單擊并拖動(dòng)，可組合鍵單擊并拖動(dòng)，可從中心點(diǎn)繪制正

10、方形和圓形。從中心點(diǎn)繪制正方形和圓形。 10.2.4 10.2.4 編輯矢量圖形編輯矢量圖形 1 1“部分選定部分選定”工具工具 利用利用“部分選定部分選定”工具可以方便地調(diào)整路徑工具可以方便地調(diào)整路徑形狀。例如，單擊節(jié)點(diǎn)并拖動(dòng)可調(diào)整節(jié)點(diǎn)位形狀。例如，單擊節(jié)點(diǎn)并拖動(dòng)可調(diào)整節(jié)點(diǎn)位置；單擊調(diào)整桿端點(diǎn)并拖動(dòng)可改變調(diào)整桿的置；單擊調(diào)整桿端點(diǎn)并拖動(dòng)可改變調(diào)整桿的長(zhǎng)度與方向，進(jìn)而改變路徑形狀。長(zhǎng)度與方向，進(jìn)而改變路徑形狀。2 2“自由變形自由變形”工具工具 利用利用“自由變形自由變形”工具工具 可推拉路徑的任意部可推拉路徑的任意部分，從而彎曲路徑，此時(shí)系統(tǒng)將自動(dòng)增加、移分，從而彎曲路徑，此時(shí)系統(tǒng)將自動(dòng)增加

11、、移動(dòng)或刪除路徑上的節(jié)點(diǎn)。動(dòng)或刪除路徑上的節(jié)點(diǎn)。當(dāng)光標(biāo)靠近路徑時(shí)，如果光標(biāo)箭頭的右下角顯當(dāng)光標(biāo)靠近路徑時(shí)，如果光標(biāo)箭頭的右下角顯示了一個(gè)示了一個(gè)“s”s”，此時(shí)單擊并拖動(dòng)可調(diào)整路徑，此時(shí)單擊并拖動(dòng)可調(diào)整路徑的彎曲程度。如果光標(biāo)離路徑稍遠(yuǎn)，光標(biāo)箭頭的彎曲程度。如果光標(biāo)離路徑稍遠(yuǎn)，光標(biāo)箭頭的右下角顯示為的右下角顯示為“o”o”，此時(shí)單擊可為路徑增，此時(shí)單擊可為路徑增加一段圓弧，如果繼續(xù)拖動(dòng)，則可以改變圓弧加一段圓弧，如果繼續(xù)拖動(dòng)，則可以改變圓弧的位置。的位置。 3 3“更改區(qū)域形狀更改區(qū)域形狀”工具工具 利用利用“更改區(qū)域形狀更改區(qū)域形狀”工具可推拉路徑。選擇工具可推拉路徑。選擇該工具后，將光標(biāo)移

12、至路徑區(qū)域單擊并拖動(dòng)即該工具后，將光標(biāo)移至路徑區(qū)域單擊并拖動(dòng)即可改變路徑形狀。同樣，利用該工具的屬性面可改變路徑形狀。同樣，利用該工具的屬性面板可設(shè)置推拉半徑、推拉強(qiáng)度等。板可設(shè)置推拉半徑、推拉強(qiáng)度等。 4 4“刀子刀子”工具工具 用用“指針指針”工具工具 選中路徑后，選擇選中路徑后，選擇“刀子刀子”工工具具 在目標(biāo)路徑上單擊并拖動(dòng)可繪制分割線，釋在目標(biāo)路徑上單擊并拖動(dòng)可繪制分割線，釋放鼠標(biāo)后即可分割路徑。放鼠標(biāo)后即可分割路徑。5 5組合路徑組合路徑 通過(guò)選擇通過(guò)選擇“修改修改”“組合路徑組合路徑”菜單下的菜單下的“聯(lián)聯(lián)合合”、“交集交集”、“打孔打孔”或或“裁切裁切”等命令可等命令可以方便地

13、組合路徑。以方便地組合路徑。6 6改變路徑改變路徑 使用使用“修改修改”“改變路徑改變路徑”菜單中的各選項(xiàng)也菜單中的各選項(xiàng)也可以非常方便地對(duì)路徑進(jìn)行編輯?？梢苑浅７奖愕貙?duì)路徑進(jìn)行編輯。 （1 1）路徑簡(jiǎn)化）路徑簡(jiǎn)化 （2 2）擴(kuò)展筆觸）擴(kuò)展筆觸 （3 3）擴(kuò)展與收縮路徑）擴(kuò)展與收縮路徑 10.2.5 10.2.5 設(shè)置矢量圖形填充效果設(shè)置矢量圖形填充效果如果路徑的填充內(nèi)容為漸變色或圖案，則使用如果路徑的填充內(nèi)容為漸變色或圖案，則使用“指針指針”工具單擊路徑后將出現(xiàn)一個(gè)或兩個(gè)調(diào)工具單擊路徑后將出現(xiàn)一個(gè)或兩個(gè)調(diào)整桿，利用調(diào)整桿可調(diào)整填充效果。整桿，利用調(diào)整桿可調(diào)整填充效果。拖動(dòng)調(diào)整桿拖動(dòng)調(diào)整桿端點(diǎn)，調(diào)整端點(diǎn)，調(diào)整填充效果填充效果移動(dòng)圖案移動(dòng)圖案中心點(diǎn)中心點(diǎn) 10.2.6 10.2.6 對(duì)象組合和取消對(duì)象組合和取消 要組合對(duì)象，應(yīng)首先選擇要組合對(duì)象，應(yīng)首先選擇“指針指針”工具工具 或或“部分選定部分選定”工具工具 ，然后按住，然后按住【CtrlCtrl】鍵單擊鍵單擊選擇多個(gè)對(duì)象；或者拖出一個(gè)選擇框來(lái)選擇多選擇多個(gè)對(duì)象；或者拖出一個(gè)選擇框來(lái)選擇多個(gè)對(duì)象，此時(shí)位于選擇框內(nèi)或與選擇框相交的個(gè)對(duì)象，此時(shí)位于選擇框內(nèi)或與選擇框相交的對(duì)象均被選中。最后選擇對(duì)象均被選中。最后選擇“修改修改”“組合組合”菜單或按菜單或按【Ctr