內(nèi)容摘要:切片就是將圖像切成很多不同的部分,它是一種網(wǎng)頁對象,不是以圖像形式存在,而是以HTML代碼的形式出現(xiàn)。Photoshop也有切片功能,但相比網(wǎng)頁制作工具Fireworks來說,無論在操作上和功能上都有一定的差距。切片最初的應用是將影響網(wǎng)頁顯示時間的大型圖片切割成不同的幾個部分以便于數(shù)據(jù)傳輸。隨著Fireworks版本的升高,切片就成為了創(chuàng)建交互性網(wǎng)頁的一個基本方法,現(xiàn)在利用切片就可以實現(xiàn)交互功能。下面就來介紹一下切片在網(wǎng)頁中的交互性應用。
小知識:切片就是將圖像切成很多不同的部分,它是一種網(wǎng)頁對象,不是以圖像形式存在,而是以HTML代碼的形式出現(xiàn)。Photoshop也有切片功能,但相比網(wǎng)頁制作工具Fireworks來說,無論在操作上和功能上都有一定的差距。 一、創(chuàng)建切片 開啟Fireworks MX 2004,打開需要進行切片的圖片,在主窗口中選擇“編輯→插入→切片”或者直接使用工具欄中的“切片”按鈕在圖片上拖動繪制矩形切片(圖1),如果對切片的形狀不滿意,可以通過移動切片引導線來調(diào)整矩形切片對象的大小。 提示:如果需要繪制非矩形切片,可以在切片按鈕中選擇“多邊形切片”工具。特別注意非矩形切片不可調(diào)整大小。 二、交互性應用 1.添加簡單變換圖像行為 簡單變換圖像是在當前切片正下方的幀中進行交換,只涉及一個切片,可以應用在網(wǎng)頁按鈕上。首先選擇切片,用鼠標拖動切片中央的行為手柄移動到此切片的任意位置,松開鼠標后會彈出“交換圖像”的對話窗口,我們可以選擇“幀2”(幀1就是切片本身),然后在幀面板中創(chuàng)建一個用于交換圖像的“幀2”,也可以單擊“交換圖像”窗口中的“更多選項”按鈕,選擇一個“圖像文件”用于交換(圖2),完成設置后,按“F12”鍵來預覽效果。
當指針在一個切片上方滑過時,不相交變換的圖像會交換另一個切片對象的圖像。它與簡單交換圖像惟一不同的是將切片的行為手柄拖動到另一個切片的位置。 3.設置狀態(tài)欄信息 可以定義當鼠標滑過切片時狀態(tài)欄顯示的文本信息。單擊切片行為手柄,在彈出的菜單中選擇“添加狀態(tài)欄信息”,然后輸入你要設置的文本信息,確定即可。 4.創(chuàng)建彈出式菜單 使用Fireworks切片也能制作出漂亮的彈出式菜單,首先在需要設置彈出菜單的地方創(chuàng)建切片,點擊行為手柄,在彈出的菜單中選擇“添加彈出菜單”(圖3),打開“彈出菜單編輯器”,接下來經(jīng)過簡單的四步就會創(chuàng)建出彈出菜單。 (1)在“內(nèi)容”選項卡中分別雙擊文本、鏈接和目標下的空白處,輸入彈出菜單的文字、鏈接地址及打開方式,如果需要二級彈出菜單,可以點擊上面的“縮進菜單”按鈕來設置(圖4),若要添加、刪除彈出菜單內(nèi)容可按“+”和“-”按鈕。 (2)在“外觀”中定義好彈出菜單的形式和字體大小以及字體顏色。 (3)“高級”中設置彈出菜單表格的寬度、邊距、邊框?qū)挾群皖伾葏?shù)。 (4)根據(jù)網(wǎng)頁需要選擇彈出菜單的位置。最后點擊“完成”按鈕,一個彈出菜單就創(chuàng)建好了。 三、文件的導出 切片制作好之后,需要導出Fireworks HTML才能被應用到Deamweaver里,執(zhí)行“文件→導出”彈出導出窗口,注意保存類型要選擇“HTML和圖像”,然后輸入文件名并選擇好保存目錄,“確定”后即可導出切片文件,導出的文件中有HTML文件和被切片分割的幾個圖片文件,如果是彈出式菜單還會有一個mm_menu.js文件。 提示:如果想要在Deamweaver里應用制作好的切片文件,只要在Deamweaver中選擇“插入→圖像對象→Fireworks HTML”,然后選擇在Fireworks中導出的HTML文件即可。 |
|
來自: 密雪兒Michelle > 《與我共讀》