admin 管理员组文章数量: 1086019
2024年3月10日发(作者：go前景如何)
鬟教学研究 曲燕萍： 使用Ｄｒｅａｍｗｅａｖｅｒ和Ｆｌａｓｈ制作网页下拉菜单 ７１
１０．３９６９／｛．ｉＳｓｎ．１６７１—４８９Ｘ．２００９．１８．０７１
使用Ｄｒ ｅａｍｗｅａｖｅ ｒ和Ｆ ｌ ａｓ ｈ￣ｊｌＪ作网页下拉菜单
曲燕萍
广州中医药大学信息技术学院广州 ５１０４０５
摘 要针对下拉菜单在网页制作中的重要性及传统方法制作中常出现的问题，介绍Ｄｒｅａｍｗｅａｖｅｒ中“Ｓｈｏｗ Ｐｏｐ—
ｕｐ Ｍｅｎｕ行为”和Ｆｌａｓｈ中“按钮响应鼠标事件”２种简单制作下拉菜单的方法。
关键词Ｄｒｅａｍｗｅａｖｅｒ：Ｆｌａｓｈ；下拉菜单
中图分类号：Ｇ４３４ 文献标识码：Ｂ 文章编号：１６７１—４８９Ｘ（２００９）ｌ８—００７１—０２
Ｄｒｅａｍｗｅａｖｅｒ ａｎｄ Ｆ ｌ ａｓｈ ｔｏ Ｕｓｅ Ｄｒｏｐ—ｄｏｗｎ Ｍｅｎｕ Ｗｅｂ Ｐａｇｅｓ／／Ｏｕ Ｙａｎｐｉｎｇ
Ａｂｓｔｒａｃｔ Ｉｎ ｔｈｉｓ ｐａｐｅｒ，ｔｈｅ ｐｒｏｄｕｃｔｉｏｎ ｏｆ ｔｈｅ ｐｕｌｌ—ｄｏｗｎ ｍｅｎｕ ｉｎ ｔｈｅ ｐａｇｅｓ ｏｆ ｔｈｅ ｉｍｐｏｒｔａｎｃｅ ａｎｄ
ｔｈｅ ｔｒａｄｉｔｉｏｎａｌ ｍｅｔｈｏｄｓ ｏｆ ｐｒｏｄｕｃｔｉｏｎ ｐｒｏｂｌｅｍｓ ｏｆｔｅｎ ｉｎｔｒｏｄｕｃｅｄ ｔｈｒｏｕｇｈ ｔｈｅ ｕｓｅ ｏｆ Ｄｒｅａｍｗｅａｖｅｒ
ｉｎ ｔｈｅ“Ｓｈｏｗ Ｐｏｐ—ｕｐ Ｍｅｎｕ ｂｅｈａｖｉｏｒ’’ａｎｄ ｔｈｅ Ｆｌａｓｈ ｉｎ“ｂｕｔｔｏｎ ｔｏ ｒｅｓｐｏｎｄ ｔｏ ｍｏｕｓｅ ｅｖｅｎｔｓ”．ｔｈｅ
ｐｒｏｄｕｃｔｉｏｎ ｏｆ ｔｗｏ ｓｉｍｐｌｅ ｄｒｏｐ—ｄｏｗｎ ｍｅｎｕ ａｐｐｒｏａｃｈ．
Ｋｅｙ ｗｏｒｄｓ Ｄｒｅｍｎｗｅａｖｅｒ；Ｆｌａｓｈ：ｄｒｏｐ—ｄｏｗｎ ｍｅｎｕ
Ａｕｔｈｏｒ’ｓ ａｄｄｒｅｓｓ Ｇｕａｎｇｚｈｏｕ Ｕｎｉｖｅｒｓｉｔｙ ｏｆ Ｔｒａｄｉｔｉｏｎａｌ Ｃｈｉｎｅｓｅ Ｍｅｄｉｃｉｎｅ Ｉｎｓｔｉｔｕｔｅ ｏｆ Ｉｎｆｏｒｍａｔｉｏｎ
Ｔｅｃｈｎｏｌｏｇｙ，Ｇｕａｎｇｚｈｏｕ ５１０４０５
随着网页制作技术的不断发展，网页制作水平也在不
断提高，但要制作出一个好的网页，菜单的设计非常重要。
步骤３ 在“高级”选项卡中，设置
下拉
菜单的宽度、高度，菜单间的空白边
而下拉菜单是网页中常见的效果之一，即将鼠标移到主菜单
距、文字间距，边框的宽度、颜色以及阴
或在主菜单上单击，就会显示一个弹出菜单，这样不仅节省
影、高亮显示等属性。
网页排版上的空间，而且使网页布局简洁有序。 步骤４ 在“位置”选项卡中，设置下
网页下拉菜单的制作方法很多，有些是通过编写复
拉菜单与主菜单的位置关系。有４种位置可
杂的ＪａｖａＳｃｒｉｐｔ程序来设计，有些是通过Ｄｒｅａｍｗｅａｖｅｒ的
供选择：主菜单的右下角、低于且位于主
显示或隐藏层的方法来实现，但这些方法或者复杂，或
菜单的左边缘、高于且位于主菜单的左边
者效果不好，给制作下拉菜单造成一定的困难ｕ 。其实
缘、主菜单的上边缘。并且还可以对４种位
＞魂 麾
圈
在Ｄｒｅａｍｗｅａｖｅｒ中可以利用Ｓｈｏｗ Ｐｏｐ—ｕｐ Ｍｅｎｕ行为，或在
置关系进行Ｘ、Ｙ水平和垂直坐标值的调整。
弹出菜单制作完
Ｆｌａｓｈ中利用按钮响应鼠标事件，都可以轻松制作出下拉
成后如图２所示。
菜单。
２在Ｆｌａｓｈ中利用按钮响应鼠标事件制作下拉菜单
１在Ｄｒｅａｍｗｅａｖｅｒ中利用Ｓｈｏｗ Ｐｏｐ－ｕｐ Ｍｅｎｕ￣为制作下拉
２．１创建文件新建一个宽４００ ｐｘ，高１５０ ｐｘ的Ｆｌａｓｈ文件。
菜单
２，２制作主菜单
１．１导入主菜单 在网页中导入事先制作完成的主菜单按 步骤１ 通过选择“插入／新元件”命令，新建一个名
钮。
为“主菜单”、类型为“按钮”的元件。
步骤２ 利用工具箱中矩形工具绘制一个边框为黑色、
１．２制作弹出菜单 选中主菜单后，选择“窗口标签检查
器”命令，在打开的Ｔａｐ＜ｉｍｇ＞面板中单击“＋”（行为添
填充色为蓝色的矩形（或者可以利用其他的工具绘制圆形、
加）按钮，再从显示的行为列表中选择用于制作弹出菜单的
不规则图形，也可以导入一个外部图片）。调整宽为１Ｏ０
Ｓｈｏｗ Ｐｏｐ—ｕｐ Ｍｅｎｕ（显示弹出式菜单）命令。
ｐｘ，高为２０ ｐｘ。通过“设
步骤ｌ在显示弹出式菜单对话框的１． 止ｌ删
计面板／对齐”功能使矩形
“目录”选项卡中文本区域输入弹出菜
单的内容，再单击“＋，，添加按钮，所建
立的菜单内容就会出现在对话框中的列
表中。可以为其设定链接，指定单击菜
音胃甜 一－一＿一 位于舞台正中央（方法：首
先选择“对于舞台”，再选
择对齐的上下居中、左右居 图３对齐面板的使用
中，才会达到位于舞台正中央的效果）（图３）。
步骤３ 利用文字工具输入文字“学习内容”，直接调
整文字的大小、字体、颜色等，并将调整好的文字放在矩形
中央。也可以给按钮加上箭头用以修饰。
步骤４ 用鼠标右键单击
帧，将填充色改为绿色。主菜
ｕｐ帧 ｏｖ。ｒ帧
时间轴上￣ｏｖｅｒ帧插入关键—圈匝墨■卜一■圈函圈■
图４从步骤３到步骤４的主菜单
７２ 曲燕萍： 使用Ｄｒｅａｍｗｅａｖｅｒ和Ｆｌａｓｈ制作网页下拉菜单 教学研究
单制作完成，如图４所示。
２．３制作弹出菜单 ．
步骤１ 新建一个名为“菜单ｌ”、类型为“按钮”的
元件。
图５主菜单与弹出
步骤２ 绘制一个无边框、填充色为黄色的矩形。调整
菜单的排列位置
它的宽为８０ ｐｘ，高为１８ ｐｘ。
ｏｎ（ｒｅｌｅａＳｅ）｛
步骤３ 创建文字“内容一”，调整文字的大小、字
ｇｅｔＵＲＬ（“ｈｔｔｐ：／／“）；
体、颜色，并放在矩形中央。
步骤４ 用鼠标右键单击时间轴上的ｏｖｅｒ帧插入关键
）
帧，将填充色改为橙色。在ｄｏｗｎ帧插入关键帧，将填充色改
意为：当鼠标按下时，跳转到链接网页或页面乜］。
为绿色。
步骤５ 用同样的方法设置“菜单２”“菜单３”“菜单
步骤５ 选择“窗口／库”命令打开库面板。在库中右
４”元件以及在动作面板中输入相应的ａｃｔｉｏｎｓ。
键单击“菜单１”元件，选择“重复”命令复制新元件，将
其改名为“菜单２”。双击“菜单２”元件，进入编辑状态，
分别在ｕｐ、ｏｖｅｒ、ｄｏｗｎ帧中将“内容一”改为“内容二”。
用同样的方法制作“菜单３”“菜单４”。弹出菜单制作完
图６在舞台中加入“鼠标
成。
响应区域”元件
２．４制作鼠标响应区域
步骤６ 新建ｌａｙｅｒ３，位于ｌａｙｅｒ２之下，在第２帧插入
步骤１ 新建一个名为“鼠标响应区域”、类型为“按
关键帧，从库中将“鼠标响应区域”元件拖拽到舞台居中的
钮”的元件。在ｈｉｔ帧插入关键帧。
位置（如图６）。单击“鼠标响应区域”元件，在动作面板
步骤２ 绘制一个宽４００ ｐｘ，高１５０ ｐｘ，填充色为任
中输入：
意色的矩形（因为ｈｉｔ帧中的内容不会显现在发布后的
ｏｎ（ｒｏ１１Ｏｖｅｒ）｛
动画中 ２ ）。可以将此按钮拖拽到ｓｃｅｎｅ（场景）中，按
ｇｏｔｏＡｎｄＳｔｏｐ（１）：
Ｃｔｒｌ＋Ｅｎｔｅｒ进行预览，虽看不到按钮，但鼠标移动到此按钮
）
的区域内时会出现手形。
意为：当鼠标移动到“鼠标响应区域”按钮上时，跳
２．５组合主菜单和弹出菜单
步骤１
一
新建一个名为“按钮组合”、类型为“影片剪
辑”的元件。从１ｉｂｒａｒｙ（库）中将“主菜单”元件拖拽到
ｌａｙｅｒｌ，调整它的位置使其最右端与舞台中心点对齐，中心
鬟朗
一 一懈 一
转并停止在第１帧。
２．６测试 在“场景１”中，将库中“按钮组合”元件拖拽
到图层ｌ，调整其位置，并可适当调整大小。由于Ｆｌａｓｈ采用
矢量技术，因此调整大小不会失真。最终效果是将鼠标移
轴与舞台中心轴重合。
动到“学习内容”按钮上就出现手形，同时出现４个弹出菜
步骤２ 为第２帧插入关键帧，并且在１、２帧上都加上
单；将鼠标移动到弹出菜单上也会出现相应的变化，单击即
ａｃｔｉｏｎｓｃｒｉｐｔ（动作）：“ｓｔｏｐ０：”。回到第１帧，在舞
跳转到链接页面。
台上单击“主菜单”元件，在动作面板中输入：
通过上面介绍的２种方法，可以很轻松地制作出网页
ｏｎ（ｒｏｌｌＯｖｅｒ）（
菜单中的下拉菜单，简洁、方便、实用。２种方法对比：
ｇｏｔｏｈｎｄＳｔｏｐ（２）：
Ｄｒｅａｍｗｅａｖｅｒ制作下拉菜单的方法更简单、快捷，但下拉菜
）
单的外观形式受到限制，不能有更多的变化；Ｆｌａｓｈ制作下
意为：当鼠标移动到按钮上时开始播放第２帧。
拉菜单的方法复杂一些，但下拉菜单的外观形式可以有各式
步骤３ 新建ｌａｙｅｒ２，处于ｌａｙｅｒｌ之下。从库中拖拽
各样的变化。另外还有一点值得注意：在Ｄｒｅａｍｗｅａｖｅｒ中应
“菜单１”“菜单２”“菜单３”“菜单４”元件￣ｌＪｌａｙｅｒ２的第
用Ｓｈｏｗ Ｐｏｐ—ｕｐ Ｍｅｎｕ行为的主菜单必须设定假链接（＃）［３１；
２帧上，并如图５排列。
并不是所有的网页浏览器都支持Ｆｌａｓｈ的ｓｗｆ文件格式，需要
步骤４ 选中“菜单１”元件，在属性面板中选择“跟
有插件才能正常使用乜］。大家可以在使用中各取所需，制作
踪按钮”选项。在ａｃｔｉｏｎｓ面板中输入：
出适合网页风格的下拉菜单。
参考文献
［１］周永进．使用Ｄｒｅａｍｗｅａｖｅｒ插件设计网页菜单［Ｊ］．中国医学教育技术，２００７（２）：５４—５６
［２］金哲永．Ｆｌａｓｈ ｉＸ ２００４完全自学手册［Ｍ］．赵毅，等，译．北京：中国青年出版总社，中国青年电子出版社，２００５
［３］（韩）李在容，金秀京．Ｄｒｅａｍｗｅａｖｅｒ Ｍ）【２００４完全自学手册［Ｍ］．李勇鹤，译．北京：中国青年出版总社，中国青年电子出版社，
２００５
第１８期（总第１７１期）
●
版权声明：本文标题：使用Dreamweaver和Flash制作网页下拉菜单 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1710057472a555722.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论