网页设计制作综合实例

14.1 应用Flash制作首页动画条幅
网页的首页条幅可以由Flash制作，也可由Fireworks制作。这 里我们用Flash制作动画条幅，其操作步骤如下： （1）启动Flash8，执行“文件”→“新建”菜单命令，在弹出 的“新建文档”对话框中，选择“常规”选项卡上的“Flash 文档”类型，单击【确定】按钮，进入动画编辑的主场景。 （2）执行“修改”→“文档”菜单命令，在弹出的“文档属 性”对话框中将舞台的尺寸设置为760*126px，背景为淡蓝色。 （3）执行“文件”→“导入”→“导入到舞台”菜单命令，在 弹出的“导入”对话框中选择一幅图片，单击“打开”按钮 将图片导入到舞台中央，并利用任变形工具将其大小调整到 与舞台相宜。 （4）在层控制区中，单击“插入图层”按钮，插入一个新图 层，在工具栏中单击“文本工具”按钮，在属性控制面板中 设置字体为方正姚体，颜色为白色，字号为26，在舞台中输 入文本“网页设计与制作课程网站”。
图14-2 在图层2创建补间动画
14.1 应用Flash制作首页动画条幅
（9）在层控制区中，单击“插入图层”按钮，插入一个新图层，选中“图层3”的 第20帧，按F7键插入空白关键帧，在工具栏中单击“文本工具”按钮，在属性控 制面板中设置字体为方正姚体，颜色为黑，字号为26，在舞台中输入文本“网页 设计与制作课程网站”。位置及对齐方式与步骤（5）相同。注意：原图层2第20 帧的文字内容不要删除。 （10）选中“图层3”的第30帧，插入关键帧，将文本内容缩放200%，右键单击该 图层的第20帧，在弹出的菜单中选择“复制帧”命令，右键单击第40帧，在弹出 的菜单中选择“粘贴帧”命令。分别单击图层3的第20帧、第30帧，在属性控制面 板的补间下拉选项中选择动画，先后为第20帧和第30帧创建补间动画。如图14-3 所示。
（3）创建按钮对鼠标动作响应的不同状态，如鼠标滑过时字 体颜色有改变，或鼠标按下时按钮颜色发生变化等。可按下Ctrl同 时按下按钮及文本，按下复制组合键Ctrl+C,分别选择滑过选项卡和 按下选项卡，按下组合键Ctrl+V进行粘贴，来更改按钮颜色或字体 颜色。
14.2.1 应用Fireworks制作导航条
图14-3 在图层3中创建补间动画
14.1 应用Flash制作首页动画条幅
（11）在层控制区中，单击“插入图层”按钮，插入一个新图层，选中 “图层4”的第40帧，插入空白关键帧，在工具栏中单击“文本工具”按钮， 在属性控制面板中设置字体为华文隶书，颜色为黑，字号为52，在舞台中 输入“工学结合项目导向任务驱动”。将文本移到舞台之外的右侧。 （12）选中该图层的第60帧，插入关键帧，并将文本内容移到舞台之外的 左侧，选中第40帧，在属性控制面板中设置为“补间”动画，选中“图层 1”的第60帧，按F5键插入帧，时间轴的最后状态如图14-4所示。
图14-7 按钮导航的排列状态
14.2.1 应用Fireworks制作导航条
（6）选中第2个按钮，在属性面板中修改文本内容为：教学大纲，链 接地址为web/jxdg.htm，依次修改其它按钮文本及链接地址为：文本：授课 教案，链接：web/skja.htm；文本：教学课件，链接：web/jxkj.htm；文本： 实训指导，链接：web/sxzd.htm；文本：习题解答，链接：web\xtjd.htm， 如图14-8所示。
（1）新建一个Fireworks文档。执行“文件”→“新建”菜单命 令，在“新建文档”对话框中确定画布的宽度为960、高100、颜色 为白色，然后单击“确定”按钮。
（2）执行“编辑”→“插入”→“新建按钮”菜单命令，选用 圆角矩形矢量工具创建一个按钮符号，按钮颜色为蓝色，宽为163， 高为50，文字内容为首页。如图14-5所示。
14.1 应用Flash制作首页动画条幅
（5）选中文本，执行“窗口”→“对齐”菜单命令，在 弹出的“对齐”面板中，单击相对于舞台“垂直中齐” 及“水平中齐”按钮，将文本中心与舞台中心对齐，如 图14-1所示。
图14-1 首页条幅文本内容 （6）选中“图层2”的第10帧，按F6键插入关键帧，执行 “修改”→“变形”→“缩放与旋转”菜单命令，在弹出的 “缩放与旋转”对话框中，将文本缩放比例设置为200%， 单击确定按钮。
图14-5ks制作导航条
（4）执行“窗口”→“库”菜单命令，激活库面板，如图14-6所示。
14-6 库面板
14.2.1 应用Fireworks制作导航条
（5）将首页按钮从库面板拖到画布中，重复5次， 使画布中有6个按钮，并将它们横向排列好，如图14-7 所示。
14.1 应用Flash制作首页动画条幅
（7）右键单击该图层的第1帧，在弹出的菜单中选择“复制 帧”命令，右键单击第20帧，在弹出的菜单中选择“粘贴帧” 命令。 （8）分别单击图层2的第1帧，第10帧，在属性控制面板的补 间下拉选项中选择动画，先后为第1帧和第10帧创建补间动画， 如图14-2所示。
第14章 网页设计制作综合实例
本章内容提要：
应用前面各章相关知识制作一网站首页，主要内容 如下：
运用Flash制作网首页动画条幅. 运用Fireworks制作网站图标和导航条。 运用Dreamweaver规划网站和制作网页。
本章目标任务：
在掌握网页设计与制作基础知识和Dreamweaver、 Fireworks、Flash网页制作三剑客软件基础上，结 合自己所熟悉的某主题内容制作网站首页。
图14-4 时间轴状态图 （13）执行“文件”→“发布设置”菜单命令，在打开的“发布设置”对 话框中，直接单击“确定”按钮，将该Flash动画导出为sytf.swf文件。
14.2.1 应用Fireworks制作导航条
导航条是一组按钮，当网页的其他部分发生变化时，导航条的 内容基本不发生变化。制作导航条的一种简单的方法是采用复制按 钮的办法，复制结束后再修改按钮上的文字内容和相应的链接。使 用按钮制作导航步骤如下：