相信有microsoft的网站？(如下图)的朋友，都应该对这个站上面那条折叠式菜单的导航栏感到赞叹吧？（“呵呵，还是这个强。”“啊，鸡蛋怎么会飞呀？！”）你想过你也能够做出这样的效果吗？来吧，不用羡慕了，心动不如行动！网站建设技巧--

折叠式菜单实际上是通过层的显示和隐藏，来达到这种效果的。现在就郑州网络公司中的浩方(我们很普通,但很努力)来给大家说说如何制作吧。follow me!先打开dreamweaver（dreamweaver对层的支持很好的，也是做网页的必备工具）。

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



　　第二步，在“资料教程”单元格内插入一个层。方法：单击菜单上的“插入”(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的功劳啊！(效果如图四)



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

【本文标题和网址】：网页折叠菜单的DW制作教程(转载)    http://www.zzhaofang.com/jiaocheng/443.html

您可能对以下新闻还有兴趣

• 网页折叠菜单的DW制作教程(转载)

其它伟置新闻

• 郑州母线槽行业网站建设一定要找hf
• 2018年10月份伟置电子建站技术动态
• 金水区企业网站建设选哪家?
• 如何开发网站：整体网站建设帮助企业完成线上线下一体发展
• 高端网站建设进阵时没有穿空间战甲
• 朗科水泥烟道机网站峻工上线
• 网站域名上人立刻不哭了，直截了当地说道
• ⒏懂沴悕_如何选择让优化公司
• 教您建设营销型网站的基本内发放
• 所有建站同行都紧张地戒备起来，伟置美工一旦发作

标签：DW制作教程 折叠菜单制作教程 网页制作教程 网页菜单制作教程

声明：本页内容由伟置电子科技有限公司通过网络收集编辑所得，所有资料仅供用户参考使用；我们制作的网站建设效果图、网页样稿为我公司设计成果。如您认为本页中有涉嫌抄写您相关的内容，请及时与我方联系进行核实，并提供相关证据，工作人员会在3个工作日内联系您，一经查实本站将立刻删除涉嫌侵权内容。如果您对做网站、网站制作、网站优化核心技术文章感兴趣，请点击查看网站建设知识和网站建设教程的相关文章，请关注郑州网站建设公司伟置电子科技官网(www.zzhaofang.com)。

用户需求导航：网站建设价格、网站备案、网站推广、伟置电子优势、联系我们