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

一、使用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制作下拉菜单示例