商业源码织梦教程 2023-09-23 0:53:02

怎样在Dreamweaver中制作二级联动菜单,数据不多不要用数据库

　　一、打开Dreamweaver，点击文件-新建菜单，创建一个HTML文件，输入网站导航栏文字，并选中输入的文字，在下面的属性栏链接处加一个空链接：#。然后保存该网页文件。

　　二、点击窗口-行为菜单，打开行为面板。

　　三、选中第一步输入的文字，点行为面板上的+号，在弹出的菜单中选-显示弹出式菜单。

　　四、在弹出的对话框中勾选 Don’t show me this message again(不要再次向我提示此信息)，再点继续。

　　五、在下列对话框分别设置内容、外观、高级、位置选项。在内容选项中，点+号可以添加菜单项，-号可以删除菜单项，缩进项可以自动生成二级菜单。

　　六、各项都设置好后，按F12，在浏览器中预览网页效果如下：

　　此时你会发现和网页同级的目录多了两个文件，分别是：arrowsgif、mm_menujs。请勿修改、移动位置，这是弹出式菜单必须的、JS文件。

　　如需修改下拉菜单，可以选中文字，点击行为面板的显示弹出式菜单即可。

　　如果下拉菜单下面有Flash，为了不影响下拉菜单的正常效果和层次，需要给Flash添加透明代码： <param name="WMODE" value="transparent"> ，还需在embed标签中加入代码：wmode="transparent"，

1、首先打开自己想要制作二级菜单的Excel表格，然后选定数据区域，点击公式，选择根据所选内容创建。

2、在跳出来的对话框里，把最左列前面的√取消掉，只勾选首列。

3、接着开始制作一级下拉菜单，先框选左边的数据框，选择数据-数据有效性。

4、然后在跳出来的对话框里，选择“序列”，然后用鼠标点击来源下的输入框，再去框住左边的城市首行，按下确定后就完成了一级下拉菜单了。

5、跟着是二级下拉菜单，同样是先框选数据框，然后选项数据有效性。

6、接着选择“序列”，然后来源不再是框住数据，而是输入函数“=indirect（）”，括号里输入的是右边数据里省份上的字母+左边数据城市第一个序号。

7、操作完上面的步骤，二级下拉菜单就弄好了，所有城市都可以下拉选择。

分类: 电脑/网络 >> 程序设计 >> 其他编程语言

问题描述:

怎样在Dreamweaver中制作二级联动菜单,数据不多我不要用数据库

我想要做的是一个食品选择页面

效果页面是:如果在一个下拉菜单选择了"饮料",在旁边的下拉菜单的内容会变成对应饮料的如"可口可乐","雪碧","娃哈哈"之类的

如果选择了"方便面",旁边的则变为" ","华龙",之类的

其他的就不列举了然后再在旁边有个"提交"按扭,用于发送表单内容

怎样Dreamweaver中在实现麻烦Dreamweaver高手详细的告诉在下,感激不尽!~~~最后是一步一步来,谢谢了

备注:不要构建数据库

解析:

用Dreamweaver制作下拉菜单

Dreamweaver是制作下拉菜单最常用的工具，方法简单，控制自由，可以最大限度地随心打造菜单样式，是制作下拄菜单的必修课。

用Dreamweaver制作下拉菜单的原理很简单，它利用了Behaviors（行为）面板中的内置方法Show-Hide Layers（隐藏-显示层）方法，并用onMouseOver（鼠标移至）和onMouseOut（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就在层中。

因此，我们可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单；接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后，我们进行菜单的美化修饰。最终看到的效果如图。

相信你已经等不急了，那就让我们马上开始吧！

一、导航条的制作

首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。

按CTRL+F2打开Objects面板，点击层按钮后在页面中按住鼠标不放拖出一个层，然后在层的Properties（属性）面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、15，背景色填入#006699，如图。

将光标移至层内，点击Objects面板上的表格按钮，插入一个一行四列的表格，设置如图。

按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用"经典论坛"和"天极网"为例，并加上链接。

二、下拉选单的制作

现在开始制作将要下拉出现的菜单，同样用层来制作。

再次从Objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。

这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为"经典论坛"的下拉选单出现，填入你所需要的菜单链接。同样的方法，再为"天极网"也做一个下拉选单（层menu2）。

这一步要注意的地方就是下拉选单所在的层（menu1、menu2）的位置非常重要（由L和T两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。

按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。

三、显示和隐藏效果的添加

这一步骤是化腐朽为神奇的关键一步，大家仔细跟我来做。

本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。

1．导航条部分

首先按CTRL键不放点击导航条中的第一个单元格，现按Shift+F3打开Behaviors窗口，点按钮，在下拉选项中选中"Show-Hide Layers"（如图）。如果选项中没有这一项，则选择Show Events For下的IE 50后，重新点按钮，此时"Show-Hide Layers"将出现。

这时将会弹出一个窗口，如下图。在Named Layers框中会列出当前网页所有的层，选中" layer "menu1" "，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"show"按钮，OK。

这时会回到Behaviors窗口，窗口中出现如下图所示字样，点击Events下的文字"onClick"，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（Show）。

下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。

再点按钮，在下拉选项中选中"Show-Hide Layers"，在弹出窗口中选中" layer "menu1" "，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"hide"按钮，OK。

回到Behaviors窗口，点击向下的小箭头，在下拉选项中选中onMouseOut。

2．下拉选单部分

先选中层menu1，方法是点击层的边缘或在LAYER面板中点击menu1，用与导航条部分同样的方法在Behaviors窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。最后层menu1的状态如图所示。

3．重复以上两部分，为导航条的第二个主菜单"天极网"和层menu2添加显示、隐藏层命令。

四、下拉菜单的美化修饰

到这里，下拉菜单的功能效果已经实现了，你现在按F12就可以看到。不过你一定也发现菜单有点难看，字不够精细，菜单选项的默认链接色不好看，菜单也没有边框，那就让我们来稍稍为它美容一下。

1．定义菜单字体样式

按Shift+F11打开CSS Style（样式）面板，点击面板下面的按钮

在弹出的"New Style"窗的Tag框内选中td标签，Type选第二项Redefine HTML Tag，Define选This Document Only，如图。

此时弹出设置窗口，不管其它的，只在右边的Size框里选中12，单位为pixels。

2．定义菜单链接样式

在样式面板中，点击面板下面的按钮，在弹出窗中， Type选第三项Use CSS Selector，Tag框内选中a:hover标签，Define选This Document Only，如图。

点击OK后在弹出窗中，Color填#ff9933，Decoration选none，点OK。

返回到样式面板，点击面板下面的按钮，在弹出窗中， Type选第三项Use CSS Selector，Tag框内选中a:link标签，Define选This Document Only。

点击OK后在弹出窗中，Color填#ffffff，Decoration选none，点OK。

又返回到样式面板，点击面板下面的按钮，在弹出窗中， Type选第三项Use CSS Selector，Tag框内选中a:visited标签，Define选This Document Only。

点击OK后在弹出窗中，Color填#ffffff，Decoration选none，点OK。

3．定义菜单边框样式

在样式面板中，点击面板下面的按钮，在弹出窗中， Tag框内选中td标签，Type选第二项Redefine HTML Tag，Define选This Document Only，如图。

弹出设置窗口，在左边的列表中选Border，右边四条边宽度都输入为1，颜色设为黑色#000000，Style选为solid。

到此，我们就大告成功了。赶快用到你的网页上去吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<head>

<title>无标题文档</title>

<style>

sever{ margin-top:4px;}

sever_menu{ width:213px; background:#99ABB9;}

sever_menu a{ display:block; }

sever_menu img{ margin-bottom:-2px;}

help_menu,help_menu_main{ line-height:25px; }

help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}

help_menu a{ background:url(/images/help_arrjpg) no-repeat 43px center;}

#sever_left help_menu:hover a{ color:#fff;}

help_menu hover{ background:url(/images/help_hover_arrjpg) no-repeat 43px center; color:#FFFFFF;}

help_menu_main ul{ text-indent:63px;}

help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}

help_menu_main ul li a{ color:#fff;}

</style>

// JavaScript Document

function setTab(name,cursel,n){

for(i=1;i<=n;i++){

var menu=documentgetElementById(name+i);

var con=documentgetElementById("con_"+name+"_"+i);

menuclassName=i==cursel"hover":"";

constyledisplay=i==cursel"block":"none";

}

//-->

</script>

</head>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服务</a></div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

这个拿去参考一下吧~~

去掉以下多余的代码：

</TD>

</tr>

</table>

</td>

</tr>

</table>

可以参考：http://wwwexp99com/indexhtml，带二级下拉导航（基于bootstrap框架）

用channelartlist标签，循环调取出来所有菜单，用jquery插件实现“鼠标移动到关于我们或点击关于我们时，展示其子菜单"效果。参考http://wwwimooccom/code/443

菜单面板选单按钮常见问题

DABAN RP主题是一个优秀的主题，极致后台体验，无插件，集成会员系统
网站模板库 » 怎样在Dreamweaver中制作二级联动菜单,数据不多不要用数据库

商业源码钻石

分享到：

怎样在Dreamweaver中制作二级联动菜单,数据不多不要用数据库

商业源码钻石

0条评论

发表评论取消回复

商业源码 钻石

相关推荐

0条评论

发表评论 取消回复

提供最优质的资源集合

商业源码钻石

发表评论取消回复