怎样用dreamweaver制作网站下拉菜单

一、使用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创建超链接。如下图所示：

如果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会变为显示状态。

4. 在行为面板中继续点击“十”按钮，在弹出的子菜单中选择“显示-隐藏元素”项，打开“显示-隐藏元素”对话框，如下图所示：

设置“div "apDiv2"”为“隐藏”。

5. 点击“确定”按钮返回到行为面板，将“onFocus”修改为“onMouseOut”，如下图所示：

上面是将鼠标移动到或者移出“网页制作”菜单时，是否显示或隐藏子菜单。下面设置将鼠标移动到或者移出“网页制作”的子菜单时，是否显示或隐藏该子菜单。

6. 选择“apDiv2”，请阅读Dreamweaver CS5激活、选择和删除AP Div。

7. 在行为面板中点击“十”按钮，在弹出的子菜单中选择“显示-隐藏元素”项，如下图所示：

8. 重复“二、2.3.4.5.”的步骤将鼠标移动到或者移出“网页制作”的子菜单时，是否显示或隐藏该子菜单。设置好以后如下图所示：

9. 重复上面的部分，设置“网络编程”的子菜单（div "apDiv3"）是否显示或隐藏。

查看代码效果：Dreamweaver CS5制作下拉菜单示例

本文来源：https://www.bwwdw.com/article/6u14.html