网页中的下拉菜单

维普资讯

科技信息　。计算机与信息技术ｏ　ＳＣＩＥＮＣＥ＆ＴＥＣＨＮＯＬＯＧＹ　ＩＮＦＯＲＭＡＴＩＯＮ　２００７年第２２期　

网页中的下拉菜单　

杨占胜　

王立波　

（临沂师范学院信息学院　山东临沂２７６００５）　

摘要：在网页中设计下拉菜单是较复杂的脚本编程，文章对这种程序设计进行了探讨，总结了制作网页菜单的各种方法．对运用　

Ｄｒｅａｍｗｅａｖｅｒ提供的时间轴、热点行为和图层控制等高级技术结合ＪａｖａＳｃｒｉｐｔ尝试在网页中设计菜单的方法作了详细介绍。　

关键词：网页设计；下拉菜单；ＪａｖａＳｃｒｉｐｔ编程　

Ｄｒｏｐ　Ｍｅｎｕ　ｉｎ　ｔｈｅ　ＷＷＷ　Ｐａ２ｅ　

Ａｂｓｔｒａｃｔ：Ｄｅｓｉｇｎｉｎｇ　ｍｅｎｕ　ｉｎ　ｔｈｅ　ＷＷＷ　ｐａｇｅ　ｉｓ　ａ　ｔｅｃｈｎｉｃａｌ　ｐｏｉｎｔ　Ｉ　ｍｅｔ　ｉｎ　ｔｈｅ　ｐｒｏｇｒａｍｍｉｎｇ．Ｔｈｅ　ａｒｔｉｃｌｅ　ｓｕｍｍａｒｉｚｅｓ　ｖａｒｉｅｄ　ｗａｙｓ　ｏｆ　ｍａｋｉｎｇ　ｐａｇｅ　

ｍｅｎｕ　ａｎｄ　ｄｅｔａｉｌｓ　ｔｈｅ　ｗａｙ　ｕｓｉｎｇ　ＪａｖａＳｅｒｉｐｔ　ｃｏｍｂｉｎｅｄ　ｗｉｔｈ　ｔｉｍｅｌｉｎｅ、ｈｏｔｓｐｏｔ　ａｎｄ　ｌａｙｅｒ　ｔｅｃｈｎｉｑｕｅｓ　ｐｒｏｖｉｄｅｄ　ｂｙ　Ｄｒｅａｍｗｅａｖｅｒ．　

Ｋｅｙ　ｗｏｒｄ：ＷＷＷ：Ｄｒｏｐ　Ｍｅｎｕ；ＪａｖａＳｅｒｉｐｔ　Ｐｒｏｇｒａｍｍｉｎｇ　

菜单是重要的图形用户界面元素．它使得用户的各种操作分门别　

但＜ｏｐｔｒｏｕｐ＞＜ｇ／ｏｐｔｇｒｏｕｐ＞＿￣．然是ＨＴＭＬ中的标准标记．当前的许　

类、清晰易用。是用户界面中最受欢迎的类型之一，对于习惯了　

多主流浏览器Ｉｎｔｅｒｎｅｔ　ＥｘＤＩｏｒｅｒ、Ｎｅｔｓｅａｐｅ　Ｎａｖｉｇａｔｏｒ却不提供对它的支　

Ｗｉｎｄｏｗｓ操作系统的用户来说．利用菜单操作可以算是最自然的方法　持。将上面的代码保存为ｍｅｎｕｌ一２．ｈｔｍ文件，在ＩＥ和Ｎｅｔｓｃａｐｅ　

ｃａｔｏｒ中不能正确显示．在ＲｅｄＨａｔ　Ｌｉｎｕｘ系统中用Ｍｏｚｉｌｌａ或者　

了。为了更好地组织信息，使显示的信息分类明确、层次清晰，目前有　

Ｃｏｍｍｕｎｉ

许多网站的网页采用菜单进行导航。　

Ｇａｌｅｏｎ（亦为Ｍｏｚｉｌｌａ内核）浏览器可以正确显示。　

然而．网页中的菜单不同于普通应用程序的菜单，它与用户的交　

采用这种方法很简单．Ｄｒｅａｍｗｅａｖｅｒ和ＦｒｏｎｔＰａｇｅ中也提供了更易　

互并不直接由操作系统处理．而是通过浏览器这一层来传递，所以设　

用的图形化设计界面，但这样设计的菜单还不是标准的菜单，实际上　

计时不能直接使用操作系统提供的ＡＰＩ函数，而要用浏览器的编程接　

只是一个下拉列表。当然它也能起到菜单的功能，而且许多资料和书　

口——脚本程序。在ＨＴＭＬ语言中并没有＜ｍｅｎｕ＞＜／ｍｅｎｕ＞及＜　

籍都称其为菜单。在Ｄｒｅａｍｗｅａｖｅｒ中，＜ｓｅｌｅｃｔ＞＜／ｓｅｌｅｃｔ＞标记的ｓｉｚｅ属　

ｓｕｂｍｅｎｕ＞＜／ｓｕｂｍｅｎｕ＞这样的标记，各种制作网页的工具软件，如　性为默认值１、ｍｕｌｔｉｐｉｅ属性不选时称为菜单，选择这两个属性时称为　

Ｄｒｅａｍｗｅａｖｅｒ、ＦｒｏｎｔＰａｇｅ，也不直接支持菜单的设计。那怎么在网页中　

列表。　

添加菜单呢？总结一下有四种方法，介绍如下：　

２．用Ｆｉｒｅｗｏｒｋｓ工具软件　

Ｆｉｒｅｗｏｒｋｓ、Ｄｒｅａｍｗｅａｖｅｒ、Ｆｌａｓｈ号称Ｍａｅｒｏｍｅｄｉａ公司制作网页的　

１．用ＨＴＭＬ语言　

ＨＴＭＬ中虽然没有＜ｍｅｎｕ＞标记．但选择列表标记＜ｓｅｌｅｃｔ＞＜／ｓｅｌｅｃｔ＞　

三架马车，Ｆｉｒｅｗｏｒｋｓ主要用来对网页图像进行处理，但它有一个很好　

可以在表单中创建菜单组件．结合ＪａｖａＳｅｒｉｐｔ语言即能实现网页间的　

的制作下拉菜单的工具。对Ｆｉｒｅｗｏｒｋｓ　ＭＸ．这个工具在主菜单中修改　

导航　将下面的代码存为ｍｅｎｕ２．ｈｔｍｌ文件，在浏览器中显示如图１。　

＜ｈｔｍｌ＞　

＜ｈｅａｄ＞＜ｔｉｔｌｅ＞ｍｅｎｕ　ｔｅｓｔ　１．１＜／ｔｉｔｌｅ＞　

ｆＭ）—＋弹出菜单ｆＰ）—＋添加弹出菜单…。　

使用这个工具有以下几个要点：菜单名必须是图像的一个热点或　

＜Ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝”ＪａｖａＳｅｒｉｐｔ’’＞　

切片。一级菜单和二级菜单同时依次填加在内容标签中，其中选择缩　

进菜单的项为二级菜单，然后在位置标签中选择一级菜单相对于菜单　

名及二级菜单相对于一级菜单的位置，其它菜单特性可在外观与高级　

标签中设定。Ｆｉｒｅｗｏｒｋｓ最多可设计二级菜单。　

将所作的菜单导出为．ｈｔｍｌ文件，如：ＦＷＭＥＮＵ．ＨＴＭ，该文件可以　

加在Ｄｒｅａｍｙｅａｗｅｒ设计的网页中，或者单独作为．ｈｔｍｌ文件使用，可在　

图１　

ｆｕｎｃｔｉｏｎ　ｏｐｅｎｎｅｗｗｉｎ（ｔｈｅＵＲＬ，ｗｉｎＮａｍｅ，　

ｆｅａｔｕｒｅｓ）（　

ｗｉｎｄｏｗ．ｏｐｅｎ（ｔｈｅＵＲＬ，ｗｉｎＮａｍｅ，ｆｅａｔｕｒｅｓ）；　

｝　

＜／ｓｅｒｉｐｔ＞＜／ｈｅａｄ＞＜ｂｏｄｙ＞　

＜ｆｏ１７ｎ　ｎａｍｅ＝”ｆｏ１７ｎ１”＞　

ＩＥ６．０浏览器中预览其效果。　

３．用Ｄｒｅａｍｗｅａｖｅｒ中的层、时间线　

＜ｓｅｌｅｃｔ　ｎａｍｅ＝”ｍｅｎｕ”ｏｎＣｈａｎｇｅ＝”ｉｆ　ｆｆｏｒｍ１．ｍｅｎｕ．ｖａｌＨｅ！＝一１１　该方法综合运用Ｄｒｅａｍｗｅａｖｅｒ提供的时间轴、热点行为和图层控　

ｏｐｅｎｎｅｗｗｉｎ（ｆ０ｍ１．ｍｅｎｕ．ｖａｌｕｅ，’ＳｅｌｅｅｔｅｄＰａｇｅ’，’ｔｏ０Ｉｂａｒ　ｙｅｓ，ｌｏｃａｔｉｏｎ　

制技术，制作过程较为复杂，具体步骤如下：　

ｙｅｓ，ｓｔａｔｕｓ＝ｙｅｓ，ｍｅｎｕｂａｒ＝－ｙｅｓ，ｓｅｒｏｌｌｂａｒｓ＝ｙｅｓ，ｒｅｓｉｚａｂｌｅ＝ｙｅｓ’）”＞　

＜ｏｐｔｉｏｎ　ｖａｌＨｅ＝”一１”ｓｅｌｅｃｔｅｄ＞页面选择　

＜ｏｐｔｉｏｎ　ｖａｌＨｅ＝”１００．ｈｔｍ”＞第一章　

＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝”２００．ｈｔｍ”＞第二章　

＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝”３００．ｈｔｍ”＞第三章　

＜／ｓｅｌｅｅｔ＞＜／ｆｏｒｍ＞＜／ｂｏｄｙ＞　

＜／ｈｔｍｌ＞　

１）在页面上插入一个一行三列（列数由菜单项数决定）的表格作　

为菜单栏，单击“将表格宽度转换成像素”按钮，把表格宽度用像素表　

示。在单元格中分别输入菜单项的名称，将各名称设为锚点。用“ＣＳＳ　

样式”面板定义锚点链接属性ａ：ｌｉｎｋ、ａ：ｖｉｓｉｔｅｄ、ａ：ａｃｔｉｖｅ的样式，去掉超　

链接原始状态中的下划线。　

２）在菜单名称的下方插入一“层”，将其大小调整合适，在图层的　

“属性”面板中填人层的名称“ｍｅｎｕｌ”，选择“ｈｉｄｄｅｎ”属性。再在层中插　

注意上面的代码中，＜ｆｏｒｍ＞…＜／ｆｏｒｍ＞标记不可缺少，没有这对标　

入一表格，列数为１．行数为一级菜单项数，在各行中输入菜单名称，　

记Ｎｅｔｓｃａｐｅ　ｌ，Ｊａｖｉｇａｔｏｒ系列浏览器中不会显示出上图的效果。　

设置超链接（如有二级菜单应将其设为锚点），如图２所示。　

ＨＴＭＬ标准中还定义Ｔ＂＜ｏｐｔｇｒｏｕｐ＞＜／ｏｐｔｇｒｏｕｐ＞标记，可以把菜单划　

分成子菜单，对菜单中的选项进行分组归类，使用ｌａｂｅｌ属性可以为每　

个子菜单设置一个标题，如将上面的代码添加子菜单可在ｏｐｔｉｏｎ标记　

中填加：　

＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝”一１”ｓｅｌｅｃｔｅｄ＞页面选择　

＜ｏｐｔｒｏｕｐ　ｇｌａｂｅｌ＝”第一耄”＞　

＜ｏｐｔｉｏｎ　ｖａｌＨｅ＝”１０１．ｈｔｍ”＞第一节　

＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝”１０２．ｈｔｍ”＞第二节　

＜ｏｐｔｉｏｎ　ｖａｌＨｅ＝”１０３．ｈｔｍ”＞第三节　

／ｏｐｔｇｒ＜ｏｕｐ＞　

３）￣ｌＴｆ“时间轴”面板，在其左上角的下拉列表框中输入时间轴名　

维普资讯

科技信息　。计算机与信息技术ｏ　ＳＣＩＥＮＣＥ＆ＴＥＣＨＮＯＬＯＧＹ　ＩＮＦＯＲＭＡＴＩＯＮ　２００７年第２２期　

称“Ｔｌｉｎｅ１”．单击第１０帧（可根据菜单显示延迟时间进行调整）。切换　

“转到时间轴Ｔｌｉｎｅ２”行为，其中“前往帧”文本框中输人１；　

到“行为”面板，单击“添加行为”按钮，在弹出的下拉菜单中选择“显　

“

ｏｎＭｏｕｓｅＯｕｔ”事件的“播放时间轴Ｔｌｉｎｅ２”行为。　

示一隐藏层”选项，在“显示一隐藏层”对话框中的“命名的层”列表中选　

按同样的方法设置其它的二级子菜单或者三级子菜单项。最后将　

择“层ｍｅｎｕｌ”．单击“隐藏”按钮，再“确定”，此时在Ｔｌｉｎｅｌ时间轴上的　

文件存为ｄｗｍｅｎｕ．ｈｔｍｌ。　

第１０帧添加了一个行为，如图３所示。　

当菜单级联数增多的时候，每个菜单项的行为数量会急剧增加，　

４１选中该层上方的主菜单项名称“页面选择”，为其填加　

所以一般不要设计超过两级的菜单。　

“

ｏｎＭｏｕｓｅＯｖｅｒ”事件的“显示一隐藏层ｍｅｎｕｌ（显示）’行为；填加　

４．使用Ｄｒｅａｍｗｅａｖｅｒ插件　

“

ｏｎＭｏｕｓｅＯｕｔ”事件的“转到时间轴Ｔｌｉｎｅｌ”行为，其中“前往帧”文本框　Ｄｒｅａｍｗｅａｖｅｒ有许多制作动态下拉菜单的插件，从　

中输人１；再填加“ｏｎＭｏｕｓｅＯｕｔ”事件的“播放时间轴Ｔｌｉｎｅｌ”行为，如图　

ＤｒｅａｍｗｅａｖｅｒＭＸ的行为面板上即可直接连接到Ｍａｃｒｏｍｅｄ．ａ公司的官　

４所示。　方　网　站　，ｈｔｔｐ：／／ｗｗｗ．ｍａｃｒｏｍｅｄｉａ．ｃｏｍ／ｍｅｎｕ＿ｕｒｌ／ｄｒｅａｍｗｅａｖｅｒ／３．Ｏ／　

ｂｅｈａｖｉｏｒｓ／下载插件。　

该网站上制作下拉菜单的插件曾经有ＭｅｎｕＭｅｇｉｃ　ＩＩ　ｂｙ　ＰＶ　ＩＩ和　

ＭｅｎｕＭｅｓｉｃ　Ｉ　ｂｖ　Ｐｖ　Ｉ，遗憾的是这两个软件都是商业软件，前者价格　

为９０５，后者为８９．９５５，超过了我们的消费水平。免费的插件有　

ＭＦＸ　Ｓ１ｉｄｅｒＭｅｎｕ．可用搜索工具从网上查找．我曾经从以下网站下载　

ｈｔｔｐ＇．／／ｗｗｗ．５ｄ．ｃｎｆｌ＇ｕｔｏｒｉａｌ／ｗｅｂｄｅｓｉｇｎ／，ｈｔｔｐ＇Ｊ／ｗｗｗ．５５ｗ．ｎｅｔ／ｄａｔａ／ｄｒｅａｍｗｅａｖｅｄ　

．

ｈｔｔｐ：／／ｗｗｗ．ｖｅｓｋｙ．ｃｏｍ／２００１０２２８／１６２０３６

＿

２．ｓｈｔｍｌ。但用该插件作的菜单　

实际上是一个列表框，用ＪａｖａＳｃｒｉｐｔ控制其中条目的显示和隐藏，并不　

像我们常见的菜单，而且至多只能作一级菜单。另一个比较好用的制　

５１为各一级菜单项分别填加“ｏｎＭｏｕｓｅＯｖｅｒ”事件的“停止时间轴　

作网页菜单的工具是Ｓｅｈｅｃｏ　Ｍｅｎｕ　Ｍａｋｅ　Ｖ３．０６，可从大连理工大学海　

Ｔｌｉｎｅｌ”行为；填加“ｏｎＭｏｕｓｅＯｕｔ”事件的“转到时间轴Ｉ＂１ｉｎｅｌ”行为，其　天网上ｈｔｔｐ：／／ｗｗｗ．ｓｅａｓｋｙ－ｂｉｚ下载，该工具可以制作各种形式的菜单，　

中“前往帧”文本框中输人１；再填加“ｏｎＭｏｕｓｅＯｕｔ”事件的“播放时间　

菜单的级联数可到两级，效果很好。另外网上有许多免费的网页特效　

轴Ｔｌｉｎｅｌ”行为。　

工具，其中有不少可以制作菜单，这些软件都是图形用户界面，使用比　

６）填加二级菜单。在要作为父菜单的一级菜单“第二章”的右侧，　

较容易，可参阅ｒｅａｄ　ｍｅ文件，无需作太多的介绍。　

添加一图层．设置图层的“显示属性”为ｈｉｄｄｅｎ，“层编号”为ｓｕｂｍｅｎｕ。　

５．小结　

在层内插人三行一列的表格（行数由二级子菜单项数决定），在各行中　在实际制作网页菜单时，到底选择哪一种方法呢？这要根据具体　

输人二级子菜单名称，并适当调整层和表格的大小，为子菜单项设置　要求来决定，我们认为如果菜单级联数不超过两级时，用Ｆｉｒｅｗｏｒｋ带　

超链接（如有三级子菜单应将其设为锚点），如图２所示。　的弹出菜单制作工具较为适宜，操作简单，代码稳定。如果菜单级联数　

７１打开“时间轴”面板，在其左上角的下拉列表框中输人时间轴名　

在两级以上时，最好还是用专业的制作菜单插件比较好，但效果好、功　

称“Ｔｌｉｎｅ２”．单击第１０帧（可根据菜单显示延迟时间进行调整）。切换　

能强的都为商业软件。如果实在找不到合适的插件，不妨试着用　

到“行为”面板。单击“添加行为”按钮。在弹出的下拉菜单中选择“显　Ｄｒｅａｍｗｅａｖｅｒ提供的层、时间线来自己制作，但这种方法甚为复杂，需　

示一隐藏层”选项，在“显示一隐藏层”对话框中的“命名的层”列表中选　

要对ＪａｖａＳｃｒｉｐｔ脚本语言比较熟悉，并要耐心地进行调试。我们曾试着　

择“层ｓｕｂｍｅｎｕ”，单击“隐藏”按钮，再“确定”，此时在ｔｉｍｅ２时间轴上　

用这种直法作了一个只有两级的菜单，作为起始管理页面ＡＤＭＩＮ．　

的第１０帧添加了一个行为，如图５所示。　

ＨＴＭ。　

参考文献　

［１］Ｓｅａｎ　Ｗａｇｓｔａｆｆ［著］，何建辉，王智超［译］．大师指点Ｗｅｂ动画创意　

［Ｍ］．北京：清华大学出版社，２００２．　

［２］王峰等．Ｄｒｅａｍｗｅａｖｅｒ２．０网页制作范例集［Ｍ］．北京：清华大学出版　

社。２０００．　

［３］宇凤多媒体工作室主编．Ｆｉｒｅｗｏｒｋ３．０从人门到精通［Ｍ］．北京：科学　

８１为父菜单“第二章”再填加“ｏｎＭｏｕｓｅＯｖｅｒ”事件的“显示一隐藏层　

出版社。２０００．　

ｓｕｂｍｅｎｕ”行为；填加“ｏｎＭｏｕｓｅＯｕｔ”事件的“转到时间轴Ｔｌｉｎｅ２”行为，　

［４］网胜工作室．自由网页编程高手ＰＨＰ＆ＭｙＳＱＬ［Ｍ］．北京：希望电子　

其中“前往帧”文本框中输人１；再填加“ｏｎＭｏｕｓｅＯｕｔ”事件的“播放时　

出版社。２０００．５．　

间轴Ｔｌｉｎｅ２”行为。此时一级菜单项“第二章”具有了六个行为。　

［５］陈寿刚，管鹏冲，郑颐，樊小溪．ＰＨＰ４．０网络开发技术［Ｍ］．北京：人　

９１为各二级子菜单项分别填加关于时间轴Ｔｌｉｎｅｌ与步骤５相同　

民邮电出版社，２００１．３．　

的三个行为，再分别增加关于时间轴Ｔｌｉｎｅ２的三个行为：　

［６１２１世纪计算机网络工程丛书编写委员会．网络设计基础［Ｍ］．北京：　

“

ｏｎＭｏｕｓｅＯｖｅｒ”事件的“停止时间轴Ｔｌｉｎｅ２”行为：“ｏｎＭｏｕｓｅＯｕｔ”事件的　

希望电子出版社，２０００．　

（上接第３８页）流媒体播放技术采用边下载、边播放的方式，其优点是　消除模拟电视业务时．地面数字电视广播存在着无线电频谱资源的问　

即时播放，可以实现直播和多播。缺点是当网络带宽低于流媒休带宽　题。向模拟电视向数字广播转换期间不大可能针对移动接收机的音频　

或网络拥塞时都会造成接收的声音时断时续，甚至停顿。与ＤＡＢ相　

业务投人很多容量　与ＤＡＢ相比，网上广播还难以达到ＤＡＢ的便捷；　

比；网上广播必须通过电脑收听，便携性方面远不如ＤＡＢ方便。　网上广播必须通过电脑收听，便携性方面远不如ＤＡＢ方便。卫星数字　

７．我国有利于ＤＡＢ发展的综合优势　

音频广播（ＤＳＢ）存在着在城市高密度建筑物环境下，接收效果就会受　

鉴于我国地面数字音频广播（ＤＡＢ）标准已经颁布，为我国ＤＡＢ　

到不同程度的影响。由于数字多媒体广播（ＤＡＢ）是从数字音频广播　

的发展打下了良好的开端。我国的ＤＡＢ是基于欧洲ＤＡＢ标准，无论　

（ＤＡＢ）的基础上发展而来的，可以在地面高速移动的状态下高质量地　

在理论上还是在实践上都有成熟可靠的经验。数字调幅广播（ＤＲＭ）技　

接收声音、数据信息和视频节目。数字多媒体（ＤＡＢ）特性打破传统广　

术目前还在研究阶段，我国正式标准也没有确定，数字数字调幅广播　

播节目单一声音业务模式。在节目播出同时还可传送与节目相关的图　

（ＤＲＭ）技术是在现有的模拟ＡＭ技术基础上的改进技术，它的使用必　

文信息．逐渐取代传统的ＡＭ、ＦＭ广播．使音视频广播混为一体。是未　

定会涉及现有的模拟广播系统，而ＤＡＢ是一项成熟的技术，传输容量　

来地面数字音频广播（ＤＡＢ）的发展方向。ｌ　

比数字ＡＭ要大得多，此外，ＤＡＢ在本地范围广播有突出的优点，而　

ＤＲＭ是为远距离考虑的。数字地面电视标准是为数字电视而开发的，　

主要用于地面数字电视传送业务。由于适用的无线电频谱很有限，在　

６０