电子课件 西南科技大学网络教育学院 网络学习资源.ppt

第四章 动态网页设计 本章要点：除了直接使用HTML标识制作动态网页外，在网页中添置动态效果的最通用的方法有：GIF动画、Java小应用程序和JavaScript脚本。至于微软的ActiveX控件和VBScript的动态效果我们将在ASP中介绍。 第一节 使用GIF动画 GIF动画是制作网页动态效果的最简单的方式，支持它的浏览器也最多，而且最可靠。 一. 什么是GIF动画 GIF动画是GIF文件的一种格式，其原理是把一组具有动画片段的GIF图像缀加在一起合成一个GIF图像。在网页上使用GIF动画很简单，就像普通的GIF图片一样，使用img标识。因此我们的工作重点是如何自己制作GIF动画。 制作GIF动画有几种齐名的软件，它们是GIF Construction、Microsoft GIF Animator和Ulead GIF Animator等。其工作原理都差不多，学会了一种，其他软件也就能举一反三了。由于Ulead GIF Animator更加简单易学，且是中文界面的免费软件，因此我们就主要介绍它的使用方法。 这里我们使用的是Ulead GIF Animator 5.0版，它安装简便，且不需要注册就能使用其全部功能。整个安装过程只需一路“确定”就可以把它安装到默认位置上，不过安装完成后要运行安装包中的“P_UGIF5.exe”文件去汉化它。准备好了吗？现在开始。 二. 图片叠加成GIF动画 我们准备来做一个女孩玩球的GIF动画，制作顺序如下： （一）插入图片 第一步：启动Ulead GIF Animator，如图4-1所示： 第二步：单击菜单栏的“文件/动画向导”或“帮助/启动向导”选项，弹出“开始向导”对话框，如图4-2所示： 第三步：点击“动画向导”按钮，又弹出“优化向导—设置画布大小”对话框，我们根据我们已经准备好的图片的尺寸来设置画布的高和度，如图4-3所示： 第四步：点击“下一步”后，“优化向导—设置画布大小”对话框变成“动画向导—选择文件”对话框，如图4-4所示： 第五步：点击“添加图像”按钮，又弹出一个对话框“打开”，我们从中浏览到预先准备好的图片所在的目录，选中其中一个图像文件后再点击“打开”（也可直接双击一个图像文件），如图4-5所示： 第六步：被添加的文件出现在“动画向导—选择文件”对话框的列表中，如图4-6所示： 重复第五步和第六步，即不断地按“添加图像”，把我们事先为这个动画准备好的图像文件都添加进去，如果添加了不需要的文件，可以选中它后点“删除”按钮，如图4-7所示： 第七步：单击“下一步”，“动画向导—选择文件”对话框又变为“动画向导—帧持续时间”对话框，我们在这里设置动画放映时的速度。这里有两个输入框，一个用来确定每一帧要用多少个百分之一秒，另一个用来确定每一秒放映多少帧，其实这两个输入框讲的是同一回事，你只要改变了其中一个的值，另一个也会自动改变的。该对话框左下角还有一个演示区域，你可以很直观地看到当前选定的放映速度的演示效果（数字1～9的变化情况），如图4-8所示： 第八步：设置好速度后点击“下一步”，此时出现了“动画向导—完成”对话框，看来我们的任务完成了，如图4-9所示： 点击“完成”按钮，回到主界面，如图4-10所示： （二）保存文件 为保险起见，在我们插入所有所需的图像文件后，应立即保存该文件。点击菜单栏上的“文件/另存为/GIF文件”（注意，即使是新建的动画文件也不要点“文件/保存”选项，因为此时虽然也出现一个“另存为”对话框，但能保存的文件格式只有*.uga一种（即Ulead GIF Animator文件）。如图4-11所示： 在弹出的“另存为”对话框中保存该GIF动画，如图4-12所示： （三）预览动画 要想预览刚生成的这个GIF动画，可以点击主界面底部的“帧面板”上的“播放”按钮，也可以点击主编辑区上的“预览”选项卡，如图4-13所示： 如果不满意，可以点击主界面底部的“帧面板”上的“停止”按钮，也可以点击主编辑区上的“编辑”选项卡来回到编辑视图，重新修改动画。 三. 新建GIF动画 （一）手工建立GIF动画 第一步：在Ulead GIF Animator的主界面中点击“文件/新建”，弹出如图4-14所示的“新建”对话框，在这里可以设置画布的尺寸，以及画布底色。如果选取“单色”，则还可以在右下角的预览框里设置具体的颜色。这里我们选择“透明”。 第二步：在主界面左侧的控件箱中选取适当的控件，如各种画笔、文字输入工具等，这里我们就选择“文字工具”来输入文字。点击“T”图形按钮后，把鼠标移至编辑区，鼠标变成一个箭头加一个“I”字形插入光标，点击鼠标，弹出如图4-15所示的“文字输入框”对话框： 第三步：在“文字输入框”里输入文字，并且可以在此格式化输入的文字（字