Fireworks輕鬆打造下拉導航條

來源:互聯網
上載者:User
導航|下拉

  Fireworks MX 2004 中的新增功能可以協助我們非常方便地在網站上添加圖形和互動元素。對於對不太熟悉和瞭解代碼編寫或JavaScript的新手來說,Fireworks MX 2004 可以最大限度地提高工作效率。

  今天我們用Fireworks MX 2004來設計一個很酷的彈出式下拉式功能表,不需要掌握javascript程式設計語言,你只需要按照我給你的步驟做下去,你就可以隨心所欲地製作自己的彈出式下拉式功能表了。文章末尾提供原檔案供大家下載參考。

  完成頁面如下:(將滑鼠移動到灰色按鈕上即可出現下級菜單)

  步驟1:設計製作表徵圖按鈕

  運行Fireworks MX 2004,建立一個776*80的編輯區,設定背景顏色為#737e90,我們的目的是把這個編輯區打造成一個包含Javascript的下拉式功能表導航條。在編輯區利用工具向量區的矩形工具畫好按鈕的初始圖形,編輯重點在按鈕的視覺效果。我們首先用矩形工具畫6個80*22的矩形,矩形邊框顏色設定為透明,矩形背景顏色為#515764,然後選中所有的矩形,再在屬性視窗中設定矩形圓度為60,如圖:

  為了達到很好的視覺效果,需要對按鈕進行加工,還是在屬性視窗中,在“效果”彈出列表中選擇“斜角和浮雕”,在“斜角和浮雕”彈出列表中選擇“凸起浮雕”,設定參數如下圖:

  你可以更改參數設定,達到你想要的效果,當然,你還可以選擇其它的效果如“凹入浮雕”等等,可以進行不同風格的嘗試。

  重複地對每一個矩形進行如上操作,設定好後將它們一字排開,間距為1,底線與編輯區底線重合。利用矩形工具再畫一個背景顏色與上面六個矩形背景一樣的矩形,長度與高度分別為485和10,將這個矩形拖到上面六個矩形的前面,底線與編輯區底線重合(這個矩形的作用在於遮擋上面六個矩形之間的間隙,形成一個倒弓狀的按鈕排列陣),效果視圖如下:

  OK,基本工作已經完成,接下來編輯按鈕上的文字。

  一般認為,按鈕上的文字最好是在網頁中編輯,這樣以便靈活地更換連結名稱,但如果您所要做的連結名稱已經定了下來,也不妨把這些連結名稱直接做成圖片,下面我們來進行操作。

  滑鼠選取文本工具,在第一個按鈕前定位並輸入“設計線上”四個字,設定字型為仿宋,字型大小為12,字型顏色為白色,如果你覺得色彩不夠鮮豔你可以選擇其它的顏色,或者選中剛才輸入的文本,在屬性視窗中的“效果”列表框中將其銳利化。分別對其他按鈕進行如上操作,得到如下視圖:

  接下來的操作就是要對編輯區進行切割使之形成熱點區,在工具的web欄中選擇“切片”工具,對每一個按鈕進行切割,其餘部分不用管它,切割時以按鈕的邊線為切割線,切割好後,整個編輯區形成9塊,如圖所示:


(圖片較大,請拉動捲軸觀看)  步驟2:在切片上添加彈出式下拉式功能表

  對於第一個按鈕“設計線上”,滑鼠右鍵單擊按鈕上的切片,選擇“添加快顯功能表”,彈出一個視窗如圖:

  這是一個快顯功能表編輯器,可以對彈出的菜單進行內容、外觀、進階和位置四個選項的設定。

  首先進行內容的編輯,單擊“+”號按鈕,添加一個串連內容,在文字欄位中輸入“網頁陶吧”四個字,在連結欄位中輸入你要連結的網頁名稱,如web.html,在目標欄位中選擇web.html頁面的顯示目標,有_self、_blank、_father等選項,分別代表在原視窗中顯示、在建立視窗中顯示和在父視窗中顯示,讀者可以根據自己的需要進行選擇。接下來要進行外觀的設定,在外觀設定視窗中可以對連結進行連結樣式(有html格式和映像格式兩種選擇)設定,菜單樣式(有垂直菜單和水平菜單兩種選擇)設定,連結文字的字型、大小、顏色等進行設定,以及儲存格的邊框、背景、滑鼠滑過時的背景等選項進行設定。這裡不妨選擇html格式的連結樣式和水平菜單的菜單樣式,選擇宋體字型、置中對齊,然後對彈起狀態和滑過狀態的文本顏色和儲存格顏色進行分別設定,彈起狀態文本顏色設為#CCCCCC,滑過狀態時文本顏色為#FFFFFF白色,彈起狀態儲存格背景顏色為#737E90,滑過狀態時背景色為#464F5B。外觀設定好後接下來對外觀進行進階設定,參數視窗如圖:

  選擇儲存格寬度為65像素,高度為20像素,但與各邊框、文字縮排和儲存格間距都為0,邊框寬度為1,邊框顏色為白色,陰影和高亮都選擇深色,效果如上圖。接下來要進行位置的設定,單擊位置設定第二個按鈕,將快顯功能表設定在底部,其中有位置的數字定位,在這種情況下X=0,Y=25,讀者可根據按鈕的高度設定Y值,使之達到最佳效果。另外,讀者可以根據自己的愛好設定菜單的外觀,包括菜單上的字型、大小、顏色和對齊,也可以設定儲存格邊框以及背景的屬性以及滑鼠滑過時的字型顏色和儲存格背景等屬性。除此之外,讀者還可以嘗試換一種連結樣式和菜單樣式進行設計,如果你選則的是映像樣式的連結樣式,你可以根據自己的喜好選擇Fireworks內建的多種按鈕作為背景,而且你還可以改變菜單樣式為垂直樣式,以達到你的要求。

  如此進行上面的步驟,可以分別製作各個按鈕的下拉快顯功能表。在這個步驟中,你不需要重新設定菜單的外觀、進階和位置等屬性,Fireworks MX 2004已經把你製作第一個按鈕的快顯功能表的樣式記憶了下來,你只需要經過簡單的操作便可以完成設計。

  把所有按鈕的下拉式功能表製作好後你的工作便完成了90%,最後的工作便是匯出你的作品。

  進入檔案-〉匯出嚮導,選中匯出格式選項按鈕,進入下一步,選中網站選項按鈕單擊繼續按鈕,得到分析結果,直接單擊退出,系統會告訴你切片將被忽略,此時你需要關閉“匯出嚮導”視窗,直接按右鍵任意一個切片,選擇匯出所選切片如圖:

  彈出匯出視窗,檔案類型選項選擇“HTML和映像”,選中“將映像放入子檔案夾”複選框,這個子檔案夾你可以瀏覽並選擇或者建立,輸入匯出檔案的名稱如:Myfirst,單擊儲存按鈕,一切OK

  到此為止,彈出式下拉式功能表的製作宣告完成,趕快去體驗一下效果吧,開啟資源管理員,瀏覽你剛才儲存檔案的檔案夾,你會發現一個js檔案,這個js檔案就是你剛才匯出檔案時自動產生的javascript指令檔,不能把它搞丟了。單擊名為Myfirst的網頁檔案,把滑鼠放到任何一個按鈕上,怎麼樣,效果是不是很棒?!原檔案下載

  完成頁面如下:(將滑鼠移動到灰色按鈕上即可出現下級菜單)



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。