怎样用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制作下拉菜单示例。