DreamweaverFlashFireworks网页制作培训教程第7课
合集下载
Dreamweaver第7课
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
7.2.2 选择AP Div
要在网页中使用AP Div进行布局，需要先将其选中。在 Dreamweaver CS6中可以分别选择单个和多个AP Div，其方 法介绍如下： • 在编辑窗口中单击要选择的AP Div的边框可选择单个AP Div。 • 在“AP 元素”面板中单击要选择的AP Div的名称可选择 单个AP Div。 • 按住Ctrl+Shift键在要选择的AP Div中单击可选择单个AP Div。 • 选择多个AP Div可按住Shift键后依次在需选中的AP Div中 或AP Div边框上单击，也可按住Shift键后依次在“AP 元 素”面板中单击需选择AP Div的名称。
网站设计-Dreamweaver Flash Access VBscript、
7.2.4 对齐AP Div 在网页制作过程中常需要将AP Div进行对齐。 AP Div的对齐方式有左对齐、右对齐、上对 齐和对齐下缘。在进行对齐的过程中， Dreamweaver CS6会默认以最后选择的AP Div 为标准进行对齐。
7.3.1 单个AP Div的属性设置 选择要设置属性的单个AP Div，在“属性” 面板中进行设置即可。
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
7.3.2 多个AP Div的属性设置 如果多个AP Div具有相同的属性需要设置， 则可同时选择这些AP Div，然后再在“属性” 面板中进行设置。
问：每次对网页进行布局时，都会花费很多的时间进行构思，有没有什么能 提高对页面整体布局的分析能力？
《网页设计与制作—DreamweaverMX2004、FireworksMX(精)
《网页设计与制作—Dreamweaver MX 2004、Fireworks MX 2004、Flash MX 2004课程网站》课件介绍《网页设计与制作》是我院高职计算机专业的核心课程，是我院本科非计算机专业学生的计算机公共基础课程的后续选修课程。
该课程主要讲授网站的建立与发布、网页的设计与制作、网页图形图像处理、Flash动画制作。
本课件是以计算机网络技术和多媒体技术为手段开发的课程网站.。
本课件设计制作了两个教学网站——『课堂教学网站』与『远程自学网站。
』（见图1）图1一. 课堂教学网站课堂教学网站适用于在多媒体教室或计算机房教师授课时使用。
该网站课件包括8个模块：（见图2）1. 多媒体网络授课教案：该课件将课程的全部内容制作成多媒体网页，教师在讲授过程中通过访问课程网站，打开多媒体网页，通过讲解、演示教案网页进行授课。
本课件对每章教案都设计了教学目标→范例预览→知识讲解→操作演示→课堂练习→要点总结→实验作业→单元测试8个教学环节。
2. 知识结构图与学习路径导航：本教程分别制作了Dreamweaver网页制作、Fireworks图像制作、Flash动画制作的知识结构图；并在每章教案中使用学习路径流程图进行导航。
学生通过这些结构图，可以较快地建构、掌握整个知识体系。
并方便学生在课后访问课程网站时根据自己的实际水平与学习需要自主快捷地获取知识。
图23. 实验指导：本课件根据各知识点的教学要求设计每次上机练习需要学生完成的实验，在课件中说明实验的制作方法、展示实验范例样本，提供实验素材下载、提供制作方法的动画演示。
学生通过访问课程网站可自主获取课程实验的全部相关信息与在线辅导。
4. 在线测试：为了使学生能够及时对所学的知识进行总结、复习与检测，本课件制作了在线测试系统（目前已制作了48套单元测试卷）。
根据每章内容的重点与知识点进行单元自测。
要求学生在完成每个单元的学习后，通过访问课程网站进行在线测试，测试系统进行自动评判并给出答案或试题分析。
第7章动静态网页设计dreamweaver fireworks photoshop flash教程
图7-4 粘贴后的图层面板
7.1.2 合并拷贝和粘贴入
在“编辑”菜单中还提供了两个命令合并拷贝和粘贴入。这两个命令也是用于复制和 粘贴的操作，但是它们不同于拷贝和粘贴命令，其功能如下： • 合并拷贝：该命令用于复制图像中的所有层，即在不影响原图像的情况下，将选取范 围内的所有层均复制并放入剪贴板中。否则，此命令不能使用。 • 粘贴入：使用该命令之前，必须先选取一个范围。当执行粘贴入命令后，粘贴的图像 将只显示在选取范围之内。使用该命令经常能够得到一些意想不到的效果。 执行“编辑→粘贴入”命令或按下Ctrl+Shift+V快捷键，可以看到粘贴图像后，同样会 产生一个新层，并用遮蔽的方式将选取范围以外的区域盖住，但并非将选取范围之外的区 域删除。 图7-5所示是几个图层组成的图像，将图中的选区合并拷贝到图7-6中，可以看到选区中 图像的两个图层的内容全部复制到图7-6中了，并且新复制的内容组成了一个新的图层。
第7章
Photoshop CS的图像编辑 CS的图像编辑
通过本章的学习，可以学会在不同的图像之间进行剪切、复制和粘贴，以及 旋转和翻转图像，对图像和层进行透视变形，通过撤消和恢复的功能还可以还原 操作失误的图像，此外，还可以使用填充和描边的功能来编辑图像，制作出一些 具有特殊效果的图像和文字。
7.1 7.2 7.3 7.4 7.5
本章目录
7.4.2 使用图案
首先打开一个图像，然后按下Ctrl+A组合键，或用矩形面罩工具选取一个矩形范围，如图所示。 执行“编辑→定义图案”命令定义一个图案，定义图案时，选取的范围必须是一个矩形，并且 不能带有羽化值，否则，“编辑→定义图案”命令不可使用。如图所示是“图案名称”对话框。
定义好图案之后，打开图案的对话框就可以看到刚才定义的图案了，如图所示。
《Dreamweaver8和Flash8案例教程》第7章 站点与链接PPT课件
（6）单击“确定”按钮后，返回 “管理站点”对话框。在对话框的左 边的列表框中，将列出刚创建的站点 名称。单击“完成”按钮，即可返回 Dreamweaver主窗口。 （7）单击“文件”面板内第一个下 拉列表框中的其他站点名称，可以显 示其他站点的结构和文件。
Page 9
2．“文件”面板和“站点”窗口
7.2.2 操作过程
Page 18
7.2.3 相关知识
1．文字或图像与外部HTML和图像 文件的链接
（1）利用“属性”栏内“链接”文 本框和文件夹按钮 建立链接
Page 19
➢用鼠标拖曳选中源文件中要链接的文字或 选中要链接的图像。
➢单击“属性”面板中的“链接”栏中的文 件夹按钮 ，弹出“选择文件”对话框， 利用该对话框选择要链接的HTML文件或 图像文件（即目标文件）。也可以直接在 文本框内输入要链接的HTML文件或图像 文件的路径与文件名。使用路径时，一定 要注意相对路径与绝对路径的使用方法， 通常最好使用相对路径。
Page 12
（3）单击“站点”窗口内的“站点 地图”按钮 右下角的黑色箭头， 可弹出一个菜单。单击该菜单中的 “仅地图”菜单命令，可使右边的 “本地文件”栏消失。单击该菜单中 的“地图和文件”菜单命令，可使右 边的“本地文件”栏显示，即切换到 “地图和文件”状态。
Page 13
（4）单击“站点”窗口内的“站点 文件”按钮 ，可使“站点”窗口 只显示“本地文件”栏，但左边的栏 不消失，只是没有“地图”视图。
Page 15
图7-2-1 建立各个子页面链接后的“跟我学电脑”网页
Page 16
在该页面中，列出了前面各章中制作 的各个网页实例的名称，单击其中任意一 个名称，即可链接到相应的页面。
Dreamweaver-Flash-Fireworks网页制作培训教程第1课
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
1.1.2 典型案例 典型案例——建立“浪度沙发”网站 建立“浪度沙发” 建立
案例目标 本案例通过为“浪度沙发” 本案例通过为 “ 浪度沙发 ” 制作网站来讲解网 页制作的流程及所用到的基本元素， 页制作的流程及所用到的基本元素 ， 制作出的 效果如下图所示。 效果如下图所示。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
1. 认识 认识Fireworks工作界面 工作界面
从【开始】菜单中启动Fireworks后，进 开始】菜单中启动 后 启动界面， 入Fireworks启动界面，如下图所示。 启动界面 如下图所示。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
4. 网页基本元素
成功的网页必须具备以下几个元素。 成功的网页必须具备以下几个元素。 文字：它是网站内容的体现。 文字：它是网站内容的体现。 图片：用于形象地说明网站的目的和内容。 图片：用于形象地说明网站的目的和内容。 导航：它是畅游网站的向导。 导航：它是畅游网站的向导。 动画：用于增加页面的动感。 动画：用于增加页面的动感。 超链接：用于跳转到其他页面。 超链接：用于跳转到其他页面。导航也是 一种超链接。 一种超链接。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
2. 网页设计工具
动画设计软件：目前主要是 动画设计软件：目前主要是Flash，还有 ， 一些小型动画设计软件， 一些小型动画设计软件，如SWiSH和 和 Cool3D等。 等 网页布局软件： 网页布局软件：目前使用最普遍的是 Dreamweaver，也可使用 ，也可使用FrontPage。 。
FIREWORKS8标准实例教程教程课件第七章HTML基础
3.<IMG> <img>标记用于在页面插入图像或电影剪辑，其主要参数介绍如下： src：用于指定要插入图像的地址。 alt：用于设置当图像无法显示时的替换文本。 align：用于设置图像和页面其它对象的对齐方式，取值可以是top，
middle和bottom。 width：用于设置图像的宽度，以像素为单位。 height：用于设置图像的高度，以像素为单位。 border：用于设置图像的边框厚度，以像素为单位。 vspace：用于设置图像的垂直边距，以像素为单位。 hspace：用于设置图像的水平边距，以像素为单位。
甚至图ห้องสมุดไป่ตู้选择合适的代码风格，与Macromedia Dreamweaver, Adobe GoLive和Microsoft FrontPage等网页制作软件实现很好的交
互。
7.1.1 HTML语言简介 HTML的英文全称是Hyper Text Markup Language，中文通常称作超
文本标记语言，它由W3C组织商讨制定，是Internet上用于编写网页 的纯文本类型的标记语言。HTML与操作系统平台的选择无关，只要 有Web浏览器就可以运行HTML文件，显示网页内容。 用户可以用任何文本编辑器，例如Windows的“记事本”程序打开 HTML文件，查看其中的HTML源代码，也可在用浏览器打开网页时， 通过相应的【查看源文件】命令查看网页中的HTML代码。 同其他语言（例如C++）编译产生执行文件的机制不同，利用HTML 编写的网页是解释型的，也就是说，网页的效果是在用浏览器打开网 页时动态生成的，而不是事先存储于网页中的。当用浏览器打开网页 时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解 释的结果显示网页内容。正是因为如此，网页显示的速度同网页代码 的质量有很大的关系，保持精简和高效的HTML源代码是非常重要的。
零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案第7课
7.1 站点维护
7.1.1 知识讲解 7.1.2 典型案例——检测snsp站点
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
7.1.1 知识讲解
本节将介绍链接和浏览器兼容性的检测方 法。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
2. 检测浏览器的兼容性
在【结果】面板中单击【浏览器兼容性 检查】选项卡，如下图所示。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
7.1.2 典型案例——检测snsp站点
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
7.2 上传站点内容
7.2.1 知识讲解 7.2.2 典型案例——上传snsp站点内容
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
7.2.1 知识讲解
7.3.1 检测网站链接
操作思路：
打开自己制作的站点中的任意页面。 打开【结果】面板，在【链接检查器】选项卡 中指定检测的对象。对当前网页中的断开的链 接、孤立文件和外部链接进行检测。 对整个站点进行断开的链接、孤立文件和外部 链接的检测，并修复链接。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
1. 申请域名
域名申请有两种方式：一是到域名代理申请机 构申请购买，二是在网络上申请。 除了有收费的域名，还有免费的域名。但这些 免费的域名可能有附加的条件，如不支持整个 网站的上传，只允许在该空间中输入一些内容； 或允许用户上传，但必须在该页面上有广告等。 如果用户需要一个自由上传的空间，在申请时 还需要查看给定的空间是否支持ASP，JSP和 PHP上传，如果支持，用户就可以上传相应的 内容到网络中。
Dreamweaver_CS4_课件与自学教程 7共7
便于以后修改超链接时作为参考。
第5章 Dreamweaver与网络课件
3．在浏览器中测试网页的正确性 ． 通过在浏览器预览网页的方法来测试网页是一个非常有 效的途径，这种方法可以贯穿于整个网页设计和创建过程中， 通过它可以及时发现网页中存在的错误，避免重复出现相同 的错误，也有利于及时纠正不妥之处。 在Dreamweaver中，可以在任何时间通过目标浏览器预 览网页，而不必首先保存文档，这时浏览器中的所有功能都 将发挥作用，包括JavaScript、相对链接、绝对链接、 ActiveX控件等。使用这种方法测试网页的最大好处是可以及 时地改正网页中存在的错误。
下拉菜单中选择【设置】命令，则弹出【目标浏览器】对话 框，如图5-76所示。
第5章 Dreamweaver与网络课件
图5-76 【目标浏览器】对话框
第5章 Dreamweaver与网络课件
3) 在对话框中选择要测试的浏览器，然后单击 按钮。 4) 单击菜单栏中的【文件】\【检查页】\【浏览器兼容 性】命令，则打开【浏览器兼容性】面板，如图5-77所示。 5) 在【浏览器兼容性】面板中罗列了浏览器不支持的功 能，并且显示了标记所在的行。根据面板中显示的检测结果， 可以更改页面中相应的内容。修改之后再进行测试，直到没 有错误为止。
第5章 Dreamweaver与网络课件
■单击AP元素的Z轴值，输入新的Z值，可以改变其叠 放顺序。 ■在【AP元素】面板中按住AP元素的名称拖曳鼠标， 可以改变其位置。 ■如果按住Ctrl键的同时将一个AP元素拖曳到另一个AP 元素位置处，则可以将被拖曳的AP元素变为子级。
第5章 Dreamweaver与网络课件
第5章 Dreamweaver与网络课件
图5-80 【管理站点】对话框
用Dreamweaver制作网页
返回目录
八、设置图像边距 、 3、鼠标经过图像 鼠标经过图像：鼠标经过图像实际上由两个图像组成， 鼠标经过图像 原始图像和鼠标经过图像。这两张图片要大小相等，如果不相 等，Dreaweaver会自动调整鼠标经过图像的大小跟原始图像 大小一致。
返回目录
练习6 练习6：制作一个图文并茂的网页
1．插入表格(宽度用像 插入表格( 素)并设置页面属性 2．布局Banner和导航 布局Banner和导航 Banner 条 3．布局图像列表 4．布局详细内容
返回目录
六、文字的输入
网络世界五彩缤纷，涌现出大量优秀精美的网页。大量的网络信息， 无非就是通过文本、图像、动画等网页元素来呈现，其中，文本和图像是 网页中最为重要的设计元素。这里介绍一下文字和图像在网页中的应用。
Flash动画以小巧、动感、富有交互性而风靡网络。在制作网页时，将 Flash动画应用到网页中，能使网页更具动感，更富有感染力。 在网页中插入Flash制作的SWF格式动画，单击对象工具栏上的Flash 按钮或单击的“媒体”下的“Flash”，打开一个对话框，选择SWF动画文 件即可。 如果需要插入Flash透明，可进行参数的设置：（ Flash动画控制参数的 透明，可进行参数的设置： 如果需要插入 透明
返回目录
二、网页制作软件简介
• 初识 初识Dreamweave
网页制作工具有Dreamweaver 、 FrontPage 、Photoshop、Fireworks、 Flash 等 。 Dreamweaver 、Fireworks、Flash 三个软件合在一起，被称为网页制作 “三剑客”，这三个软件相辅相承，可谓是制作网页的最佳拍档。
设计不能在【属性】面板中直接设置，需要打开【参数】对话框进行设置。）
八、设置图像边距 、 3、鼠标经过图像 鼠标经过图像：鼠标经过图像实际上由两个图像组成， 鼠标经过图像 原始图像和鼠标经过图像。这两张图片要大小相等，如果不相 等，Dreaweaver会自动调整鼠标经过图像的大小跟原始图像 大小一致。
返回目录
练习6 练习6：制作一个图文并茂的网页
1．插入表格(宽度用像 插入表格( 素)并设置页面属性 2．布局Banner和导航 布局Banner和导航 Banner 条 3．布局图像列表 4．布局详细内容
返回目录
六、文字的输入
网络世界五彩缤纷，涌现出大量优秀精美的网页。大量的网络信息， 无非就是通过文本、图像、动画等网页元素来呈现，其中，文本和图像是 网页中最为重要的设计元素。这里介绍一下文字和图像在网页中的应用。
Flash动画以小巧、动感、富有交互性而风靡网络。在制作网页时，将 Flash动画应用到网页中，能使网页更具动感，更富有感染力。 在网页中插入Flash制作的SWF格式动画，单击对象工具栏上的Flash 按钮或单击的“媒体”下的“Flash”，打开一个对话框，选择SWF动画文 件即可。 如果需要插入Flash透明，可进行参数的设置：（ Flash动画控制参数的 透明，可进行参数的设置： 如果需要插入 透明
返回目录
二、网页制作软件简介
• 初识 初识Dreamweave
网页制作工具有Dreamweaver 、 FrontPage 、Photoshop、Fireworks、 Flash 等 。 Dreamweaver 、Fireworks、Flash 三个软件合在一起，被称为网页制作 “三剑客”，这三个软件相辅相承，可谓是制作网页的最佳拍档。
设计不能在【属性】面板中直接设置，需要打开【参数】对话框进行设置。）
DreamWeaver网页制作公开课教案
最新DreamWeaver网页制作公开课教案一、课程简介1. 课程目标：通过本课程的学习，使学员掌握DreamWeaver的基本操作，能够独立制作出满足需求的网页。
2. 课程内容：涵盖DreamWeaver的安装与启动、界面熟悉、基本操作、HTML 代码编辑、CSS样式设置、表单创建、特效实现等。
3. 适用对象：无网页制作经验的初学者，以及对DreamWeaver有一定了解，希望进一步提高的学员。
二、教学准备1. 软件环境：安装有最新版DreamWeaver的计算机。
2. 硬件环境：投影仪、计算机、投影屏幕等。
3. 教学资料：教案、PPT、案例文件、素材文件等。
三、教学安排1. 课时：共计10课时，每课时45分钟。
2. 课程安排：第1课时：DreamWeaver的安装与启动、界面熟悉第2课时：DreamWeaver基本操作第3课时：HTML代码编辑第4课时：CSS样式设置第5课时：表单创建与编辑第6课时：图像与多媒体操作第7课时：超的使用第8课时：表格制作第9课时：框架页面布局第10课时：综合案例实战四、教学方法1. 讲授法：讲解DreamWeaver的基本操作、功能及使用技巧。
2. 演示法：通过实际操作，展示如何制作网页，使学员更好地理解与掌握。
3. 练习法：安排课后练习，巩固所学知识，提高实际操作能力。
4. 案例教学法：通过分析与制作案例，使学员掌握网页制作的实际应用。
五、课程评价1. 课堂参与度：评估学员在课堂上的积极参与程度，提问、回答问题等。
2. 课后练习：评估学员课后练习的完成情况，包括正确性和创新性。
3. 课程总结：要求学员在课程结束后，提交一份课程总结报告，概括所学内容、收获及改进建议。
4. 综合案例实战：评估学员在综合案例实战中的表现，包括设计思路、制作技巧等。
六、教学内容1. 图像与多媒体操作插入与编辑图像插入与编辑多媒体文件图像映射的使用数据检查器的应用2. 超的使用管理超创建网站地图检查的有效性七、教学内容3. 表格制作创建表格调整表格结构应用表格样式利用表格进行页面布局4. 框架页面布局创建框架设置框架属性处理框架中的内容消除框架边框八、教学内容5. CSS样式设置CSS基本概念创建与应用样式管理样式表利用CSS进行页面美化6. 表单创建与编辑添加表单元素设置表单属性验证表单数据九、教学内容7. 网站项目管理规划网站结构管理网站资源优化网站性能部署与维护网站8. 综合案例实战案例一：个人博客页面制作案例二：产品展示页面制作案例三：在线问卷调查制作案例四：响应式网页制作十、教学内容9. 扩展学习与资源探索DreamWeaver扩展插件了解网页设计趋势与技术推荐学习资源与社区参与评估自身学习成果与设定目标10. 课程总结与反馈回顾课程重点与个人收获分析学习中的挑战与解决方案提交课程反馈与改进建议规划后续学习路径与目标设定通过上述十个章节的教学内容，学员将能够全面掌握DreamWeaver网页制作的基本技能，并能够独立完成网页设计与制作任务。
中文版Dreamweaver CS4入门与进阶ch07简明教程PPT课件
7.3
管理超链接
通过管理网页中的超链接，可以对网页进行相应的管理 。管理超链接操作主要包括更新超链接、修改超链接和测试 超链接。
7.3.1
自动更新超链接
在站点内移动或重命名文档时，Dreamweaver会自动更 新指向该文档的链接，将整个站点存储在本地磁盘上时，自 动更新链接功能最适用，但要注意的是，Dreamweaver不会 更改远程文件夹中的相应文件。为了加快更新速度， Dreamweaver会创建一个缓存文件，用来存储跟本地文件夹 有关的所有链接信息，在添加、删除或更改指向本地站点上 的文件的链接时，该缓存文件会以可见方式进行更新。 要设置自动更新链接，选择【编辑】|【首选参数】命令 ，打开【首选参数】对话框，在【分类】列表框中选择【常 规】选项，打开该选项对话框 。
本 章 重 点
认识超链接 创建超链接 管理超链接 使用层 使用Spry框架
7.1
超链接简介
超链接是网页中最重要的组成部分。超链接的应用范围很 广，利用它不仅可以链接到其他网页，还可以链接到其他图像 文件、多媒体文件及下载程序，也可以利用它在网页内部进行 链接或是发送E-mail等。在Dreamweaver CS4中，可以将文档 中的任何文字及任意位置的图片设置为超链接 。
7.4.1
层的基本作用
层就像是包含文字或图像等元素的胶片，按顺序叠放在 一起，组合成页面的最终效果。层可以精确地定位页面上的 元素，并且在层中可以加入文本、图像、表格、插件等元素 ，还可以插入嵌套层。 在Dreamweaver中运用层，为设计者提供了强大的网页 控制能力。层不但可以作为一种网页定位技术，也可以作为 一种特效形式出现。熟练掌握层的使用方法，是网页制作中 最重要关节之一格式为Access-method :// server-name:port / document-location 。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
2. 调用元件
调用元件的方法为：在库中选取要调用的 元件，将其拖入场景或编辑区后释放鼠标。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
3. 逐帧动画
逐帧动画已经在第6课的典型案例中应用 过了，它是以单帧中内容的变化来实现动 画效果的。这种动画文件占用的存储空间 较大，因此，变化过程太长的动画不宜采 用该类型；但变化比较复杂、不易体现出 变化过程的动画，如表现举手、抬足或面 部表情等，应采用该类型。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
2. 创建引导动画
创建引导动画的具体操作如下： （1）创建引导层。单击图层区中的 按
钮新建引导层，此时建立的引导层与下方 的图层已建立了链接关系。 （2）在引导层中绘制路径。选中引导层， 选择工具箱中的铅笔、钢笔、多边形、矩 形或椭圆工具进行绘制。绘制完成的路径 只能为笔触线，而不能有填充色。
本课导读
使用Flash就是为了制作出漂亮的动画效 果，本课就来讲解Flash的这个核心内容。 根据创建方式的不同，Flash动画分为基 础动画和特殊动画。其中，基础动画可分 为逐帧动画和补间动画，补间动画根据不 同对象又可分为形状补间动画和动画补间 动画两种；根据不同的辅助对象，特殊动 画可分为引导动画和遮罩动画两种。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
2. 创建引导动画
（3）在被引导层中创建动画补间动画， 并且首末关键帧中的元件实例必须位于路 径中的不同位置。
（4）设置动画。在被引导层的时间轴上 单击鼠标，选中【属性】面板中的 复选框，使动画补间动画中的元件实例在 播放过程中为了适合路径的变化方向做一 定角度的旋转。如果不选中该复选框，则 元件实例保持初始状态进行运动。
1. 创建与编辑元件
w 按钮：用于创建动画的交互控制按钮，以 响应鼠标事件（如单击、释放和滑过等）， 实现按钮的功能。按钮有“弹起”、“指 针经过”、“按下”和“点击”4个不同 状态的帧，“点击”帧中创建鼠标对按钮 起作用的范围；其他帧中可以是静止图形， 也可是影片剪辑。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
5. 为形状补间动画添加形状提示
形状补间动画的中间过程由计算机自动完 成，这说明中间过程的变化是不可控制的。 如果要使某点在动画变形过程中固定不变， 那么可以添加形状提示。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.1.2 典型案例——制作banner动画
w 案例目标 本案例将为第6课中制作的banner.fla添 加形状补间动画、动画补间动画和时间 轴特效动画，添加后的效果如下图所示。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.1.2 典型案例——制作banner动画
2. 调用元件
元件从库中被拖到场景或编辑区的过程称为调 用元件。元件是可以反复调用的对象，当元件 作为一个对象从库中调用到场景或其他元件编 辑区时，它变为该元件的一个具体的实例。因 此，当修改元件后，其对应的元件实例也会相 应地改变，这就使编辑动画变得十分方便，不 需逐一地修改每个元件实例。当然，元件实例 也有独立的属性，这部分内容将在创建动画补 间动画时介绍。
w 案例小结
本案例通过制作变幻光环练习了引导层和引层 动画的创建、元件的转换、柔化填充、【混色 器】面板的使用等。读者应主要掌握引导动画 的创建及设置方法，当然，其他辅助知识点也 是创建动画效果时随时要用到的，也应该逐步 掌握。另外，在“引导动画”元件的编辑区中， 如果在【属性】面板中将旋转方式设置为“顺 时针”或“逆时针”，则会产生另一种动画效 果。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.1 制作基础动画
基础动画主要包括逐帧动画、形状补间动 画和动画补间动画3类。此外，利用时间 轴的特效功能还可以将对象制作为有模糊、 扩展等效果的动画。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.1.2 典型案例——制作banner动画
w 案例小结 本案例中练习了形状补间动画、动画补间动画 的创建和时间轴特效的添加，以及元件的转换、 元件实例属性的更改等。本案例中采用的元件 转换方式比通过创建元件再调用元件来创建动 画更方便快捷，因为转换为元件前对象已在需 要的位置上了，转换为元件后再进入元件编辑 区进行编辑便可以看到场景中对象的相对位置， 因此采用这种方法创建动画的直观性更强。
7.2.2 典型案例——变幻光环
w操作思路：
（1）设置动画场景大小为550×400像素， 背景色为“#000000”，帧频为20fps。
（2）在场景中创建圆，并逐层创建“yj”元 件、“引导动画”元件和“环径的引导动画。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.2 制作引导动画
w 7.2.1 知识讲解 w 7.2.2 典型案例——变幻光环
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.2.1 知识讲解
本节将介绍引导动画的构成原理及其创建 方法。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
Dreamweaver-FlashFireworks网页制作培训
教程第7课
PPT文档演模板
2020/10/30
DreamweaverFlashFireworks网页制 作培训教程第7课
本课要点
w 基础动画 w 引导动画 w 遮罩动画
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
6. 动画补间动画
在动画补间动画中，首末关键帧中的对象 必须是同一个元件的实例，并且一个关键 帧中只能有一个元件实例。动画补间动画 有位置、大小、旋转、倾斜和颜色几方面 的变化，这些变化可以单独存在，也可以 加多个变化于一个元件上。例如，对象在 舞台中一边移动，一边旋转，并且呈淡入 效果。
PPT文档演模板
1. 创建与编辑元件
元件有影片剪辑、图形和按钮3种，各类 元件的区别与作用如下。 w 影片剪辑：该类元件可以包含Flash动画 的一个片段，也可以是静止的对象。作为 动画片段时，它能独立于场景动画进行播 放。此外，在影片剪辑元件实例上还可以 添加交互动作。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
4. 形状补间动画
形状补间动画指外观形状变化的动画；在 实际的动画创建过程中，除了外观形状的 变化外，也可以是位置、颜色的变化。
在Flash中，要创建形状补间动画，需首 先确定首末两个关键帧的内容，中间的变 化过程由计算机自动完成。关键帧中的内 容可以是一个或多个不同的对象，但对象 必须是可分离的图形。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.1.1 知识讲解
1. 创建与编辑元件 2. 调用元件 3. 逐帧动画 4. 形状补间动画 5. 为形状补间动画添加形状提示 6. 动画补间动画 7. 时间轴特效动画
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
DreamweaverFlashFireworks网页制 作培训教程第7课
7. 时间轴特效动画
时间轴特效动画是Flash 8的新增功能。 使用它，可以用最少的步骤创建复杂动画。 时间轴特效的对象包括文本、影片剪辑和 按钮。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
操作思路：
（1）确定画面中需要创建为动画的元素： “welcome”、“幻铃”文字及环状对象将创 建为影片剪辑元件，而“一号通”文字将创建 为按钮。
（2）给“welcome”文字添加时间轴特效，将 “幻铃”文字创建为透明度渐变动画，将环状 对象创建为图形变为3个圆环的形状补间动画， 将“一号通”文字创建为指针经过时状态显示 “#FF6600”颜色的按钮。
7.1 制作基础动画
w 7.1.1 知识讲解 w 7.1.2 典型案例——制作banner动画
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.1.1 知识讲解
元件是动画补间动画的基本单位，因此创 建元件是学习动画的基础。本节将介绍如 何创建、编辑、调用元件以及如何应用元 件创建补间动画和时间轴动画。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.2.2 典型案例——变幻光环
w 案例目标 本案例将制作变幻光环，主要练习引导动 画的创建，完成后的效果如下图所示。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
7.2.2 典型案例——变幻光环
（4）在“环图”元件中编辑圆，使其为圆 的一小部分，并进行渐变和柔化填充。