中等職業(yè)學(xué)校教學(xué)用書（計算機技術(shù)專業(yè)）網(wǎng)頁制作技能教程第十二章主編張閣林幻燈制作張閣林第12章網(wǎng)頁圖形工具的使用

網(wǎng)頁圖形制作的軟件有很多，在實際應(yīng)用中，我們可以根據(jù)實際的情況選擇自己擅長、熟悉的軟件來使用。網(wǎng)頁三劍客之一的Fireworks是網(wǎng)頁圖形制作和處理的最佳選擇，它可以方便地制作網(wǎng)站的Logo、Banner、各式各樣的按鈕以及動態(tài)菜單導(dǎo)航欄，并且可以方便、快捷地裁剪網(wǎng)頁設(shè)計效果圖，并且可以對網(wǎng)頁圖形進行優(yōu)化處理。另外，在對位圖進行圖像處理時，我們最好的選擇是Adobe公司的Photoshop。第4章網(wǎng)頁圖形工具的使用12.1技能1網(wǎng)站Logo設(shè)計

12.2技能2Banner廣告條設(shè)計

12.3技能3網(wǎng)頁導(dǎo)航欄的制作

12.4技能4圖片的裁切及圖片的優(yōu)化12.1技能1網(wǎng)站Logo設(shè)計12.1.1任務(wù)1Logo概述12.1.2任務(wù)2站點Logo標(biāo)志的制作12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作12.1.1任務(wù)1Logo概述在網(wǎng)站設(shè)計中，Logo是CIS導(dǎo)入網(wǎng)站的基礎(chǔ)和最直接的表現(xiàn)形式，傳遞著網(wǎng)站的定位和經(jīng)營理念，是網(wǎng)站形象的重要體現(xiàn)，同時也是網(wǎng)站和網(wǎng)站之間進行友情鏈接的標(biāo)志和門戶，其重要性是不言而喻的。Logo作為站點的標(biāo)志圖案，一般會出現(xiàn)在站點的每一個頁面上，是網(wǎng)站給瀏覽者的第一印象，有些類似企業(yè)的商標(biāo)。因而，Logo設(shè)計追求的是：以簡潔的、符號化的視覺藝術(shù)形象將網(wǎng)站的形象和理念駐留在人們心中。12.1.1任務(wù)1Logo概述1.設(shè)計規(guī)范Logo的國際標(biāo)準(zhǔn)規(guī)范目前有三種規(guī)格：88×31這是互聯(lián)網(wǎng)上最普遍的Logo規(guī)格。120×60這種規(guī)格用于一般大小的Logo。120×90這種規(guī)格用于大型Logo。Logo的外觀尺寸并不一定嚴(yán)格按這三種規(guī)格制作，也可以根據(jù)站點頁面的整體版面設(shè)計來確定。但最好提供一個標(biāo)準(zhǔn)規(guī)格的網(wǎng)站鏈接Logo。以便于其它網(wǎng)站作鏈接使用。12.1.1任務(wù)1Logo概述2.制作工具我們平時所使用的圖像處理軟件或動畫制作軟件（如果你要做一個動畫的Logo的話）都可以很好地勝任這份工作，如：PhotoShop、Fireworks、CorelDraw、Flash等。Logo的制作并不局限于哪個軟件，而是我們最終能夠達到制作的目的即可。至于選擇哪些軟件來制作，可以采用制作者本人熟悉、精通、容易駕馭的軟件來制作。平面靜態(tài)圖：PhotoShop、CorelDraw、Fireworks、PaintShop、AAALogo等；Gif動畫圖：Flash、Fireworks、UleadGIFAnimator、PhotoAnimator等；Flash動畫：Flash。12.1.1任務(wù)1Logo概述3.例證分析新浪的Logo見圖所示，底色是白色，文字和新浪網(wǎng)是黑色，其中i字母上的點用了表象性的手法處理成一只眼睛，而這又使整個字母i象一個小火炬，向人們傳達了“世界在你眼中”的理念，激發(fā)了人們對網(wǎng)絡(luò)世界的好奇心，又很容易使人們記住新浪網(wǎng)的域名。

12.1.1任務(wù)1Logo概述搜狐的Logo比較特別，見圖所示，中英文名稱，字體選擇較古典；搜狐網(wǎng)站隨各個頁面的色調(diào)不同而放置不同色彩的Logo，但Logo的基本內(nèi)容不變。當(dāng)然，你不會不知道搜狐的理念：“出門找地圖，上網(wǎng)找搜狐”。

12.1.1任務(wù)1Logo概述Yahoo的Logo（中文站）很簡單，如圖，中英文站名，紅字白底。英文Yahoo字母間的排列和組合很講究動態(tài)效果。12.1.1任務(wù)1Logo概述網(wǎng)易的Logo使用了三色，如圖所示，紅（網(wǎng)易）、黑（NETEASE）、白（底色）。網(wǎng)易兩字用了篆書，體現(xiàn)了古典、悠久的意味，暗示著網(wǎng)易在中文網(wǎng)絡(luò)的元老地位。從個人主頁到虛擬社區(qū)，你始終會相信：“輕松上網(wǎng)，易如反掌”。

12.1.1任務(wù)1Logo概述太維互聯(lián)網(wǎng)應(yīng)用顧問（），如圖12.5所示，在顏色方面采用了深紅色和黑色兩種顏色結(jié)合而成，中文字體采用厚重的“方正黑簡體、方正綜藝簡體”，給人一種專業(yè)、嚴(yán)肅、穩(wěn)重的感覺，太（多）維（維度）顧名思義就是以多種角度去觀察、分析、思考，挖掘出客戶最核心的需求，從而提出和實現(xiàn)真正適合客戶的解決方案；在詮釋“觀察、思考、分析”方面采用的是寓意手法，通過“眼睛”突顯寓意；另外英文網(wǎng)址eye(眼睛)，fit(適合)和太維中文字并行排列,也同樣突出顯示了太維專業(yè)顧問的定位。

12.1.1任務(wù)1Logo概述歐華商貿(mào)網(wǎng)（），如圖所示，其特點是通過鮮明的顏色和橋梁式的線條傳遞，把"E-歐洲"和"C-中國"有機（通過線條和網(wǎng)絡(luò)）聯(lián)接在一起，顯示出網(wǎng)站的核心定位。在用色方面簡潔、利落，寓意明確。藍色（又稱:商業(yè)色）代表歐洲，而“cn”則用了中國最具有代表性的紅色?；【€從“e”橫跨到“c”代表著中歐之間的橋梁，促進歐洲與中國之間的商務(wù)貿(mào)易。不足之處是左邊圖形較煩瑣，不易記憶和識別，另外，色彩數(shù)目過多，同色系顏色應(yīng)一致為佳。

12.1.1任務(wù)1Logo概述動感一百手機網(wǎng)（）是華南區(qū)人氣熱旺的B2C手機網(wǎng)站，所以在設(shè)計上需要營造出活潑的氣氛，具有人性化風(fēng)格。在設(shè)計手法上是直接運用了網(wǎng)站的產(chǎn)品卡通化來表現(xiàn)的，烘托出了網(wǎng)站的靈氣而又直觀的體現(xiàn)了網(wǎng)站的類型。有待改善的是沒有與網(wǎng)站名稱相融合、未能體現(xiàn)出網(wǎng)站的動感炫酷。

12.1.1任務(wù)1Logo概述全球五金網(wǎng)（）的Logo在設(shè)計上主要通過形體化的語言,表達深層的期望與意境，在顏色方面采用的是以桔黃色為主色調(diào),突出五金金屬特有的光質(zhì)；金球象征公司或網(wǎng)站提供全球五金商貿(mào)交流服務(wù)，三條線條環(huán)繞金球動態(tài)運行,象征不停運轉(zhuǎn)的五金商貿(mào)信息交流，更加符合全球五金網(wǎng)的定位。不足之處是字樣略顯呆板，不鮮活，缺乏動感和新意。

12.1.2任務(wù)2站點Logo標(biāo)志的制作Logo由標(biāo)準(zhǔn)名稱、標(biāo)準(zhǔn)圖形、標(biāo)準(zhǔn)色彩，按照標(biāo)準(zhǔn)規(guī)范組合而成，從語義指稱、印象感染、色彩沖擊及其組合協(xié)同方式四個方面表現(xiàn)和展示企業(yè)、組織或個人的發(fā)展戰(zhàn)略、行為方式或是個性特質(zhì)，開發(fā)、創(chuàng)造和傳播企業(yè)或個性形象。所以Logo是特色和內(nèi)涵的集中體現(xiàn)。Logo特示圖案屬于表象符號，獨特、醒目，圖案本身易被區(qū)分、記憶，通過隱寓、聯(lián)想、概括、抽象等繪畫表現(xiàn)方法表現(xiàn)被標(biāo)識體，對其理念的表達概括而形象。對持久記憶要求較高時應(yīng)設(shè)計良好的特示圖案形象，優(yōu)秀的設(shè)計如蘋果公司的牙印蘋果。12.1.2任務(wù)2站點Logo標(biāo)志的制作步驟1：在PhotoshopCS中，按下Ctrl+N組合鍵新建一個寬度為100像素，高度為100像素，分辨率為72，色彩模式選擇RGB的文檔，單擊【OK】按鈕，如圖所示。

12.1.2任務(wù)2站點Logo標(biāo)志的制作步驟2：將文檔前景色設(shè)置為“#ADC605”，背景色設(shè)置為白色，在圖層面板中單擊新建圖層按鈕，建一新層，圖層1，單擊矩形選區(qū)工具，在文檔中繪制一個60×55像素的矩形，按下Alt+Del組合鍵，填充前景色，如圖所示。12.1.2任務(wù)2站點Logo標(biāo)志的制作步驟3：保留圖層1的選區(qū)，拖動該層至圖層面板的新建圖層按鈕上，復(fù)制出一個新圖層，按下Ctrl+T組合鍵，調(diào)出調(diào)整區(qū)域，同時按下Shift+Alt鍵并拖動右上角的調(diào)整句柄，將復(fù)制層的圖形縮小后，按Enter鍵確認(rèn)，然后按下Ctrl+Del組合鍵，填充選區(qū)區(qū)域為白色，如圖所示。12.1.2任務(wù)2站點Logo標(biāo)志的制作步驟4：按Ctrl+E組合鍵將復(fù)制層和圖層1合并。然后新建一層，用路徑工具繪制Dreamweaver軟件圖標(biāo)的“d”形路徑，如圖所示。

12.1.2任務(wù)2站點Logo標(biāo)志的制作步驟5：按Ctrl+Enter鍵將路徑轉(zhuǎn)換為選區(qū)，按下Alt+Del組合鍵，填充選區(qū)區(qū)域為前景色，如圖所示。

12.1.2任務(wù)2站點Logo標(biāo)志的制作步驟6：選擇第一層，然后用矩形選區(qū)工具框選“回”字圖形的右上角，按DEL鍵刪除“d”字圖形伸出的部分，并在下面用文本工具，輸入“網(wǎng)頁制作技能教程”的文字,字體選擇細黑，文字大小為12像素，如圖所示。

步驟7：按Shift+Ctrl+S組合鍵將文檔另存為GIF格式的文件，完成制作。

12.1.2任務(wù)2站點Logo標(biāo)志的制作拓展本例以Dreamweaver軟件圖標(biāo)的“d”形為主要設(shè)計元素?！盎亍毙伪硎局谱骶W(wǎng)頁應(yīng)該掌握的基礎(chǔ)理論、基本知識、設(shè)計和制作的基本原則、基本技能等，“d”形突破了“回”形，表示實踐操作中應(yīng)該理論聯(lián)系實際，能夠靈活應(yīng)用，巧妙設(shè)計，制作中應(yīng)有創(chuàng)意、有拓新。Logo的制作方法不一，只要我們能夠達到最終的目的和效果就可以了。標(biāo)準(zhǔn)圖形與標(biāo)準(zhǔn)文字及組合為統(tǒng)一企業(yè)形象對外傳達了一致性。標(biāo)志與標(biāo)準(zhǔn)文字的組合方式，包括位置、距離、大小等均應(yīng)加以詳細規(guī)定，以建立各基本設(shè)計要素組合形式的統(tǒng)一性及標(biāo)準(zhǔn)化。在不斷的改進和完善過程中，簡潔、高效、快節(jié)奏成為標(biāo)志設(shè)計的潮流。

12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

Fireworks應(yīng)用的一大靚點就是輕松制作紛繁的動畫效果，而且88×31尺寸的鏈接Logo也是目前各網(wǎng)站友情鏈接的最常用尺寸，在Internet中，動態(tài)的Logo占有相當(dāng)大的比例。12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

步驟1：在Fireworks主窗口中新建一個88×31像素的空白文檔，分辨率為72像素/英寸，畫布顏色任意。步驟2：選擇主菜單中的【文件】→【導(dǎo)入】命令，或按組合鍵Ctrl+R，將制作好的背景圖片導(dǎo)入到畫布中，如圖（背景圖片可以在其它軟件中制作導(dǎo)入，也可以用Fireworks自己繪制）。

12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

步驟3：選擇主菜單中的【窗口】→【層】命令（快捷鍵F2），彈出層面板，然后單擊“層”面板右上角的“選項”在彈出菜單中選擇【共享此層】命令，把層1設(shè)置為共享層如圖所示。12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

步驟4：選擇主菜單當(dāng)中的【窗口】→【幀】命令（快捷鍵Shift+F2），彈出幀面板，并新建一個幀。步驟5：在“層”面板中，單擊新建層按鈕，新建一個層，并選擇層2。步驟6：使用工具欄中的矩形工具，填充顏色選擇白色，畫出一個矩形。步驟7：選擇主菜單中的【修改】→【元件】→【轉(zhuǎn)換為元件】命令（快捷鍵F8），在彈出的元件屬性面板中將對象轉(zhuǎn)換成圖形，名稱為“元件”。

12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

步驟8：選擇主菜單中的【編輯】→【克隆】命令（快捷鍵Ctrl+Shift+D），復(fù)制出另一矩形元件。步驟9：選擇層面板中圖層2中的最下面圖形元件對象，將上面的元件屏蔽掉（單擊眼睛圖標(biāo)）。并使用工具欄中的“縮放”工具（Ｑ）將畫布中的矩形變形縮小，如圖所示。

12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

步驟10：在屬性面板中，調(diào)整該矩形的透明值為30

。步驟11：同時選擇層面板中的兩個圖形元件，選擇主菜單中的【修改】→【元件】→【補間實例】命令（快捷鍵Ctrl+Alt+Shift+T），彈出“補間實例”對話框，參數(shù)調(diào)整如圖，觀察幀面板，已有五幀，我們繼續(xù)制作效果。

12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

步驟12：在第5幀處，拷貝矩形元件，并新建一幀，粘貼元件至新建幀，在屬性面板中調(diào)整透明值40；再新建一幀，粘貼元件至新建幀。步驟13：新建幀，鍵入文字，宋體、12PX、不消除鋸齒、字體顏色“#CC3333”；選擇【屬性面板】→【效果】→【陰影和光暈】→【發(fā)光】命令，參數(shù)調(diào)整如圖所示。12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

步驟14：新建一個空白幀，將文字與庫面板中的矩形元件粘貼至這個新建幀上，矩形用指針工具做下移、調(diào)整,并復(fù)制二幀。步驟15：第10幀中，將矩形元件透明值設(shè)為40；使下面的矩形條產(chǎn)生閃動效果。步驟16：新建幀（第12幀），粘貼矩形元件，設(shè)置透明度值為60，鍵入網(wǎng)址，04b-8字體、6PX、不消除鋸齒、字體顏色“#cc3333”；選擇【屬性面板】→【效果】→【陰影和光暈】→【發(fā)光】命令，參數(shù)調(diào)整如圖12.24，將第12幀的幀延時改為100/100秒。最后生成GIF動畫文件存儲即可，如圖所示。

12.1.3任務(wù)3動態(tài)效果鏈接Logo的制作

拓展這個案例只是一個非常簡單的動態(tài)Logo的制作，F(xiàn)ireworks動態(tài)效果都是通過幀面板實現(xiàn)的，而且我們可以通過針對元件做補間實例來生成動畫效果。在實際制作的過程中，我們可以靈活引用，用多種方法操作，以實現(xiàn)不同的動態(tài)效果。

12.2技能2Banner廣告條設(shè)計

12.2.1任務(wù)1Banner概述12.2.2任務(wù)2動畫Banner廣告的制作12.2.1任務(wù)1Banner概述

Banner廣告也稱為廣告條幅，是通過網(wǎng)絡(luò)媒體發(fā)布廣告信息的一種重要的廣告形式，通過在網(wǎng)上放置一定尺寸的矩形廣告條來告訴瀏覽者相關(guān)的信息，吸引瀏覽者點擊廣告進入指定的網(wǎng)頁，從而達到介紹信息、展示產(chǎn)品和及時獲得反饋的目的。12.2.1任務(wù)1Banner概述2．Banner(廣告條)設(shè)計標(biāo)準(zhǔn)全尺寸Banner：468×60（pixels）全尺寸帶導(dǎo)航條Banner：392×72（pixels）半尺寸網(wǎng)幅Banner：234×60（pixels）方形按鈕：125×125（pixels）按鈕：120×90或120×60（pixels）微型按鈕：88×31（pixels）多用于個人站點的鏈接，也就是通常所說的鏈接Logo。垂直矩形Banner：120×240（pixels）12.2.1任務(wù)1Banner概述3．Banner設(shè)計要點(1)Banner有動態(tài)和靜態(tài)兩種。在Banner的設(shè)計過程中，動態(tài)的捕捉應(yīng)適宜，重復(fù)過多的動作會造成文件的尺寸增大，而合理的動作布局、時間調(diào)整，對廣告的效果有著重要的意義。(2)Banner的“重量”要輕(3)Banner的廣告文字不能太多(4)圖形設(shè)計不要太繁雜(5)盡量不要使用彩虹色、暈邊等復(fù)雜的特技圖形效果(6)如果Banner本身的背景色不是深色或彩色的，最好在外圍加深色或彩色邊框12.2.2任務(wù)2動畫Banner廣告的制作使用Fireworks軟件制作GIF動畫Banner廣告非常容易，我們這里以網(wǎng)頁制作技能網(wǎng)站的Banner和一個宣傳鏡泊湖的Banner為例來講述Banner的制作方法，主要熟悉Fireworks中幀面板、動畫、元件等工具的使用方法。12.2.2實例一：鏡泊湖的動態(tài)Banner廣告的制作步驟1：在Fireworks主窗口中新建一個大小為468×60像素的文檔，設(shè)置其畫布顏色為透明，選擇主菜單中的【文件】→【導(dǎo)入】命令，或按快捷鍵Ctrl+R，導(dǎo)入一幅汽車的位圖圖像，如圖所示。步驟2：選中這幅汽車圖像，選擇菜單【修改】→【元件】→【轉(zhuǎn)換為元件】命令，將這個圖形文件轉(zhuǎn)換為“圖形”元件并命名為“汽車1”，如圖所示。

12.2.2實例一：鏡泊湖的動態(tài)Banner廣告的制作步驟3：選中這個圖形元件，選擇主菜單中的【修改】→【動畫】→【選擇動畫】命令，彈出“動畫”對話框，在其中設(shè)置“幀”數(shù)為10，“移動”到380，如圖所示。單擊【確定】按鈕，這時候在幀面板中就已經(jīng)添加了新幀，得到如圖所示的動畫元件圖像。

12.2.2實例一：鏡泊湖的動態(tài)Banner廣告的制作步驟4：默認(rèn)的幀延時的時間太短，分別雙擊“幀”面板右側(cè)的“幀延時”，在“幀延時”對話框中將前面9幀的幀延時設(shè)為10，第10幀的幀延時設(shè)為35來控制汽車運動的速度，如圖所示。

12.2.2實例一：鏡泊湖的動態(tài)Banner廣告的制作步驟5：為了將第10幀的圖像始終能夠顯示在這個GIF動畫上，所以有必要將第10幀的圖像效果復(fù)制到后面的所有幀中去。設(shè)計這個動畫共有30幀，所以后面的20幀中都需要有這個第10幀中的汽車圖像。這里要調(diào)用庫中的圖形元件來實現(xiàn)所有幀中都有第一幅汽車圖的效果。打開幀面板，新建一幀，設(shè)置其幀延時為10。單擊幀面板的洋蔥皮工具，在彈出菜單中選擇【之前和之后】命令，這樣在編輯第11幀時就能夠看到第10幀的汽車圖像了，如圖所示。

12.2.2實例一：鏡泊湖的動態(tài)Banner廣告的制作步驟6：選擇主菜單中的【窗口】→【庫】命令，打開了庫面板。發(fā)現(xiàn)庫面板中有一個動畫元件和開始保存的名為“汽車1”的圖形元件，如圖所示。從庫面板中拖動圖形元件到畫布之中，使其和第10幀的汽車圖形完全對齊。得到第11幀的圖像，如圖所示。

12.2.2實例一：鏡泊湖的動態(tài)Banner廣告的制作步驟7：選中第11幀，單擊幀面板右上角的“選項”按鈕，在彈出菜單中選擇【重制幀】命令，在彈出對話框中設(shè)置幀的“數(shù)量”為9，如圖所示。

步驟8：選中第11幀，導(dǎo)入另外一幅汽車圖像，如圖12.35所示。同樣選擇主菜單中的【修改】→【元件】→【轉(zhuǎn)換為元件】命令，在元件屬性對話框，將這個圖形文件命名為“汽車2”。12.2.2實例一：鏡泊湖的動態(tài)Banner廣告的制作步驟9：選中這個“汽車2”圖形元件，選擇主菜單中的【修改】→【動畫】→【選擇動畫】命令，彈出動畫對話框，在其中設(shè)置“幀數(shù)”為10，“移動”到290。步驟10：設(shè)置第20幀的圖像幀延時為35，11幀到19幀的幀延時為10。然后新建一幀并設(shè)置幀延時為10，從庫面板中拖動“汽車1”和“汽車2”元件到畫布之上，使其和第20幀中圖像完全對齊。

步驟11：選擇第21幀，和第7步一樣，將其重制9次。在21幀中導(dǎo)入第三幅汽車圖，只將車的前半部分放在畫布之中，好像車子是逐漸開進來的一樣。接下來和前面一樣，將它轉(zhuǎn)化為圖形元件，并設(shè)置動畫效果，設(shè)置其“幀”數(shù)為10，“移動”為100即可。12.2.2實例一：鏡泊湖的動態(tài)Banner廣告的制作步驟12：將“汽車3”元件拖到第30幀中并與動畫元件對齊。接著為圖像添加兩個小圓形和一個圓角矩形，并在矩形中添加“我也要去鏡泊湖”幾個字來增強效果。步驟13：將第30幀的幀延時設(shè)為200即可，讓它的顯示時間長一些。最后保存這個文件并將其導(dǎo)出為一個GIF動畫文件，這樣在網(wǎng)頁中就可以使用這個GIF圖片了。

實例二：網(wǎng)頁制作技能教程網(wǎng)站Banner的制作步驟1：在Fireworks主窗口中新建一個468×60的文件，然后選擇主菜單中的【文件】→【導(dǎo)入】命令，導(dǎo)入制作好的圖片，然后單擊“層”面板右上角的“選項”，在彈出菜單中選擇【共享此層】命令，把該層設(shè)置為共享層，如圖所示。

實例二：網(wǎng)頁制作技能教程網(wǎng)站Banner的制作步驟2：單擊“層”面板的【新建/重制層】命令，新建一層，并在幀面板當(dāng)中新建一幀，輸入文本“學(xué)如弓弩”，幀延時改為60/100秒。步驟3：單擊幀面板右上角的“選項”按鈕，在彈出菜單中選擇【復(fù)制幀】命令復(fù)制第二幀，將文字改為“才如箭鏃”，幀延時改為80/100秒。步驟4：同樣復(fù)制第三幀，將文字改為“識以領(lǐng)之”，幀延時改為60/100秒。

實例二：網(wǎng)頁制作技能教程網(wǎng)站Banner的制作步驟5：接著復(fù)制第四幀，將文字改為“方能中鵠”，幀延時改為100/100秒。

步驟6：最后選擇主菜單中的【文件】→【保存】命令，保存這個文件，并最后選擇主菜單中的【文件】→【導(dǎo)出向?qū)А棵?，將其?dǎo)出為一個GIF動畫文件。

實例二：網(wǎng)頁制作技能教程網(wǎng)站Banner的制作拓展導(dǎo)出動畫之前，首先要在優(yōu)化面板中將該文件設(shè)置為動畫GIF格式。無論是在制作過程中預(yù)覽動畫效果，還是制作完成后輸出動畫，必須選擇GIF動畫格式，才能觀看動畫效果，否則，輸出的只是某個幀的靜止畫面。另外，使用導(dǎo)出向?qū)В梢苑奖愕卦O(shè)置動畫輸出屬性。如果在保存類型中選擇了MacromediaFlashSWF，文件將被導(dǎo)出為SWF格式。Fireworks與Flash的集成已經(jīng)比較完善，所以在Flash中可以將FireworksPNG文件導(dǎo)入并保留原有的動畫屬性。另外，導(dǎo)出的動畫GIF最好在IE當(dāng)中預(yù)覽效果。12.3技能3網(wǎng)頁導(dǎo)航欄的制作

12.3.1任務(wù)1導(dǎo)航欄的制作12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作12.3.1任務(wù)1導(dǎo)航欄的制作步驟1：在Fireworks主窗口中新建一個Fireworks的文檔，將畫布大小設(shè)為766×430像素，畫布顏色設(shè)為白色。步驟2：按下Ctrl+F8鍵創(chuàng)建一個新元件，在彈出的對話框內(nèi)將元件名設(shè)為“按鈕”，類型設(shè)為“按鈕”。步驟3：進入按鈕編輯窗口，在按鈕的釋放狀態(tài)下輸入文字“留言”，本例中使用字體為“方正黃草體簡體”，我們選用字體的時候一定要與版面整體風(fēng)格相配，“華康”系列字體也是比較自然純樸的字體，目前在網(wǎng)絡(luò)上比較流行。字體大小為25，顏色為灰色（#888888）。

12.3.1任務(wù)1導(dǎo)航欄的制作步驟4：選擇主菜單中的【窗口】→【對齊】命令，彈出對齊面板，按下“到畫布”按扭，對齊選擇“水平居中”、“垂直居中”使文字對齊畫布。效果如圖所示。步驟5：進入滑過狀態(tài)編輯窗口，單擊復(fù)制彈起時的圖形按鈕，復(fù)制釋放時的按鈕狀態(tài)，將文字的顏色改為深灰色（#333333）。步驟6：本例中的按鈕為簡單按鈕，因此后面幾個狀態(tài)全部復(fù)制前面的狀態(tài)，不再詳細設(shè)置。設(shè)置完畢后單擊完成按鈕，回到文檔編輯窗口。

12.3.1任務(wù)1導(dǎo)航欄的制作步驟7：打開資源面板組中的庫面板，這時就可以看到庫面板中有了一個“按扭”。12.3.1任務(wù)1導(dǎo)航欄的制作步驟8：將按鈕實例“留言”調(diào)整到文檔相應(yīng)位置，然后將庫中的按鈕拖到文檔窗口中，在屬性面板中改變文本內(nèi)容。分別建立“日記”、“下載”、“空間”、“論壇”、“音樂”文字實例。并調(diào)整好實例之間的間距。更改各個實例上的鏈接等內(nèi)容。更改完畢后選中所有實例，按下Ctrl+G，將實例成組，以便在頁面中調(diào)整導(dǎo)航欄的位置，如圖所示。

12.3.1任務(wù)1導(dǎo)航欄的制作步驟9：最后我們可以導(dǎo)入相應(yīng)的背景及頁面插圖，實例完成后的最終效果如圖所示。

12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作在一些網(wǎng)站上，帶有下拉菜單的導(dǎo)航欄很有特色，給頁面增添了不少魅力。本任務(wù)我們通過一個實例來詳細講解下拉菜單的制作要領(lǐng)。實例的效果是將鼠標(biāo)指針放到導(dǎo)航欄上時，屏幕上會出現(xiàn)下攔菜單，而且當(dāng)鼠標(biāo)指針放到子菜單上時，子菜單的背景色和文字色都會發(fā)生變化。

12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟1：在Fireworks主窗口中新建一個Fireworks的文檔，將畫布大小設(shè)為766×430像素，畫布顏色設(shè)為黑色。步驟2：將設(shè)計好的頁面背景圖導(dǎo)入到頁面中，如圖所示。

12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟3：在文檔編輯狀態(tài)下按下Ctrl+F8，創(chuàng)建一個按鈕類型的元件，名稱為“按鈕”。步驟4：進入按鈕編輯狀態(tài)，繪制釋放狀態(tài)按鈕，選擇矩形工具，填充顏色為黑色，邊線為白色。繪制一個67×20的矩形。再選擇文本工具，文本顏色選擇為白色，字體為宋體，字號為12。輸入“Home”。單擊菜單【窗口】→【對齊】，彈出對齊面板，按下“到畫布”按扭，對齊選擇“水平居中”、“垂直居中”使文字對齊畫布。效果如圖所示。12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟5：回到文檔編輯狀態(tài)，將庫面板的“按鈕”拖放在文檔中，形成若干個按鈕元件的實例，調(diào)整好位置并更改實例的文字內(nèi)容及設(shè)置鏈接等屬性。如圖所示。12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟6：選中第一個按鈕，選擇主菜單中的【窗口】→【行為】命令，打開行為面板，單擊行為面板左上角的“+”按鈕添加設(shè)置彈出菜單的屬性，如圖所示。

12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟7：接下來在彈出菜單編輯器窗口中的內(nèi)容中添加菜單文本、鏈接地址和鏈接打開目標(biāo)方式等信息。如圖所示。12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟8：單擊縮進按鈕如圖，可將設(shè)置好的菜單內(nèi)容設(shè)置為上一個菜單內(nèi)容的子菜單，如我們把“我的LOVE”設(shè)置為“我的大學(xué)”的子菜單如圖所示。

12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟9：設(shè)置完后單擊繼續(xù)按鈕，設(shè)置下拉菜單的外觀屬性，包括字體、字號、下拉菜單背景色、鼠標(biāo)滑過時的顏色等內(nèi)容。如圖所示

12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟10：設(shè)置完后單擊繼續(xù)按鈕，設(shè)置高級屬性，包括菜單寬、高、邊框等內(nèi)容，如圖所示。

12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟11：設(shè)置完后單擊繼續(xù)按鈕，設(shè)置位置屬性，可以設(shè)置下拉菜單及子菜單顯現(xiàn)的位置等屬性，如圖所示。12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟12：設(shè)置完后單擊完成按鈕，關(guān)閉窗口?？梢钥吹桨粹o的下方已經(jīng)出現(xiàn)了下拉菜單的輪廓，如圖所示。

12.3.2任務(wù)2網(wǎng)頁下拉菜單導(dǎo)航欄的制作

步驟13：重復(fù)步驟6至步驟12，為其它的按鈕設(shè)置下拉菜單。導(dǎo)出HTML文件后，在瀏覽器中觀看的效果如圖所示。

12.4技能4圖片的裁切及圖片的優(yōu)化

12.4.1任務(wù)1版面設(shè)計樣稿的裁切12.4.2任務(wù)2網(wǎng)頁圖片的優(yōu)化12.4.1任務(wù)1版面設(shè)計樣稿的裁切

用戶在瀏覽網(wǎng)頁時，總是希望網(wǎng)頁的下載速度能夠比較快，但有時在制作網(wǎng)頁時，為了保持頁面的美觀，又不得不使用一些較大的圖片。我們把圖形分割后下載速度會比直接下載原圖快很多，分割后的圖片可以利用Dreamweaver重新拼合起來。這樣就可以達到美觀與速度兼顧了。另外，對于設(shè)計稿我們也需要進行裁切，利用Fireworks裁切設(shè)計稿非常方便。而且還可以直接生成html文檔。

12.4.1任務(wù)1版面設(shè)計樣稿的裁切

步驟1：在Fireworks中選擇主菜單中的【文件】→【打開】命令，直接打開設(shè)計樣稿，如圖所示。

12.4.1任務(wù)1版面設(shè)計樣稿的裁切

步驟2：選擇工具板上的切片工具，根據(jù)設(shè)計稿的內(nèi)容進行相應(yīng)的分割。分塊時要注意文