<b>一种精致的导航效果的制作办法</b>[DW设计]

    普通的导航效果大家都很熟习了,比方用CSS给导航文本设置上、下划线、后台颜色或位移等.前面的帖子中有网友提到http://www.tonta.com.cn/这个,偶发现其首页中的导航效果不错,固然做的没有很眩的效果,但是对比精致,看上去很舒服.
　　闲来无事,尝试在dw中实现一样的导航效果.效果以下所示:http://vip.5d.cn/flood/daohang/1.htm.
　　首先解析效果的构成,鼠标经过期后台发生改变,小图象转动.Ok!考虑利用dw中的swap image（翻转图）+后台图象改变（CSS定义）应当可以实现效果.
　　预备4张gif图象辨别为:
　　鼠标经过期的后台图象（在fw中褂胊nimate可以很简单的实现突变效果,本图象透明度由0%突变到100%）

鼠标划出时的后台图象（本图象透明度由100%突变到0%）

动态小图象

静止小图象（在fw中设置图象格局为gif后保存便可）
 

1．后台效果实现
　　利用CSS定义两个类:

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

　　辨别用于鼠标经过和划出时的后台图象
　　然后在单元格中增添以下代码:

　　便可以实现鼠标经过期后台突变呈现,移开后后台突变消逝的效果.
　　2．翻转图效果实现
　　在单元格中插入静止小图象,利用行为增添swap image效果,设置鼠标经过后翻转为动态小图象.
　　为更切近效果,需求把翻转图效果利用到单元格上,在静止小图象代码中剪切以下代码:

　　粘贴到单元格代码td标签中.
　　便可以实现鼠标经过单元格时图象翻转,产活泼态的效果.
　　至此便可实现全部的效果.
　　在这个例子中,利用dw实现的效果几近可以与制作的效果媲美,乃至更好一点（我们实现了鼠标划出单元格时后台突变消逝的效果）.
　　小节:
　　1．在fw中尽心制作突变的后台图象（我只是随便做了两个突变图象）+对导航单元格修饰可以使效果越发精致,超卓;
　　2．在利用该办法制作导航效果时,需求利用到多个单元格,注意swap效果不能被拷贝,拷贝代码后需求改正两处代码:

<img src="/images/NullPic.gif" name="Image3" width="15" height="15" border="0" id="Image3">

　　改正翻转图的name为差别的值便可.
　　3．这个例子的技术含量并非很高;并且偶不是很熟习,不知道制作起来用dw或哪类更简单一些,这里提出来只是给大家供应一种办理问题的办法.
　　4．两个简单效果的叠加便可以制作出对比酷的效果,但愿对大家能有所启迪
增补一点:制作动画后台图象时,为实现效果,需求设置gif动画的循环为no looping（不循环）
:)