fireworks4網(wǎng)頁制作培訓課件(共33張)(PPT 33頁)

1、Fireworks 4.0第一期網(wǎng)頁制作班第1頁，共33頁。簡介 是一種優(yōu)秀網(wǎng)頁圖形圖像設計工具。特色：1、位圖處理和矢量圖處理合二為一2、文本處理3、導出預覽（不需切換到瀏覽器）4、圖像優(yōu)化5、精美動畫6、JavaScript自動化7、設置圖像映射8、查找替換和批處理環(huán)境第2頁，共33頁。主要內(nèi)容一、基本使用操作二、基本繪圖操作三、顏色操作處理四、文字使用操作五、編輯矢量對象六、編輯位圖對象七、使用特效和樣式八、動畫設計制作九、動態(tài)按鈕制作十、圖像格式輸出十一、圖像變換設計十二、鏈接設置使用十三、使用大圖切割十四、自動化的應用第3頁，共33頁。一、基本使用操作1、熟悉工作區(qū)域2、對象的導入（

2、兩種方法）3、畫布尺寸與顏色的調(diào)整4、畫布的裁剪與旋轉(zhuǎn)5、改變影像尺寸6、裁剪位圖對象7、文件基本操作8、文件的打開、導入、保存（.PNG）第4頁，共33頁。二、基本繪圖操作1、使用直線工具繪圖2、使用形狀工具繪圖（矩形、圓形、多邊形）3、使用路徑繪制工具（鋼筆、鉛筆、筆刷）4、改變路徑操作方法（細部工具、重繪畫筆工具、任意形狀工具）5、路徑的修改與切割（區(qū)域變形工具、切割工具）6、簡化、擴張及附加路徑修改改變路徑（簡化路徑、擴張路徑、插入路徑）第5頁，共33頁。三、顏色操作處理1、網(wǎng)頁可靠色2、混色器3、調(diào)色板（樣本）的使用4、滴管（探色棒）工具的使用5、筆觸面板6、填充面板1、主要填充參數(shù)

3、的作用2、修改漸變色3、調(diào)整漸變色與圖案填充4、使用外部圖像文件作為填充圖案或紋理5、使用WEB抖動色7、顏色在路徑上的使用（補充）路徑涂飾工具（+）和（-）第6頁，共33頁。四、文字使用操作1、文字的編輯器(1)輸入(2)編輯：修改文字：法一：輸入文本后，如要編輯文本，只需雙擊文本塊。 法二：選擇后用“文本” “編輯器” 法三：直接通過菜單實現(xiàn)(3)對文本設置描邊、填充(4)文字的變形處理（縮放、扭曲、頃斜）2、文字與路徑默認情況下，文本都是以矩形文本塊形式顯示，但是，用戶可繪制一條路徑，然后將文本附加到該路徑上，使文本按路徑形狀進行排列。不過，此是路徑將失去了它的所有屬性，變成一條不可編輯

4、的路徑，在預覽時也不顯示。(1)文本附加到路徑：首先創(chuàng)建一個文本對象和一個路徑對象，然后都選中，用“文本附加到路徑”命令.第7頁，共33頁。四、文字使用操作(2)分離文本與路徑：用“文本從路徑脫離”命令(3)編輯文本與路徑編輯文本：雙擊編輯路徑：將文本與路徑分離編輯路徑再將選擇文本與路徑附加到路徑。注：添加筆觸和填充后，文本對象可作相應變化。(4)按路徑排列文本（5）導入文本：用于文本內(nèi)容很多或已有了現(xiàn)成文檔。4、把文字轉(zhuǎn)為路徑當要用矢量處理工具編輯文本時，需轉(zhuǎn)化為路徑。方法：文本轉(zhuǎn)化為路徑（可用次選工具編輯任意節(jié)點，但內(nèi)容再不能用文本編輯器修改）注：文本對象轉(zhuǎn)化成位圖對象的方法和矢量圖轉(zhuǎn)化為

5、位圖的方法一樣，可用“修改轉(zhuǎn)換為位圖”命令。以后可用位圖編輯工具進行編輯。第8頁，共33頁。五、編輯矢量對象1、對象操作使用選擇工具、后方選擇工具選擇了填充有漸變色的圖形后，出現(xiàn)兩個控制點（圓形、方形）排列對象（修改對齊）2、對象變形處理修改變形3、對象相互結(jié)合（1）群組工具與取消群組（2）路徑的合并與拆分（3）對象的接合（聯(lián)合、相交、打孔、修剪）4、調(diào)整對象順序修改排列第9頁，共33頁。六、編輯位圖對象1、切換編輯模式與創(chuàng)建位圖對象在Fireworks中同時擁有兩種編輯模式，即對象編輯模式與位圖編輯模式。(1)切換編輯模式的方法A、切換到位圖編輯模式法一：選擇位圖對象，然后選擇修改編輯位圖法

6、二：利用蒙版、套索、魔術棒或橡皮圖章工具單擊位圖對象法三：雙擊位圖B、從位圖編輯模式返回對象模式法一：用指針工具或子選擇工具在圖像外任意區(qū)域單擊法二：用修改退出位圖模式法三：單擊文檔窗口下方的圖標法四：按ESC鍵(2)創(chuàng)建位圖對象的方法法一：文件導入或打開法二：修改轉(zhuǎn)換為位圖第10頁，共33頁。六、編輯位圖對象2、選區(qū)制作與調(diào)整(1)制作選區(qū)矩形選區(qū)工具、橢圓形選區(qū)工具、套索工具、多邊形套索工具、魔術棒工具(2)調(diào)整選區(qū)增加或減小選區(qū)按下Shift鍵并使用位圖選擇工具選擇圖像，可增加選區(qū)按下Alt鍵并選擇圖像，可增加選區(qū)按下Alt+Shift鍵，可制作新的選區(qū)。釋放鼠標后，選區(qū)結(jié)果將是已有選區(qū)

7、和新選區(qū)的交集。選區(qū)的擴展與收縮：用修改選取框擴大或收縮平滑選區(qū)：用修改選取框平滑制作邊界選區(qū)：用修改選取框邊框反選選區(qū)：用修改選取框反選選擇與已有選區(qū)顏色相近的顏色：用修改選取框選擇相似顏色取消選擇：Ctrl+D第11頁，共33頁。六、編輯位圖對象3、在位圖模式下編輯（剪切、復制、粘貼、吸管工具、油漆桶工具、橡皮工具、印章工具）(1)在位圖編輯模式下繪圖(2)圖像的擦除、填充與復制應選制作選區(qū)，再進行下列操作，否則操作范圍為整個位圖編輯區(qū)。使用擦除工具擦除像素利用油漆桶工具填充像素將當前設置的填充圖案填充位圖或選擇的區(qū)域（未選為整個文檔）利用橡皮圖章工具復制像素單擊橡皮工具鼠標移到希望復制的

8、區(qū)域單擊鼠標移到新的區(qū)域拖動復制注：復制方式為“固定”時目標可變；為“對齊”時，復制點與定義點始終對齊選擇“對齊”時，在復制過程中可多次松開鼠標，且復制的圖像是連續(xù)的；而選擇“固定”時，只要松開一下鼠標，再復制等于重新復制。注：滴管工具用來在圖像上選擇一種顏色作為填充色。第12頁，共33頁。六、編輯位圖對象(3)裁剪位圖：編輯修剪位圖(4)選區(qū)的變形除了使用筆觸、填色美化對象外，還可使用特效，為你的按鈕、文字、圖形創(chuàng)建特效。第13頁，共33頁。七、使用特效和樣式1、使用特效處理選擇要使用特效的對象后，打開效果面板，單擊增加特效下拉列表，選擇一種特效。常用的是默認效果。2、特效面板使用單擊特效行

9、上的特效按鈕，打開特效參數(shù)面板，這個內(nèi)部頃斜特效的面板上包括了一個”斜角邊緣形狀“下拉列表，可選擇“平面、平滑、頃斜、架子、圓環(huán)、鄒邊”等形狀，其它的參數(shù)用來指定導角的寬度和高度，可做一個令人滿意的按鈕。在內(nèi)部頃斜特效的面板的最下方下拉列表中列出了按鈕的4種狀態(tài)，分別是凸起、高亮度、凹進、反轉(zhuǎn)。注：取消選中的特效行前面的復選框，可關閉特效。第14頁，共33頁。七、使用特效和樣式3、編輯特效面板同一個對象可同時使用多個特效，對于不使用的特效，選中后可以刪除，也可根據(jù)需要保存以后用在其它的對象上。 4、特效類型頃斜和浮雕：內(nèi)部頃斜特效、外部頃斜特效（作用于對象的外邊框）、凸起浮雕（產(chǎn)生凸起的浮雕效

10、果）、凹進浮雕（產(chǎn)生凹進浮雕效果） 。陰影和光暈：陰影（距離參數(shù)控制著陰影和對象的距離）、光暈（用來產(chǎn)生光暈效果，可設置輝光的顏色、偏移參數(shù)，還可控制輝光和對象的距離）模糊：設置對象的模糊程序。調(diào)節(jié)顏色（是附加功能），設置后可保存。4、使用特效插件（相當于Photoshop中的濾鏡）特效菜單下的Eye Candy 4000 LE5、加入外部濾鏡第15頁，共33頁。七、使用特效和樣式下面介紹一個更奇妙的工具，它不但可以保存特效，而且可以保存筆觸、填色，甚至字體、字號，并且重復使用時更簡單-樣式。6、樣式建立應用(1)使用：選擇對象單擊一種樣式(2)保存：選擇對象應用各種筆觸、填充和特效新建樣式選

11、擇需要保存的內(nèi)容輸入樣式名OK(3)編輯：雙擊注：A、在應用樣式時不想改變對象原來的填充類型，可將顏色從樣式保存中去除（編輯），再進行應用樣式。B、若將一個文本對象的樣式保存，在保存樣式對話框中就可保存字體、字號和文字風格等屬性，這樣給文字對象應用樣式時，文字對象的字體、字號和風格都可以改變。(4)導入樣式 (5)導出樣式7、使用遮罩效果創(chuàng)建：修改蒙板組成蒙板第16頁，共33頁。七、動畫設計制作1、制作GIF動畫(1)創(chuàng)建基本的幀幀動畫法一：選增加幀，再在每幀上畫對象法二：在第一幀上加多個對象全選分配到幀命令(2)創(chuàng)建過渡動畫法一：利用“修改動畫就所選創(chuàng)建動畫”命令可生成一個帶有起始、中間和結(jié)

12、束點的動畫線，其每一點代表動畫中的一幀，移動動畫線的長度與方向可改變動畫的軌跡。法二：利用Tween功能創(chuàng)建過渡動畫制作好Tween動畫后，用戶可單獨調(diào)整任何一幀符號的位置、不透明度，或?qū)ζ溥M行縮放、傾斜，以及為其增加效果等。靈活性更大。操作：創(chuàng)建一個對象為其增加樣式選擇“插入轉(zhuǎn)換為組件” 輸入組件名稱（選擇圖形）打開庫面板拖入文檔放在另一位置選中兩個符號選擇“修改符號內(nèi)插動畫” 設置動畫幀數(shù)并選中分配到各幀復選框OK第17頁，共33頁。七、動畫設計制作2、Frame面板的使用重命名、增加、復制或刪除幀將所選對象放置在不同幀中將對象從當前幀移到其他幀設置功能設置幀延遲（100=1S）設置動畫播

13、放次數(shù)復制到幀（將一幀上的對象復制到其它幀），與復制幀不同。也可用共享圖層實現(xiàn)。3、使用描圖紙功能（洋蔥皮）4、建立圖層的操作（層面板）注：A、幀是以時間先后為序，不同的幀處在不同的時間段上。B、不同層是指不同通道或空間同一時間的上、下的位置關系。C、一個層上可包含多個對象，一個幀上可有多個層。第18頁，共33頁。七、動畫設計制作5、圖層的操作應用同一層上可有多個對象層，圖層上新增對象后，會自動在該圖層下增加對應的對象層。(1)創(chuàng)建新圖層插入法：插入層圖層面板法1：新建/復制層按鈕圖層面板法2：新建層選項(2)選中圖層法一：在文檔窗口中，選中屬于該圖層的任意對象法二：在圖層面板中，單擊要選中的

14、圖層名稱(3)復制圖層法一：選中要復制的圖層拖到“復制/刪除層”按鈕上法二：選中要復制的圖層在選項中選擇“復制圖層”項選擇OK兩者區(qū)別：法一只能生成一個副本圖層，且副本圖層位于被復制圖層的下方。法二的復制功能更全面，他不但可以調(diào)節(jié)復制圖層的數(shù)量，還可以設置復制圖層的位置。第19頁，共33頁。七、動畫設計制作(4)刪除圖層法一：選中要刪除的圖層單擊刪除圖層按鈕法二：選中要刪除的圖層拖到“刪除圖層”按鈕上法三：選中要刪除的圖層在選項菜單中選擇“刪除圖層”注：A、在Fireworks中，網(wǎng)頁層是不能被刪除的B、畫布不是圖層，他位于文檔的最底層(5)重命名圖層雙擊要命名的圖層在名稱區(qū)輸入新的名稱(6)

15、 圖層中對象的編輯（兩種編輯模式）多層編輯模式（默認狀態(tài)）所有圖層中的對象都處于可編輯狀態(tài)單層編輯模式：選擇選項菜單中的“編輯單一圖層”只能對單個層的對象進行編輯第20頁，共33頁。七、動畫設計制作(7)圖層屬性的設置(顯示和隱藏、鎖定和解鎖）(8)為圖層建立位圖對象(9)設置共享層與合并圖層設置共享層：在選項菜單中選擇或雙擊該層合并圖層：修改平面化層注：A、將某層設置為共享層時，當前幀以外其他所有幀中的同名層均被刪除。B、合并圖層時，被隱藏的圖層或?qū)ο笞訉訉⒈粊G棄，而共離層將被自動復制到各幀。(10)調(diào)整對象的不透明度與混合模式(11)改變圖層重疊次序選擇后用鼠標直接拖動第21頁，共33頁。

16、七、動畫設計制作6、使用遮罩效果(蒙版）法一：創(chuàng)建蒙版組法二：通過粘貼方法創(chuàng)建蒙版導入一幅圖復制到剪貼板新建文件繪制作一橢圓并選中若將剪貼板中的內(nèi)容作為蒙版，則用“編輯粘貼為蒙版”命令；若將剪貼板中的內(nèi)容作為對象，當前對象伙蒙版，則用“編輯粘貼到內(nèi)部”命令；法三：根據(jù)選區(qū)制作蒙版（位圖遮罩）導入一幅圖制作選區(qū)選擇“修改蒙版顯示所選”命令導入一幅圖制作選區(qū)單擊“添加蒙版”按鈕第22頁，共33頁。七、動畫設計制作7、使用SymbolFireworks具有庫面板，放在庫中的對象稱為符號，在庫面板中，將該符號拖到文檔中，就創(chuàng)建了實體，實體就是原始對象的副本，當符號對象進行修改時，實體自動變化以反映符號

17、的修改。創(chuàng)建：法一：插入新建符號 法二：制作一個對象使用轉(zhuǎn)換命令（F8）注：不能為實體指定筆觸和填色，但可以對實體變形和添加特效。還可以在層面板上修改實體的透明度和混合模式。修改符號：雙擊任何一個實體斷開鏈接后的實體可修改任何屬性。8、 Symbol動畫應用制作或引入一個對象轉(zhuǎn)換為動畫類型選擇參數(shù)OK9、分身動畫的制作制作或引入一個對象（動畫類型）內(nèi)插動畫10、輸出GIF動畫文件導出第23頁，共33頁。八、動態(tài)按鈕制作1、設置按鈕對象(兩種方法）2、鼠標事件設置（四種狀態(tài)）3、設置鏈接區(qū)域（切割工具、多邊形切割工具）4、設置按鈕鏈接（兩種方法）第24頁，共33頁。九、圖像格式輸出1、圖像輸出設

18、置2、輸出JPG文件第25頁，共33頁。十、圖像變換設計1、簡單的圖像變換2、復雜的圖像變換第26頁，共33頁。十一、鏈接設置使用1、使用鏈接工具2、直接設置鏈接3、WEB層的管理4、設置鏈接對象5、使用鏈接設置項6、鏈接的彈出菜單7、使用鏈接面板第27頁，共33頁。十二、使用大圖切割1、什么是大圖切割2、切割大尺寸圖像3、切割對象與圖層4、輸出HTML文件5、鏈接區(qū)文字置換第28頁，共33頁。十三、自動化的應用1、使用查找和替換2、使用項目清單3、批處理的使用4、腳本儲存使用第29頁，共33頁。創(chuàng)建按鈕（Buttons）和導航條 按鈕是網(wǎng)頁中應用極多的元素，眾多的按鈕就形成了導航條，導航條的作用就是要讓瀏覽者清楚知道當前所處的位置，并且通過導航條可以方便的將瀏覽者帶到其他的地方而不會迷失。因此按鈕表現(xiàn)有以下幾種狀態(tài)： Up：默認狀態(tài)，即通常的狀態(tài)，這時的鼠標是不在按鈕范圍之內(nèi)的。 Over：鼠標滑過按鈕時的狀態(tài)。 Down：按鈕被點擊后的狀態(tài)，通常它是出現(xiàn)在目標網(wǎng)頁中的。 Over While Down：鼠標滑過處于Down狀態(tài)下按鈕的時候按鈕的狀態(tài)，通常極少應用。創(chuàng)建按鈕：Insert-New Button 這樣就會出現(xiàn)按鈕編輯器，第30頁，共33頁。創(chuàng)建導航條 打開Library面版，將按鈕重復拖到畫板中，使其有多個按鈕 。將這些按鈕擺