|
网页设计综合实例(下)(2)
7、 我们首先绘制一个最终的弹出菜单的矩形，并设定好需要的填充、描边和特效。
如下图：
8、 打开Style面板，选中刚才创建的矩形，在Style面板的弹出菜单中选择New Style创建一个新的样式，并命名为MyStyle，如下图：
此时您的Style面板中已经添加了一个新的样式。
9、 选择Style面板弹出菜单中的EXPort Styles将刚才的这个自定义样式输出到Fireworks目录里/Configuration/Nav Menu/，并将它命名为Styles.stl，但要注意必须先将原有的Styles.stl文件备份。
10、 我们再次编辑刚才创建的弹出菜单，就可以选择我们自定义的样式了。
11、 按F12预览生成的弹出菜单，如下图：
12、 此时表示二级菜单的小箭头默认为黑色，所以看不见，我们也可以在最后修改此箭头样式和颜色，具体方法参见本书前面章节。
十一、 创建变形动画
给一个网站添加动画对于访问者的时间和金钱都是一个不小的花销，因此在添加您的动画前，一定要先考虑好如下问题：动画能否增进您的信息传达力度，访问者下载和播放动画是否迅速、方便，是否有足够的组成动画的内容和资源。尽管网络动画及其传递方式正在不断的发生改变，但传统的GIF动画依然有着不可忽视的优势，我们在这里介绍一下创建GIF动画的两种途径。
1、 在层面板新建一个Logo层，将其置于Web Layer层下方。
2、 我们需要将背景层修改为一个共享图层，打开层面板，切换到背景层，在弹出菜单中选择Share This Layer，将背景层共享，此层上的内容将在所有帧都可见，此层的后面将出现一个共享图标，如下图：
3、 切换到Logo层，在文档的右上角创建www.karsong.com文字。
4、 按F8将其转换为图形符号Graphic Symbol。
5、 打开Effect面板，对此符号的实例添加红色Glow效果，如下图所示：
6、 选中此实例，在右键弹出菜单中执行Edit>Clone，复制出一个新的实例，并且带有相同的Glow特效。
7、 在Effect面板修改第二个实例的特效，将其改为黄色，并改变Glow的范围和大小，如下图：
8、 选择这两个实例，在右键弹出菜单中执行Symbols>Tween Instances创建变形动画，设定插入帧数为6帧，并勾选Distribute to Frames分布到帧，如下图所示：
9、 打开Web Layer图层的显示，在此动画位置创建一个切片。
| 
