Fireworks頁(yè)面設(shè)計(jì)綜合案例5

    我們的基本導(dǎo)航及頁(yè)面結(jié)構(gòu)已經(jīng)建立好了，現(xiàn)在到了增加切片的時(shí)候了。Fireworks中的切片是輸出圖形及產(chǎn)生交互的主要參考物件，導(dǎo)出的文檔將根據(jù)切片來(lái)將圖形切割成不同的部分，并在瀏覽器中通過(guò)表格組裝到一起。同時(shí)，所有的交互行為也是通過(guò)切片之間的聯(lián)系來(lái)產(chǎn)生的，如翻轉(zhuǎn)圖、彈出菜單等等。 

    1、 我們前面建立的按鈕本身已經(jīng)帶有了自己的切片，因此我們需要對(duì)其他對(duì)象建立各自的切片。 
    2、 創(chuàng)建切片通常使用工具面板中的Slice工具直接繪制 ，但如果想創(chuàng)建精確大小的切片，我們可以選擇對(duì)象并執(zhí)行右鍵菜單中的Insert Slice自動(dòng)插入切片。 
    3、 我們使用工具面板中的Slice工具在頁(yè)面中間繪制一個(gè)信息顯示切片，我們將在下一步把導(dǎo)航條的每個(gè)按鈕相關(guān)信息顯示在這里。

    4、 我們?cè)黾拥那衅�默認(rèn)情況下是綠色的半透明對(duì)象，它們都放置在Web 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)滑過(guò)時(shí)交換為第二幀的內(nèi)容，如下圖所示：

    2、 重復(fù)上述步驟，分別為“企業(yè)人才”、“產(chǎn)品展示”兩個(gè)按鈕增加翻轉(zhuǎn)效果，并分別對(duì)應(yīng)第三幀和第四幀。 
    3、 我們?cè)诤竺娓鲙�相同的位置出分別放置對(duì)應(yīng)每個(gè)按鈕的說(shuō)明文字。 
    4、 最后的效果如下圖所示：
    Fireworks網(wǎng)頁(yè)設(shè)計(jì)綜合實(shí)例