相信你已经等不急了，那就让我们马上开始吧！
一、导航条的制作
首先进行一些必要的前期工作，按CTRL+J，打开PageProperties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。
按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用"经典论坛"和"天极网"为例，并加上链接。
二、下拉选单的制作
现在开始制作将要下拉出现的菜单，同样用层来制作。再次从Objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：LayerID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。
这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为"经典论坛"的下拉选单出现，填入你所需要的菜单链接。同样的方法，再为"天极网"也做一个下拉选单（层menu2）。
这一步要注意的地方就是下拉选单所在的层（menu1、menu2）的位置非常重要（由L和T两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。
三、显示和隐藏效果的添加
这一步骤是化腐朽为神奇的关键一步，大家仔细跟我来做。本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。
这时将会弹出一个窗口，如下图。在NamedLayers框中会列出当前网页所有的层，选中"layer"menu1""，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"show"按钮，OK。
这时会回到Behaviors窗口，窗口中出现如下图所示字样，点击Events下的文字"onClick"，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（Show）。
回到Behaviors窗口，点击向下的小箭头，在下拉选项中选中onMouseOut。
2．下拉选单部分先选中层menu1，方法是点击层的边缘或在LAYER面板中点击menu1，用与导航条部分同样的方法在Behaviors窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。最后层menu1的状态如图所示。
3．重复以上两部分，为导航条的第二个主菜单"天极网"和层menu2添加显示、隐藏层命令。
四、下拉菜单的美化修饰
此时弹出设置窗口，不管其它的，只在右边的Size框里选中12，单位为pixels。
2．定义菜单链接样式在样式面板中，点击面板下面的按钮，在弹出窗中，Type选第三项UseCSSSelector，Tag框内选中a:hover标签，Define选ThisDocumentOnly，如图。
点击OK后在弹出窗中，Color填#ff9933，Decoration选none，点OK。
3．定义菜单边框样式在样式面板中，点击面板下面的按钮，在弹出窗中，Tag框内选中td标签，Type选第二项RedefineHTMLTag，Define选ThisDocumentOnly，如图。
弹出设置窗口，在左边的列表中选Border，右边四条边宽度都输入为1，颜色设为黑色#000000，Style选为solid。
到此，我们就大告成功了。赶快用到你的网页上去吧。
下一篇我们将讲如何用Fireworks来制作下拉菜单。
■Fireworks4/Dreamweaver4双剑合壁造弹出菜单作者：POPOEVER
与图形设计制作软件的龙头老大-Adobe公司的Photoshop相比，Macromedia公司的Fireworks4(以下简称FW4)可谓短小精悍，同时，她对于网页图形制作的强大支持，也使其轻松获取了大批网页设计师的信任和追随。配合Macromedia网页制作三剑客中的另一位大名鼎鼎的剑客Dreamweaver4(以下简称DW4)，FW4可以轻而易举地做出时下网页中甚为流行的弹出菜单(亦称下拉菜单)。如果你对DHTML网页编程不甚熟悉，看到代码就头疼，不如跟随笔者一起亲身体验FW4的魅力所在吧！
一、在FW4中制作菜单1．制作母菜单按钮打开FW4，选择File菜单下的New，或者按Ctrl+N快捷键，如图一新建一个文件，尺寸200X30像素，精度72像素/英寸，背景透明。
选择Window菜单下的Tools打开工具面板，从工具面板上选择矩形工具，
画一个100X30像素大小的矩形，选择Window菜单下的Info打开信息面板，直接输入数值精确调整尺寸和位置；
选中这个矩形，Ctrl+C复制，Ctrl+V原地粘贴，这时候两个矩形重叠，将上面这个矩形拖到旁边，同样使用信息面板定位；
然后分别选中这两个矩形，调整它们的填充色和边框色，方法有两种，一是利用工具面板上的Color工具区里的Stroke和Fill按钮，
二是选择Window菜单下的Stroke和Fill分别打开线型面板和填充面板，在面板上选择，注意的是线型要选"Pencilà1-PixelHard"或"BasicàHardLine"(如图)，
这样输出后才能做出细边框效果；从工具面板上选择文字工具，输入文字，注意选择文字的平滑度为NoAnti-Alias（关闭反锯齿，如图），
然后同时选中文字和其中一个矩形，从Modify菜单下的Align中分别选择CenterVertical和CenterHorizontal来对齐文字和矩形，效果如图所示。
2．制作弹出菜单条目同时选中对齐后的文字和矩形，选择Insert菜单下的ConverttoSymbol，或在矩形上点鼠标右键，在右键菜单里选ConverttoSymbol，或者按F8快捷键，在弹出对话框里的Type中选Button(按钮)，将这个矩形转换成一个按钮对象，
这时，将鼠标移到按钮对象中间的圆形标志上鼠标会变成手形，单击圆形标志，在弹出菜单中选择AddPop_upMenu…，
然后就可以在弹出的SetPop-UpMenu设置窗中设置你的弹出菜单了。如下图，笔者已经设置了一些菜单条目。
大家可以在Text中设置条目的文字名称，在Link中设置条目的链接路径，在Target中设置打开链接的目标窗口，设置完后点一下"+"按钮就可以生成一个菜单条目了；如果想删掉，点中条目，再点"-"按钮就可以删除条目；如果想修改条目设置，只需点中条目，修改各项设置后点Change按钮即可。FW4的弹出菜单是可以做多级子菜单的，只要在根菜单条目下方建立子菜单条目，然后点中子菜单条目，再点窗口上方那两个蓝色图标按钮中的右边一个IndentMenu（菜单缩进，即设为子菜单）就可以了，反之，点左边那个OutdentMenu（菜单伸出，即设为根菜单）就可以将当前的子菜单设置成上一级根菜单。大家可能发现改变菜单条目的顺序好象不方便，其实很简单，只要点住条目并拖拉到你想要的位置就可以了。设置完菜单条目后，点Next进入菜单样式设置窗。3．设置弹出菜单条目样式值得一提的是，菜单样式的设置可以分成两种类型，
5．调整母菜单按钮与弹出菜单样式一致有的朋友说，既然弹出菜单已经有样式了，那么母菜单怎么办？其实笔者早已想到，所以刚开始把母菜单做成了按钮对象，双击母菜单按钮对象，打开按钮对象编辑窗，自己动手改按钮的各个状态吧，这属于FW4的基本操作，笔者这里就不罗嗦了。
6．输出弹出菜单刚才一直跟着做一定很累，所以另外还有一个矩形就留给大家自己练习一下。完成后可以选择File菜单下的ExportPreview，或者按Ctrl+Shift+X快捷键打开输出设置窗口。如图十七所示，在Option标签页下方的透底选项中选择AlphaTransparency，Matte（基底色）中选择你实际网页使用的背景色，这样菜单就可以和你的网页天衣无缝地融为一体。
点Export按钮，如图十八，自己设置输出路径和文件名，并选择保存类型为HTMLandImages，HTML选项中选ExportHTMLFile，Slices选项中选ExportSlices，最后点保存按钮，弹出菜单就输出完成了。
现在你可以打开你输出的HTML文件看看你的工作成果了。关掉FW4吧，下面没它的事儿了。
二、在DW4中设置弹出菜单1．将弹出菜单导入DW4打开DW4，新建或打开一个站点（Site），在站点中新建一个HTML文件，存盘，然后选择Insert菜单下的InteractiveImages中的FireworksHTML，或者选择Window菜单下的Objects或按Ctrl+F2快捷键打开Objects（对象）面板，从面板上的Common类中选择那个Fireworks的图标（如图十九），
在弹出的对话窗中点Browser按钮，选择你刚才FW4中输出的HTML文件，点OK按钮，刚才做好的弹出菜单就导进来了。如果你的FW4弹出菜单输出文件没有在当前的站点中，那么DW4还会问你是否要将这些文件复制到站点中来，一定要选OK，并且最好单独为这些文件在站点中建一个文件夹。现在可以按F12预览一下效果了，是不是不像想象中的那么cool？弹出菜单好象边框很粗！因为当前使用的是默认的样式。没关系，接下来就来动点小手术！2．在DW4中重新设置菜单样式如图可以看到刚才复制到站点中来的FW4弹出菜单文件中有这样一个文件--fw_menu.js，
由于篇幅限制，笔者在这里就不赘述了，先给出一个修改其中一些参数的样例，余下的大家可以自行测试：this.bgColor="#000000";this.menuBorder=1;this.menuItemBorder=1;this.menuItemBgColor=bg||"#cccccc";this.menuLiteBgColor="#000000";this.menuBorderBgColor="";this.menuHiliteBgColor=bgh||"#000084";this.menuContainerBgColor="#cccccc";this.childMenuIcon="arrows.gif";存盘，回到菜单的HTML文件，F12预览，菜单样式已经发生了变化，菜单边框变细致了，是不是很cool啊！
好了，写到这里写意正浓，但不得不罢笔，免得小编骂我骗稿费，有什么不清楚的大家可以给电脑报的栏目编辑去e-mail询问。下一篇我们将讲如何用Flash来制作下拉菜单。
on的语法是：on(mouseevent){statement;}statement:鼠标事件发生时执行的代码mouseevent是鼠标事件，包括有：press:鼠标指针在按钮上并单击release:鼠标指针在按钮上被释放releaseoutside:鼠标指针在按钮外被释放rollover:鼠标指针移进按钮区域内rollout:鼠标指针移出按钮区域内dragover:鼠标指针在按钮上被按下，移出按钮再移回keypress:鼠标指针在按钮上，然后鼠标按下，再移出按钮区域为了便于阅读，我们将类似"点击windows菜单，在弹出的下拉菜单中点击panels，在弹出的panels子菜单中单击align选项"这样的动作定义为windows----panels---align。打开你的flash,新建一个文件宽300，高200，（如图）。
Insert---newsymbol新建一个元件，类型为"button",命名为"主按钮"，在工具栏上选择rectangletool，设置strokecolor为黑色，fillcolor为深蓝色，画一个矩形，edit---selectall，modify---group,将所有的线条与色块群组起来。windows---panels---info,在弹出的info面板中调整这个矩形的大小，宽为140，高为27。Windows---panels---align，在align面板上设置居中对齐，使此矩形恰好位于舞台正中央。选择texttool,输入文字"蓝色理想"，windows---panels---character,在这里可以调整文字的大小，字体，颜色等。将调整好的文字放在矩形中央。你还可以给按钮加上箭头用以修饰，在此不在赘述。
鼠标右键单击over帧选择insertkeyframe新建关键帧。点选矩形，modify---ungroup解散群组，点选蓝色色块，改变填充色为橘黄。
Insert---newsymbol新建一个元件，类型为"button",命名为"菜单"，在工具栏上选择rectangletool，设置strokecolor为none填充色为浅黄色，画一个矩形，edit---selectall，modify---group,将所有的线条与色块群组起来。windows---panels---info,在弹出的info面板中调整这个矩形的大小，宽为110高为27。输入文字"内容一"。
调整文字大小后将文字放置在矩形中央，鼠标右键单击over帧选择insertkeyframe新建关键帧。点选矩形，modify---ungroup解散群组，点选浅黄色块，改变填充色为橘黄。
鼠标右键单击down帧选择insertkeyframe新建关键帧。点选橘黄色块，改变填充色为红色。
Windows---library,在library中右键单击菜单元件，选择duplicate,复制出元件：菜单copy,右键单击"菜单copy"元件，选择rename,将其改名为"菜单2"，并重复以上操作，复制出"菜单3"，"菜单4"。在library中双击"菜单2"元件，进入编辑状态。分别在up,over,down帧中双击文字"内容一"改为"内容二"。重复如上操作，分别将"菜单3"、"菜单4"中的文字改为"内容三"，"内容四"。Insert---newsymbol新建一个元件，类型为"button",命名为"大按钮"，鼠标右键单击hit帧，insertkeyframe新建关键帧。选择rectangletool画一矩形，不用去管它的填充色，因为在hit帧中的内容是不会显现在发布后的动画中的，也就是说它们是透明的。windows---panels---info，在info面板中设置矩型宽为300，高为200。
（注意：此处就是我们常说的隐形按钮的制作方法，你可试着将此按钮拖拽到scene中，并ctrl+enter进行预览，就会发现虽然我们看不到这个按钮，但到鼠标移动到此按钮的区域内时却会有反应。这种技巧有着极广泛的应用，希望大家好好掌握。）
Insert---newsymbol新建一个元件，类型为"movieclip"命名为"背景"。用rectangletool画一矩形，设置strokecolor为黑色，fillcolor为黄色。在info面板设置宽为120高为120。再用rectangletool画一矩形，设置strokecolor为none，fillcolor为黑色。在info面板设置宽为120高为20。并使其与前一个矩形顶部对齐，输入文字："欢迎光临'蓝色理想'"，在character面板调整大小，颜色后放置在黑色矩形中央。
Insert---newsymbol新建一个元件，类型为"movieclip"命名为"默认内容"。从library中拖拽"背景"元件到layer1,并在第2，3，4，5帧建立关键帧。双击第一帧，在弹出的frameactions面板中选择stop();同样在第2,3,4,5帧上加入actionscript:"stop();"
回到第一帧，输入文字："首页"，在character面板调整颜色与大小后将其如图放置。
分别在第2，3，4，5帧输入文字"内容一"，"内容二"，"内容三"，"内容四"，调整好位置与大小。（位置、大小应参照第一帧文字）单击第2帧，windows---panels---frame,在弹出的frame面板上设定此帧的帧标签（即framelable）为1。同样将第3，4，5帧的帧标签依次设为2，3，4。
Insert---newsymbol新建一个元件，类型为"movieclip"命名为"按钮组"。从library中拖拽"主按钮"元件到layer1，调整它的位置使其最右端与舞台中心点对齐，中心轴与舞台中心轴重合，
在第二帧新建关键帧并且在这两帧上都加上stop();的actionscript。回到第一帧，右键单击"主按钮"元件，在弹出菜单中选择actions，
输入如下as:on(rollOver){gotoAndStop(2);}///当鼠标移动到按钮上时开始播放第二帧从library中拖拽"菜单"、"菜单2"、"菜单3"、"菜单4"元件到layer2，并如图排列
选中"菜单"元件，windows---panels---instance,在instance面板上的options下拉菜单中选择trackasbutton,用同样的方法设置"菜单2"、"菜单3"、"菜单4"元件。右键单击"菜单"元件，在弹出菜单中选择actions，输入如下as:on(release){tellTarget("_root.info"){gotoAndStop("1");}}///当鼠标按下时，name属性为info的mc跳转并停止在framelable为1的那一帧
用相同的方法依次在"菜单2"、"菜单3"、"菜单4"元件上输入如下as:菜单2on(release){tellTarget("_root.info"){gotoAndStop("2);}}菜单3on(release){tellTarget("_root.info"){gotoAndStop("3);}}
菜单4on(release){tellTarget("_root.info"){gotoAndStop("4);}}
insert---layer新建一层layer2，并使layer2的位置位于layer1之下，你可以用鼠标拖拽layer来完成这次操作。在第二帧新建关键帧，从library中拖拽"大按钮"元件到layer2,调整位置使其居中。右键单击"菜单大按钮"元件，在弹出菜单中选择actions，输入如下as:on(rollOver){gotoAndStop(1);}///当鼠标移动到按钮上时，跳转并停止在第一帧。insert---layer新建一层layer3，使之位于最上方，在第二帧新建关键帧，选择penciltool,strokecolor为黑色，strokeheight为1，开始为按钮描边，具体效果如图（你可以按住shift再开始描，这样你可以轻松画出水平或垂直的直线）
回到scene1，library中拖拽"按钮组"与"默认内容"元件到layer1，如图
调整其位置，并可适当的调整大小，我们前面说过flash采用矢量技术，可以无限的等比例缩放，因此你不必担心会有失真。选中"默认内容"元件，windows---panels---instance,在instance面板中设置其name属性为：info。
到此为止，我们完成了flash的下拉菜单的制作，在这个实例中你应该对于flash的基本操作有了一定的认识，了解了按钮元件up,over,down,hit四种状态各代表什么含义，还应当掌握：telltarget，gotoandstop，on等as命令。好！最后让我们预览一下效果，还不错吧？查看一下输出的swf文件，只有4.6kb，flash的优点再次得到体现！还犹豫什么？开始动手吧！
■自适应分辨率可扩展二层JS下拉菜单作者：黑眼圈的猪序言：
随着互联网的普及和网页制作技术的发展，越来越多的网友开始制作自己的网站。做为网站最重要的部分—导航菜单也出现了各式各样的设计和制作方法。其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式。那么，在下面我将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率可扩展二层JS下拉菜单”的工作原理和使用方法。
1、S下拉菜单原理
下拉菜单实际上就是在开始的时候显示一级或者说是主菜单（图一）。当触发条件（例如：鼠标移动到上面时）显示次级菜单（图二）。
图一
图二
那么如何实现这样的效果呢。其实很简单。所有的下拉菜单都是通过图层的显隐来实现的。在文件下载的时候，其实主菜单和次级菜单都以经形成或者说下载到了客户端也就是你的机器里。只是次级菜单被隐藏起来。隐藏的方法一般是使用javascript配合css控制次级菜单的图层的属性visibility为隐藏。所以在开始的使用你是看不见次级菜单的。当满足触发条件（例如：鼠标移动到上面）时，在使用javascript来控制次级菜单显示。当在次满足触发条件时（例如：鼠标移开），控制次级菜单隐藏。
我们现在讲的这个“自适应分辨率可扩展二层JS下拉菜单”可以自动适应浏览器分辨率的改变始终保持相对位置。可以方便的自己定制菜单显示内容及连接页面。可以随意扩充主导航和次导航的栏目个数。可以自由改变连接和导航表格的样式和外观等等。
2、"自适应分辨率可扩展二层JS下拉菜单"js代码详解
//---------------主导航条内容------------//varmainLayer=newArray("蓝色理想","动意营造");//主导航栏目
//---------------次导航条内容------------//varsubLayer0=newArray("论坛","文献");//导航栏目一下的次级栏目varsubLayerHttp0=newArray("#","#");//主导航栏目一下的次级栏目连接地址varsubLayer1=newArray("论坛","文献");//导航栏目二的次级栏目varsubLayerHttp1=newArray("#","#");//主导航栏目二的次级栏目连接地址
//---------------次导航条Table参数调整------------//varsubTableBorder=0;//调整次导航条表格边框宽度varsubTableCellspacing=0;//调整次导航条表格CellspacingvarsubTableCellpadding=1;//调整次导航条表格CellpaddingvarsubTableBgcolor="#000000";//调整次导航条表格背景色varsubTableBordercolor="";//次导航条表格编框颜色varsubTableBackgroundImg="";//次导航条表格背景图片url地址varsubTableTdBgcolor="B2CBCF";//调整次导航表格Td色varsbuTabbleTop=21;//次导航表格上下微调varsbuTabbleLeft=-1;//次导航表格左右微调
//---------------系统参数*请勿调整------------//varlayerMax=mainLayer.length+10;varlayerName="index";
}
//------------------------------次菜单显隐控制--------------------------//functionlayervib(type,num){varH=type;vartemp=(H='visible''hidden':'visible')for(vari=0;i 3、"自适应分辨率可扩展二层JS下拉菜单"js代码使用方法。 (1)将上面的代码存储为js_daohang.js.放在和调用的页面同一个目录下。(2)在需要使用的叶面中在如下位置添加 varmainLayer=newArray("蓝色理想","动意营造","七色鸟");//主导航栏目012 然后在如下的位置添加“论坛”和“文献”栏目及连接地址。 varsubLayer0=newArray("论坛","文献");//导航栏目一下的次级栏目varsubLayerHttp0=newArray("#","#");//主导航栏目一下的次级栏目连接地址varsubLayer1=newArray("论坛","文献");//导航栏目二的次级栏目varsubLayerHttp1=newArray("#","#");//主导航栏目二的次级栏目连接地址varsubLayer2=newArray("论坛","文献");//导航栏目三的次级栏目varsubLayerHttp2=newArray("#","#");//主导航栏目三的次级栏目连接地址 注意：蓝色部分是需要新添加的部分。红色部分是要修改的部分。要和上面的编号一一对应。(5)、其他细节调整请参考代码详解部分。 4、附注及扩充。 代码中主要使用的函数及方法详解。Document.write("tmp")在页面中写入tmp.varsubLayerHttp1=newArray();定义一个新的数组subLayerHttp1.For(I=0;I 增强功能。//---------------系统参数*请勿调整------------//varlayerMax=mainLayer.length+10;varlayerName="index" 可以设置layerName=其他字段以生成新的下拉菜单。使页面内共存两个下拉菜单。----------------------------------------------------------网上关于这类的制作方法很多,无非都是Javascript/css利用层的隐藏显示来实现的.