首页新闻手机家电数码电脑财经大模型直播

网页菜单工厂精彩网页菜单轻松完成

来源：中国IT实验室作者： somesun 2008-03-17/09:30

软件频道

软件教程

Dreamweaver

应用实例

正文

要是能够像那些专业站点一样制作出令人心动的网页菜单当然是再好不过的了，如果你并不会这些Javascript技术也没有关系，就由WebMenuShop在短短的几分钟之内让你的主页增色不少。

WebMenuShop是一款用于快速建立网页菜单的软件，可以很轻松的制作形式多样的网页菜单，在制作过程中可以即时预览所得到的菜单内容，并且能够很方便地把菜单保存下来作为他用。而且值得一提的是，整个WebMenuShop的菜单制作流程只有四个步骤，因此很快就能够轻松搞定这一切。

第一步：选择菜单的风格

运行WebMenuShop之后，先在右边的【样式效果】标签下确定菜单的风格。这里提供了水平菜单、竖直菜单和嵌入浏览器三种主菜单样式，而且在点击“高级选项”之后还能够针对主菜单的位置进行设定，例如我们可以通过距离左边和上边的距离来定位菜单在网页中的绝对位置，也能够设定菜单保持在显示区域的固定位置，并不随着滚动条的拖动而改变位置。

针对子菜单而言，这里可以设定子菜单采用普通、滑动或者使淡入淡出的显示方式，还有子菜单显示在主菜单上方还是下方，并且能够设置当鼠标移动到主菜单上就立即显示出子菜单，这样就无需我们点击鼠标来激活子菜单，同时也使得你的主页更加具有人性化。

第二步：定义菜单结构和属性

在进行这一步之前需要提醒大家一个事项：主菜单可以没有子菜单，但是子菜单下不能再有子菜单。点击【结构属性】标签之后，我们最好先点击工具条上的“+”来添加几个子菜单，这些都可以在左边的菜单结构区域中预览到。接着选择主菜单，并在右边的属性设置窗口中分别确定菜单的标题、链接地址、目标框架等内容，而且还能够通过GIF或者是JPEG图片代替菜单标题，这样当鼠标移动到图片上之后就会有子菜单弹出。

设定好主菜单之后，我们再逐一选取子菜单项，同样按照上述的方法设定好相关的属性，同时还能够增加一个状态说明文本，它的作用是在浏览器下部的状态栏中给每个子菜单进行解释，以便浏览者能够明确理解每个子菜单的功能。

在定义菜单结构的时候，如果发现子菜单的顺序颠倒了，不需要重新建立一个子菜单，只要点击工具条中的上下箭头就能够调整菜单的位置顺序，而且通过左右箭头还可以把当前选中的菜单变为主菜单或者是作为上级主菜单下的一个子菜单。有了这个功能的帮助，像笔者一样的马虎人就再也不怕了。

第三步：定义菜单外观

点击【外观】标签来改变菜单的外观尺寸、字体大小和鼠标指针等属性，还能够在每一个菜单项前面添加一个修饰符号，使得菜单看起来更加醒目。由于菜单的外观对于整个页面的影响很大，所以建议大家每做一次修改都通过工具栏中的IE图标来预览一下，然后再有针对性的进行更改设置。

第四步：选择菜单颜色

WebMenuShop默认的颜色为Windows2000菜单颜色，如果你不喜欢的话也可以按照自己的意愿来重新设定，不过这里就需要你有一些艺术细胞了，呵呵。

上面的操作完成之后，点击工具条中的IE图标激活浏览器预览一下，看看效果怎么样？满意之后我们就需要把制作好的菜单添加到网页中了。这时可以按下列步骤进行：

1、把软件所在目录的workspace子目录下的menu.jse、define.js和hr.gif这3个文件拷贝到网页所在目录。可以通过点击菜单中的“菜单文件->菜单文件拷贝至目录...”命令或者工具栏中的相应按钮来实现这一步。

2、在网页的<head>和</head>之间添加以下2句：
<script language="jscript.encode" src="menu.js"></script>
<script src="define.js"></script>

可以通过点击菜单中的“剪贴板->复制菜单定义代码到剪贴板”来将这两句代码复制到剪贴板。

3、在需要菜单的地方加上一句<script>document_load()</script>即可。不过当你设计嵌入浏览器风格的菜单，那么你只能把<script>document_load()</script>写在网页的<body>标记的后面。

OK，这样一来，你的主页就有了很COOL的菜单功能，看看是不是很有一种专业的味道？