Dreamweaver CS5制作下拉菜单

一 使用一 使用 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 的步骤将鼠标移动到或者