1、用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.同理设置第一行第二、三列的单元格的背景颜
2、色(分别为#3399FF和#FFCC33)和对齐方式(居中),并在单元格里写上文字完成后如图1.3.33所示: 图1.3.33在单元格中写上文字后的效果(Dreamweaver中) 5.光标定位到第二行第一个单元格里,单击【插入】【布局对象】【ap div】插入层(图1.3.34)。 图1.3.34在菜单中插入层 6.选中该层,然后在属性面板中设置层的宽为100px,高为150px,背景颜色为#CCCCCC(跟第一行第一列的单元格背景颜色一致),如图1.3.35所示: 图1.3.35在属性面板中设置层的尺寸和背景颜色 7.光标定位到层内,按Ctrl+Alt+T插入一个五行一列的表格(图1.3.
3、36): 图1.3.36在属性面板中设置所插入表格的属性 8.同理在大表格的第二行第二、三列插入层,分别设置层的宽、高、背景颜色并在层中插入表格,完成后如图1.3.37所示: 图1.3.37插入所有作为下拉菜单的层后的效果 界面部分到这里就完成了,现在开始给层和单元格加上动作 10.光标定位到第一行第一列的单元格后,按【窗口】【行为】打开行为面板,单击上面的【+】号按钮,在下拉菜单里选择【显示-隐藏元素】行为,在弹出的【显示-隐藏元素】对话框中作如图1.3.38设置(选中元素的第一项,再单击下面的【显示】按钮)。 图1.3.38【显示-隐藏元素】对话框的设置 图1.3.39修改显示层行为的触发
4、事件 单击【OK】按钮后在【行为】面板中检查刚才的行为触发事件是不是onMouseOver,如果不是就在下拉选项里选择onMouseOver或者直接修改为onMouseOver(图1.3.39)。 11.重复第10步的动作,继续给第一行第一列的单元格添加【显示-隐藏元素】行为,不过区别在于本次行为的在【显示-隐藏元素】对话框中的设置为隐藏层,如图1.3.40所示。 图1.3.40在【显示-隐藏元素】对话框中设置隐藏层 行为的触发事件为onMouseOut(图1.3.41)。 图1.3.41修改隐藏层行为的触发事件 第10步和11步的意思是给该单元格加上【显示-隐藏元素】行为,使它在鼠标移上时显
5、示层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中的效果
6、如图: 图1.3.44完成上述步骤后的效果图 13.参照第1012步的做法,分别给大表格的第一行第二、三列的单元格,第二行第二、三列的层(APdiv2和APdiv3)加上【显示-隐藏元素】行为(注意该行为的操作对象的区别),如图1.3.45图1.3.48所示。 图1.3.45在【显示-隐藏元素】对话框中设置显示层Layer2 图1.3.46在【Show-HideLayers】对话框中设置隐藏层APdiv2 图1.3.47在【显示-隐藏元素】对话框中设置显示层APdiv3 图1.3.48在【显示-隐藏元素】对话框中设置隐藏层APdiv3 最后不要忘记把层APdiv2和APdiv3的Visibil
7、ity(可见性)在属性面板中设为hidden(隐藏),如图1.3.49、图1.3.50所示。 图1.3.49在属性面板中设置层APdiv2为隐藏 图1.3.50在属性面板中设置层APdiv3为隐藏 14.到这里这个下拉菜单基本上就完成了,如果有兴趣的话还可以自己继续对这个菜单用图片或者CSS美化一下。 注意:如果发现【显示-隐藏元素】行为为灰白的不可选状态,可以在ShowEventsFor子菜单里选择IE4.0以上版本的浏览器。 特别提示 按本例所述步骤完成后,按F12测试,效果如图1.3.51所示。 图1.3.51用Dreamweaver实现的下拉菜单 特别说明本例主要是【显示-隐藏元素】行为的应用,其中需要注意的是触发该行为的事件,还有一个简单的技巧是在【ap元素】面板中管理页面中的所有层。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1