Dreamweaver CS5制作下拉菜单

一、使用Dreamweaver CS5制作下拉菜单1. 在“插入”面板中点击“绘制 AP Div”按钮插入一个AP Div请阅读Dreamweaver CS5插入AP Div2. 选择刚才插入的AP Div请阅读Dreamweaver CS5激活、选择和删除AP Div3. 在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 Div7. 在行为面板中点击“十”按钮，在弹出的子菜单中选择“显示-隐藏元素”项，如下图所示：8. 重复“二、2.3.4.5.”的步骤将鼠标移动到或者移出“网页制作”的子菜单时，是否显示或隐藏该子菜单设置好以后如下图所示：9. 重复上面的部分，设置“网络编程”的子菜单（div "apDiv3"）是否显示或隐藏。