用MenuMachine轻松制作漂亮的网页菜单

MenuMachine是一个制作菜单的工具，具有使用简单，制作快速，兼容性高等特点。它是GoLive上著名的扩展模块。只是在国内少为人知，为了方便大家的学习和使用，已经将其中的重要部分做了汉化，并暂时起了一个文名称叫做“菜单飞梭”。下面我们就来学习一下如何使用它在网页中创建菜单。

    启动GoLive并开启站点，然通过菜单【MenuMachine_开启MenuMachine调板】，就会出现如下左图所示的调板，调板中会列出当前站点中的菜单项目。大家要先弄明白菜单飞梭的工作方式，它并不是直接在页面中创建菜单，而是通过一个专门的编辑器来完成，完成后的菜单项目将出现在这个调板中。然后我们再从这个调板中拖动所需的菜单项目到网页当中。可以创建多个菜单项目，按照需要来使用。

　　现在还没有任何项目，所以我们按照提示在箭头所指处点击以创建一个新的菜单项目。

　　点击后就会自动开启主编辑器，如下图。首先在标志1处为菜单项目取个名字，比如图中的main1。然后在标志2处的主题中选择一个主题，不同的主题有不同的菜单风格，可以在标志3处看到预览。以后也可以将我们自己创建的菜单作为主题来使用。为了更全面地学习，我们选择最基础的“blank menu”主题。最后点击标志4处的右向箭头以进入下一步。需要注意的是，如果没有输入菜单名将无法继续。

　　现在我们进入最主要的设定界面，如下图所示。红色箭头处是3个设定类，分别是：

　　Item(单项设定)：用来对菜单结构中的任何一项进行单独设定，内容最多。
　　Block(层级设定)：用来对某级别的所有项目进行设定，内容相对少些。
　　Global(整体设定)：用来对所有项目进行设定，内容最少。

　　绿色箭头处是菜单结构的预览，同时也可以反映出鼠标悬停等效果。右下角的橙色箭头处可以更改预览区域的背景颜色。它只提供视觉参考，而并不对应用菜单项目的网页产生影响。如果将来要把菜单放置在一个紫色背景的网页中，那么就可以在编辑器中设定为紫色背景，这样比较容易判断色彩搭配方式。

现在大家要明确一下菜单的概念。菜单是具有多个层次的，通常来说，一开始就显示在网页中的，是顶级菜单项目，然后通过鼠标悬停(或点击，大多数情况下是悬停)的方式，出现下级的子菜单。因此在制作之前首先要先规划好自己的菜单层次结构。现在我们现在是这样来规划的：

　　顶级菜单有3项，分别是教程列表、资源库、友情链接。
　　教程列表下设2个子级项：图形处理、网页制作。图形处理下有Photoshop、Illustrator。网页制作下有GoLive、DreamWeaver。
　　资源库下设3个子级项：Photoshop、Illustrator、GoLive。
　　友情链接下设置4个子级项：大师之路(99ut.com)、蓝色理想(blueidea.com)、太平洋(pconline.com.cn)、天极网(yesky.com)。

　　现在我们点击下图红色箭头处的按钮创建同级菜单项，按照规划，总共要有3个项目。

　　蓝色箭头处是保存按钮，在修改后应及时保存。在后面我们将学习如何将菜单项目应用到网页中，以后点击保存就可以在网页中看到修改后的效果，而不必退出编辑器。

　　Item(单项设定)中将菜单文字改为相应的内容。可以设置宽度和高度。需要注意的是，高度的修改将影响同级所有项目。另外也可以在预览窗口通过鼠标拖动来修改，如下动画所示。

　　在Item(单项设定)的常规中对“教程列表”进行其他的设置，如下图。总结起来就是：在默认状态下文字为灰色，无背景。在鼠标经过的时候文字变为白色，背景为红色，同时添加1像素粗的灰色边框。

　　要更改颜色，可点击颜色框，将会出现GoLive的颜色调板。也可以点击颜色框右下角那微小的三角形，会出现常用色彩方案(如著名的VisiBone方案)。点击绿色箭头处的按钮可以更改项目的先后顺序。

　　此时在预览区域移动鼠标，将会看到类似如下动画的效果。

在Item(单项设定)的文字中更改字号等，如下图。总结起来就是：默认是居中的12像素大小。鼠标经过改为居左并加粗的12像素大小，同时在左端填充10像素。填充的目的是为了避免文字贴到左方边界。在居中对齐的方式下横向填充是无效的。

　　需要注意的是，如果在这里取消了鼠标经过状态，那么之前在常规中所设定的经过状态也将被取消。因此需谨慎。

　　此时在预览区域移动鼠标，将会看到类似如下动画的效果。

　　在Item(单项设定)的背景与图标中为菜单项指定背景图像或小图标，有关背景图像的指定我们就不再具体介绍了，需要注意的是背景图像的尺寸将会以影响菜单项的宽度和高度，当然同时我们也还是可以像早先那样对已有背景图像的菜单项尺寸进行设定。点击下左图绿色箭头处的按钮可以重置图像尺寸。小图标主要用来点缀，菜单飞梭提供了非常丰富的素材库，如下右图。选择图标后可以更改颜色，并在预览区域看到效果。

　　现在总结起来就是：默认状态下没有图标。鼠标经过的时候出现一个图标，图标的位置通过位移来指定。根据不同的菜单项尺寸，位移的数值也应设为不同。

　　此时在预览区域移动鼠标，将会看到类似如下动画的效果。

　　Item(单项设定)的其他设定如下图所示，是针对提示文字及浏览器状态栏文字的设定，这里就不叙述了。

　　现在我们已经完成了对第一个“教程列表”菜单项的各个设定，可以通过拷贝将设定应用到其他的菜单项中，方法是先选择菜单项，点击“复制”按钮后点击“粘贴”，如下图红色箭头处。

　　在出现的设定框中，可以指定要复制哪些选项，及拷贝作用的范围。如下图。总结起来就是：将教程列表的单项设定(图标除外)拷贝到资源库和友情链接上。取消图标选项是因为我们不希望另外两个菜单项有小图标。

　　除了这样的复制以外，我们在当初也可以不先把3个菜单项都建立，而就只是对“教程列表”进行设定。完成设定后创建同级菜单，新的项目具有相同的设定，相当于拷贝。

　　为了避免一致性，我们对其他两个菜单项在鼠标经过时候作了些许修改，效果如下动画所示。当然如果出于统一风格的需要就不必更改。

现在我们要建立子级菜单，首先选择“教程列表”，然后点击下左图红色箭头处的按钮创建子级项。这其实也是复制的效果，新的子级项设定与“教程列表”是完全一致的。

　　修改新建的子级项设定，如下图中绿色箭头各处。其中图标是改为了一个右向的小箭头。大家现在应该都明白这些设定项目的功能了，那么也可以作出自己的修改，而不必遵循下图。

　　之后确认所选择的是“图形处理”项，点击新建同级项按钮再复制一个出来，将其名字改为“网页制作”。效果大致如下动画所示。

　　我们现在已经具有了2级的菜单项，按照规划还应该建立第3级项目。如果按照之前的方法，那么这第3级项目也就应该出现在第2级项目下方。我们现在想要修改一下，将第2级的“图形处理”和“网页设计”两项以竖方向放置，而不是目前的横方向。

　　进入到Block(层级设定)中，在常规中将排列方向改为“竖向”，并且启用背景色和分界线。如下左图所示。需要注意的是，分界线在横向排列的项目中则将以竖线显示。然后在箭头及特效中将开启特效设为竖向滑动进入(Slide、Vertical)，将关闭特效设为淡出。如下右图蓝色箭头处。

　　淡化效果指的是不透明度变化效果，是逐渐显现或逐渐消失的效果。可以配合其他特效一起使用。但如果特效选择为淡化(FadeOnly)则此选项无效。需要注意的是，对较大的图像或较多的文字使用淡化可能会使浏览者的系统反应速度降低。另外，特效是不会在预览区域显示的，只会在最终的网页中显示。

　　下左图底部有不透明度的设定，可以更改整个层级的不透明度，这样在一些有背景的网页中看起来比较好。但需要注意的是该选项存在兼容性问题，更改后会出现警告窗口。

　　标志1处的数值可以控制同级项目之间的距离，标志2处的数值控制子菜单出现的位置，按照如下右图的设定，应该正好贴在在父菜单项的下方(父菜单项高度为25像素)。最好不要与父菜单项相隔太远，因为那样容易会造成对鼠标动作的误判断。因为当鼠标悬停在父菜单时出现了子菜单，如果间隔设置得很大，当鼠标向子菜单移动的过程中进入这空白区，浏览器就可能会判断为鼠标离开父菜单且没有进入子菜单，则子菜单将关闭。当然，如果以此来整人的话还是挺好用的：父菜单为“免费赠送”，子菜单为“点此获得100元”、“点此获得500元”，然后将子级项目位移500像素哈。不过可不保证别人就一定点不到子菜单哦。

　　相信现在大家都一定很想立刻看到这个特效的效果，并且还希望多尝试不同的特效设定。那么我们就先来学习一下如何将创建好的菜单项目应用到网页中。

应用的方法其实很简单，就是开启网页，从MenuMachine菜单对象调板中将菜单项目的图标拖动(注意必须拖动图标)到网页中即可。也可以通过菜单【MenuMachine_使用菜单项目】。如下图所示。

　　如果对这个拖动操作不熟悉，那是因为你没有掌握GoLive的基本操作。出于DreamWeaver功能上的限制，菜单飞梭目前只能运行于GoLive中。

　　将网页保存后就可以在浏览器中看到效果，大致如下动画所示。

　　需要注意的是，今后如果修改已有的菜单项目，所有应用到的网页都会自动更新菜单部分。因此为了方便，一般将菜单项目应用到一个空白网页中后关闭该网页。用浏览器开启该网页查看效果。这样修改菜单项目后，在浏览器中F5刷新就可以看到新效果了。这是一则小技巧。

　　现在我们设置第3级菜单，详细步骤就不再叙述了，效果大致如下动画所示，大家可以此作为设置的参考，而先不要看后面的介绍。

　　大家需要注意的就是，建立子级菜单等操作需要在Item(单项设定)才可进行，进行之前注意所选择的菜单项是否正确。

　　大家在模仿上面的过程中，也许对某些参数设置还是不明白，无法做到与动画完全一致的效果，在某些地方，总有一两个像素的偏差是吧？这个偏差其实就是由于我们使用了分界线和边框引起的。在视觉上，边框或分界线等都属于线条，那么子项的线条应该与上一级的项目对齐才好看。因此我们在下左图绿色箭头处指定3级项往上移动1像素，让它的边框与2级项的分界线对齐。

　　但是位于下方的“网页制作”2级项下方已经没有分界线了，因此GoLive这些3级项边框如果与分界线对齐，就会在下方超出2级项的底部，因此我们采取将其高度减少1像素的方法来弥补。

　　现在对另外两个顶级菜单项建立子项，并且添加上超链接及其目标框架。如下图红色箭头处。如果链接的目的地在本站点内，可以通过定位线进行指定。相关操作都可以在视频教程中找到。

Global(全局设定)中是针对整个菜单项目的设定，比较重要的是如下右图中自动生成导航页的选项。这个选项在某些浏览器不支持JavaScript的时候自动产生一个所有菜单项目的链接列表，可以通过这张列表进行正常的访问。此外更重要的意义在于：大部分搜索引擎只是查找页面中具有的超链接，去分析站点。这个选项可以令其正常收集网站的结构信息。

　　大家可以尝试关闭IE浏览器的JavaScript支持(Internet选项->安全->自定义级别->禁用活动脚本)，然后再在浏览器中访问，就会看到一个替代页面。

　　在网页中选中正在使用的菜单对象时，检查器跳板也会切换到菜单飞梭的相关设置，如下各图所示。需要注意的是，如果要使用框架，要注意框架的组织结构和目标位置。

　　通过菜单【MenuMachine_参数设定】可以开启如下左图的设置框，比较有用的是绿色箭头处的选项，启用后可以在编辑器中看到菜单的级别，如下右图。注意在Photoshop下又增加了一个第4级子项。方法也是相同的。

　　如果电脑配置较低，则可以尝试关闭在编辑器中实时显示鼠标经过效果和边框效果。

　　刚才我们看到MenuMachine调板中有动作的选项，这意味着我们可以为菜单项添加动作。比如我们想要做一个替换图片的效果，首先我们将一幅图片放到网页中，在检查器调板中为图片设置名字，如下图红色箭头处。

　　注意下图中使用了基于CSS的版面网格，因此可以将图片与菜单排列在任意位置，如果没有使用版面网格，则不能如下图般排列。

　　然后给网页添加标头动作，内容是将刚才的图片替换为其他的图片，如下图所示，尤其注意红色箭头处，一定要设置为调用时(即OnCall)。在这里添加了多个标头动作，分别替换为不同的图像。特别还设置了一个替换回原始图像的动作。

　然后在网页中点击使用中的菜单，检查器调板就会切换到MenuMachine的内容，在动作中作如下设定。分别为5个项目指定鼠标经过及鼠标移出时执行的动作。思路是：经过时替换原始图像为各图像，移出时则还原为原始的图像。

　　现在在浏览器中就可以看到大致如下动画的效果了。如果播放完毕，可以在其上点击右键选择“播放”。

　　我们看到的动态菜单效果，其实都是由JavaScript脚本代码写成的，菜单飞梭将脚本代码分为两类：一类是核心代码，一类是菜单项目专属代码。菜单飞梭不会将JavaScript脚本代码直接写入到页面中，而是将其存放于一个专门的目录(默认为站点中的menumachine目录，可在参数设定中修改)，然后在网页中对目录中的脚本文件进行读取。这样的好处是脚本文件在读取一次之后就会保留在缓存中，不必在打开不同的页面后重复读取。因此在上传网页的时候，也要将菜单飞梭的目录一并上传。

　　需要注意的是，如果在网页中设定了动作，则需要将GoLive的脚本库也同时上传，除非指定GoLive将代码写入到页面文件中。具体的方法可参照GoLive的视频教程。

　　菜单飞梭在每次启动GoLive后都会加载，如果不需要使用，可以在GoLive的首选项_模块中关闭，如下图。

　　最后要告诉大家的是，尽管菜单飞梭可以实现各种动态特效，但这些特效会降低系统运行的速度，如果浏览者的系统配置不高的话很可能“举步维艰”。且动态效果存在着对IE以外浏览器的兼容性问题，因此不是特别需要就不必使用。当然，IE浏览器占95%以上的实际使用率，是大部分用户选用的浏览器。只有一些电脑资深玩家会偶尔使用Opear和FireFox。此外MAC平台上使用的是safari浏览器。

　　如果是针对企业网站，处于兼容性和运行速度的考虑，应尽可能不使用菜单飞梭来制作菜单。