dreamweaver中网页折叠菜单的制作

中华网科技 http://tech.china.com 2005-07-13 15:22:12

【进入BBS】【进入聊天室】【 推荐给朋友 】【浏览字号：大 中 小】【关闭窗口】

　　
　　去过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最下面那一条状态栏右边的“显示行为”按钮（就是那个最中间的，由两个圆圈组成的那个），来给单元格添加行为。这里要注意一个：一定要看好了！在行为栏的标题栏上一定要是显示“＜td＞”才行，这说明你要添加的这个行为是添加在单元格上的，如果没有的话那就要重新点选单元格，直到成功为止。（如图三）

　　

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

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

　　

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