第11章 制作网页动画与Web对象.ppt

第11章 制作网页动画与Web对象 《网页制作基础》 本章目录 11.1 动画的制作与优化 11.2 按钮及导航栏的实现 11.3 切片及热点 11.1 动画的制作与优化 动画图形可以为网站增加一种活泼生动、复杂多变的外观。在Fireworks 8 中，可以创建包含活动的横幅广告、徽标和卡通形象的动画图形。例如，可以在徽标淡入淡出的同时让公司的吉祥物在网页上来回跳动。 在 Fireworks 中制作动画的方法是通过创建元件并不停地改变它们的帧属性来产生运动的错觉。一个元件就像是一个演员，其动作是由用户设计的，每个元件的动作都储存在一个帧中，当按顺序播放所有帧时，就成了动画。可以对元件应用不同的设置以逐渐改变连续帧的内容。例如，可以让一个元件在画布上来回移动、淡入或淡出、变大或变小或者旋转。 因为单个文件中可以有多个元件，这样就可以创建一个不同类型的动作同时发生的复杂动画。 11.1 动画的制作与优化 在 Fireworks 中，可以通过向称为动画元件的对象分配属性来创建动画。一个元件的动画被分解成多个帧，帧中包含组成每一步动画的图像和对象。一个动画中可以有一个以上的元件，每个元件可以有不同的动作。不同的元件可以包含不同数目的帧，当所有元件的所有动作都完成时，动画就制作完成了。 11.1 动画的制作与优化 Step 1 新建一文件，大小为450x120像素，然后用圆形、渐变填充做一个球的样子。 Step 2 选中这个球形，选择【修改】菜单→【动画】→【选择动画】命令，或者右键选择【动画】→【创建所选的动画效果】命令，在弹出【动画】对话框中设置参数。 Step 3 单击〖确定〗按钮，Fireworks会询问是否添加新的帧，再单击〖确定〗按钮，就会自动添加新的帧。 Step 4 至此，动画制作完成，单击文档下面的播放按钮即可进行动画的预览。 11.1 动画的制作与优化 动画制作完成后，很多时候需要修改来达到需求，Fireworks提供了【帧】面板，使用【帧】面板可以看到每个帧的内容，【帧】面板是创建和组织帧的地方，可以命名帧、重新组织帧、手动设置动画的定时以及将对象从一个帧移到另一个帧。每个帧也都有若干相关的属性，通过设置帧延时或隐藏帧，可以在制作和编辑过程中使动画达到自己想要的效果。通过【窗口】→【帧】来打开【帧】面板。 11.1 动画的制作与优化 设置帧延时首先选择一个或多个帧，若要选择一系列相邻的帧，可以按住Shift键并单击第一帧和最后一帧的名称。若要选择一系列不相邻的帧，可以按住Ctrl键并单击每一帧的名称。然后从【帧】面板【选项】菜单中选择【属性】，或者双击帧延时列，【帧属性】弹出窗口出现，为帧延时输入一个值，按回车键或在面板外单击以关闭弹出窗口即可。 11.1 动画的制作与优化 11.1 动画的制作与优化 11.1 动画的制作与优化 11.1 动画的制作与优化 11.1 动画的制作与优化 11.1 动画的制作与优化 11.2 按钮及导航栏的实现 按钮是网页的导航元素，Fireworks 的按钮编辑器有创建按钮的功能，可以自动完成许多按钮制作任务，快速得到一个便于使用的按钮元件。创建了按钮元件后，就可以轻松地创建该元件的实例来制作导航栏了。按钮最多有四种不同的状态。每种状态表示该按钮在响应各种鼠标事件时的外观。 11.2 按钮及导航栏的实现 11.2 按钮及导航栏的实现 Step 1 打开 Fireworks，执行【文件】菜单→【新建】命令，建立一个文档。选择【编辑】菜单→【插入】→【新建按钮】命令，启动【按钮编辑器】。 Step 2 在【按钮编辑器】中，选择【释放】状态，画一个宽69像素，高20像素，x，y坐标都为0的矩形。 Step 3 选中矩形，然后打开【样式】面板，单击并且应用一种样式，之后在【属性】面板上点击填充颜色块，实例中选择红色。 Step 4 可以选中按钮，单击【属性】面板上的按钮，增加各种【效果】。 Step 5 在【按钮编辑器】的【释放】状态下，使用工具面板上的【文本工具】，在按钮上输入文字，在【属性】面板上，选择“宋体”、“12像素”、“不消除锯齿”。 11.2 按钮及导航栏的实现 11.2 按钮及导航栏的实现 导航栏是指提供到网站不同区域的链接的一组按钮。它通常在整个站点保持一致，从而可以提供一种固定的导航方法，所有网页的导航栏外观都是一样的。制作导航栏的方法是：首先在【按钮编辑器】中创建一个按钮元件，然后将该元件的实例放到工作区中。 11.2 按钮及导航栏的实现 Step 1 创建按钮后，【库】中已有该按钮实例，打开【库】面板。 Step 2 为了对齐各个按钮，需要先作出引导线。选择【视图】菜单→【标尺】命令。从显示的水平和垂直标尺上，拖出水平和垂直