运用Dreamweaver来制作活动菜单条效果

　　这次我们课课家教育将为大家带来的是：如何用Dreamweaver制作活动菜单条，相信大家用QQ聊过天的朋友都对它的自动隐藏窗口功能表示爱不释手，更重要的是它可以使窗口显得清爽整洁而且富有动感，如果笔者的几个朋友都想在自己的网页中加入类似的东东（类似QQ的活动菜单条），经过大家的共同摸索，我们会发现用Dreamweaver就可以实现这种效果，那么下面我们可以通过一个活动的菜单条制作来看看吧，希望能对大家有所帮助，多多支持课课家教育。

　　步骤①：制作菜单外貌

　　我们可以在Dreamweaer中新建一个文件，然后绘制一个层，接着我们需要在该层中插入一个表格（如图1），对该表格进行修饰，然后加入菜单项并建立各项的超链接（开始时每个超链接都会有下划线的），其实我们为了去掉超链接的下划线，那么我们就可以用编辑超链接的css样式的，然后在CSS样式面板中通过CSS选择，“Link”和“Hover”的“Decoration（装饰）”均设置为“None（无）”，将“Hover”的“Color（颜色）”设置为红色，最后将设置好的样式应用到各个菜单条中（可按“F12”键预览效果）。

　　步骤②：设计菜单的动态效果（这个效果，会在你设置完成后，调整频率就可以显示出来）

　　（1）其实我们在选定层面的时候，如果当鼠标变成“十”字形时按住左键将层面拖动到页面右上角（那样会使整个菜单条完全露出但上边缘正好靠拢页面上边界），因为在窗口菜单中打开时间线面板，然后选定层面将其拖动到时间线上，然后Dreamweaer就会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧（帧率是非常重要的，因为它是限制时间的。）然后我们应该在第15帧处单击右键，然后在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并且将层面拖动到适当位置（如图2）。

　　（2）接着我们需要在时间线窗口中的第15帧处再次单击右键一下，我们要在弹出的快捷菜单中选择“添加动作”，那样可以为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/StopTimeline”，打开“StopTimeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。我们设置交互行为的事件为“onFrame15”，动作为“StopTimeline”，这样当时间线运行到第15帧时，动画将停止播放，那么这样就可以实现了菜单条弹回的功能。

　　步骤③：现在我们还要设置一个行为让时间线停止后能继续播放的设置过程。首先说下我的设想吧，我的设想是这样的：如果在一般状态下菜单条弹回但仅保留下方的“校园大观”字样，而菜单条再次弹出和弹回则由鼠标是否经过了菜单条上的“校园大观”来控制。那么如此可以这样继续进行：选定菜单条中的“校园大观”（要确保该字样的超链接地址为“#”，即空链接）字样，在单击行为面板中的“+”按钮，然后在弹出的菜单中选择“Timeline/PlayTimeline”，在接着弹出的对话框中选择“Timeline1”后单击确定按钮，那么这时行为面板中将增加一个行为，在其“Events”下拉列表中选择“onMouSeover”事件，我们就可以表示当鼠标处于该字样上方时播放动画（如图4）。

　　步骤④：这样一个活动菜单条就制作完成了。其实也是很简单的，大家可以按“F12”键预览其效果，如果效果不理想，可以继续以上步骤，达到你想得到的模样。

　　小编结语：在一些设计活动菜单条中，其实我们还可以设置得更好，例如多样化，个性化的设置，就如QQ的那么多样化，所以我们还需要努力改进，而且我们需要有更多的设计思路，以免没有多样化，个性化。如果大家还需要更多的教程，欢迎继续关注我们课课家教育，我们将为大家带来更多更精彩的教育咨询。