如何有效利用dw制作漂亮的導(dǎo)航欄效果

1、目錄目錄目錄....................................................................................................................................................1增加新框架............................................................

2、............................................................................1如何有效利用dw制作漂亮的導(dǎo)航欄效果.....................................................................................1建立CSS導(dǎo)航代碼..............................

3、...........................................................................................6Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)技巧............................................................................................................7怎樣

4、用Dreamweaver制作導(dǎo)航欄下拉菜單.................................................................................11增加新框架如何有效利用如何有效利用dw制作漂亮的導(dǎo)航欄效果制作漂亮的導(dǎo)航欄效果最近論壇中很多網(wǎng)友問(wèn)到各種菜單和導(dǎo)航的制作方法，下面我們就網(wǎng)上常見的一些菜單和導(dǎo)航效果做簡(jiǎn)單的介紹?？紤]到滿漢全席的菜單應(yīng)該是最全的了，我們就以此為名，來(lái)

5、頓super大餐。Let’sGo！一、進(jìn)門點(diǎn)心：利用DreamweaverMX制作最基本的下拉菜單實(shí)現(xiàn)下拉菜單的思路是首先建立一個(gè)相對(duì)定位的層，調(diào)整其位置，并設(shè)置其顯示屬性為隱藏，然后通過(guò)給鏈接文本或圖象添加onclick（點(diǎn)擊）或者onmouseover（鼠標(biāo)劃過(guò)）的事件來(lái)觸發(fā)“顯示隱藏層”的行為，顯示隱藏的層，并且在鼠標(biāo)劃出層時(shí)隱藏層，實(shí)現(xiàn)下拉菜單的完整效果。下面介紹在Dreamweaver中的具體操作步驟：1使用菜單在頁(yè)面中插入一

6、個(gè)層，這個(gè)層是相對(duì)定位的層，然后再在其中插入一個(gè)子層，因?yàn)樽訉拥奈恢檬窍鄬?duì)于父層而言，所以只要父層的位置不發(fā)生變化，改變子層的位置和大小不會(huì)改變其相對(duì)性，效果如圖1所示。圖片如下：圖1為了父層不占據(jù)頁(yè)面空間，可以設(shè)置其寬和高為0，因?yàn)橐院笠{(diào)整子層的位置，所以先不設(shè)定子層的顯示屬性為隱藏，而是到確定子層到合適位置后再設(shè)置。默認(rèn)狀態(tài)圖片如下：鼠標(biāo)劃過(guò)狀態(tài)圖4下拉菜單效果至此應(yīng)該說(shuō)基本實(shí)現(xiàn)了所要求的下拉菜單的效果，但是當(dāng)把鼠標(biāo)光標(biāo)移動(dòng)到層上

7、，要選擇子菜單時(shí)，層卻消失了。這是因?yàn)椤帮@示隱藏層”的行為是設(shè)置在文本“菜單1”上，鼠標(biāo)劃出文本區(qū)域后，當(dāng)然就響應(yīng)了隱藏層的行為。所以還需要進(jìn)一步的設(shè)置，給子層也加上“顯示隱藏層”行為。利用行為面板，給子層加上“顯示隱藏層”行為，更簡(jiǎn)單的方法是在鏈接文本的HTML代碼中拷貝如下代碼：onMouseOver=“MM_showHideLayers(layer2show)“onMouseOut=“MM_showHideLayers(layer

8、2hide)“在子層的DIV標(biāo)簽內(nèi)粘貼以上代碼即可。按F12在瀏覽器中預(yù)覽，當(dāng)鼠標(biāo)劃過(guò)映射時(shí)彈出下拉菜單，通過(guò)鼠標(biāo)可以在下拉菜單中選擇，鼠標(biāo)劃出映射和下拉菜單區(qū)域時(shí)，下拉菜單消失，完全實(shí)現(xiàn)了預(yù)定的效果。小節(jié)：1導(dǎo)航條的下邊框線與子層的上邊框應(yīng)該重合，否則當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到文本和層之間的空白區(qū)域時(shí)，層就會(huì)隱藏，達(dá)不到應(yīng)有的效果；2對(duì)于有多個(gè)下拉菜單時(shí)，可以將多個(gè)子層放在一個(gè)父層中。為保持位置的統(tǒng)一，在調(diào)整完第一個(gè)子層的位置后，記下層距上和距