使用Dreamweaver和Flash在制作网页下拉菜单随着网页制作技术的不断发展,网页制作水平也在不断提高,但要制作出一个好的网页,菜单的设计非常重要。而下拉菜单是网页中常见的效果之一,即将鼠标移到主菜单或在主菜单上单击,就会显示一个弹出菜单,这样不仅节省网页排版上的空间,而且使网页布局简洁有序。网页下拉菜单的制作方法很多,有些是通过编写复杂的JavaScript程序来设计,有些网站建设公司是通过Dreamweaver的显示或隐藏层的方法来实现,但这些方法或者复杂,或者效果不好,给制作下拉菜单造成一定的困难。
其实在Dreamweaver中可以利用Show Pop-up Menu行为,或在 Flash中利用按钮响应鼠标事件,都可以轻松制作出下拉菜单。
1 在Dreamweaver中利用Show Pop-up Menu行为制作下拉 菜单.
1.1 导入主菜单 在网页中导入事先制作完成的主菜单按钮。
1.2 制作弹出菜单 选中主菜单后,选择“窗口标签检查器”命令,在打开的Tap<img>面板中单击“+”(行为添加)按钮,再从显示的行为列表中选择用于制作弹出菜单的Show Pop-up Menu(显示弹出式菜单)命令。
步骤1 在显示弹出式菜单对话框的“目录”选项卡中文本区域输入弹出菜单的内容,再单击“+”添加按钮,所建立的菜单内容就会出现在对话框中的列表中。可以为其设定链接,指定单击菜单时跳转的网页文档或网站地址。用同样的方法添加制作要在弹出菜单中显示的其他菜单。
步骤2 在“外观”选项卡中,设置下拉菜单中的字体、大小、颜色、背景色、排列方式以及鼠标移上去后的文字颜色、背景色等外观属性。
步骤3 在“高级”选项卡中,设置下拉菜单的宽度、高度,菜单间的空白边距、文字间距,边框的宽度、颜色以及阴影、高亮显示等属性。
步骤4 在“位置”选项卡中,设置下拉菜单与主菜单的位置关系。有4种位置可供选择:主菜单的右下角、低于且位于主菜单的左边缘、高于且位于主菜单的左边缘、主菜单的上边缘。并且还可以对4种位置关系进行X、Y水平和垂直坐标值的调整。弹出菜单制作完成后。
2 在Flash中利用按钮响应鼠标事件制作下拉菜单
2.1 创建文件 新建一个宽400 px,高150 px的Flash文件。
2.2 制作主菜单
步骤1 通过选择“插入/新元件”命令,新建一个名为“主菜单”、类型为“按钮”的元件。
步骤2 利用工具箱中矩形工具绘制一个边框为黑色、填充色为蓝色的矩形(或者可以利用其他的工具绘制圆形、不规则图形,也可以导入一个外部图片)。调整宽为100 px,高为20 px。通过“设计面板/对齐”功能使矩形位于舞台正中央(方法:首先选择“对于舞台”,再选择对齐的上下居中、左右居中,才会达到位于舞台正中央的效果)。
步骤3 利用文字工具输入文字“学习内容”,直接调整文字的大小、字体、颜色等,并将调整好的文字放在矩形中央。也可以给按钮加上箭头用以修饰。
步骤4 用鼠标右键单击时间轴上的over帧插入关键帧,将填充色改为绿色。