Dreamweaver如何通过显示和隐藏图层来制作网页折叠菜单效果

折叠菜单实际上是通过图层的显示和隐藏来实现的。跟着我!首先打开Dreamweaver。Dreamweaver很好地支持图层,也是网页的必备工具。有兴趣的朋友可以参考一下。





你去过微软网站吗(图1)如果您在那里,您应该欣赏上面折叠菜单上的导航栏。你认为你能产生这样的效果吗得了吧,别嫉妒。




折叠菜单实际上是通过图层的显示和隐藏来实现的。现在让我来谈谈如何制作!首先打开Dreamweaver(这有利于DreamWeaver支持图层,同时也是网页的必备工具)。

第一步是先插入一行和两列。然后,单击插入菜单上,选择(插入),形式,(表),在1,输入行,(行),输入2列(列),单击确定,与行。(图2)为了美丽,宽度和高度设置为在窗体的属性栏分别200px和30px,和表格边框的颜色都设置为# ffffff,然后两个细胞分别选择,和边框的颜色设置为# 6699ff在属性栏。两细胞输入数据教程;和相关软件中间细胞排列在属性栏(顺便说一句:在Dreamweaver中不仅可以设置表的水平对齐方式,并可以设置垂直位置对准,FrontPage可以只去写自己的代码,这是我放弃的原因之一!FrontPage,Dreamweaver)


第二步是数据当然一层插入细胞。方法:在菜单上单击插入;;(插入),然后选择图层;;(层)。在这一点上,会有在细胞层。在这我们不满意的层的位置,所以我们移动它。该层的运动是很容易的,选择图层,然后按键盘上的方向键移动,并没有任何限制,哦,简单。以同样的方式,我们可以在对美的层属性栏中设置其大小,并设置宽度和高度分别100px和90px。

第三步:插入一个表格三行、一层柱,和同样的方法的第一步,宽度和高度设置为100px和90px,分别填充层,然后把边框颜色作为第一步。三细胞输入DreamWeaver;frontpage和hotdog。放在属性栏的中间对齐。

第四步:最关键的一步来了。在图层,属性栏的视觉,,,,和隐藏的看不到这一层当你打开网页,然后选择单元格,然后单击在Dreamweaver底栏右侧的显示的行为,和按钮(中间部分由两个圆圈)添加行为的细胞。这里要注意:一要乐观!在标题栏中必须是,,这意味着你要添加的行为是在单元格中添加的,如果不是,它应该重新选择单元格,直到成功。(例如,图三)


在行为目标(事件)选择一个合适的浏览器,一般选择即4.0,然后点击左边的+,;按钮,添加行为,在弹出的菜单中选择显示或隐藏层;(显示隐藏图层),选择在弹出的窗口中层layer1这是我们刚刚添加的图层,然后单击显示;;(),好吧,这是我们在行为栏添加行为。然后单击事件(事件);右下方的向下箭头按钮,并在弹出菜单中选择当鼠标移动到;(鼠标)。好的,所以当页面加载时,该层不出现,只有当我们进入细胞的小鼠会出现,H冷却它停止!别太高兴,别忘了,有一个问题:onmouseout细胞层或显示后不会自动消失。(不要把电脑作为一个自动的,你不告诉它怎么做,它只是一堆废铁。事实上,^ _ ^)也要解决这个问题很简单,我们可以添加一个显示层,当然,你也可以添加一个隐藏层行为!然后单击+按钮,选择;;显示或隐藏层;或者,选择layer1,但这次我们点击隐藏(隐藏),然后确定。再选择事件;单击当鼠标移出(时)好了!事情办好了。

其次,根据过程从二到第四步,相关软件细胞操作。在一切都结束,按f12,和预览。哈哈,几个简单的步骤是如何完成这个令人眼花缭乱的效果的呢一切仍然是Dreamweaver的功劳!(效果如图四所示)。


还有一点需要注意的是,层移动性有时无法做到。所见即所得的效果在编辑时是非常令人满意的,但是预览是一团糟,这需要多个预览和多次修改,得到好的结果。