当前位置月光软件 -> 电脑乐园 -> Dreamweaver

 

轻松掌握网页制作
深入学习和使用
用表格做网页
图形化的网页
灵活运用文字
精彩的图层世界
什么是图层
会跑动的面板(上)
会跑动的面板(下)
动态菜单的制作(上)
动态菜单的制作(下)
丰富的超链接
框架里的乾坤
创建各种窗体
本章常见问题解答
高级使用和理解
附录
常见问题汇总
快捷键分级介绍
一句话技巧集萃
功能快速索引



请您留言
谈谈您的看法

 

 

 
  二、深入学习和使用

4、精彩的图层世界

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

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

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

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

<font color="#003399">观看加入导航菜单图片后的效果</font>

图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 观看建立子菜单的效果

 

上一节 下一节   

 

请您留言
谈谈您的看法