[电脑基础知识]第6章 制作网页元素.ppt

第6章 制作网页元素 6.1 制作切片 6.2 制作导航栏 6.3 制作弹出菜单 6.4 制作动画 6.5 优化与导出 6.4.2 制作逐帧动画 1．制作打字效果 新建250*70像素的文档，输入文字“逐帧动画”，设置好文字的字体、字号、颜色等。 执行“窗口”→“状态”命令，打开“状态”面板。单击“状态”面板右上角的“菜单”按钮 ，在菜单中选择“添加状态”命令，在“当前状态之后”添加4个状态。 6.4.2 制作逐帧动画 1．制作打字效果 6.4.2 制作逐帧动画 1．制作打字效果 选择好状态1中的文本对象，单击“状态”面板右上角的“菜单”按钮，在菜单中选择“复制到状态”命令，将文本对象复制到每个状态 6.4.2 制作逐帧动画 1．制作打字效果 编辑各个状态中的内容，注意选择文本的对齐方式为左对齐 。 6.4.2 制作逐帧动画 1．制作打字效果 在“状态”面板中单击状态1，然后按住“Shift”键单击状态4，选择状态1到状态4，单击“状态”面板右上角的“菜单”按钮 ，在弹出的菜单中选择“属性”命令，如图所示，设置延迟时间为20/100。双击状态5的延迟时间，将其改为80/100。 6.4.2 制作逐帧动画 1．制作打字效果 6.4.2 制作逐帧动画 1．制作打字效果 这时动画已经基本制作完成，单击文档窗口下方的“播放”按钮 ，已经可以看到动画效果。 导出动画：在“优化”面板中设置文件类型为“GIF动画”，然后选择“文件”→“导出”命令生成GIF动画文件。 6.4.2 制作逐帧动画 2．修改天使动画 打开一张“玫瑰花”的图片文件，使用“魔术棒”工具 选择背景，并将其删除，使用“缩放”工具 将“玫瑰花”缩小并旋转到合适角度。 用“指针”工具 选择调整好的“玫瑰花”，按【Ctrl+C】复制；打开“天使”动画文件，按【Ctrl+V】粘贴并调整好位置。 6.4.2 制作逐帧动画 2．修改天使动画 6.4.2 制作逐帧动画 2．修改天使动画 单击“状态”面板右上角的“菜单”按钮 ，在菜单中选择“复制到状态”命令，在弹出的“复制到状态”对话框中，选择“所有状态”。 6.4.2 制作逐帧动画 2．修改天使动画 然后分别调整状态2至状态6中玫瑰花的位置（使玫瑰花与天使的相对位置不变）。 单击文档窗口下方的“播放”按钮 ，查看动画效果；在“优化”面板中设置文件类型为“GIF动画”，然后选择“文件”→“导出”命令生成GIF动画文件。 6.4.3 动画制作命令 选中要制作动画的“对象”，执行“修改”→“动画”→“选择动画”命令，可以弹出如图所示的“动画”对话框，从中设置动画效果 6.4.3 动画制作命令 例如：制作文字从底部向上移动并放大的动画效果： 新建320*200像素的文档，在底部居中输入文字“文字动画”，字体：黑体、字号20，颜色：#FF3000。 用“指针”工具选中“文字动画”，执行“修改”→“动画”→“选择动画”命令， 在“动画”对话框进行设置，单击“确定”按钮。 双击状态10的延迟时间将其改为100/100秒 6.4.3 动画制作命令 6.5 优化与导出 网页图像的要求是在尽可能短的传输时间里，发布尽可能高质量的图像。 在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸，从而使图像的下载速度达到最快。为此，必须对图像进行优化。 6.5 优化与导出 在Fireworks中，所有的优化操作都可以在“优化”面板中进行（也可以在“导出预览”对话框中进行），优化设置仅用于输出图像。 因此，用户可以自由地对图像进行优化并调整其优化设置，而不必担心会损坏原图。 6.5 优化与导出 1．优化JPEG格式 选择2幅或4幅模式，在优化面板中选择输出格式为JPEG，设置“品质”： 品质越高，图像效果越好，但压缩较少，文件体积较大； 品质越低，图像效果越差，但图像体积越小； 6.5 优化与导出 1．优化JPEG格式 将优化后的图像与原图像比较，选择一个图像效果与文件体积的均衡点。 如图所示，100品质文件大小88.65K，75品质文件大小14.61K，它们相差6倍，但文件的质量变化不大。 6.5 优化与导出 1．优化JPEG格式 也可以使用“选择性品质”，以保持“文本”和“按钮”的品质，如图所示。单击“选择性品质”按钮，在弹出的“可选JPEG设置”对话框中设置“品质”。 6.5 优化与导出 1．优化JPEG格式 6.5 优化与导出 2．优化GIF格式 选择2幅或4幅模式，在优化面板中选择输出格式为GIF或GIF动画，在“索引调色版”处选择“Web最适色”即可。 6.5 优化与导出 2．优化GIF格式 如果要输出透明背景图片，首先使画布背景透明，在“优化”面板的“选择透明效