如何有效利用dw制作漂亮的導航欄效果

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

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

3、...........................................................................................6Dreamweaver網(wǎng)頁設計技巧............................................................................................................7怎樣

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

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

6、個層，這個層是相對定位的層，然后再在其中插入一個子層，因為子層的位置是相對于父層而言，所以只要父層的位置不發(fā)生變化，改變子層的位置和大小不會改變其相對性，效果如圖1所示。圖片如下：圖1為了父層不占據(jù)頁面空間，可以設置其寬和高為0，因為以后要調(diào)整子層的位置，所以先不設定子層的顯示屬性為隱藏，而是到確定子層到合適位置后再設置。默認狀態(tài)圖片如下：鼠標劃過狀態(tài)圖4下拉菜單效果至此應該說基本實現(xiàn)了所要求的下拉菜單的效果，但是當把鼠標光標移動到層上

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

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