Fireworks 打造滑動菜單

來源:互聯網
上載者:User
菜單

先看下最後效果:

html 效果

1、開啟FW 8.0 (我用的是8.0,當然其它版本也是可以的了)

2、建立一個穩當大小760X400

3、用矩形工具畫一個漸層的矩形,這裡這個矩形是要做為導航條的背景,所以你可以調配自己喜歡的顏色。

4、然後我用直線工具畫了兩條線見下圖,做為分隔線來用。

5、然後按住Shift+G把這兩條線組合成對象,複製這個對象,從視窗對齊面板最後見下圖:

6、呵呵下來這幾部就比較關鍵了,按下快速鍵Ctrl+f8,調出建立元件視窗選擇“按鈕”

如果你看見這個對話方塊那麼你這步是正確的的了。

7、來讓我們在這裡創作按鈕吧!用圓角矩形工具畫下圖,漸層見下圖,邊框為一個像素。

8、然後複製這個圖形去掉邊框,調節大小使按鈕有凸出的感覺

9、現在我們來做下面那個三角形我用的是路徑。

(1)在剛才那個圖形的上面點右鍵選折取消群組

(2)選折鋼筆工具在下面路徑加三個節點見下圖

選擇白箭頭工具,向下拖拉中間的節點成三角型

(3)寫上文字

(4)到這裡其實我們直徑完成了70%的工作量。不急往下看

看見元件編輯區這裡的滑過,按下。。。。。。

分別點擊滑過,按下。。。。

並且每步都要選者複製彈起時的圖形,這個在什麼地方見下圖:

如果還找不到的話,你就睜大眼睛使勁找了!

(5)這裡先不急著點完成,而是先回到釋放狀態下把按鈕的背景圖形刪除,不要把文字也刪了啊!

(6)點完成

10、呵呵現在我們又回到情境下,按F11開啟庫面板拖出按鈕從庫裡

11、你可以根據你要做的數目拖出你需要的按鈕數

12、分別選擇按鈕,在屬性欄輸入不同的文字

13。調節好按鈕之間的距離

14。選擇“檔案”---》“匯出”

這裡一定要選擇“將映像防入字檔案夾",要不你的圖片就到出是了。

好了用瀏覽器看下是不是可以了,當然你還可以倒到DW處理下代碼,我這裡就不多說了。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。