电子教案（第6章第1节）.ppt

网页设计实例制作 第6章第1节 学习目标 了解网页构思及组成 掌握使用Flash MX制作网页的技巧 提高Flash MX软件的综合应用能力 培养使用Flash MX软件制作动画的相关经验。 项目——制作厦门旅游网 介绍厦门的人文景观及风景名胜 小型网站，在3课时内完成 提供素材： 图片信息（厦门的主要风光图片） 文字信息（厦门概况、景点、人文） 该网站至少3页以上。 作品构思 厦门是个海滨城市，因此网页主色调采用蓝色，应用不同深浅的蓝色块，使其富于变化。 作为一个网站，必须要由一个主页和若干子页组成，并且保证各网页的风格一致。 作为一个旅游网，就要有冲击力吸引网民的眼球，一开场就使用较多的动画，利用跳跃的画面，流动的线条来锁定网民的视线，因此考虑制作一个引导页。 网站构成 引导页：网站的开场，制作许多动画效果吸引网民的眼球，并通过将该网页的主要内容或信息展示出来。 主页：通过醒目的4个大按钮，将网站的内容以画龙点睛的方式表现出来。 文字页：使用大量的文字介绍厦门概况、人文、景观。 图片页：以图片的方式将厦门的优美风光展现出来。 制作网站的步骤 阅读素材，确定主题，作品构思 根据题意要求，确定各网页的主要内容，使用哪些动画表示 将各网页链接，合成网站 制作时应注意的问题 主题鲜明，风格统一； 结构合理、规范； 色彩和谐； 导航合理； 尽量将所学的内容都运用到网站制作中。 网站的制作 基本元件 引 导 页 主 页 文 字 页 图 片 页 合成网站 基本元件的制作 背景元件 Logo元件 环形齿轮元件 泡泡装饰元件 返回按钮元件 基本元件的制作——背景元件 采用深浅不同的蓝色系列，以时尚的线条突出整个网页的活力。使用绘图工具、箭头工具和着色工具完成。 操作步骤：绘制矩形框－划分成若干小矩形框－填充小矩形框－去掉线条－放大图形 效果图： 基本元件的制作——Logo元件 采用条形码形式，以简洁明朗的黑色线条表现其内在含义。使用绘图工具、箭头工具和文字工具完成。 操作步骤：绘制黑色的矩形块－扣出条形码形状－文字装饰 效果图： 基本元件的制作——环形齿轮元件 使用白色绘制镂空式的不规则环形齿轮，并制作旋转的运动渐变动画。 操作步骤：绘制4个不等距同心圆－划分同心圆－删除部分线条－制作影片剪辑 基本元件的制作——泡泡装饰 圆形与环形齿轮呼应，使用该装饰能使整个页面更加活泼并能弥补网页上的空白部分。使用绘图工具绘制泡泡，并制作引导线动画和运动渐变动画。 操作步骤：绘制蓝色渐变填充的无边框正圆－绘制白色无边框椭圆－制作影片剪辑(使泡泡颜色渐淡，并垂直向上或曲线向上运动)。 泡泡效果图： 基本元件的制作——返回按钮 在“泡泡”图形元件的基础上制作，与“泡泡装饰”互相对应。有多个网页，就需要能够实现不同网页间的跳转，使用按钮元件可以很好的实现这个功能。 操作步聚：新建按钮元件－在各帧放入泡泡图形－添加文字。 效果图： 引导页的制作 新建文件及制作背景 旋转的Loading动画 黑色布幕 装饰线条移动 图片滚动条 动态Welcome 环形齿轮按钮 修饰页面 引导页的制作——新建文件及制作背景 新建文件： 1.设置文档尺寸大小为 778 像素×430 像素，背景色为黑色，文件名为“loading.fla”。 2.将 “element.fla”文件所有元件，作为库导入到当前文件中。 制作背景： 1.将“背景”元件拖到场景中央。 2.延长时间线至第 150 帧处，即可看到背景的整体效果。锁定图层。 引导页的制作——旋转的Loading动画 制作运动渐变动画，将“loading”字样采用即对称又富有变化的旋转方式吸引网民的视线。 操作步骤：输入文字“loading”并打散－渐变填充文字并制作阴影－将每个字母转换成图形元件－分别制作每个字母的运动渐变效果。 效果图： 引导页的制作——黑色布幕 绘制一块黑色布幕，将其制作成运动渐变动画，使黑色布幕自上而下拉开，进入到梦幻般的蓝色，有一种豁然开朗的效果。 操作步骤：绘制黑色无边框矩形－将矩形修改成布幕效果－将布幕转换成图形元件－制作自上而下拉开的运动渐变。 引导页的制作——移动装饰线条 用白色绘制上下两组线条，上下两组线条数量不一致，使其富于变化，并将其制作成运动渐变动画，分别从画面两侧进入视线，展现出页面的动感，并由此引出图片滚动条。 操作步骤：分别绘制间距不同的3条白线和4条白线的图形元件－制作元件从画面两侧进入视线的运动渐变。 效果图： 引导页的制作——图片滚动条 导入素材中准备的风光图片资料，制作“图片滚动效果”的影片剪辑，然后制作遮罩层动画，使图片在指定范围内循环出现。 操作步聚：导入图片将其打散并处理成图示效果－几张处理后的图片排列整齐－制作图片滚动