品才網(wǎng)>其他>如何用Fireworks cs5制作下拉導(dǎo)航條

如何用Fireworks cs5制作下拉導(dǎo)航條

時間：2022-07-14 00:52:40 其他我要投稿

相關(guān)推薦

很多網(wǎng)頁設(shè)計人員經(jīng)常會用到下拉導(dǎo)航，網(wǎng)上有很多現(xiàn)成的例子，下載即可使用。但是如果想和自己制作的網(wǎng)頁比較兼容，就需要不停的進(jìn)行修改設(shè)置，比較麻煩，那么有沒有比較方便的方法來實(shí)現(xiàn)下拉導(dǎo)航的制作呢?今天我就來分享一下采用FIREWORKS CS5制作下拉導(dǎo)航(菜單)的方法

工具/原料

FIREWOKRS CS5

電腦一臺

方法/步驟

1下載安裝FIREWOKRS CS5(我目前電腦上已經(jīng)安裝)并啟動軟件，建議大家購買正版軟件，此處不做過多說明。

2新建一個寬950像素X35像素，分辨率為72像素的畫布，并且點(diǎn)確定，如下圖二

3選擇矩形工具，在畫布上拖動出一個大小為950X35像素黑白漸變的圖形

4漸變的顏色大家可以根據(jù)自己網(wǎng)頁的風(fēng)格進(jìn)行調(diào)整)，單擊屬性面板中的油漆桶工具，調(diào)整顏色為紅色漸變，調(diào)整完畢，畫布上的矩形圖形的顏色已經(jīng)發(fā)生了變化。

5選擇矢量工具內(nèi)的文本工具，鍵入導(dǎo)航上需要顯示的文字，為了演示方便，我只打了幾個導(dǎo)航的文字。

6下邊我們開始正式制作下拉導(dǎo)航，也就是平時常說的下拉菜單。選擇切片工具，一次切好對應(yīng)的大小

7點(diǎn)擊產(chǎn)品展示這個切片中心位置的圓形圖形，彈出下拉菜單選擇“添加彈出菜單”選項(xiàng)，

8選擇后臺在彈出的面板分別添加產(chǎn)品分類1，產(chǎn)品分類2，產(chǎn)品分類3等下拉菜單的文字內(nèi)容。鏈接和打開窗口大家可以根據(jù)自己的需要手動添加即可。

9下拉導(dǎo)航添加完成后，在彈出菜單編輯器面板點(diǎn)擊繼續(xù)，分別進(jìn)行外觀、高級、及位置設(shè)置，最后點(diǎn)擊完成。如下圖2所示

10下拉導(dǎo)航的顯示位置需要手動拖動進(jìn)行簡單的調(diào)整，如下圖，用鼠標(biāo)左鍵選中紅色方框框選的內(nèi)容，進(jìn)行左右或者上下拖動，將下拉內(nèi)容顯示的合適的位置進(jìn)行顯示，此處需要進(jìn)行多次調(diào)整并通過導(dǎo)出的頁面文件進(jìn)行測試，直到顯示完美即可。

11回到FW主界面，在畫布外的任意位置，點(diǎn)擊鼠標(biāo)右鍵，彈出菜單選擇“全選”，全選的目的是為了保證每個切邊的狀態(tài)為選中。

12這里有三種全選的方法，大家可以采取任意一種：

方法1：直接在FW主界面，按下快捷鍵“CTRL+A”進(jìn)行快速全選(圖示略);

方法2：即上面提到的方法(圖示略);

方法3：在畫布外的任意位置，按下鼠標(biāo)左鍵不放，拖動選擇，將畫布上的內(nèi)容可以全部選中，如下圖所示：

13導(dǎo)出選項(xiàng)如下圖1，導(dǎo)出后的文件如下圖2

14雙擊導(dǎo)出的未命名1.htm這個文件進(jìn)行瀏覽，最終效果如下。

注意事項(xiàng)

用FW制作導(dǎo)航時，需要注意導(dǎo)航的風(fēng)格要與網(wǎng)頁的風(fēng)格統(tǒng)一

制作好的導(dǎo)航需要應(yīng)用時，記得將導(dǎo)出的文件需要全部完整拷貝到網(wǎng)頁文件夾對應(yīng)的目錄

【如何用Fireworks cs5制作下拉導(dǎo)航條】相關(guān)文章：

如何用wps表格制作表格02-17