|
十、 創(chuàng)建彈出菜單
通常我們站點(diǎn)里的導(dǎo)航信息必須非常的簡練和實(shí)用，只有那些最重要的信息才出現(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”增加彈出菜單，如下圖所示：
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é)果入圖所示：
5、 點(diǎn)擊Next進(jìn)入下一個(gè)設(shè)置窗口，在這里我們可以設(shè)置文字的大小，菜單的樣式等屬性，您既可以選擇最終的菜單外觀是標(biāo)準(zhǔn)的HTML格式，或者是Image圖片格式。我們選擇圖片格式，并設(shè)定文字大小為10。
6、 當(dāng)您選擇了Image格式時(shí)，需要在下部的兩個(gè)窗口設(shè)置Up和Over狀態(tài)的菜單樣式，您的懸想也許和我們這里的不同，這是因?yàn)槲覀兪褂昧俗远x的樣式文件。我們可以根據(jù)不同設(shè)計(jì)項(xiàng)目的需要將自定義的樣式作為彈出菜單的選項(xiàng)。
7、 我們首先繪制一個(gè)最終的彈出菜單的矩形，并設(shè)定好需要的填充、描邊和特效。
如下圖： 
8、 打開Style面板，選中剛才創(chuàng)建的矩形，在Style面板的彈出菜單中選擇New Style創(chuàng)建一個(gè)新的樣式，并命名為MyStyle，如下圖：
此時(shí)您的Style面板中已經(jīng)添加了一個(gè)新的樣式。
9、 選擇Style面板彈出菜單中的Export Styles將剛才的這個(gè)自定義樣式輸出到Fireworks目錄里/Configuration/Nav Menu/，并將它命名為Styles.stl，但要注意必須先將原有的Styles.stl文件備份。
10、 我們再次編輯剛才創(chuàng)建的彈出菜單，就可以選擇我們自定義的樣式了。
11、 按F12預(yù)覽生成的彈出菜單，如下圖：
12、 此時(shí)表示二級(jí)菜單的小箭頭默認(rèn)為黑色，所以看不見，我們也可以在最后修改此箭頭樣式和顏色，具體方法參見本書前面章節(jié)。
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
上一頁 建立切片/創(chuàng)建拖拽翻轉(zhuǎn)效果 下一頁 創(chuàng)建變形動(dòng)畫/創(chuàng)建實(shí)時(shí)動(dòng)畫
◎進(jìn)入論壇Photoshop、Fireworks版塊參加討論
|
第 1 頁 
第 6 頁 創(chuàng)建彈出菜單
