网页设计与制作 高等教育应用型本科计算机类课程规划教材 胡一波 教学课件 第14章 网页设计制作综合实例.pptVIP

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