中文版Fireworks-CS5基礎(chǔ)與上機(jī)實(shí)訓(xùn)課件-01

計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列《中文版FireworksCS5基礎(chǔ)與上機(jī)實(shí)訓(xùn)》計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列《中文版FireworksCS5基1第一章FireworksCS5使用基礎(chǔ)

第一章FireworksCS5使用基礎(chǔ)2學(xué)習(xí)目標(biāo)FireworksCS5作為一款真正意義上的網(wǎng)頁圖形設(shè)計(jì)軟件，可以說是完美之至。它給網(wǎng)頁圖形設(shè)計(jì)人員和開發(fā)人員提供一個(gè)快捷方便的制作環(huán)境。在Fireworks中，用戶可以利用系統(tǒng)所提供的位圖與矢量圖工具創(chuàng)建、編輯Web圖形與動(dòng)畫，利用可配置的輸出和優(yōu)化圖像功能，將制作好的圖像輸出到Dreamweaver或其他HTML編輯環(huán)境中。同時(shí)，在Dreamweaver和Flash內(nèi)可以直接啟動(dòng)與編輯Fireworks圖形，從而使網(wǎng)頁制作變得更加輕松自如。學(xué)習(xí)目標(biāo)FireworksCS5作為本章重點(diǎn)FireworksCS5的工作界面文檔的創(chuàng)建方法文檔屬性的設(shè)置方法輔助工具的使用視圖的調(diào)整本章重點(diǎn)FireworksCS5的工作界面1.1關(guān)于FireworksCS5功能介紹

Fireworks可以提供一個(gè)專業(yè)化的創(chuàng)建與編輯Web圖像的工作環(huán)境，在此環(huán)境下可以方便地繪制與編輯位圖對(duì)象、矢量對(duì)象、制作動(dòng)畫、導(dǎo)航條、彈出菜單，以及有圖像翻轉(zhuǎn)功能的熱點(diǎn)與切片。本節(jié)將簡要介紹FireworksCS5的基本功能。1.1關(guān)于FireworksCS5功能介紹1.1.1編輯位圖圖像

在Fireworks中每一個(gè)位圖都是一個(gè)獨(dú)立的對(duì)象，可以對(duì)其運(yùn)用“魔術(shù)棒”工具、“套索”工具、“鉛筆”工具、“刷子”工具、“橡皮擦”工具等進(jìn)行編輯修改，達(dá)到模糊、羽化、銳化、減淡、加深和涂抹等效果。

1.1.1編輯位圖圖像在Firewo1.1.2編輯矢量圖形

在Fireworks中，矢量圖形的繪制工具有“直線”工具、“矩形”工具、“橢圓”工具、“星形”工具、“圓角矩形”工具等基本形狀繪制工具和“鋼筆”工具、“矢量路徑”工具等自由矢量路徑繪制工具。

1.1.2編輯矢量圖形在Firewo1.1.3豐富的動(dòng)態(tài)濾鏡

在Fireworks中，可以使用豐富的動(dòng)態(tài)濾鏡為圖像制作生動(dòng)的效果。動(dòng)態(tài)濾鏡包括“斜角和浮雕”、“雜點(diǎn)”、“陰影和光暈”、“調(diào)整顏色”、“模糊”和“銳化”等。動(dòng)態(tài)濾鏡可以用于矢量對(duì)象、位圖對(duì)象和文本對(duì)象。在編輯這些對(duì)象時(shí)直接從屬性面板中選擇所要運(yùn)用的濾鏡種類即可。

1.1.3豐富的動(dòng)態(tài)濾鏡在Firewor1.1.4處理文本

FireworksCS5提供了強(qiáng)大的文本處理功能，除了可以進(jìn)行一般的文本操作，如運(yùn)用不同的字體和調(diào)整文字之間的間距外，還可以同“筆觸”面板、“填充”面板、動(dòng)態(tài)濾鏡相結(jié)合，設(shè)計(jì)出更為美觀的文本。

1.1.4處理文本Fireworks1.1.5制作GIF動(dòng)畫

在Fireworks中可以創(chuàng)建和編輯簡單的GIF動(dòng)畫，其原理是首先創(chuàng)建動(dòng)畫元件，然后添加到多幀上，并通過移動(dòng)、縮放和旋轉(zhuǎn)等動(dòng)作來實(shí)現(xiàn)元件在屏幕上的動(dòng)畫效果。此外，還可以給每幀上的動(dòng)畫元件添加不同的濾鏡特效。

1.1.5制作GIF動(dòng)畫在Firewor1.1.6快速創(chuàng)建切片和熱點(diǎn)

切片是Fireworks中用于創(chuàng)建交互性對(duì)象的基本構(gòu)造塊，它不像矢量圖形或位圖圖形那樣以圖像的形式存在，而是作為網(wǎng)頁對(duì)象以HTML代碼的形式出現(xiàn)。在Fireworks的“層”面板的“網(wǎng)頁層”中可以查看、選取和編輯切片對(duì)象。此外，使用拖放交換圖像的方式將交互性添加到切片也是一種快速創(chuàng)建交換圖像效果的方法。如圖1-6所示為在網(wǎng)頁圖像上創(chuàng)建的切片。熱點(diǎn)也是一種網(wǎng)頁交互性方式。它用于創(chuàng)建圖像映射，即在HTML文檔中定義熱點(diǎn)的HTML代碼。當(dāng)鼠標(biāo)指針經(jīng)過熱點(diǎn)時(shí)，會(huì)觸發(fā)設(shè)定好的行為。此外，單擊熱點(diǎn)還可以鏈接到設(shè)定的網(wǎng)頁中。

1.1.6快速創(chuàng)建切片和熱點(diǎn)切片是Fir1.1.7圖像輸出優(yōu)化

在Fireworks中往往需要對(duì)圖像在導(dǎo)出前進(jìn)行優(yōu)化設(shè)置，以獲得最佳的圖像品質(zhì)和文件大小。優(yōu)化圖像通常涉及到選擇最佳的文件格式、設(shè)置該格式的特定選項(xiàng)、調(diào)整圖形顏色等操作，這些操作都可以通過Fireworks中的“優(yōu)化”面板來完成。

1.1.7圖像輸出優(yōu)化在Firework1.2矢量圖與位圖計(jì)算機(jī)中的圖形通常分為矢量圖形和位圖圖像兩種類型，保存這兩種類型的圖像文件又會(huì)有多種圖像文件格式，它們還可以分別具有不同的顏色模式。掌握一些必備的圖像知識(shí)，可以幫助用戶更好地使用Fireworks進(jìn)行圖像處理。

1.2矢量圖與位圖計(jì)算機(jī)中的圖形通常分為矢量圖形和1.2.1矢量圖形

矢量圖形在數(shù)學(xué)上定義為一系列由線連接的點(diǎn)。由于圖形的線條都是用PostScript語言描述的，因此也被稱為PostScript圖形。矢量文件中的圖形元素稱為對(duì)象，一般情況下矢量圖形是由多個(gè)對(duì)象堆砌而成的，并且每個(gè)對(duì)象在計(jì)算機(jī)中都是通過數(shù)學(xué)公式進(jìn)行描述的。圖形中的每個(gè)對(duì)象都是單獨(dú)的實(shí)體，具有顏色、形狀、輪廓和大小等屬性。單獨(dú)改變矢量圖形中某一部分的屬性，不會(huì)影響圖形中其他部分的屬性，還可以保持圖形原有的清晰度。因而，矢量圖形適合繪制線條物體，通常用于計(jì)算機(jī)輔助設(shè)計(jì)和工藝美術(shù)設(shè)計(jì)、插圖等。

1.2.1矢量圖形矢量圖形在數(shù)學(xué)上定義為1.2.2位圖圖像

位圖圖像又稱為點(diǎn)陣圖像，它是由許多顏色的小正方形組合而成的，組成圖像的這些小正方形就是像素。由于位圖圖像是以像素集合體形式創(chuàng)建的，因此不能單獨(dú)操作局部的位圖像素。位圖圖像主要通過增加分辨率的方法來表現(xiàn)自然、真實(shí)的效果。不過需要注意的是，增加位圖圖像分辨率時(shí)，其文件的大小也會(huì)隨之增加。

1.2.2位圖圖像位圖圖像又稱為點(diǎn)陣圖像1.3FireworksCS5的工作界面

FireworksCS5的工作界面非常簡潔，主要由以下幾個(gè)部分組成：“開始”界面、菜單欄、工具欄、“工具”面板、繪圖窗口、“屬性”面板和其他一些浮動(dòng)面板組成。1.3FireworksCS5的工作界面Fir1.3.1開始頁

在啟動(dòng)FireworksCS5時(shí)，在沒有打開任何文檔的情況下，F(xiàn)ireworks的“開始頁”就會(huì)出現(xiàn)在工作界面中?！伴_始頁”使用起來非常方便，在“開始頁”中，不僅可以新建Fireworks文檔或通過模板創(chuàng)建Fireworks文檔，還可以快速地打開最近使用的文檔。

1.3.1開始頁在啟動(dòng)Firework1.3.2菜單欄

FireworksCS5的菜單欄包括“文件”、“編輯”、“視圖”、“選擇”、“修改”、“文本”、“命令”、“濾鏡”、“窗口”和“幫助”10個(gè)菜單。

1.3.2菜單欄FireworksC1.3.3工具箱

默認(rèn)情況下，工具箱位于FireworksCS5工作界面的左側(cè)，按不同的功能分為6各類別：選擇、位圖、矢量、Web、顏色和視圖，每一個(gè)功能塊又按不同的用途再分成若干個(gè)工具按鈕。工具箱提供了一套極為專業(yè)的繪圖工具及網(wǎng)頁切片工具，利用這些工具可以繪制出各種圖形并快速生成網(wǎng)頁組件。

1.3.3工具箱默認(rèn)情況下，工具箱位于F1.3.4工具欄

工具欄位于菜單欄的下方，可以通過選擇“窗口”|“工具欄”|“主要”命令，顯示或隱藏工具欄。

1.3.4工具欄工具欄位于菜單欄的下方1.3.5繪圖窗口

繪圖窗口是FireworksCS5工作界面的主要部分，用戶所編輯的對(duì)象都在這里顯示，而且可以通過它方便地進(jìn)行查看比例、動(dòng)畫控制和文件導(dǎo)出等操作。

1.3.5繪圖窗口繪圖窗口是Firew1.3.6屬性面板

屬性面板在Fireworks中是非常重要的面板，它是一個(gè)上下文關(guān)聯(lián)的面板，可以通過屬性面板顯示當(dāng)前選區(qū)、工具以及文檔屬性。屬性面板位于繪圖窗口的底部，其中的參數(shù)隨著繪圖窗口中的對(duì)象不同而變化。

1.3.6屬性面板屬性面板在Firewo1.3.7面板組

面板組的功能十分強(qiáng)大，F(xiàn)ireworksCS5中的許多控制功能都可以在面板組中完成。在默認(rèn)情況下，面板組被分成若干組。單擊“窗口”菜單中的面板名稱就可以在屏幕右側(cè)的面板組區(qū)中打開該面板。通過拖動(dòng)可以把面板拖離面板區(qū)，使之成為獨(dú)立面板，也可以將獨(dú)立的面板拖回面板區(qū)成為組面板。

1.3.7面板組面板組的功能十分強(qiáng)大，1.4創(chuàng)建Fireworks文檔

在FireworksCS5中創(chuàng)作圖片時(shí)，首先要?jiǎng)?chuàng)建一個(gè)新文檔或者打開一個(gè)已經(jīng)存在的文檔。建立文檔時(shí)的一些重要參數(shù)可以在創(chuàng)作過程中隨時(shí)改變。1.4創(chuàng)建Fireworks文檔在Firewo1.4.1新建新文檔

Fireworks所創(chuàng)建的新文檔，為可移植網(wǎng)絡(luò)圖形PNG文檔，是Fireworks固有的文件格式。要在FireworksCS5中創(chuàng)建新文檔，可以選擇“文件”|“新建”命令，或按Ctrl+N鍵，打開“新建文檔”對(duì)話框。還可以單擊工具欄中的“新建”按鈕創(chuàng)建，或在Fireworks的“開始頁”中創(chuàng)建出新的文檔。

1.4.1新建新文檔Fireworks所1.4.2模板

如果要通過應(yīng)用模板創(chuàng)建文件，單擊“文件”|“從模板新建”命令，然后在打開的對(duì)話框中選擇要用于創(chuàng)建文件的模板，最后單擊“打開”按鈕，即可將該模板應(yīng)用于當(dāng)前文件。在Fireworks中，還可以通過“開始頁”的新建文檔部分，從模板創(chuàng)建文檔。在“開始頁”中單擊“基于模板的文檔(PNG)”，然后在打開的對(duì)話框中選擇要應(yīng)用的模板，最后單擊“打開”按鈕。

1.4.2模板如果要通過應(yīng)用模板創(chuàng)建文1.4.3打開文檔

在FireworksCS5中，用戶可以很容易地打開、導(dǎo)入和編輯在其他圖形應(yīng)用程序中創(chuàng)建的矢量和位圖圖像。打開已有的Fireworks文檔時(shí)，可以選擇“文件”|“打開”命令，或按Ctrl+O鍵，然后在“打開”對(duì)話框中瀏覽文件所在的文件夾，選擇需要的文件并單擊“打開”按鈕即可。

1.4.3打開文檔在Fireworks1.4.4保存文檔

在Fireworks中，可以通過選擇“文件”|“保存”命令，或單擊工具欄中的“保存”按鈕，或按Ctrl+S鍵，打開“另存為”對(duì)話框。在對(duì)話框中，選擇文件保存的路徑、文件名以及格式，然后單擊“保存”按鈕即可保存文檔。

1.4.4保存文檔在Fireworks1.5設(shè)置文檔屬性

使用Fireworks進(jìn)行設(shè)計(jì)創(chuàng)作時(shí)，有些文檔的屬性設(shè)置在一開始時(shí)無法確定，這需要隨著制作的進(jìn)行漸漸確定。例如畫布的大小、圖像內(nèi)容在畫面中的位置、圖像的分辨率等。本節(jié)將詳細(xì)講述如何來改變文檔的這些屬性。1.5設(shè)置文檔屬性使用Fireworks進(jìn)行設(shè)計(jì)1.5.1設(shè)置畫布大小

如要更改畫布的大小，選擇“修改”|“畫布”|“畫布大小”命令，或者單擊文檔“屬性”面板上的“畫布大小”按鈕，打開“畫布大小”對(duì)話框。

1.5.1設(shè)置畫布大小如要更改畫布的大1.5.2設(shè)置畫布顏色

在創(chuàng)建文檔之后再改變畫布的顏色，選擇“修改”|“畫布”|“畫布顏色”命令，將打開“畫布顏色”對(duì)話框。在“畫布顏色”對(duì)話框中，可以將畫布顏色調(diào)整為“白色”、“透明”等。

1.5.2設(shè)置畫布顏色在創(chuàng)建文檔之后再改變1.5.3設(shè)置圖像大小

選擇“修改”|“畫布”|“圖像大小”命令，或者單擊文檔屬性面板上的“圖像大小”按鈕，將打開“圖像大小”對(duì)話框。

1.5.3設(shè)置圖像大小選擇“修改”|“畫1.5.4旋轉(zhuǎn)畫布

如果輸入的圖像上下顛倒或者左右傾斜，就需要進(jìn)行旋轉(zhuǎn)畫布的處理。在Fireworks中，可以把畫布旋轉(zhuǎn)180°、順時(shí)針90°或者逆時(shí)針90°。當(dāng)旋轉(zhuǎn)畫布后，文檔中的所有圖像對(duì)象也會(huì)隨之旋轉(zhuǎn)。可以選擇“修改”|“畫布”命令，在彈出的菜單中選擇需要旋轉(zhuǎn)的角度。

1.5.4旋轉(zhuǎn)畫布如果輸入的圖像上下顛倒1.5.5旋轉(zhuǎn)畫布

Fireworks可以根據(jù)文檔內(nèi)的對(duì)象分布情況適當(dāng)?shù)匦拚嫴嫉拇笮?。如果遇到有些圖形對(duì)象超出了畫布的范圍，此時(shí)選擇“修改”|“畫布”|“符合畫布”命令，或者單擊文檔屬性面板上的“符合畫布”按鈕，F(xiàn)ireworks就會(huì)將畫布調(diào)整為正好能容納所有對(duì)象的大小。

1.5.5旋轉(zhuǎn)畫布Fireworks可以1.6使用輔助工具

在使用Fireworks進(jìn)行圖像制作時(shí)，通常需要使用一些輔助工具，如網(wǎng)格、標(biāo)尺和輔助線等。通過這些工具可以更加準(zhǔn)確、方便地繪制圖形。1.6使用輔助工具在使用Fireworks進(jìn)行1.6.1使用標(biāo)尺

要顯示和隱藏標(biāo)尺，可以選擇“視圖”|“標(biāo)尺”命令，重復(fù)選擇此命令，可以在顯示和隱藏標(biāo)尺之間進(jìn)行切換。在Fireworks中，標(biāo)尺刻度沿著繪圖窗口的邊緣顯示，并有垂直和水平兩種方向。

1.6.1