Dreamweaver+ASP动态网页设计从新手到高手
上QQ阅读APP看书,第一时间看更新

3.2.2 设计有动画效果的Banner

设计网页Banner的具体操作步骤如下。

01 执行“文件”|“打开”命令,打开图像文件,如图3-9所示。

图3-9 打开的图像文件

02 执行“窗口”|“时间轴”命令,打开“时间轴”面板,单击底部的“复制所选帧”按钮,复制帧,如图3-10所示。

03 执行“文件”|“置入”命令,弹出“置入”对话框,在对话框中选择要置入的文件2.jpg,如图3-11所示。

图3-10 复制帧

图3-11 选择要置入的文件

04 单击“置入”按钮,将图像文件置入,并调整置入文件的大小与原来的图像同样大,如图3-12所示。

图3-12 置入的图像

05 选择工具箱中的“横排文字工具”,在舞台中输入文本,将文本分两个图层,如图3-13所示。

图3-13 输入文本

06 选中第1帧,在“图层”面板中将2图层和“山寺桃花始盛开”图层隐藏,如图3-14所示。

图3-14 隐藏图层

07 在“时间轴”面板中单击“帧延迟时间”按钮,设置帧延迟时间为2秒,如图3-15所示。

08 将第2个帧延迟时间设置为2秒,如图3-16所示。

图3-15 设置帧延迟时间

图3-16 设置帧延迟时间

09 选中第2帧,在“图层”面板中将“背景”图层和“人间四月芳菲尽”图层隐藏,如图3-17所示。

图3-17 隐藏图层

10 执行“文件”|“存储为Web所用格式”命令,弹出“存储为Web所用格式”对话框,选择GIF方式输出图像,如图3-18所示。

11 单击“存储”按钮,弹出“将优化结果存储为”对话框,在对话框中设置名称为banner.gif,格式选择“仅限图像”,如图3-19所示。

图3-18 “存储为Web所用格式”对话框

图3-19 “将优化结果存储为”对话框

12 单击“保存”按钮即可保存图像,如图3-20所示。

图3-20 保存图像效果