巧用Dreamweaver MX設計導覽列特效

來源:互聯網
上載者:User

   關於導覽列的設計有很多特效,但你瀏覽過這樣一種導覽列特效嗎?當滑鼠移到導覽列目上時,導覽列目會被一層“蒙版”所遮蓋,而滑鼠移開時“蒙版”也隨之移開。該特效其實可以在Dreamweaver MX中設定兩個CSS屬性分別控制,當滑鼠移到和移開導覽列目時顯示背景圖片,並設定導覽列表格的滑鼠響應事件即能實現。當然背景圖片至關重要,需要一張動態、可長短交替變換的GIF圖片,可以用Fireworks製作該圖片。

  製作背景效果圖

  在Fireworks中建立一個170×17像素、背景為透明的文檔。更改油漆桶填充顏色為淡灰色(#F1F1EF),選取工具列“Rectangle Tool“工具,使用該色將編輯可視區畫一個矩形。再次更改油漆桶填充顏色為黃褐色(#FF9900),以同樣的方法在圖片最左側畫一個小矩形(如圖1)。最後匯出GIF圖片並命名為mouseover.gif,以後用作滑鼠移到導覽列目上時顯示的背景圖片。

  圖1

  在這張做好效果圖基礎上,製作滑鼠移開時的動態GIF效果圖。執行菜單“Windows/Frames”命令開啟幀控制台,點擊四次面板下部“New Frame”按鈕添加四幀,添加這四幀作用是:在每一幀上設定由長到短的淡灰色(#F1F1EF)背景層圖片以實現動態變換效果。選取第一幀圖片中的淡灰色背景層圖片,單擊幀面板右上方三角形按鈕,執行快顯功能表“Copy to Frame”命令,在“Copy to Frames”對話方塊中選擇“All Frames”確認將淡灰色背景層圖片複製到各幀中,當然別忘記也將黃褐色(#FF9900)矩形層圖片也複製到各幀中。選取第一幀圖片,使用滑鼠調整淡灰色背景層圖片大小至編輯可視地區右側1/5處。同理調整2、3、4幀淡灰色背景層圖片逐漸層短至消失於左側黃褐色小矩形中,選取油漆桶填充顏色為深紫色(#003366),填充黃褐色小矩形為該色。為了使效果更加流暢,雙擊幀控制台各幀後時間延遲參數,將其設定為“8”(如圖2)。最後匯出mouseout.gif動畫檔案。

  圖2

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

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