用Dreamweaver做下拉导航菜单.docx

用Dreamweaver做下拉导航菜单.docx

《用Dreamweaver做下拉导航菜单.docx》由会员分享，可在线阅读，更多相关《用Dreamweaver做下拉导航菜单.docx（11页珍藏版）》请在冰豆网上搜索。

用Dreamweaver做下拉导航菜单

用Dreamweaver怎么做下拉导航菜单

具体步骤：

1.按Ctrl+Alt+T插入一个两行三列的表格（图1.3.30）：

图1.3.30【Table】对话框的设置

2.选中表格，在属性面板中设置表格的背景颜色，如图1.3.31所示。

图1.3.31 在属性面板（Propertyes）中设置表格的背景颜色

3.光标定位到第一行第一列的单元格里，然后在属性面板中设置该单元格的颜色为"#CCCCCC"、水平对齐方式为"center"（居中），如图1.3.32所示：

图1.3.32 在属性面板中设置单元格的背景颜色和水平对齐方式

4.同理设置第一行第二、三列的单元格的背景颜色（分别为"#3399FF"和"#FFCC33"）和对齐方式（居中），并在单元格里写上文字完成后如图1.3.33所示：

图1.3.33在单元格中写上文字后的效果（Dreamweaver中）

5.光标定位到第二行第一个单元格里，单击【插入】【布局对象】【apdiv】插入层（图1.3.34）。

图1.3.34 在菜单中插入层

6.选中该层，然后在属性面板中设置层的宽为"100px"，高为"150px"，背景颜色为"#CCCCCC"（跟第一行第一列的单元格背景颜色一致），如图1.3.35所示：

图1.3.35 在属性面板中设置层的尺寸和背景颜色

7.光标定位到层内，按Ctrl+Alt+T插入一个五行一列的表格（图1.3.36）：

图1.3.36在属性面板中设置所插入表格的属性

8.同理在大表格的第二行第二、三列插入层，分别设置层的宽、高、背景颜色并在层中插入表格，完成后如图1.3.37所示：

图1.3.37插入所有作为下拉菜单的层后的效果

界面部分到这里就完成了，现在开始给层和单元格加上动作

10.光标定位到第一行第一列的单元格后，按【窗口】【行为】打开行为面板，单击上面的【+】号按钮，在下拉菜单里选择【显示-隐藏元素】行为，在弹出的【显示-隐藏元素】对话框中作如图1.3.38设置（选中"元素"的第一项，再单击下面的【显示】按钮）。

图1.3.38【显示-隐藏元素】对话框的设置

图1.3.39修改显示层行为的触发事件

单击【OK】按钮后在【行为】面板中检查刚才的行为触发事件是不是"onMouseOver"，如果不是就在下拉选项里选择"onMouseOver"或者直接修改为"onMouseOver"（图1.3.39）。

11.重复第10步的动作，继续给第一行第一列的单元格添加【显示-隐藏元素】行为，不过区别在于本次行为的在【显示-隐藏元素】对话框中的设置为隐藏层，如图1.3.40所示。

图1.3.40在【显示-隐藏元素】对话框中设置隐藏层

行为的触发事件为"onMouseOut"（图1.3.41）。

图1.3.41 修改隐藏层行为的触发事件

第10步和11步的意思是给该单元格加上【显示-隐藏元素】行为，使它在鼠标移上时显示层APdiv1，鼠标移开时隐藏层APdiv1

12.因为在鼠标移上层APdiv1时层APdiv1也要在显示状态，否则无法点击上面的链接，所以层APdiv1也得加上【显示-隐藏元素】行为。

选中层APdiv1，按照第10、11步的做法，给它加上【显示-隐藏元素】行为。

选中层APdiv1，在属性面板中设置它的"Visibility"（可见性）为"hidden"（隐藏），如图1.3.42所示（也可以按快捷键F2，展开【AP元素】面板，在面板上点单击眼睛图标下的项设置层的可见性）。

图1.3.42在属性面板中设置层为隐藏

图1.3.43在【AP元素】面板中设置层为隐藏

完成后在Dreamweaver中的效果如图：

图1.3.44 完成上述步骤后的效果图

13.参照第10~12步的做法，分别给大表格的第一行第二、三列的单元格，第二行第二、三列的层（APdiv2和APdiv3）加上【显示-隐藏元素】行为（注意该行为的操作对象的区别），如图1.3.45~图1.3.48所示。

图1.3.45在【显示-隐藏元素】对话框中设置显示层Layer2

图1.3.46在【Show-Hide Layers】对话框中设置隐藏层APdiv2

图1.3.47在【显示-隐藏元素】对话框中设置显示层APdiv3

图1.3.48在【显示-隐藏元素】对话框中设置隐藏层APdiv3

最后不要忘记把层APdiv2和APdiv3的"Visibility"（可见性）在属性面板中设为"hidden"（隐藏），如图1.3.49、图1.3.50所示。

图1.3.49在属性面板中设置层APdiv2为隐藏

图1.3.50在属性面板中设置层APdiv3为隐藏

14.到这里这个下拉菜单基本上就完成了，如果有兴趣的话还可以自己继续对这个菜单用图片或者CSS美化一下。

注意：

如果发现【显示-隐藏元素】行为为灰白的不可选状态，可以在"Show Events For"子菜单里选择"IE 4.0"以上版本的浏览器。

特别提示

按本例所述步骤完成后，按F12测试，效果如图1.3.51所示。

图1.3.51 用Dreamweaver实现的下拉菜单

特别说明

本例主要是【显示-隐藏元素】行为的应用，其中需要注意的是触发该行为的事件，还有一个简单的技巧是在【ap元素】面板中管理页面中的所有层。