![Dreamweaver+ASP动态网页设计从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/247/34233247/b_34233247.jpg)
上QQ阅读APP看书,第一时间看更新
3.2.2 设计有动画效果的Banner
设计网页Banner的具体操作步骤如下。
01 执行“文件”|“打开”命令,打开图像文件,如图3-9所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P42_38121.jpg?sign=1738934095-jwg98iq40CXzmnKZsomgvNhvNdxMNLLy-0-2bd2a2fbc661352170c0f5994e51406d)
图3-9 打开的图像文件
02 执行“窗口”|“时间轴”命令,打开“时间轴”面板,单击底部的“复制所选帧”按钮,复制帧,如图3-10所示。
03 执行“文件”|“置入”命令,弹出“置入”对话框,在对话框中选择要置入的文件2.jpg,如图3-11所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P42_38134.jpg?sign=1738934095-bV4XStSKxtf2n5AIUR7uKSlSXnq5p3uU-0-f5390788847ea99f0f7ce81975a6a4d4)
图3-10 复制帧
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P42_38135.jpg?sign=1738934095-98p7vEBhKMi00hYa1JHfLMpKJep8tQkT-0-346bcca26846be2d7b24e6e7bab6a1e7)
图3-11 选择要置入的文件
04 单击“置入”按钮,将图像文件置入,并调整置入文件的大小与原来的图像同样大,如图3-12所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P42_38143.jpg?sign=1738934095-VJjijFvUHicyoWPdsmHmRBj3kf79bZ87-0-0ee7ed41b23a4fb965e3c2e11fb3b7ac)
图3-12 置入的图像
05 选择工具箱中的“横排文字工具”,在舞台中输入文本,将文本分两个图层,如图3-13所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P43_38157.jpg?sign=1738934095-GI6quEZ7RV5q9cSH3fvgOnotzIIlypxX-0-207241d117306d071d08a46682fe7a8e)
图3-13 输入文本
06 选中第1帧,在“图层”面板中将2图层和“山寺桃花始盛开”图层隐藏,如图3-14所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P43_38165.jpg?sign=1738934095-QRP1JBTaCL3IcciYix4f0PsBpIDiMBPM-0-15a8f7d68819aff1cbb189b91b114bb6)
图3-14 隐藏图层
07 在“时间轴”面板中单击“帧延迟时间”按钮,设置帧延迟时间为2秒,如图3-15所示。
08 将第2个帧延迟时间设置为2秒,如图3-16所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P43_38178.jpg?sign=1738934095-VD2Pqt7ydNgFytTq90eraShBGf26St3A-0-6241a35004c7de7de3108252c7e7ec3a)
图3-15 设置帧延迟时间
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P43_38179.jpg?sign=1738934095-TySmAYisTbjXVjpyelJozaqwpfgkC5Yo-0-9750c66e0b97eff475fa549244dd6a2f)
图3-16 设置帧延迟时间
09 选中第2帧,在“图层”面板中将“背景”图层和“人间四月芳菲尽”图层隐藏,如图3-17所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P44_38191.jpg?sign=1738934095-p13LTU4qDFsXNnjCn2EGAYU0DWrN3DR7-0-dc49297e09f361f1e9c6f3cebdccfcc9)
图3-17 隐藏图层
10 执行“文件”|“存储为Web所用格式”命令,弹出“存储为Web所用格式”对话框,选择GIF方式输出图像,如图3-18所示。
11 单击“存储”按钮,弹出“将优化结果存储为”对话框,在对话框中设置名称为banner.gif,格式选择“仅限图像”,如图3-19所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P44_38204.jpg?sign=1738934095-sAhncdiXnqoAj2lQrXIKKs0Vs7ScLbUp-0-3d069902bf28a9e6a6f59aeb5fc89eb9)
图3-18 “存储为Web所用格式”对话框
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P44_38205.jpg?sign=1738934095-kSkbGHmy56NGSTJvIzCxGJuntxpZ9IA1-0-ad507cc0e797e0a1862653cee233e54e)
图3-19 “将优化结果存储为”对话框
12 单击“保存”按钮即可保存图像,如图3-20所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P44_38213.jpg?sign=1738934095-vXmStOhar8LcGBZwVHQ9RYojJJ9YAZc1-0-e8369bb1cad8c87a8b888ac612c5074a)
图3-20 保存图像效果