- 相關(guān)推薦
如何用Fireworks cs5制作下拉導(dǎo)航條
很多網(wǎng)頁(yè)設(shè)計(jì)人員經(jīng)常會(huì)用到下拉導(dǎo)航，網(wǎng)上有很多現(xiàn)成的例子，下載即可使用。但是如果想和自己制作的網(wǎng)頁(yè)比較兼容，就需要不停的進(jìn)行修改設(shè)置，比較麻煩，那么有沒(méi)有比較方便的方法來(lái)實(shí)現(xiàn)下拉導(dǎo)航的制作呢?今天我就來(lái)分享一下采用FIREWORKS CS5制作下拉導(dǎo)航(菜單)的方法
工具/原料
FIREWOKRS CS5
電腦一臺(tái)
方法/步驟
1下載安裝FIREWOKRS CS5(我目前電腦上已經(jīng)安裝)并啟動(dòng)軟件，建議大家購(gòu)買(mǎi)正版軟件，此處不做過(guò)多說(shuō)明。
2新建一個(gè)寬950像素X35像素，分辨率為72像素的畫(huà)布，并且點(diǎn)確定，如下圖二
3選擇矩形工具，在畫(huà)布上拖動(dòng)出一個(gè)大小為950X35像素黑白漸變的圖形
4漸變的顏色大家可以根據(jù)自己網(wǎng)頁(yè)的風(fēng)格進(jìn)行調(diào)整)，單擊屬性面板中的油漆桶工具，調(diào)整顏色為紅色漸變，調(diào)整完畢，畫(huà)布上的矩形圖形的顏色已經(jīng)發(fā)生了變化。
5選擇矢量工具內(nèi)的文本工具，鍵入導(dǎo)航上需要顯示的文字，為了演示方便，我只打了幾個(gè)導(dǎo)航的文字。
6下邊我們開(kāi)始正式制作下拉導(dǎo)航，也就是平時(shí)常說(shuō)的下拉菜單。選擇切片工具，一次切好對(duì)應(yīng)的大小
7點(diǎn)擊產(chǎn)品展示這個(gè)切片中心位置的圓形圖形，彈出下拉菜單選擇“添加彈出菜單”選項(xiàng)，
8選擇后臺(tái)在彈出的面板分別添加產(chǎn)品分類(lèi)1，產(chǎn)品分類(lèi)2，產(chǎn)品分類(lèi)3等下拉菜單的文字內(nèi)容。鏈接和打開(kāi)窗口大家可以根據(jù)自己的需要手動(dòng)添加即可。
9下拉導(dǎo)航添加完成后，在彈出菜單編輯器面板點(diǎn)擊繼續(xù)，分別進(jìn)行外觀、高級(jí)、及位置設(shè)置，最后點(diǎn)擊完成。如下圖2所示
10下拉導(dǎo)航的顯示位置需要手動(dòng)拖動(dòng)進(jìn)行簡(jiǎn)單的調(diào)整，如下圖，用鼠標(biāo)左鍵選中紅色方框框選的內(nèi)容，進(jìn)行左右或者上下拖動(dòng)，將下拉內(nèi)容顯示的合適的位置進(jìn)行顯示，此處需要進(jìn)行多次調(diào)整并通過(guò)導(dǎo)出的頁(yè)面文件進(jìn)行測(cè)試，直到顯示完美即可。
11回到FW主界面，在畫(huà)布外的任意位置，點(diǎn)擊鼠標(biāo)右鍵，彈出菜單選擇“全選”，全選的目的是為了保證每個(gè)切邊的狀態(tài)為選中。
12這里有三種全選的方法，大家可以采取任意一種：
方法1：直接在FW主界面，按下快捷鍵“CTRL+A”進(jìn)行快速全選(圖示略);
方法2：即上面提到的方法(圖示略);
方法3：在畫(huà)布外的任意位置，按下鼠標(biāo)左鍵不放，拖動(dòng)選擇，將畫(huà)布上的內(nèi)容可以全部選中，如下圖所示：
13導(dǎo)出選項(xiàng)如下圖1，導(dǎo)出后的文件如下圖2
14雙擊導(dǎo)出的未命名1.htm這個(gè)文件進(jìn)行瀏覽，最終效果如下。
注意事項(xiàng)
用FW制作導(dǎo)航時(shí)，需要注意導(dǎo)航的風(fēng)格要與網(wǎng)頁(yè)的風(fēng)格統(tǒng)一
制作好的導(dǎo)航需要應(yīng)用時(shí)，記得將導(dǎo)出的文件需要全部完整拷貝到網(wǎng)頁(yè)文件夾對(duì)應(yīng)的目錄
【如何用Fireworks cs5制作下拉導(dǎo)航條】相關(guān)文章：
如何用wps表格制作表格02-17
如何用CorelDraw制作一個(gè)精美的書(shū)簽08-04
攝影師必看：如何用PS拼合制作全景照片07-09
教你如何用offce制作會(huì)計(jì)憑證07-09
如何用麥當(dāng)勞給的郵箱？07-10
小米MIUI V5下拉菜單的開(kāi)關(guān)設(shè)置07-10
如何用京東白條購(gòu)物07-11
QQ空間簽到有何用？07-10