Dreamweaver CS5制作下拉菜單

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