4、精彩的图层世界

（3）动态菜单的制作(上)

　　接下来我们制作动态菜单，所谓动态菜单，就是指网页中排列着一排导航菜单，当鼠标移到其中一个菜单时，在网页其他位置（本例中为右侧）就会出现相应的子菜单，这样不但生动了网页，而且节省了有限空间，使网页充满新意。动态菜单的应用很灵活，只要你发挥自己的想象力，便可以创作出更精彩的效果。

　　你也许猜到了，这种效果的原理很简单，就是通过Behaviors中的Show-Hide Layers（显示/隐藏层）来实现的，下面我们来完成这部分内容。

　　选择“View”菜单下的“Invisible Elements”命令，将文档中表示层的标记隐藏。 将光标定位在Layer1图层中，按下Shift+Enter，然后插入事先做好的内容“我的爱好”的图片（001.gif），再按Shift+Enter换到下一行，插入内容为“我的收藏”的图片（002.gif）。同样，把其它表示导航菜单的图片都插进来，效果就是这样的（图1）。注意：如果图后面有空格，图的垂直方面就会有空隙。(Test5.htm)

图1　观看加入导航菜单图片后的效果

　　接下来制作“我的爱好”子菜单。在Layer1图层插入一个子图层，名为mylike，W=75pt，H=80pt，L=95pt，T=-23pt。

　　在此图层中插入一个5行1列的表格，Border设置为0，表格的背景图为b-bg1.gif（图3）。

图2　表格属性的设置

　　在表格中加入“我的爱好”菜单下的子菜单，分别为“集邮天地”、“文学创作”、“剪报精品”、“摄影世界”和“军事采风”，你也可以根据自己的需要改换菜单项内容。设置这些子菜单项的字大小为2，在单元格中居中对齐，并加上相就在的链接。 我们这个例子中不需要链接到某个网址，只需要在属性面板中Link框中输入#号，这样在浏览时不执行这个链接，面页原地不动（图4）。

图3　观看第一个子菜单建好后的效果

　　用同样的方法将另几个子菜单也制作好，并且这几个菜单所在的层Z值都为2。 在各个子菜单的图层制作过程中，可借助Shift键将这几个图层同时选中，然后用“Modify”菜单“Layers and Hotspots”项里的“Make Same Width”和“Make Same Height”命令设置图层的大小，用“Align Left”命令将所选图层左对齐。

图4　对齐多个图层的菜单命令

　　最终效果如下图所示。（图5）（test7.htm）

图5　观看建立子菜单的效果

上一节　下一节   

谈谈您的看法