一種細膩的導航效果的制作辦法

網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。

    一般的導航效果大家都很熟悉了，例如用CSS給導航文本設置上、下劃線、背景顏色或位移等。前面的帖子中有網友提到http://www.tonta.com.cn/這個網站，偶發現其首頁中的導航效果不錯，雖然flash做的沒有很眩的效果，但是比較細膩，看上去很舒服。
　　閑來無事，嘗試在dw中實現同樣的導航效果。效果如下所示：http://vip.5d.cn/flood/daohang/1.htm。
　　首先分析效果的組成，鼠標經過時背景發生變化，小圖象轉動。Ok！考慮使用dw中的swap image（翻轉圖）+背景圖象變化（CSS定義）應該可以實現效果。
　　準備4張gif圖象分別為：
　　鼠標經過時的背景圖象（在fw中褂胊nimate可以很簡單的實現漸變效果，本圖象透明度由0%漸變到100%）
[img]/conimages/web/2003-06/bg0604.gif[/img]
鼠標劃出時的背景圖象（本圖象透明度由100%漸變到0%）
[img]/conimages/web/2003-06/b0604.gif[/img]
動態小圖象
[img]/conimages/web/2003-06/20604.gif[/img]
靜止小圖象（在fw中設置圖象格式為gif后保存即可）
[img]/conimages/web/2003-06/2a0604.gif[/img]

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)"
<img src="http://www.okasp.com/techinfo/2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">

　　修改翻轉圖的name為不同的值即可。
　　3．這個例子的技術含量并不是很高；而且偶不是很熟悉flash，不知道制作起來用dw或flash哪種更簡單一些，這里提出來只是給大家提供一種解決問題的方法。
　　4．兩個簡單效果的疊加就可以制作出比較酷的效果，希望對大家能有所啟示
補充一點：制作動畫背景圖象時，為實現效果，需要設置gif動畫的循環為no looping（不循環）
:)