Dreamweaver CS5制作下拉菜單

一 使用一 使用 Dreamweaver CS5 制作下拉菜單制作下拉菜單 1 在 插入 面板中點擊 繪制 AP Div 按鈕插入一個 AP Div 請閱讀 Dreamweaver CS5 插入 AP Div 2 選擇剛才插入的 AP Div 請閱讀 Dreamweaver CS5 激活 選擇和刪除 AP Div 3 在 AP Div 屬性面板上 設置 AP Div 的參數 如下圖所示 請閱讀 Dreamweaver CS5 中 AP Div 屬性面板 4 在 AP Div 內單擊 將光標放在 AP Div 內 然后插入一個一行四列的表格 如下 圖所示 請閱讀 Dreamweaver CS5 插入表格 1 按住 Ctrl 鍵的同時點擊表格的四個單元格 設置它們的寬度都為 120 請閱讀 Dreamweaver CS5 改變單元格的高度和寬度 2 在單元格中分別輸入主菜單名稱 然后加上鏈接 請閱讀 Dreamweaver CS5 創(chuàng) 建超鏈接 如下圖所示 如果 AP Div 與表格的設置不一致 可以分別調整 AP Div 或者表格 5 重復 1 2 3 的步驟再次插入一個 AP Div 然后設置 AP Div 的參數 如下圖所示 注意 左 和 上 兩個參數是設置這個 AP Div 距離窗口左邊框和上邊框的距離的 如果填寫的不正確 會導致子菜單的錯位和以后的可用性 6 在 apDiv2 中輸入下拉菜單的內容 在此仍用表格進行排版 如下圖所示 7 為 網絡編程 再制作一個 AP Div 仍然重復 1 2 3 的步驟插入一個 AP Div 然后設 置 AP Div 的參數 如下圖所示 8 在 apDiv3 中輸入下拉菜單的內容 仍然使用表格排版 因為表格排版比較方便 當然也可以使用其它方法 如下圖所示 9 在 窗口 菜單中選擇 AP 元素 命令 打開 AP 元素 面板 如下圖所示 點擊 apDiv2 和 apDiv3 前面的方格 出現了閉著的眼睛圖標 這時 apDiv2 和 apDiv3 被隱藏了起來 當我們打開網頁時 這兩個下拉菜單中隱藏起來的 二 給菜單添加二 給菜單添加 JavaScript 行為行為 1 為 網頁制作 添加 JavaScript 行為 在 窗口 菜單中選擇 行為 命令 打開行為面 板 點擊 網頁制作 所在的標簽 在行為面板中點擊 十 按鈕 在彈出的子菜單中選 擇 顯示 隱藏元素 項 如下圖所示 2 打開 顯示 隱藏元素 對話框 如下圖所示 在 元素 項中設置 div apDiv2 為 顯示 這是 網頁制作 的下拉菜單 3 點擊 確定 按鈕返回到行為面板 將 onClick 修改為 onMouseOver 如下圖所示 onMouseOver 的作用是當鼠標移動到第一個單元格 網頁制作 時 下拉選單 apDiv2 會變?yōu)轱@示狀態(tài) 4 在行為面板中繼續(xù)點擊 十 按鈕 在彈出的子菜單中選擇 顯示 隱藏元素 項 打 開 顯示 隱藏元素 對話框 如下圖所示 設置 div apDiv2 為 隱藏 5 點擊 確定 按鈕返回到行為面板 將 onFocus 修改為 onMouseOut 如下圖所示 上面是將鼠標移動到或者移出 網頁制作 菜單時 是否顯示或隱藏子菜單 下面設置 將鼠標移動到或者移出 網頁制作 的子菜單時 是否顯示或隱藏該子菜單 6 選擇 apDiv2 請閱讀 Dreamweaver CS5 激活 選擇和刪除 AP Div 7 在行為面板中點擊 十 按鈕 在彈出的子菜單中選擇 顯示 隱藏元素 項 如下圖 所示 8 重復 二 2 3 4 5 的步驟將鼠標移動到或者