DIV CSS 佈局教程網

　　一般的導航效果大家都很熟悉了，例如用CSS給導航文本設置上、下劃線、背景顏色或位移等。

　　閒來無事，嘗試在dw中實現同樣的導航效果。

　　首先分析效果的組成，鼠標經過時背景發生變化，小圖象轉動。Ok!考慮使用dw中的swap image(翻轉圖)+背景圖象變化(CSS定義)應該可以實現效果。

　　准備4張gif圖象分別為:

　　鼠標經過時的背景圖象(在fw中使用animate可以很簡單的實現漸變效果，本圖象透明度由0%漸變到100%)

　　鼠標劃出時的背景圖象(本圖象透明度由100%漸變到0%)

　　動態小圖象

　　靜止小圖象(在fw中設置圖象格式為gif後保存即可)

　　1.背景效果實現

　　使用CSS定義兩個類:

　　.style1 { background-image: url(bg.gif)}

　　.style2 { background-image: url(b.gif)}

　　分別用於鼠標經過和劃出時的背景圖象

　　然後在單元格中添加如下代碼:

　　onmouseover="this.className='style1'"

　　onmouseout="this.className='style2'"

　　就可以實現鼠標經過時背景漸變出現，移開後背景漸變消失的效果。

　　2.翻轉圖效果實現

　　在單元格中插入靜止小圖象，使用行為添加swap image效果，設置鼠標經過後翻轉為動態小圖象。

　　為更貼近效果，需要把翻轉圖效果應用到單元格上，在靜止小圖象代碼中剪切如下代碼:

　　onMouseOver="MM_swapImage('Image2','','2.GIF',1)"

　　onMouseOut="MM_swapImgRestore()"

　　粘貼到單元格代碼td標簽中。

　　就可以實現鼠標經過單元格時圖象翻轉，產生動態的效果。

　　至此即可實現全部的效果。

　　在這個例子中，使用dw實現的效果幾乎可以與flash制作的效果媲美，甚至更好一點(我們實現了鼠標劃出單元格時背景漸變消失的效果)。

　　小節:

　　1.在fw中精心制作漸變的背景圖象(我只是隨便做了兩個漸變圖象)+對導航單元格修飾可以使效果更加細膩，出色;

　　2.在使用該方法制作導航效果時，需要使用到多個單元格，注意swap效果不能被拷貝，拷貝代碼後需要修改兩處代碼:

　　onMouseOver="MM_swapImage('Image3','','2.GIF',1)"

　　修改翻轉圖的name為不同的值即可。

　　3.這個例子的技術含量並不是很高;而且偶不是很熟悉flash，不知道制作起來用dw或flash哪種更簡單一些，這裡提出來只是給大家提供一種解決問題的方法。

　　4.兩個簡單效果的疊加就可以制作出比較酷的效果，希望對大家能有所啟示

　　補充一點:制作動畫背景圖象時，為實現效果，需要設置gif動畫的循環為no looping(不循環)