dreamweaver如何制作网页折叠菜单效果

这篇文章将为大家详细讲解有关dreamweaver如何制作网页折叠菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　去过Microsoft的网站吗?(如图一)如果去过的话，那么你应该对这个站上面那条折叠式菜单的导航栏感到赞叹吧?你想过你也能够做出这样的效果吗?来吧，不用羡慕了，心动不如行动!

　　折叠式菜单实际上是通过层的显示和隐藏，来达到这种效果的。现在就让我来说说如何制作吧。Follow Me!先打开DreamWeaver(DreamWeaver对层的支持很好的，也是做网页的必备工具)。

　　第一步：先插入一个一行、两列的表格，方法：单击菜单上的“插入”(Insert)，再选取“表格”(Table)，在“行”(Row)中输入1，在列(Columns)中输入2，在单击“确定”。(如图二)为了美观，在表格的属性栏中，把宽和高分别设为200px和30px，并且把表格的边框颜色全部设为#FFFFFF，然后分别点选两个单元格，在属性栏中将其边框颜色设为#6699FF。在两个单元格内分别输入“资料教程”和“相关软件”。并在单元格属性栏中设为中间对齐(顺便说一句：在DreamWeaver中不但可以设定表格水平对齐方式，而且可以设定垂直位置对齐方式，在FrontPage就只能自己去写代码了，这也是我放弃FrontPage使用DreamWeaver的原因之一!)

　　第二步，在“资料教程”单元格内插入一个层。方法：单击菜单上的“插入”(Insert),再选取“层”(Layer)。这时，在单元格中便会出现一个层。这时我们并不满意层的位置，所以就来移动它。层的移动是非常容易的，选取层，然后按键盘上的箭头键就可以移动了，而且不受任何限制，呵呵，简单吧。同样，我们为了美观也可以在层的属性栏中设定它的大小，把宽和高分别设为100px和90px。

　　第三步：在层中插入一个三行、一列的表格，方法同第一步。并把宽和高分别设为100px和90px,以填满这个层。再把边框颜色做如第一步的设置。在三个单元格中输入“DreamWeaver”、“FrontPage”和“HotDog”。并在属性栏中设为中间对齐。

　　第四步：最关键的一步来了!在层的属性栏中将“可视”设为“隐藏”(Hidden)，这样在打开网页时便看不见这个层(要是看得见那还叫什么折叠式呀?!)。接着选取单元格，然后单击DreamWeaver最下面那一条状态栏右边的“显示行为”按钮(就是那个最中间的，由两个圆圈组成的那个)，来给单元格添加行为。这里要注意一个：一定要看好了!在行为栏的标题栏上一定要是显示“     ”才行，这说明你要添加的这个行为是添加在单元格上的，如果没有的话那就要重新点选单元格，直到成功为止。(如图三)

　　在“行为目标”(Events For)中选择一个合适的浏览器，一般是选择“IE 4.0”。然后单击左边的“+”按钮，来添加行为。在弹出的菜单中选择“显示或隐藏层”(Show-Hid Layers)， 在弹出的窗口中选择“Layer “Layer1””，就是我们刚才添加的那个层了，再单击“显示”(Show)，确定就行了。这时在行为栏中就出现了我们刚刚添加的这个行为了。接着单击“事件”(Events)下面右边的那个向下箭头按钮，在弹出菜单中选择“当鼠标移上”(OnMouseOver)。好了，这样当页面载入时，这个层并不会出现，只有当我们的鼠标移上单元格时才会出现，怎样?酷吧?Stop!不要高兴得太早了，不要忘了还有一个问题：鼠标移开单元格之后这个层还是显示着的呀!并不会自动消失的。(不要把电脑当成全自动的，你不告诉它怎么做时，它只是一堆废铁。^_^)其实解决这个问题也很容易，我们可以添加显示层的行为，当然也可以添加隐藏层的行为呀!再单击“+”按钮，选取“显示或隐藏层”，还是选取“Layer1”，不过这次我们点击的是“隐藏”(Hide)了，再确定。然后选择“事件”，单击“当鼠标移开”(OnMouseOut)。OK!完成了。

　　接下来，按照从第二步到第四步的过程，对“相关软件”单元格进行操作。一切完成之后，按下“F12”，预览一下，呵呵，怎么样?简单的几步，就完成了这样炫的效果，一切还是DreamWeaver的功劳啊!(效果如图四)

　　还有一个需要注意，层的移动有时并不能做到“所见即所得”的效果，在编辑时本来位置很满意，但是预览时却一塌糊涂，这就要多预览几次，多修改，才能得到好的效果。

关于“dreamweaver如何制作网页折叠菜单效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。