如何用Fireworks cs5製作下拉導航條
很多網頁設計人員經常會用到下拉導航,網上有很多現成的例子,下載即可使用。但是如果想和自己製作的網頁比較兼容,就需要不停的進行修改設置,比較麻煩,那麼有沒有比較方便的方法來實現下拉導航的製作呢?今天我就來分享一下采用FIREWORKS CS5製作下拉導航(菜單)的方法
工具/原料
FIREWOKRS CS5
電腦一台
方法/步驟
1下載安裝FIREWOKRS CS5(我目前電腦上已經安裝)並啟動軟件,建議大家購買正版軟件,此處不做過多説明。
2新建一個寬950像素X35像素,分辨率為72像素的畫布,並且點確定,如下圖二
3選擇矩形工具,在畫布上拖動出一個大小為950X35像素黑白漸變的圖形
4漸變的顏色大家可以根據自己網頁的風格進行調整),單擊屬性面板中的油漆桶工具,調整顏色為紅色漸變,調整完畢,畫布上的矩形圖形的顏色已經發生了變化。
5選擇矢量工具內的文本工具,鍵入導航上需要顯示的文字,為了演示方便,我只打了幾個導航的.文字。
6下邊我們開始正式製作下拉導航,也就是平時常説的下拉菜單。選擇切片工具,一次切好對應的大小
7點擊產品展示這個切片中心位置的圓形圖形,彈出下拉菜單選擇“添加彈出菜單”選項,
8選擇後台在彈出的面板分別添加產品分類1,產品分類2,產品分類3等下拉菜單的文字內容。鏈接和打開窗口大家可以根據自己的需要手動添加即可。
9下拉導航添加完成後,在彈出菜單編輯器面板點擊繼續,分別進行外觀、高級、及位置設置,最後點擊完成。如下圖2所示
10下拉導航的顯示位置需要手動拖動進行簡單的調整,如下圖,用鼠標左鍵選中紅色方框框選的內容,進行左右或者上下拖動,將下拉內容顯示的合適的位置進行顯示,此處需要進行多次調整並通過導出的頁面文件進行測試,直到顯示完美即可。
11回到FW主界面,在畫布外的任意位置,點擊鼠標右鍵,彈出菜單選擇“全選”,全選的目的是為了保證每個切邊的狀態為選中。
12這裏有三種全選的方法,大家可以採取任意一種:
方法1:直接在FW主界面,按下快捷鍵“CTRL+A”進行快速全選(圖示略);
方法2:即上面提到的方法(圖示略);
方法3:在畫布外的任意位置,按下鼠標左鍵不放,拖動選擇,將畫布上的內容可以全部選中,如下圖所示:
13導出選項如下圖1,導出後的文件如下圖2
14雙擊導出的未命名這個文件進行瀏覽,最終效果如下。
注意事項
用FW製作導航時,需要注意導航的風格要與網頁的風格統一
製作好的導航需要應用時,記得將導出的文件需要全部完整拷貝到網頁文件夾對應的目錄
相關文章
-
Fireworks製作下拉菜單參考教程介紹
本教程是關於Fireworks製作下拉菜單教程的講解,該文章共有4個部分,其中包括創建標題、創建切片、加上下拉菜單、子菜單定位相關步驟,以下請看正文:創建標題1,新建一個圖像2, 用矩形工具畫一個長方形3,用文字工具輸入文字創 -
製作網頁時用fireworks如何切圖教程
網頁製作的時候經常會用到切圖,用fireworks切圖就很方便,可以直接導出所有切好的圖片,下面介紹一下fireworks如何切圖:工具/原料fireworks圖片一張方法/步驟1首先打開一張圖片或者網頁設計圖,如下圖所示選擇切片工具,並且把 -
關於哪一種職業加班的情況比較多? What Kind of Jobs use to Work Overtime?英語作文
在日常學習、工作和生活中,説到作文,大家肯定都不陌生吧,作文是經過人的思想考慮和語言組織,通過文字來表達一個主題意義的記敍方法。怎麼寫作文才能避免踩雷呢?以下是小編精心整理的.關於哪一種職業加班的情況比較多? What -
使用Fireworks製作卡通圖案郵票
下面小編為大家介紹利用Fireworks製作卡通圖案郵票方法,教程難度不是很大,很適合新手來學習,推薦到,喜歡的朋友跟着教程來學習吧!製作方法:1.新建文件width=300,height=300,這裏我們把背景色設為金黃色2.在編輯區用矩形工具 -
使用FIreworks製作塗鴉牆的步驟過程
黨員參觀學習活動對我們黨員的發展具有重要的教育意義。使我們對黨員身上的義務與責任有了更充分的理解,更要學習為革命、為祖國、為人民犧牲一切的信念。下面是本站帶來的黨員參觀學習心得體會,僅供參考。黨員參觀學習 -
i recall with embarrassing clarity the flavor of those particular ashes ?
篇一:新的一年即將來臨,XX年不知不覺地過去了。在過去的一年中,沒有一點前展。在即將踏入XX年之際,作為一名車間主任我對我在XX年的工作有必要做一個總結,爭取明年好了點。1:首先在生產上為了加強生產管理,車間制定了詳細的 -
fireworks製作花朵的教程
這次的創作純粹出於偶然。不過驚喜正是在偶然中被發現的。希望學習本教程後,大家能創作出屬於自己的.X-ray花!!!1.1 花的製作1. 新建一個1024×768px的文件,背景顏色為#000000。2. 利用矢量工具裏面的“星形”在畫布上畫出一 -
Fireworks教程:卡通表情製作
人的面部可以表現出成千上萬、不計其數而又十分微妙的表情,而且表情的變化十分迅速、敏捷和細緻,能夠真實、準確地反映情感,傳遞信息。面部所表現出的各種各樣的情感,最能吸引對方的注意。在你未開口之前對方就從你的面部 -
Fireworks製作紅牆磚頭教程
大學生泡MM都喜歡在大街的牆壁或者廣告牌上寫“**我永遠**”的字樣,這樣很不雅觀哦。。要是自己在網上做一個牆壁效果在自己塗鴉上去那我相信MM也會喜歡D~!哈哈`!好了廢話到這裏。咳~!1.先建立一個寬800高310的文件(我 -
fireworks白雲飄逸製作教程
fireworks白雲飄逸製作教程:1、打開一副藍天白雲素材圖片:2、選擇矢量路徑工具:3、設置筆觸為白色,1PX,柔化線段:4、在素材上亂畫一氣:5、選取繪製的線條:6、選擇屬性面板的濾鏡中的模糊??高斯模糊,設置合適的.數值,確定,達