怎么用dreamweaver制作下拉菜单
展开全部
DreamWeaver 是用标签行为的功能来制作下拉菜单的。
具体步骤：
在DreamWeaver中绘制层（注意是绘制层，不是插入div）
绘制一个 宽度130px; 高度20px; 的层 在层里插入同样大小的表格
这时DreamWeaver会自动命名ID为 Layer1
在此层下面 紧接着再绘一个宽度一样 高度为100px;的层
DreamWeaver会自动命名ID为 Layer2
同样在层也插入相同大小的表格，插入表格是 让文字分层居中。
选中 Layer2 让它默认是隐藏 （在Layer2左边点一下 让眼睛闭着就是隐藏的意思了）
在网页中选 Layer1 点标签行为面板的+ >>显示-隐藏层 选项
弹出窗口 选中Layer2 点显示 然后确定
在行为里添加onMouseOver（意思是鼠标经过时）
同样的方法 让 Layer2 隐藏
在行为里添加onMouseOut（意思是鼠标离开时）
这样就成功，可是会发现离开总菜单 下拉菜单也消失了，所以
最后还要选中 Layer2 再做一次 Layer2的onMouseOver onMouseOut 行为。
制作出的全部代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:78px;
top:34px;
width:130px;
height:20px;
z-index:1;
}
#Layer2 {
position:absolute;
left:78px;
top:62px;
width:130px;
height:100px;
z-index:2;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="Layer1" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
<table width="130" border="1" cellpadding="2" cellspacing="1">
<tr>
<td align="center">总菜单</td>
</tr>
</table>
</div>
<div id="Layer2" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
<table width="130" border="1" cellpadding="5" cellspacing="1">
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
</table>
</div>
</body>
</html>
具体步骤：
在DreamWeaver中绘制层（注意是绘制层，不是插入div）
绘制一个 宽度130px; 高度20px; 的层 在层里插入同样大小的表格
这时DreamWeaver会自动命名ID为 Layer1
在此层下面 紧接着再绘一个宽度一样 高度为100px;的层
DreamWeaver会自动命名ID为 Layer2
同样在层也插入相同大小的表格，插入表格是 让文字分层居中。
选中 Layer2 让它默认是隐藏 （在Layer2左边点一下 让眼睛闭着就是隐藏的意思了）
在网页中选 Layer1 点标签行为面板的+ >>显示-隐藏层 选项
弹出窗口 选中Layer2 点显示 然后确定
在行为里添加onMouseOver（意思是鼠标经过时）
同样的方法 让 Layer2 隐藏
在行为里添加onMouseOut（意思是鼠标离开时）
这样就成功，可是会发现离开总菜单 下拉菜单也消失了，所以
最后还要选中 Layer2 再做一次 Layer2的onMouseOver onMouseOut 行为。
制作出的全部代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:78px;
top:34px;
width:130px;
height:20px;
z-index:1;
}
#Layer2 {
position:absolute;
left:78px;
top:62px;
width:130px;
height:100px;
z-index:2;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="Layer1" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
<table width="130" border="1" cellpadding="2" cellspacing="1">
<tr>
<td align="center">总菜单</td>
</tr>
</table>
</div>
<div id="Layer2" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
<table width="130" border="1" cellpadding="5" cellspacing="1">
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
</table>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
