彈出式選單 1

 


 

彈跳式選單Pop-Up Menu

用Fireworks來製作彈跳式的選單,快速又簡單,不需要我們寫Java Script,幾個步驟就簡單完成 !它會自動產生Java Script..

 


請建立一個batman的資料夾,用Dreamweaver或Frontpage先隨便做 4 個網頁,分別命名為 per.htm、equ.htm、story.htm、char.htm

在Fireworks設計做一個按鈕,並且在滑過狀態改變按鈕顏色,如圖 1所示


圖 1

 

 

點選該按鈕,打開行為面板,按面板的加號圖示,再選擇設定彈出式選單,如圖 2所示


圖 2

 

 

彈跳式選單編輯器 視窗請輸入以下內容,產生第一個子選單,如圖 3所示


圖 3

 

再按加號圖示來產生第2個子選單內容,以此類推共產生 4個子選單,最後再按下一步按鈕,如圖 4所示


圖 4

 

 

子選單的呈現方式可以用HTML方式,也可以用影像的方式,我們先練習HTML的方式

請在儲存格選項選擇HTML,然後再自行設定字型大小顏色等等,再按下一步按鈕,如 圖 5所示


圖 5

 

在進階設定部份,可以設定子選單的寬高等內容,設定好之後,請再按下一步,如圖 6


圖 6

位置部份,可以設定選單的位置,最後再按完成按鈕,如圖 7


圖 7

我們就完成了彈跳式選單了,如圖 8所示


圖 8

 

我們也可以用拖曳的方式來調整選單的位置,如圖 7所示


圖 7

完成之後就把該檔案轉存為Html網頁即完成

請按這裡來看成果


如果我們覺得選單按鈕沒有立體感或是太單調,在行為面板的S設定彈出式選單快速點兩下,進入Set Pop-Up Menu視窗,在該視窗按Next進入按鈕的設計,這次選擇Image,然後再去改變Style的種種設定就可以了,如圖 8所示


圖 8

請按這裡來看成果

 

關於轉存彈出式選單


Fireworks 會產生在網頁瀏覽器中檢視彈出式選單所需要的 JavaScript。當包含彈出式選單的 Fireworks 文件轉存為 HTML 時,名為 mm_menu.js 的 JavaScript 檔案也會轉存到與這個 HTML 檔案相同的位置,如圖 9

上傳檔案時,您必須將 mm_menu.js 上傳到與包含這個彈出式選單的網頁相同的目錄位置。如果您想要將檔案發佈到不同的位置,就必須以 Fireworks HTML 程式碼的形式更新參照 mm_menu.js 的超連結,以反應自訂的位置。如果您的文件包含數個彈出式選單,或者有數份包含彈出式選單的文件,Fireworks 便不會建立其他的 mm_menu.js 檔案,所有文件中的所有選單都使用單一檔案。

當您增加子選單時,Fireworks 會產生名為 arrows.gif 的影像檔案。這個影像就是出現在選單項目旁的小型箭頭,告知使用者子選單的存在。無論文件包含的子選單數量為何,Fireworks 永遠使用相同的 arrows.gif 檔案。

回課程目錄