- 相關(guān)推薦
如何用Fireworks cs5制作下拉導(dǎo)航條
很多網(wǎng)頁設(shè)計(jì)人員經(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新建一個(gè)寬950像素X35像素，分辨率為72像素的畫布，并且點(diǎn)確定，如下圖二
3選擇矩形工具，在畫布上拖動出一個(gè)大小為950X35像素黑白漸變的圖形
4漸變的顏色大家可以根據(jù)自己網(wǎng)頁的風(fēng)格進(jìn)行調(diào)整)，單擊屬性面板中的油漆桶工具，調(diào)整顏色為紅色漸變，調(diào)整完畢，畫布上的矩形圖形的顏色已經(jīng)發(fā)生了變化。
5選擇矢量工具內(nèi)的文本工具，鍵入導(dǎo)航上需要顯示的文字，為了演示方便，我只打了幾個(gè)導(dǎo)航的文字。
6下邊我們開始正式制作下拉導(dǎo)航，也就是平時(shí)常說的下拉菜單。選擇切片工具，一次切好對應(yīng)的大小
7點(diǎn)擊產(chǎn)品展示這個(gè)切片中心位置的圓形圖形，彈出下拉菜單選擇“添加彈出菜單”選項(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)右鍵，彈出菜單選擇“全選”，全選的目的是為了保證每個(gè)切邊的狀態(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這個(gè)文件進(jìn)行瀏覽，最終效果如下。
注意事項(xiàng)
用FW制作導(dǎo)航時(shí)，需要注意導(dǎo)航的風(fēng)格要與網(wǎng)頁的風(fēng)格統(tǒng)一
制作好的導(dǎo)航需要應(yīng)用時(shí)，記得將導(dǎo)出的文件需要全部完整拷貝到網(wǎng)頁文件夾對應(yīng)的目錄
【如何用Fireworks cs5制作下拉導(dǎo)航條】相關(guān)文章：
如何用wps表格制作表格02-17
如何用word制作個(gè)人簡歷07-09
如何用CorelDraw制作一個(gè)精美的書簽08-04
攝影師必看：如何用PS拼合制作全景照片07-09
教你如何用offce制作會計(jì)憑證07-09
如何用麥當(dāng)勞給的郵箱？07-10
小米MIUI V5下拉菜單的開關(guān)設(shè)置07-10
如何用京東白條購物07-11
QQ空間簽到有何用？07-10