网页下拉菜单的制作

网页下拉菜单的制作
MacroMedia公司不愧是软件大家，从AuthorWare到Flash无一不是软件中的精品，其主页制作工作Dreamweaver大概由于曲高和寡的原因吧，用的人反而不多，实际上Dreamweaver中层(Layer)、行为(Action)、时间线(TimeLine)等工具使我们可以非常方便地做出另人眼花缭乱动态网页。

下拉菜单是WINDOWS中最常见的菜单，在网页的制作中要做到却很不容易，好在有了Dreamweaver的层的概念，我们可以非常方便地在网页中做出下拉菜单（本文所用的示例文件为：/jzwl/xlcdnew.htm，大家可以下载后对照看看）。

过程如下：
一、打开Dreamweaver，在SITE管理器中新建一个页面，双击即可用Dreamweaver打开，可先设好其页面属性，背景图片等。

二、许多人对网页中有链接的文字没有下划线，而当鼠标指向它时却出现下划线且文字颜色会改变而感到很奇怪，本文所用的例页中也有些效果，大家只要在网页的样式中加入示例文件中<style>与</style>之间的语句即可，不用自己再创建多种样式。

这一操作可按F10进入HTML编辑窗口复制即可。

三、在页面中输入好主菜单棒的文字，为了美观，主菜单棒可放在一个表格中，并固定各单无格宽度，以免走样。

如下图：
四、点击插入(Insert)菜单，选择层(Layer)，在其属性窗口(如果没有该窗口可用Ctrl+F3打开)中可看见其名称为“Layer1”,插入一个新层，作为“菜单一”的下拉菜单。

点击该层选中后，点击插入(Insert)菜单，选择表格(Table)，选择好该表格中的行、列数，以及把表格线宽度设为0，把表格底色设为某种颜色。

如本例中“菜单一”的下拉菜单有4项，即该表格有1列4行。

然后在该表格中输入四个子项的菜单名，输入完成后调节表格的大小与层的大小，文字的对中，每一项的链接，以及层的位置（均可在属性窗口中调节，或用鼠标直接调节），使其正好在“菜单一”下。

如下图：
五、重复第四步，依次建立层“Layer2”、“Layer3”、“Layer4”，输好子菜单项，设好链接，并调整好每个层的位置。

结果如下图：
到此文字输入部分全部完成，可按F12用你的IE浏览器看看位置是否正确。

下面则是关键了。

六、选中层“Layer1”，在其属性窗口中把“可视”项改为“hidden”，把该层隐藏起来，如
下图：
然后依次是层“Layer2”、“Layer3”、“Layer4”，把四个层全部隐藏。

屏幕如下图：
七、用鼠标选中主菜单棒中的“菜单一”三个字，然后按F8打开“行为”（Action）窗口，可见如下“Behaviors”窗口：
点击按钮，出现如下菜单：
选择“Show-Hide Layers”，表示该动作要对层进行显示或隐藏操作。

出现如下窗口
在“Layer "Layer1"”上点击一下，再点击“Show”按钮，然后在“Layer "Layer2"”点击一下，再点击“Hide”按钮，然后是“Layer "Layer3"”及“Layer "Layer4"”。

表示该动作是要把“Layer1”显示，而其它层均隐藏。

如下图：
再点击确定按钮后，出现下图：
此时点击“Events”下“OnClick”旁的下剪头，出现如下菜单：
选择“onMouseOver”，表示该动作是在鼠标移到“菜单一”三个文字上时执行。

至于其它事件大家一看即可明白是怎么回事了。

八，仿照第七步，依次把“菜单二”、“菜单三”、“菜单四”设置好，但要注意设置“菜单二”时，第二层显示，一、三、四层隐藏；设置“菜单三”时，第三层显示，一、二、四层隐藏；
设置“菜单四”时，第四层显示，一、二、三层隐藏；。