Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例

1、Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例1在本文中我們將幫助您親身體驗(yàn)Fireworks在網(wǎng)頁創(chuàng)作中的強(qiáng)大功能，我們通過一個(gè)網(wǎng)站頁面的設(shè)計(jì)過程，為您詳細(xì)介紹Fireworks在網(wǎng)頁設(shè)計(jì)的不同階段是如何處理各種不同任務(wù)的。通過解決您所遇到的每一個(gè)具 體的任務(wù)，您將對(duì)Fireworks的主要功能有一個(gè)統(tǒng)一的全局性的了解，同時(shí)為您在設(shè)計(jì)中如何利用Fireworks提供一個(gè)清晰的思路。最終完成的實(shí)際頁面請(qǐng)看這里。下圖是這個(gè)教程完成后的外觀：HE著人代弓序!k產(chǎn) 匚那* FT? 乂用g J 3曲半 in+r'j我們將根據(jù)這一個(gè)典型網(wǎng)站其中一個(gè)頁面設(shè)計(jì)流程，使您逐步學(xué)習(xí)到以下內(nèi)容:1、導(dǎo)入并編輯位圖圖像

2、。2、自動(dòng)任務(wù)處理3、創(chuàng)造矢量圖形4、創(chuàng)建文字5、創(chuàng)建按鈕6、創(chuàng)建導(dǎo)航條7、設(shè)定按鈕屬性8建立切片9、創(chuàng)建拖拽翻轉(zhuǎn)效果10、創(chuàng)建彈出菜單11、創(chuàng)建變形動(dòng)畫12、優(yōu)化圖像13、輸出 HTML文件至U Dreamweaver14、在Dreamweaver中進(jìn)行往返表格編輯、設(shè)計(jì)前準(zhǔn)備1、網(wǎng)站介紹:在教程介紹之前首先讓我們來看一下我們將要完成的主要任務(wù)。這是一個(gè)服飾公司的企業(yè)網(wǎng)站設(shè)計(jì)， 公司主要以男式服飾為主，同時(shí)也兼顧部分女士服飾。網(wǎng)站的主要任務(wù)是幫助瀏覽者了解公司的基本概況和產(chǎn)品信 息，并作為公司的一個(gè)展示窗口，向參觀者展示企業(yè)的形象及產(chǎn)品系列。根據(jù)業(yè)主的要求，網(wǎng)站包含了企業(yè)概 況、企業(yè)人才、產(chǎn)

3、品展示、公司榮譽(yù)以及聯(lián)系方式。我們將以此得到網(wǎng)站的導(dǎo)航結(jié)構(gòu)。2、設(shè)計(jì)指導(dǎo)思想:本網(wǎng)站設(shè)計(jì)的指導(dǎo)思想是在網(wǎng)絡(luò)上營造一個(gè)優(yōu)雅、高貴、寧靜的氛圍，為了體現(xiàn)這一主題，設(shè)計(jì)者將紋理、景深、光影、基調(diào)與有形的模特照片和靜態(tài)的文字結(jié)合起來，更多的使用直線、堅(jiān)硬的邊緣、暗的色調(diào)來組成 網(wǎng)站界面。頁面中以較大面積的男性模特圖片突出男式服飾這一主題，以穿插的直線段體現(xiàn)一種服裝紋理的感覺。公司的名稱則以一種柔軟光滑的粗倩體來表現(xiàn)，以打破整個(gè)頁面的堅(jiān)硬感，同時(shí)以白色突出企業(yè)名稱，達(dá)到非常亮眼的感覺。3、頁面結(jié)構(gòu)：整個(gè)網(wǎng)站采用統(tǒng)一的結(jié)構(gòu)，分為上下兩個(gè)部分，上面為網(wǎng)站的導(dǎo)航條，下面左邊以不同的男式服飾圖片及文字標(biāo)題表示各

4、頁主題。右邊為內(nèi)容區(qū)，以深色帶條紋的圖片作為背景。下面我們將根據(jù)上述設(shè)計(jì)分析，分不同的部分為您介紹制作過程。在新建一個(gè)文件后，我們需要對(duì)我們的工作環(huán)境進(jìn)行簡單的設(shè)定，以符合我們的任務(wù)要求。首先需要設(shè)定工作區(qū)的面積及背景顏色，打開Modify>Canvas Size針對(duì)常見的800x600分辨率，我們?cè)O(shè)定工作區(qū)的長為776這可以根據(jù)需要設(shè)定，但最好不要超過 778, 高為515根據(jù)實(shí)際內(nèi)容確定，再執(zhí)行 Modify>Canvas Color設(shè)定背景色為黑色。再打開 View>Grid>Edit Grid 對(duì)話框，設(shè)定水平方向網(wǎng)格間距為10像素，垂直方向?yàn)?像素，并將網(wǎng)格顏

5、色設(shè)為暗灰色以不影響觀察頁面， 打開網(wǎng)格顯示和網(wǎng)格捕捉。如下圖所示：Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例2一、導(dǎo)入并編輯位圖圖像。Fireworks4帶有完善的位圖創(chuàng)建、修改和處理功能，我們可以導(dǎo)入外部位圖文件并對(duì)它進(jìn)行編輯，可以修改和刪除位圖中的顏色，可以向?qū)κ噶繄D一樣增加效果。我們的工作將從層面板開始，新建一個(gè)文件后，默認(rèn) 的只有兩個(gè)圖層 Web層和Layer1層，雙擊Layer1層，將層名改為“背景層”。如下圖所示：Q |W» 二| |pd«m4l”1我們將一張男性模特的照片導(dǎo)入此層中。2、雙擊圖片可以進(jìn)入位圖編輯模式，我們可以用矩形選擇工具選定不需要的部分并刪除它。3

6、、 位圖大小調(diào)整好后可以使用實(shí)時(shí)特效進(jìn)行色彩調(diào)節(jié)，打開Effect面板，選擇Adjust Color/Levels ， 在Levels分布圖中分別拖動(dòng)三個(gè)滑尺，按照下圖所示進(jìn)行色彩調(diào)節(jié)：4、導(dǎo)入的位圖一般都有一些細(xì)小的雜點(diǎn)，我們可以使用 Effect>Blur>Gaussian Blur對(duì)圖像進(jìn)行一些模 糊處理，使其增加一些柔和的感覺.二、自動(dòng)任務(wù)處理。由于我們?cè)诤竺鎸⒍啻问褂眠@個(gè)處理過程對(duì)位圖進(jìn)行加工，因此可以利用Fireworks提供的自動(dòng)處理功能加快我們后面的工作，這種自動(dòng)任務(wù)處理可以有很多種途徑，我們介紹其中最常用的三種：1保存為一個(gè)Command打開歷史面板 Histor

7、y，選定最后兩步Effect紀(jì)錄，在彈出菜單中選擇 Save as Command將這兩個(gè)步驟保存為一個(gè)可執(zhí)行的Command命名為BMPmodify以后我們需要時(shí)只需執(zhí)行 Commands菜單下的這個(gè)BMPmodify命令即可。Stltcltd StepsCopy StepsSave as Com and.2保存為一個(gè)Effect o我們也可以將作用在圖片上的所有特效保存為一個(gè)內(nèi)置特效，打開Effect面板,在彈出菜單中執(zhí)行 Save Effect As,將它保存為 Mydesign特效。70Levrts-.Stustian Blur.Jd|UnlitiedEffectSave Effect

8、 As.Eenajne Effect.Dflete EffectAll OnU1 OffLocate Flugins.此時(shí)我們打開Effect面板就可以看到我們自定義的Mydesign特效已經(jīng)在其中了，我們可以像使用其它特效一樣使用它。如下圖：BlurOtherShadow and GlowSharpenEye Candjr 4000 LE 卜3保存為一個(gè)Style。樣式是Fireworks中包含對(duì)象的描邊、填充、特效、字體等屬性的一種組合，它可以快速設(shè)定對(duì)象具有統(tǒng)一的外觀，我們也可以將上面的設(shè)定作為一個(gè)樣式保存。選定剛才的位圖圖像，打開樣式面板Style，在彈出菜單中執(zhí)行 NewStyle，

9、我們只需保留對(duì)圖片施加的特效即可，按下圖進(jìn)行設(shè)定：Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例3創(chuàng)造矢量對(duì)象位圖是用像素來描述物體的，它適合于表現(xiàn)色彩變化豐富的照片，而矢量圖是使用路徑和填充來定義對(duì)象 的外觀，它非常容易編輯，并且它的質(zhì)量不會(huì)因大小的改變而丟失或減弱。Fireworks 同時(shí)提供了編輯這兩種格式圖像的方法，默認(rèn)情況下Fireworks是以矢量的方式創(chuàng)建和編輯對(duì)象。Fireworks提供了常用的創(chuàng)建矢量對(duì)象的工具，我們下面利用這些工具創(chuàng)建基本的矢量圖形。1、 選擇工具面板上的矩形工具口，在文檔頂端繪制一 776x30的矩形。2、 設(shè)定填充為線性漸變填充，點(diǎn)擊填充面板的Edit按鈕編輯填充，

10、如下圖所示：3、在人像的右半邊繪制一個(gè)130x400的矩形實(shí)色填充對(duì)象。4、 接下來我們將在文檔頂端創(chuàng)建按鈕對(duì)象， 首先在層面板中新建一個(gè)“導(dǎo)航層”， 利用矩形工具創(chuàng)建“公 司首頁”按鈕對(duì)象，大小為140x15，填充為紅色與黑色之間的線性漸變填充，打開 Effect面板，設(shè)定Inner Bevel特效，如下圖所示：公司首熨5、我們還可以在背景層繪制一些線段，以打破背景的單調(diào)感覺。四、創(chuàng)建文字Fireworks還提供了強(qiáng)大的文字處理功能，利用文字編輯窗口可以靈活的對(duì)文字進(jìn)行設(shè)定，并且與其它對(duì) 象一樣我們也可以對(duì)文字施加各種特效。1、選擇工具面板的文字工具，打開文字編輯窗口，輸入“卡爾松服飾有限公

11、司”，如圖所示:服站肓眼公司我們看到，在文字編輯窗口我們可以分別對(duì)不同的文字設(shè)定各自的屬性。2、在文檔左半部分輸入相應(yīng)的英文文字內(nèi)容，并旋轉(zhuǎn)文字 90度，如下圖所示:3、打開層面板，選定"Karsong”設(shè)定它的合成方式為Lumino sity4、打開 Effect 面板，為“ DRESS&ADORNMCT.LTD'文字增力口 Drop Shadow特效。Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例4五、創(chuàng)建按鈕利用Fireworks提供的按鈕編輯器，我們可以快速創(chuàng)建具有相似外觀的一組按鈕，并可以設(shè)定按鈕的不同狀態(tài)外觀。1、使用矩形工具繪制一個(gè)90x15的矩形按鈕對(duì)象，設(shè)定它的

12、填充為線性漸變填充，在矩形上方輸入“企 業(yè)概況”。2、 上一步我們建好了按鈕的基本外觀，我們可以把它轉(zhuǎn)換為一個(gè)按鈕符號(hào)重復(fù)利用。選定上面創(chuàng)建的矩 形和文字，按F8將它轉(zhuǎn)換為符號(hào)，符號(hào)類型為 Button 。3、此時(shí)的按鈕符號(hào)只具有基本的外形，雙擊剛創(chuàng)建好的這個(gè)符號(hào)，打開按鈕編輯窗口。4、常見按鈕的Up狀態(tài)，在按鈕編輯器的 Up窗口我們可以向編輯普通對(duì)象一樣，為按鈕增加一些特效。 打開Effect面板，為此按鈕矩形增加Inner Bevel特效，類型為Frame,如圖所示：5、切換到Over狀態(tài)，點(diǎn)擊下方的“ Copy Up Graphic”將Up狀態(tài)的對(duì)象復(fù)制到 Over狀態(tài)窗口。改變矩 形的

13、漸變填充方向，改變按鈕的特效類型為Smooth,如下圖：6、切換到Down犬態(tài)，點(diǎn)擊下方的"Copy Over Graphic”將Over狀態(tài)的對(duì)象復(fù)制到 Down）犬態(tài)窗口。改 變矩形的填充類型為實(shí)色填充 Solid ,改變按鈕的特效類型為 Framel,最后將文字的色彩改變?yōu)榧t色， 如下圖：7、 需要注意的是，在按鈕的 Down狀態(tài)下，需要取消對(duì)"Show DownState Upon Load”的勾選，同時(shí)要 保證“ Include Nav Bar Downstate ”被勾選，這可以使將來輸出時(shí)會(huì)根據(jù)不同的按鈕按下情況輸出相應(yīng)的H TML文 件。8、關(guān)閉按鈕編輯窗口

14、，按鈕的一個(gè)實(shí)例已經(jīng)放置在了文檔當(dāng)中。六、創(chuàng)建導(dǎo)航條利用上面創(chuàng)建的按鈕我們可以快速創(chuàng)建風(fēng)格一致的網(wǎng)頁導(dǎo)航條，并且可以分別設(shè)定每個(gè)按鈕的外觀和文 字，但同時(shí)保持它們的相似性。1、我們先對(duì)上面創(chuàng)建好的按鈕實(shí)例增加一種特效，打開Effect面板，選擇Adjust Color>Color Fill設(shè)定此特效的混合模式為 Hue色調(diào)，如下圖所示：這樣當(dāng)我們想改變每個(gè)按鈕實(shí)例的色彩時(shí)，只需修改此特效中的混合色彩即可，而不需對(duì)按鈕符號(hào)作修改。2、 創(chuàng)建多個(gè)按鈕實(shí)例。選定上面的按鈕實(shí)例，按住Alt鍵的同時(shí)，拖動(dòng)并復(fù)制這個(gè)按鈕實(shí)例，重復(fù)執(zhí)行 此步驟，創(chuàng)建五個(gè)按鈕實(shí)例。3、選中這五個(gè)按鈕實(shí)例，打開 Modi

15、fy面板，選擇水平居中對(duì)齊，如下圖所示：4、現(xiàn)在導(dǎo)航條的效果如下圖:5、我們需要對(duì)導(dǎo)航條中的每個(gè)按鈕設(shè)定不同的色彩，打開Effect面板，分別改變每個(gè)按鈕所加特效中的混合色彩設(shè)定，將其設(shè)為不同的色值，分別改為 #CC99O0 #663399, #33FF0Q #FF00FF此時(shí)的導(dǎo)航條效果 如下圖所示：企業(yè)槪況業(yè)概應(yīng)企業(yè)璃況，業(yè)概況企業(yè)慨況七、設(shè)定按鈕屬性上面我們做好的導(dǎo)航條外觀雖然不同，但它們卻有著相同的文字內(nèi)容，我們需要將它們修改為各自的內(nèi)容,并設(shè)定每個(gè)按鈕對(duì)應(yīng)的鏈接地址。1、打開Object面板，選擇第二個(gè)按鈕實(shí)例，將 Object面板上的Button Text改為"企業(yè)人才”

16、。| Tcinsfprm 科尹溯$BuHon Test：Link 埔2、按下回車鍵后，會(huì)彈出下面的提示框:我們選擇Current使文字的改變只對(duì)當(dāng)前按鈕有效。3、將其余的按鈕文字分別修改為“產(chǎn)品展示”、“企業(yè)榮譽(yù)”、“聯(lián)系方式”。切換導(dǎo)文檔的預(yù)覽窗口Preview，可以看一下最終的效果。1金詞".金業(yè)播況-Si產(chǎn)品1!（示聯(lián)&式14、打開URL面板，分別選擇每一個(gè)按鈕，在 URL面板中設(shè)定它們對(duì)應(yīng)的鏈接地址。Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例5八、建立切片我們的基本導(dǎo)航及頁面結(jié)構(gòu)已經(jīng)建立好了，現(xiàn)在到了增加切片的時(shí)候了。Fireworks 中的切片是輸出圖形及產(chǎn)生交互的主要參考

17、物件，導(dǎo)出的文檔將根據(jù)切片來將圖形切割成不同的部分，并在瀏覽器中通過表格組裝到一起。同時(shí)，所有的交互行為也是通過切片之間的聯(lián)系來產(chǎn)生的，如翻轉(zhuǎn)圖、彈出菜單等等。1、我們前面建立的按鈕本身已經(jīng)帶有了自己的切片，因此我們需要對(duì)其他對(duì)象建立各自的切片。2、 創(chuàng)建切片通常使用工具面板中的Slice工具直接繪制，但如果想創(chuàng)建精確大小的切片，我們可以選 擇對(duì)象并執(zhí)行右鍵菜單中的In sert Slice自動(dòng)插入切片。3、 我們使用工具面板中的Slice工具在頁面中間繪制一個(gè)信息顯示切片，我們將在下一步把導(dǎo)航條的每 個(gè)按鈕相關(guān)信息顯示在這里。4、我們?cè)黾拥那衅J(rèn)情況下是綠色的半透明對(duì)象，它們都放置在Web

18、 Layer層上.九、創(chuàng)建拖拽翻轉(zhuǎn)效果1、單擊“企業(yè)概況”按鈕處的切片，此切片中心將出現(xiàn)一個(gè)圓形標(biāo)志，用鼠標(biāo)將其拖動(dòng)到上一步創(chuàng)建的切片左上角，這將設(shè)置一個(gè)翻轉(zhuǎn)效果，在彈出的對(duì)話框中設(shè)定鼠標(biāo)滑過時(shí)交換為第二幀的內(nèi)容，如下圖所示：曲.謂斗郢姑城嚴(yán)啦御 %膽誦胃眼公司2J2、 重復(fù)上述步驟，分別為“企業(yè)人才”、“產(chǎn)品展示”兩個(gè)按鈕增加翻轉(zhuǎn)效果，并分別對(duì)應(yīng)第三幀和第 四幀。3、我們?cè)诤竺娓鲙嗤奈恢贸龇謩e放置對(duì)應(yīng)每個(gè)按鈕的說明文字。4、最后的效果如下圖所示：Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例Mb服飾有眼公昂Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例6十、創(chuàng)建彈出菜單通常我們站點(diǎn)里的導(dǎo)航信息必須非常的簡練和實(shí)

19、用，只有那些最重要的信息才出現(xiàn)在導(dǎo)航條中，而更多的導(dǎo)航和內(nèi)容信息通常都隱藏起來。對(duì)于復(fù)雜的展點(diǎn)和多重信息組織，彈出菜單是分層導(dǎo)航的最有效工具，彈出菜單可以在很小的空間中設(shè)置大量的目標(biāo)選項(xiàng)。Fireworks4新增的創(chuàng)建彈出菜單功能， 可以非常容易的實(shí)現(xiàn)這種導(dǎo)航結(jié)構(gòu)，我們只需將分層信息添加到彈出菜單編輯器中，程序會(huì)自動(dòng)生成相應(yīng)的交互式代碼。1、 選擇導(dǎo)航欄上的“產(chǎn)品展示”按鈕，確保Web Layer當(dāng)前顯示及切片可見。2、 點(diǎn)擊此按鈕上切片中心的圓形標(biāo)志，從彈出菜單中選擇“Add Pop-up MenU'增加彈出菜單，如下圖 所示：Delete #0.1 Behavi *rsAdd Fo

20、-pup MenuAdd Swip Im 1)(4 BhtLvior .Add StatuE Bai- Message.3、在彈出的編輯器中輸入如下圖所示內(nèi)容，在Text和Link輸入框中輸入內(nèi)容后，點(diǎn)及上部的“ +”即可添加新的菜單內(nèi)容：4、繼續(xù)輸入二級(jí)菜單內(nèi)容，選中一個(gè)條目后，點(diǎn)擊上部的口 可以使當(dāng)前條目縮進(jìn)，成為下一級(jí)菜單;點(diǎn)擊日可以使當(dāng)前的條目恢復(fù)為上一級(jí)菜單。最后的結(jié)果入圖所示:Set Pnp-Up muLArii l8+ ld |E»|I*Kt |攻車劃品T話哄|_»JLi-ik |pg:>.h*mKfel.ktminsKfhtmihvfrf.himIrk

21、d Hmpgul.tmipgEp.hcrr>5、點(diǎn)擊Next進(jìn)入下一個(gè)設(shè)置窗口，在這里我們可以設(shè)置文字的大小，菜單的樣式等屬性，您既可以選 擇最終的菜單外觀是標(biāo)準(zhǔn)的 HTMI格式，或者是Image圖片格式。我們選擇圖片格式，并設(shè)定文字大小為10。Set F14nilCent ； |Tmf>.蘇g |19三ft JJPre-yl*w.I醫(yī)罪除日| I力事蜒Rl6、當(dāng)您選擇了 Image格式時(shí)，需要在下部的兩個(gè)窗口設(shè)置 Up和Over狀態(tài)的菜單樣式，您的懸想也許和 我們這里的不同，這是因?yàn)槲覀兪褂昧俗远x的樣式文件。我們可以根據(jù)不同設(shè)計(jì)項(xiàng)目的需要將自定義的樣式作為彈出菜單的選項(xiàng)。7、我

22、們首先繪制一個(gè)最終的彈出菜單的矩形，并設(shè)定好需要的填充、描邊和特效。 如下圖：8、打開Style面板，選中剛才創(chuàng)建的矩形，在 Style面板的彈出菜單中選擇 NewStyle創(chuàng)建一個(gè)新的樣式，并命名為MyStyle，如下圖:lew StyleHane. |StyleProp er ti es： » Fill Type|7 Str oke Typm應(yīng) Fill硬 Stroke Color|< Effect廠 Text FontTex:t Si z.e廠 Text StEt墜Cancel此時(shí)您的Style面板中已經(jīng)添加了一個(gè)新的樣式。9、 選擇Style面板彈出菜單中的Export

23、 Styles將剛才的這個(gè)自定義樣式輸出到Fireworks目錄里/Configuratio n/NavMenu/,并將它命名為 Styles.stl，但要注意必須先將原有的Styles.stl 文件備份。10、我們?cè)俅尉庉媱偛艅?chuàng)建的彈出菜單，就可以選擇我們自定義的樣式了。11、按F12預(yù)覽生成的彈出菜單，如下圖：12、此時(shí)表示二級(jí)菜單的小箭頭默認(rèn)為黑色，所以看不見，我們也可以在最后修改此箭頭樣式和顏色，具體方法參見本書前面章節(jié)。Fireworks網(wǎng)頁設(shè)計(jì)綜合實(shí)例7十一、 創(chuàng)建變形動(dòng)畫給一個(gè)網(wǎng)站添加動(dòng)畫對(duì)于訪問者的時(shí)間和金錢都是一個(gè)不小的花銷，因此在添加您的動(dòng)畫前， 一定要先考慮好如下問題：動(dòng)

24、畫能否增進(jìn)您的信息傳達(dá)力度，訪問者下載和播放動(dòng)畫是否迅速、方便，是否有足夠的組成 動(dòng)畫的內(nèi)容和資源。盡管網(wǎng)絡(luò)動(dòng)畫及其傳遞方式正在不斷的發(fā)生改變，但傳統(tǒng)的GIF動(dòng)畫依然有著不可忽視的優(yōu)勢(shì)，我們?cè)谶@里介紹一下創(chuàng)建GIF動(dòng)畫的兩種途徑。1、 在層面板新建一個(gè)Logo層，將其置于 Web Layer層下方。2、 我們需要將背景層修改為一個(gè)共享圖層，打開層面板，切換到背景層，在彈出菜單中選擇Share This La yer，將背景層共享，此層上的內(nèi)容將在所有幀都可見，此層的后面將出現(xiàn)一個(gè)共享圖標(biāo)，如下圖：3、 切換到Logo層，在文檔的右上角創(chuàng)建 文字。4、按F8將其轉(zhuǎn)換為圖形符號(hào) Graphic Symbol。5、 打開Effect面板，對(duì)此符號(hào)的實(shí)例添加紅色Glow效果，如下圖所示:6、 選中此實(shí)例，在右鍵彈出菜單中執(zhí)行Edit>Clone，復(fù)制出一個(gè)新的實(shí)例，并且?guī)в邢嗤腉low特效。7、 在Effect面板修改第二個(gè)實(shí)例的特效，將其改為黃色，并改變Glow的范圍和大小，如下圖：& 選擇這兩個(gè)實(shí)例，在右鍵彈出菜單中執(zhí)行 Symbols>Tween Instances創(chuàng)建變形動(dòng)畫，設(shè)定插入幀數(shù)為6幀, 并勾選Distribute to Frames分布到幀，如下圖所示：9、打開WebLaye