《网页设计与制作》(第二版)电子第十二章综合实训课件解析.ppt

第五篇 综合实训 Macromedia公司推出的Flash MX 2004 Dreamweaver MX 2004和Fireworks MX 2004，三者必须是协同工作，才能最终发挥其强大的功能。 本篇通过网页制作综合实例，详细讲述了首页面的设计原则和规划思想、个人主页制作的一般流程等内容，介绍建立网站的制作流程、制作方法以及制作网站的技巧和注意事项。 通过本章的学习，可以模仿或独立完成类似的中小型网站的制作。 第十二章 网站主页制作实例 12.1 运用Flash MX 2004制作广告条幅 12.2运用Fireworks MX 2004制作网站图标和导航条 12.3运用Dreamweaver MX 2004规划网站和制作网页 一.制作动态广告条幅 操作步骤： （1）选择“文件”→“新建”命令，在弹出的“新建文档”对话框中，选择“常规”选项卡上的“Flash文档”类型，单击“确定”按钮，进入动画编辑的主场景。 （2）选择“修改”→“文档”命令，在弹出“文档属性”对话框中将舞台的尺寸设置为550*120px ，背景为淡蓝色。 （3）选择“文件”→“导入”→“导入到舞台”命令，在弹出的“导入”对话框中选择一幅图片，单击“打开”按钮将图片导入到舞台中央，并利用任意变形工具将其大小调整到与舞台相宜， （4）在层控制区中，单击“插入图层”按钮，插入一个新图层，在工具栏中单击“文本工具”按钮，在属性控制面板中设置字体为华文新魏，颜色为白色，字号为25，在舞台中输入文本“网页设计三剑客教程”。 （5）选中文本，单击“窗口”→“设计面板”→“对齐”命令项，在弹出的“对齐”面板中，单击“相对于舞台”、“垂直中齐”及“水平中齐”按钮，将文本中心与舞台中心对齐 （6）选中“图层2”的第10帧，按F6键插入关键帧，单击“修改”→“变形”→“缩放与旋转”命令，在弹出的“缩放与旋转”对话框中，将文本缩放比例设置为200%，单击确定按钮。 （7）右单击该图层的第1帧，在弹出的菜单中选择“复制帧”命令，右单击第20帧，在弹出的菜单中选择“粘贴帧”命令。 （8）分别单击图层2的第1帧、第10帧，在属性控制面板的补间下拉选项中选择动作，先后为第1帧和第10帧创建动作补间动画 。 （9）在层控制区中，单击“插入图层”按钮，插入一个新图层，选中“图层3”的第20帧，按F7键插入空白关键帧，在工具栏中单击“文本工具”按钮，在属性控制面板中设置字体为华文新魏，颜色为黑，字号为25，在舞台中输入文本“网页设计三剑客教程”。 （10）选中“图层3”的第30帧，插入关键帧，将文本内容缩放200%，右单击该图层的第20帧，在弹出的菜单中选择“复制帧”命令，右单击第40帧，在弹出的菜单中选择“粘贴帧”命令。分别单击图层3的第20帧、第30帧，在属性控制面板的补间下拉选项中选择动作，先后为第20帧和第30帧创建动作补间动画 （11）在层控制区中，单击“插入图层”按钮，插入一个新图层，选中“图层4”的第40帧，插入空白关键帧，在工具栏中单击“文本工具”按钮，在属性控制面板中设置字体为华文新魏，颜色为黑，字号为60，在舞台中输入文本“图文并茂 深入浅出”。将文本移到舞台之外的右侧。 （12）选中该图层的第60帧，插入关键帧，并将文本内容移到舞台之外的左侧，选中第40帧，在属性控制面板中设置“补间”为动作，选中“图层1”的第60帧，按F5键插入帧，时间轴的最后状态如图所示 （13）选择“文件”→“发布设置”命令，要打开的“发布设置”对话框中，直接单击“确定”按钮，将该flash动画导出为banner.swf文件。 二.制作banner动画 操作步骤 （1）首先准备好几张素材图片，就是这里广告的主要演示图片。本例我们将添加一个针对网页设计三剑客教程广告动画，所以准备了三幅带软件快捷键图标的图片。 （2）选择“文件”→“新建”命令，在弹出的“新建文档”对话框中，选择“常规”选项卡上的“Flash文档”类型，单击“确定”按钮，进入动画编辑的主场景。 （3）选择“修改”→“文档”命令，在弹出“文档属性”对话框中将舞台的尺寸设置为190*170px ，背景为白色 （4）选择新建“文件”→“导入” →“导入到舞台”命令，在打开的导入对话框分别将用户准备的素材图片导入到Flash的舞台中。 （5）依次选中导入到舞台中的图片，并选择“修改”→“转换为元件”命令，在打开的“转换为符号”对话框中指定该符号名分别为元件flas、元件fire和元件drea指定行为为图形，并单击确定按钮将每个位图都转换为图形元件 。 （6）将舞台上的元件删除，单击时间轴第1帧，将元件flas拖到舞台，单击第10帧，按F7插入空白关键帧，将元件fire拖到舞台，单击第20帧，按