巧用Dreamweaver MX設計導航欄特效

 　　關於導航欄的設計有很多特效，但你浏覽過這樣一種導航欄特效嗎?當鼠標移到導航欄目上時，導航欄目會被一層“蒙版”所遮蓋，而鼠標移開時“蒙版”也隨之移開。該特效其實可以在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