![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=1739445905-V7QYCOAxiKj5rXppCpRHA7CPBZozSmV9-0-ab9cd15cdf4b8f51ad586497f5f1d9e7)
图3-9 打开的图像文件
02 执行“窗口”|“时间轴”命令,打开“时间轴”面板,单击底部的“复制所选帧”按钮,复制帧,如图3-10所示。
03 执行“文件”|“置入”命令,弹出“置入”对话框,在对话框中选择要置入的文件2.jpg,如图3-11所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P42_38134.jpg?sign=1739445905-Pae177wRjwMiAp95HCIHyaqvg7NBZL8s-0-9541a2fc2cf36f8ad1e92d3f957e7554)
图3-10 复制帧
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P42_38135.jpg?sign=1739445905-qyL3JnJysNh6HR4bUlifY7EysNb496LX-0-dbf91ad925fb0cbc0bbabd4f05d354ea)
图3-11 选择要置入的文件
04 单击“置入”按钮,将图像文件置入,并调整置入文件的大小与原来的图像同样大,如图3-12所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P42_38143.jpg?sign=1739445905-bJrlCrD2Z9oFzsQBQxcqE77h9oAUISRc-0-8bc4bc5e2f9ded2a98f897c654fe46ba)
图3-12 置入的图像
05 选择工具箱中的“横排文字工具”,在舞台中输入文本,将文本分两个图层,如图3-13所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P43_38157.jpg?sign=1739445905-iPCj1OKqoKiSWf3s4F9CxRzjZrXY6nRW-0-106094bd0c32b5c7f88bb68d703b82d3)
图3-13 输入文本
06 选中第1帧,在“图层”面板中将2图层和“山寺桃花始盛开”图层隐藏,如图3-14所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P43_38165.jpg?sign=1739445905-wSQs73brA9shuZvVK0VILcLVUk6IxDsI-0-3ebe9cd51fb6a77884ac7a6cb5ceb3c6)
图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=1739445905-DHJlVGL4SWV3KbxSq8kvmyfGcJ2WSfFg-0-e0ea25b43c9e78b41507beb0cb9c8d77)
图3-15 设置帧延迟时间
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P43_38179.jpg?sign=1739445905-E6kFnCpql3hK9chPwXlqWhSrMgRdry4Q-0-dd0bf16f5f46ee27cad4fd6fdf259ae1)
图3-16 设置帧延迟时间
09 选中第2帧,在“图层”面板中将“背景”图层和“人间四月芳菲尽”图层隐藏,如图3-17所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P44_38191.jpg?sign=1739445905-qbM6042OK5h0yJ1A2bb5hmfwbSOLBwnF-0-b61db4559bae2b52a780bcf2e8e645b0)
图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=1739445905-uuJZdoK7ankHhMjucyP2YQH37USY0DjG-0-9b6b9a8dc2c5547617e9531e1b719586)
图3-18 “存储为Web所用格式”对话框
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P44_38205.jpg?sign=1739445905-2rIEP5OXSnIQMyvfU9Ziw6ijRvlkwJ5H-0-569b848db9684f5c86e4729d71711d57)
图3-19 “将优化结果存储为”对话框
12 单击“保存”按钮即可保存图像,如图3-20所示。
![](https://epubservercos.yuewen.com/42857A/18320967001642506/epubprivate/OEBPS/Images/Figure-P44_38213.jpg?sign=1739445905-TuyjiLba6hch2ClU5GhqzuB8BETXzV3D-0-c380e8a63bc03833563db3ddcf7a81e8)
图3-20 保存图像效果