动态网页设计与制作实用教程第三版ppt课件(完整版).ppt

《动态网页设计与制作实用教程第三版ppt课件(完整版).ppt》由会员分享，可在线阅读，更多相关《动态网页设计与制作实用教程第三版ppt课件(完整版).ppt（258页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、动态网页设计与制作动态网页设计与制作实用教程实用教程（第三版）（第三版）21世纪高等院校计算机系列教材世纪高等院校计算机系列教材第第1章章 网页设计概述网页设计概述本章学习导读本章学习导读 本章主要讲解网页设计制作的基本方式、构成网页的基本章主要讲解网页设计制作的基本方式、构成网页的基本元素、编辑网页的常用工具、动态网页的支持技术和网页本元素、编辑网页的常用工具、动态网页的支持技术和网页编码的基本知识。通过本章学习，读者应该掌握以下内容：编码的基本知识。通过本章学习，读者应该掌握以下内容：网页设计的基本方式网页设计的基本方式网页包括的常见元素网页包括的常见元素网页元素的创作与编辑工具网页元素的

2、创作与编辑工具HTML语言基础知识语言基础知识动态网页的支持技术动态网页的支持技术第第1章章 网页设计概述网页设计概述1.1 网页设计的基本方式网页设计的基本方式 网页设计制作的基本方式包括：手工直接编码、利用可视化工具、网页设计制作的基本方式包括：手工直接编码、利用可视化工具、手工编码和可视化工具结合手工编码和可视化工具结合3种。种。1.1.1 手工编码方式手工编码方式 网页是由网页是由HTML（Hyper Text Markup Language）超文本标记语）超文本标记语言编码的文档，设计制作网页的过程就是生成言编码的文档，设计制作网页的过程就是生成HTML代码的过程。手工代码的过程。手

3、工编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制作出丰富的网页效果。作出丰富的网页效果。1.1.2 可视化工具方式可视化工具方式随着网页制作技术的不断发展，出现了诸如随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，页元素，“所见即

4、所得所见即所得”，再由编辑工具自动生成对应的网页代码，大，再由编辑工具自动生成对应的网页代码，大大大提高的网页开发的效率。提高的网页开发的效率。第第1章章 网页设计概述网页设计概述1.2 网页中的常见元素网页中的常见元素文本文本图像和动画图像和动画声音和视频声音和视频超级链接超级链接表格表格表单表单导航栏导航栏其他常见元素其他常见元素第第1章章 网页设计概述网页设计概述1.3 网页元素的创作与编辑工具网页元素的创作与编辑工具1.3.1 网页图像制作工具网页图像制作工具 Fireworks Photo Impact PhotoShop1.3.2 动画制作工具动画制作工具 Flash Direct

5、or1.3.3 网页编辑工具网页编辑工具 FrontPage Dreamweaver HotDog第第1章章 网页设计概述网页设计概述1.4 HTML基础知识基础知识1.4.1 HTML基本概念基本概念1HTML概念概念 HTML是一种描述语言，对是一种描述语言，对Web页面中显示内容的属性以标签的形页面中显示内容的属性以标签的形式进行描述。客户机上的浏览器（式进行描述。客户机上的浏览器（Browser）对这些描述进行解释将相）对这些描述进行解释将相应页面内容正确显示在显示器上。一个应页面内容正确显示在显示器上。一个Web页面就是一个页面就是一个HTML文档。文档。2HTML文档的构成文档的构

6、成 HTML文档由三大元素构成：文档由三大元素构成：HTML元素、元素、HEAD元素和元素和BODY元素。元素。每个元素又包含各自相应的标记（属性）。每个元素又包含各自相应的标记（属性）。HTML元素是最外层的元素，元素是最外层的元素，里面包含里面包含HEAD元素和元素和BODY元素。元素。HEAD元素中包含对文档基本信息文元素中包含对文档基本信息文档标题、文档搜索关键字、文档生成器等）描述的标记。档标题、文档搜索关键字、文档生成器等）描述的标记。BODY元素是文元素是文档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接等）档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接

7、等）描述的标记。描述的标记。HTML中标记一般成对，如：中标记一般成对，如：和和、和和等，但也有一些不成对。等，但也有一些不成对。第第1章章 网页设计概述网页设计概述3HTML文档的编辑文档的编辑 HTML文档是普通文本（文档是普通文本（ASCII）文件，它可以用任意编缉器（如）文件，它可以用任意编缉器（如Windows中的记事本、写字板，中的记事本、写字板，Macintosh中的中的BBEdit等）生成。你也等）生成。你也可以使用字处理软件，不过要注意保存时文件类型要选择可以使用字处理软件，不过要注意保存时文件类型要选择“带换行符的纯带换行符的纯文本文本”，并且类型扩展名为，并且类型扩展名为

8、“.htm”或或“.html”。早期网页制作的过程。早期网页制作的过程就是直就是直接书写接书写HTML代码来定义页面元素的过程。代码来定义页面元素的过程。第第1章章 网页设计概述网页设计概述1.4.2 HTML的基本语法结构的基本语法结构 HTML的语法是通过标记来体现的，不同标记的符号及其属性构成了的语法是通过标记来体现的，不同标记的符号及其属性构成了该语言的语法特征。下面我们以该语言的语法特征。下面我们以HTML 4.0版为例，通过三大元素中的标版为例，通过三大元素中的标记来描述记来描述HTML的语法结构。的语法结构。1HTML元素元素 HTML标记是对整个文档属性的描述，即告诉浏览器标记

9、是对整个文档属性的描述，即告诉浏览器HTML文档的开始与结文档的开始与结束，是网页中最外层的标记。由束，是网页中最外层的标记。由和和标记对标出。标记对标出。HTML元素只元素只有有HTML一个标记。一个标记。2HEAD元素元素 （1）HEAD标记。该标记用来表示标记。该标记用来表示HEAD元素的开始和结束，其格式为：元素的开始和结束，其格式为：。（2）BASE标记（不成对标记）。标记（不成对标记）。BASE标记用来确定当前初始的标记用来确定当前初始的URL，当，当前文件中的链接都以所定义的初始地址为基础。它有一个前文件中的链接都以所定义的初始地址为基础。它有一个HREF属性，其值为所属性，其值

10、为所定义的基准定义的基准URL地址，格式为：地址，格式为：第第1章章 网页设计概述网页设计概述3BODY元素（可见对象的描述）元素（可见对象的描述）（1）BODY标记。该标记是标记。该标记是BODY元素开始和结束的标志，格式为：元素开始和结束的标志，格式为：元素标记元素标记 （2）DIV层标记。层是各种元素的集合，是一个活动板，便于元素定位。层标记。层是各种元素的集合，是一个活动板，便于元素定位。（3）文本标记。该标记用来标识文本属性，其属性参数比较复杂，具体格式如下：）文本标记。该标记用来标识文本属性，其属性参数比较复杂，具体格式如下：/定义文本的字体，定义文本的字体，?=宋体、楷体、隶书宋

11、体、楷体、隶书等等 /定义文本的字号，定义文本的字号，?=17的值的值 /定义文本的颜色，定义文本的颜色，?=#ffcc00等十六进制值等十六进制值 /粗体显示粗体显示 /斜体显示斜体显示 /下划线显示下划线显示 /下标显示下标显示 /上标显示上标显示第第1章章 网页设计概述网页设计概述（4）段落标记。该标记用来标识段落和列表。）段落标记。该标记用来标识段落和列表。/创建一个新的段落，两段落之间有行间空隙。创建一个新的段落，两段落之间有行间空隙。/定义段落对齐方式，定义段落对齐方式，?=right、left、center。/段内插入回车换行符，行间没有空隙段内插入回车换行符，行间没有空隙 /创

12、建无序列表创建无序列表 /创建有序列表创建有序列表（5）表格标记。该标记用来定义网页上的表格，格式如下：）表格标记。该标记用来定义网页上的表格，格式如下：/定义表格的起始、结束位置定义表格的起始、结束位置 /定义表格的边框宽度，定义表格的边框宽度，?=像素值像素值 /定义表格的宽度，定义表格的宽度，?=像素值像素值或百分比或百分比 /定义表格的对齐方式，定义表格的对齐方式，?=right、left、center /定义表格单元格之间的距离，定义表格单元格之间的距离，?=像素值像素值 /定义表格行的起始和结束位置定义表格行的起始和结束位置 /定义单元格水平对齐方式，定义单元格水平对齐方式，?=r

13、ight、left、center /定义表格列的起始和结束位置定义表格列的起始和结束位置 /定义单元格跨占的列数定义单元格跨占的列数?=1、2第第1章章 网页设计概述网页设计概述（6）图像标记（？号的含义参照）图像标记（？号的含义参照“表格标记表格标记“的说明，不再重复）。该标记用来的说明，不再重复）。该标记用来定义显示图像的地址、大小等属性，格式如下：定义显示图像的地址、大小等属性，格式如下：/添加图片的添加图片的URL地址和文件名地址和文件名 /图像的对齐方式图像的对齐方式 /设置围绕图像边框的大小设置围绕图像边框的大小 /设置图像下载时的说明文字设置图像下载时的说明文字 /加入一条水平线

14、加入一条水平线 /设置水平线的高度设置水平线的高度 /设置水平线的长度设置水平线的长度 /去掉水平线的阴影去掉水平线的阴影（7）下拉表单标记。该标记用来在网页上建立一个下拉表单，格式如下：）下拉表单标记。该标记用来在网页上建立一个下拉表单，格式如下：/创建下拉表单创建下拉表单?=1 /下拉显示，否则滚动显示下拉显示，否则滚动显示 /设置表单项目和选中时的参数值设置表单项目和选中时的参数值第第1章章 网页设计概述网页设计概述（8）链接（）链接（Linking）标记。该标记用来定义网页中超链接的热点和目标，格式）标记。该标记用来定义网页中超链接的热点和目标，格式如下：如下：热点文字（图像等）热点文

15、字（图像等）/URL.name为被链接的文为被链接的文件名件名（9）多媒体标记。）多媒体标记。第第1章章 网页设计概述网页设计概述1.5 动态网页的支持技术动态网页的支持技术 动态网页此处是指浏览器和服务器数据库可以进行实时数据交流的动态交互动态网页此处是指浏览器和服务器数据库可以进行实时数据交流的动态交互网页，而不是指加上动画等效果的动感网页。随着网页，而不是指加上动画等效果的动感网页。随着Web技术的发展，动态网页已技术的发展，动态网页已成为网页制作的流行趋势。制作动态网页仅用上面的工具是不够的，还要结合下成为网页制作的流行趋势。制作动态网页仅用上面的工具是不够的，还要结合下面几种常见的支

16、持技术，来开发服务器端的脚本应用程序。面几种常见的支持技术，来开发服务器端的脚本应用程序。1.5.1 CGI技术技术 CGI（Common Gateway Interface）是用于连接主页和应用程序的接口。）是用于连接主页和应用程序的接口。CGI是在服务器端运行的一个可执行程序，由网页的一个热链接激活进行调用，是在服务器端运行的一个可执行程序，由网页的一个热链接激活进行调用，并对该程序的返回结果进行处理，显示在网页上。简而言之，并对该程序的返回结果进行处理，显示在网页上。简而言之，CGI就是为了扩展就是为了扩展网页的功能而设立的。网页的功能而设立的。第第1章章 网页设计概述网页设计概述1.5

17、.2 ASP技术技术 ASP（Microsoft Active Server Pages）是一套微软开发的服务器端脚本环境，）是一套微软开发的服务器端脚本环境，ASP内含于内含于IIS 3.0、4.0和和5.0之中，通过之中，通过ASP我们可以结合我们可以结合HTML网页、网页、ASP指令和指令和ActiveX元元件建立动态、交互且高效的件建立动态、交互且高效的Web服务器应用程序。服务器应用程序。1.5.3 PHP技术技术 PHP（Hypertext Preprocesso，超文本预处理器）是一种易于学习和使用的服务器端，超文本预处理器）是一种易于学习和使用的服务器端脚本语脚本语PHP除了能

18、够操作页面，还能发送除了能够操作页面，还能发送HTTP的标题；它不需要特殊的开发环境和的标题；它不需要特殊的开发环境和IDE；它不仅支持多种数据库，还支持多种通信协议；另外，它不仅支持多种数据库，还支持多种通信协议；另外，PHP还具有极强的兼容性。还具有极强的兼容性。PHP是是完全免费的，可以从完全免费的，可以从PHP官方站点（官方站点（http:/）自由下载。）自由下载。1.5.4 JSP技术技术 JSP(Java Server Pages)是由是由Sun Microsystems公司倡导、许多公司参与一起建立公司倡导、许多公司参与一起建立的一种动态网页技术标准。的一种动态网页技术标准。JS

19、P技术是用技术是用JAVA语言作为脚本语言的，语言作为脚本语言的，JSP网页为整个服务网页为整个服务器端的器端的JAVA库单元提供了一个接口来服务于库单元提供了一个接口来服务于HTTP的应用程序。的应用程序。动态网页设计与制作动态网页设计与制作实用教程实用教程（第三版）（第三版）21世纪高等院校计算机系列教材世纪高等院校计算机系列教材第第2章章 Adobe Flash CS5基础知识基础知识本章学习导读本章学习导读 网页动画是一种重要的网页元素。一个合适的动画可网页动画是一种重要的网页元素。一个合适的动画可使整个页面生动流畅，充满生机。第使整个页面生动流畅，充满生机。第1章我们简单介绍了章我们

20、简单介绍了网页动画制作的常用工具，后面几章将以网页动画制作的常用工具，后面几章将以Flash的最新版的最新版本本Adobe Flash CS5为例，系统讲解网页动画的制作过程。为例，系统讲解网页动画的制作过程。本章主要讲述本章主要讲述Flash的基础知识，通过本章学习，读者应的基础知识，通过本章学习，读者应该掌握以下内容：该掌握以下内容：Flash CS5的新增功能的新增功能Flash CS5的工作界面的工作界面Flash CS5的浮动面板的浮动面板第第2章章 Adobe Flash CS5基础知识基础知识2.1 认识认识Adobe Flash CS5 2.1.1 Flash 的发展的发展 F

21、lash的前身是的前身是Future Splash，是早期网上流行的矢，是早期网上流行的矢量动画插件。量动画插件。Macromedia公司收购了公司收购了Future Splash以以后便将其改名为后便将其改名为Flash，到，到2005年年Macromedia公司发布公司发布最后一个版本为最后一个版本为Flash8，随后该公司及旗下软件于，随后该公司及旗下软件于2007年被年被Adobe公司收购并进行后续开发，公司收购并进行后续开发，2010年发布的新年发布的新版本为版本为Adobe Flash CS5。用户可以使用。用户可以使用Flash创建导航创建导航栏、动态指标、带有声音的动画，甚至一

22、个完整的、丰富栏、动态指标、带有声音的动画，甚至一个完整的、丰富多彩的网站。多彩的网站。Flash动画是一种专为网络而创建的交互式矢量图形动画。动画是一种专为网络而创建的交互式矢量图形动画。由于由于Flash动画使用的是矢量图形，所以下载速度快，而动画使用的是矢量图形，所以下载速度快，而且能够缩放，使浏览者能够全屏幕观看。且能够缩放，使浏览者能够全屏幕观看。浏览浏览Flash制作的网页，必须在用户计算机中安装一个制作的网页，必须在用户计算机中安装一个Flash播放器，该播放器可通过安装播放器，该播放器可通过安装Flash软件而得到，也软件而得到，也可从相关网站上下载。可从相关网站上下载。第第2

23、章章 Flash CS5基础知识基础知识2.1.2 安装安装Flash Adobe Flash CS5可在可在Windows系列操作系统和系列操作系统和Macintosh系列操作系列操作系统中运行，本书主要在系统中运行，本书主要在Windows系统下进行讲解。系统下进行讲解。Intel Pentium 4 或或 AMD Athlon 64 处理器处理器 Microsoft Windows XP，带带有有 Service Pack 2（推推荐荐带带有有 Service Pack 3）或或 Windows Vista Home Premium、Business、Ultimate 或或 Enterp

24、rise 版版（带带有有 Service Pack 1）；已已认认证证可可用用于于 32 位位 Windows XP 和和 Windows Vista 或或 Windows 7 推荐推荐 1GB 或更多内存或更多内存 安安装装需需要要 3.5GB 可可用用硬硬盘盘空空间间；安安装装过过程程中中会会需需要要更更多多的的可可用用空空间间（无法在基于闪存的存储设备上安装）（无法在基于闪存的存储设备上安装）1,024x768 显示器（推荐使用显示器（推荐使用 1,280 x800 分辨率），分辨率），16 位或更高的显卡位或更高的显卡 DVD-ROM 驱动器驱动器 多媒体功能需要多媒体功能需要 Qui

25、ckTime 7.6.2 实现在线服务需要宽带实现在线服务需要宽带 Internet 连接。连接。第第2章章 Flash CS5基础知识基础知识2.1.2 Flash CS5的新增功能的新增功能与与之之前前的的版版本本相相比比，Flash CS5对对开开发发人人员员更更加加友友好好，Flash CS5可可以以和和Flash Builder(即即最最新新版版本本的的Flex Builder)协协作作来来完完成成项项目目。针针对对Flash设设计计人人员员，增增强强了了代代码码易易用用性性方方面面的的功功能能，比比如如增增加加了了一一个个新新的的“代代码示例面板码示例面板”，来帮助设计师轻松生成和

26、学习代码。，来帮助设计师轻松生成和学习代码。在在代代码码编编辑辑器器方方面面继继续续增增强强，很很多多开开发发人人员员熟熟知知的的但但在在之之前前的的Flash IDE中中没没有有体体现现的的功功能能将将被被增增加加进进来来，包包括括自自定定义义类类的的导导入入和和代代码码提提示示，支持支持ASDoc，可以在，可以在Flash IDE中编码。中编码。针针对对设设计计师师，增增加加了了新新的的Flash Text Layout Framework，包包含含在在文文本本布布局面板中，并且增强了局面板中，并且增强了“Deco-brush”喷涂功能。喷涂功能。此外，此外，Flash CS5具有六大特点

27、：具有六大特点：1FL格式（格式（Flash专业版）专业版）2文本布局（文本布局（Flash专业版）专业版）3代码片段库（代码片段库（Flash专业版）专业版）4与与Flash Builder完美集成完美集成5与与Flash Catalyst完美集成完美集成6Flash Player 10.1无处不在无处不在第第2章章 Flash CS5基础知识基础知识2.2 Flash CS5的工作界面的工作界面2.2.1 菜单栏菜单栏2.2.2 工具栏和绘图工具箱工具栏和绘图工具箱1工具栏工具栏2绘图工具箱绘图工具箱 绘图工具箱通过绘图工具箱通过“窗口窗口/工具工具”菜单启动，默认位置在启动界面的左菜单启

28、动，默认位置在启动界面的左侧。侧。绘图工具栏集中了绘画、文字及修改等常用工具，使用这些工具可以绘绘图工具栏集中了绘画、文字及修改等常用工具，使用这些工具可以绘制、选取、喷涂及修改作品。在制、选取、喷涂及修改作品。在Flash 8 中，绘图工具箱由工具区、视图中，绘图工具箱由工具区、视图区、颜色区和工具选项区区、颜色区和工具选项区4个区域构成，其中工具选项区的内容随着所选个区域构成，其中工具选项区的内容随着所选工具的不同而变化的，用于对绘图工具进行细节的设置。工具的不同而变化的，用于对绘图工具进行细节的设置。2.2.3 时间轴时间轴 一个动画可以看作是静态图片按照一定的时间顺序先后播放的结果，一

29、个动画可以看作是静态图片按照一定的时间顺序先后播放的结果，而播放时间和顺序的控制是通过时间轴来进行的。由于牵扯到帧与图层的而播放时间和顺序的控制是通过时间轴来进行的。由于牵扯到帧与图层的概念，因此在这里，不做详细解说，大家只需了解时间轴窗口在哪里就行概念，因此在这里，不做详细解说，大家只需了解时间轴窗口在哪里就行了在后面将会结合帧与图层进行综合的讲解，在后面将会结合帧与图层进了在后面将会结合帧与图层进行综合的讲解，在后面将会结合帧与图层进行综合讲解。时间轴面板在行综合讲解。时间轴面板在“窗口窗口/时间轴时间轴”菜单中启动。菜单中启动。第第2章章 Flash CS5基础知识基础知识2.2.4 “

30、属性属性”面板面板 “属性属性”面板用来显示当前所面板用来显示当前所选对象的常用属性。在舞台中选对象的常用属性。在舞台中选中某一对象，选中某一对象，选择选择“窗口窗口/属性属性”菜单，启动菜单，启动属性面板，在属性面板，在“属性属性”面板上面板上将显示对象的属性参数。如图将显示对象的属性参数。如图所示，是椭圆对象的属性面板。所示，是椭圆对象的属性面板。第第2章章 Flash CS5基础知识基础知识2.2.5 其他面板其他面板 在在 Flash CS5 中，还有几类设置面板，它们往往是进行元件设置的关中，还有几类设置面板，它们往往是进行元件设置的关键，键，因此我们必须熟练地掌握它们。这些设置面板

31、在因此我们必须熟练地掌握它们。这些设置面板在“窗口窗口”菜单中启动。菜单中启动。1“库库”面板面板 “库库”面板是存放元件的地方，它用于存储和组织导入的文件，包括位面板是存放元件的地方，它用于存储和组织导入的文件，包括位图图形、声音文件和视频剪辑等，可以在库中建立文件夹对元件进行管理。图图形、声音文件和视频剪辑等，可以在库中建立文件夹对元件进行管理。预览窗口元件列表第第2章章 Flash CS5基础知识基础知识2“信息信息”面板面板 用来显示选定对象的宽、高，以及鼠标光标处的颜色值、坐标值等信用来显示选定对象的宽、高，以及鼠标光标处的颜色值、坐标值等信息，如图所示。息，如图所示。3“颜色颜色”

32、面板（面板（“混色器混色器”面板）面板）通过本面板可以选择颜色和填充的样式。颜色包括轮廓色、填充色、通过本面板可以选择颜色和填充的样式。颜色包括轮廓色、填充色、默认黑白色、轮廓色与填充色对换等。右下角的红、绿、蓝默认黑白色、轮廓色与填充色对换等。右下角的红、绿、蓝3个输入框，个输入框，显示了颜色的显示了颜色的 RGB 值，可以通过直接输入数值的方式指定某种颜色；左值，可以通过直接输入数值的方式指定某种颜色；左下方是色彩板，也可以直接用鼠标点选自己中意的颜色。另外有填充样式下方是色彩板，也可以直接用鼠标点选自己中意的颜色。另外有填充样式与填充颜色与填充颜色Alpha值两种设置功能。值两种设置功能

33、。第第2章章 Flash CS5基础知识基础知识4“变形变形”面板面板 “变形变形”面板主要用于缩放、选装和倾斜所选的对象，只需在相应的输面板主要用于缩放、选装和倾斜所选的对象，只需在相应的输入框内填入合适的数字，再单击最下排两个按钮的第一个按钮就可以了。入框内填入合适的数字，再单击最下排两个按钮的第一个按钮就可以了。“变形变形”面板在面板在“窗口窗口/变形变形”菜单中启动，如图所示。菜单中启动，如图所示。第第2章章 Flash CS5基础知识基础知识5“对齐对齐”面板面板 本面板用来处理多个物件的相应位置关系，分别有左、中、右本面板用来处理多个物件的相应位置关系，分别有左、中、右3种水平对齐

34、，种水平对齐，上、中、下上、中、下3种垂直对齐和顶、中、底种垂直对齐和顶、中、底3种分散对齐方式。此外，还有宽度匹配、种分散对齐方式。此外，还有宽度匹配、高度匹配、宽度与高度都匹配高度匹配、宽度与高度都匹配3种匹配方式；空白高度匹配、空白宽度匹配两种间种匹配方式；空白高度匹配、空白宽度匹配两种间隔匹配方式。隔匹配方式。第第2章章 Flash 8基础知识基础知识6“颜色样本颜色样本”面板面板 使用使用“颜色样本颜色样本”面板可以方便选取存放在其中的预设在其中的预设面板可以方便选取存放在其中的预设在其中的预设好好的各种色彩和渐变色进行填充，从而减少重复设置颜色，提高工作效率。的各种色彩和渐变色进行

35、填充，从而减少重复设置颜色，提高工作效率。7“动作动作”面板面板 Flash 8中的中的“动作动作”面板用于为影片添加脚本，动画的交互性都是面板用于为影片添加脚本，动画的交互性都是通通过脚本实现的。要熟练地掌握脚本，就得有一定的过脚本实现的。要熟练地掌握脚本，就得有一定的 Flash 编程基础。选编程基础。选择择“窗口窗口/动作动作”菜单，启动动作面板。菜单，启动动作面板。第第2章章 Flash CS5基础知识基础知识8“组件组件”面板面板 “组件组件”面板中提供了一些常用的组件。面板中提供了一些常用的组件。第第2章章 Flash CS5基础知识基础知识2.3 创建与保存动画创建与保存动画2.

36、3.1 创建与保存动画创建与保存动画 双击桌面上或双击桌面上或“开始开始”菜单中的菜单中的Adobe Flash Professional CS5图标，程序打开工作界面。运图标，程序打开工作界面。运用工具栏上的绘图工具创建和绘制图形，制作完成后，单击用工具栏上的绘图工具创建和绘制图形，制作完成后，单击“文件文件”菜单中的菜单中的“保存保存”菜单项就可以将你创建的动画保存。菜单项就可以将你创建的动画保存。2.3.2 文档属性设置文档属性设置文档属性包括动画尺寸等内容。动画的尺寸就是动画在播放时画面的大小，在设置动画之前，文档属性包括动画尺寸等内容。动画的尺寸就是动画在播放时画面的大小，在设置动画

37、之前，必须根据需求首先设置动画的尺寸，同时还可以设置动画的播放速度和背景色等属性。必须根据需求首先设置动画的尺寸，同时还可以设置动画的播放速度和背景色等属性。操作如下：选择操作如下：选择“修改修改/文档文档”菜单，打开菜单，打开“文档设置文档设置”对话框，对话框，打开打开“文档属性文档属性”对话对话框，如图所示。框，如图所示。在对话框中设置动画标题、尺寸、匹配关系、背景色、帧率、标尺单位在对话框中设置动画标题、尺寸、匹配关系、背景色、帧率、标尺单位等参数。单击等参数。单击“确定确定”按钮，完成设置。按钮，完成设置。动态网页设计与制作动态网页设计与制作实用教程实用教程（第三版）（第三版）21世纪

38、高等院校计算机系列教材世纪高等院校计算机系列教材 第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑本章学习导读本章学习导读在制作动画之前我们应该先掌握绘制、编辑动画角色的基在制作动画之前我们应该先掌握绘制、编辑动画角色的基本工具和技巧。在本工具和技巧。在Flash 中绘制、编辑动画角色主要通过中绘制、编辑动画角色主要通过绘图工具箱来进行。本章主要讲述绘图工具的使用和图形绘图工具箱来进行。本章主要讲述绘图工具的使用和图形编辑过程。通过本章学习，读者应该掌握以下内容：编辑过程。通过本章学习，读者应该掌握以下内容：矢量图形和位图矢量图形和位图Flash CS5绘图工具箱的使用绘图工具箱的使用Fl

39、ash CS5的图形编辑功能的图形编辑功能图形绘制与编辑举例图形绘制与编辑举例第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.1 矢量图形和位图矢量图形和位图 在计算机中，图形的显示格式有两种：矢量图和位图。学会区分两在计算机中，图形的显示格式有两种：矢量图和位图。学会区分两种格式的图形对于动画的创作非常有用，同时可以提高工作效率。种格式的图形对于动画的创作非常有用，同时可以提高工作效率。3.1.1 矢量图矢量图 矢量图通过直线和曲线来描述图形，这些直线和曲线称为矢量。矢矢量图通过直线和曲线来描述图形，这些直线和曲线称为矢量。矢量根据图形（包括文字）的几何特性来对其进行描述。矢量图的形

40、状是量根据图形（包括文字）的几何特性来对其进行描述。矢量图的形状是由曲线通过的点来描述的，而它的颜色则由曲线的颜色和曲线所包围区由曲线通过的点来描述的，而它的颜色则由曲线的颜色和曲线所包围区域的颜色确定。在对一副矢量图进行编辑时，实际上修改的是其中曲线域的颜色确定。在对一副矢量图进行编辑时，实际上修改的是其中曲线的属性，可对曲线进行移动、缩放、改变形状和颜色等操作而不影响它的属性，可对曲线进行移动、缩放、改变形状和颜色等操作而不影响它的显示质量。的显示质量。矢量图具有分辨率无关行，换句话说，用户将它缩放到任意大小和矢量图具有分辨率无关行，换句话说，用户将它缩放到任意大小和以任意分辨率在输出设备

41、上打印出来，都不会遗漏细节或清晰度。因此，以任意分辨率在输出设备上打印出来，都不会遗漏细节或清晰度。因此，矢量图是文字（尤其是文字）和粗略图形的最佳选择。矢量图是文字（尤其是文字）和粗略图形的最佳选择。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.1.2 位图位图 位图通过把叫做像素的不同颜色的点安排在网格中而形成图像。成位图通过把叫做像素的不同颜色的点安排在网格中而形成图像。成像的原理是指定像素在网格中的位置和颜色值，方式与拼接而成的图形像的原理是指定像素在网格中的位置和颜色值，方式与拼接而成的图形十分类似。十分类似。对位图文件进行编辑时，对象是像素而不是曲线。所以位图显示的对位图

42、文件进行编辑时，对象是像素而不是曲线。所以位图显示的质量与分辨率有关，因为图像的每一个数据是根据特定大小的网格的。质量与分辨率有关，因为图像的每一个数据是根据特定大小的网格的。对位图进行编辑有可能改变显示的质量，尤其是缩放操作可使图形边缘对位图进行编辑有可能改变显示的质量，尤其是缩放操作可使图形边缘呈锯齿状，在一个比图形本身分辨率低的输出设备上显示图形时也会使呈锯齿状，在一个比图形本身分辨率低的输出设备上显示图形时也会使现实质量下降。现实质量下降。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.1.3 位图转换为矢量图位图转换为矢量图在新建的在新建的Flash文档中导入一幅位图图片，从

43、主菜单上选择文档中导入一幅位图图片，从主菜单上选择“修改修改/位图位图/转换位图为矢量图转换位图为矢量图”，就会弹出，就会弹出“转换位图为矢量图转换位图为矢量图”对话框，如图对话框，如图3-1所示。我们可以做以下的设置。所示。我们可以做以下的设置。（1）“颜色阀值颜色阀值”选项的参数范围：选项的参数范围：1-500 它的作用是在两个像素相比时，颜色差低于设定的颜色阀值，则两它的作用是在两个像素相比时，颜色差低于设定的颜色阀值，则两个像素被认为是相同的。阀值越大转换后的矢量图的颜色减少。个像素被认为是相同的。阀值越大转换后的矢量图的颜色减少。（2）“最小区域最小区域”选项的参数范围：选项的参数范

44、围：1-1000 它的作用是在指定的像素颜色时需要考虑周围的像素数量，最小区它的作用是在指定的像素颜色时需要考虑周围的像素数量，最小区域是跟踪位图平均不同的颜色值。域是跟踪位图平均不同的颜色值。（3）“曲线拟合曲线拟合”选项的参数范围：像素选项的参数范围：像素 它是决定生成的矢量图的轮廓和区域的粘合程度。它是决定生成的矢量图的轮廓和区域的粘合程度。（4）“角阀值角阀值”选项的参数范围：较多转角选项的参数范围：较多转角 它是决定生成的矢量图中保留锐利边缘还是平滑处理。实践表明，它是决定生成的矢量图中保留锐利边缘还是平滑处理。实践表明，如果要创建最近原始位图的矢量图形，上图中为最佳的设置。设置完成

45、如果要创建最近原始位图的矢量图形，上图中为最佳的设置。设置完成后单击后单击“确定确定”按钮，就可以将位图转换为矢量图形了。按钮，就可以将位图转换为矢量图形了。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.2 图形角色的绘制与填充图形角色的绘制与填充3.1.1 图形角色的绘制图形角色的绘制 图形绘制主要通过绘图工具箱来完成，本节主要讲述绘图工具箱的图形绘制主要通过绘图工具箱来完成，本节主要讲述绘图工具箱的使用。在图形绘制过程中，可通过使用。在图形绘制过程中，可通过“属性属性”面板调整绘制工具和绘制图形面板调整绘制工具和绘制图形的属性。有些绘图工具选中后，在工具箱的选项栏中会出现其模式选

46、项。的属性。有些绘图工具选中后，在工具箱的选项栏中会出现其模式选项。模式选项使绘图更加灵活、准确。模式选项使绘图更加灵活、准确。钢笔工具部分选取工具选择性工具任意变形工具文本工具3D变形工具套索工具矩形工具线条工具铅笔工具刷子工具Deco工具骨骼工具颜料桶工具滴管工具第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑（1）线条线条工具：主要用于绘制线段。选中该工具后，可在属性面板中调工具：主要用于绘制线段。选中该工具后，可在属性面板中调整线型和粗细。线条的属性主要有笔触颜色、笔触高度和笔触样式整线型和粗细。线条的属性主要有笔触颜色、笔触高度和笔触样式3种。种。（2）钢笔工具：主要用于绘制贝赛

47、尔曲线，通过对贝赛尔曲线的调整，）钢笔工具：主要用于绘制贝赛尔曲线，通过对贝赛尔曲线的调整，可以得到复杂的曲线图形。可以得到复杂的曲线图形。（3）铅笔工具：可以在舞台上自由绘制线条和几何图形。）铅笔工具：可以在舞台上自由绘制线条和几何图形。（4）文本工具：该工具用来在场景中添加文本角色。）文本工具：该工具用来在场景中添加文本角色。（5）椭圆工具：可以在舞台上绘制出椭圆或者圆形，绘制出的图形包括）椭圆工具：可以在舞台上绘制出椭圆或者圆形，绘制出的图形包括轮廓线和填充色。轮廓线和填充色。（6）矩形工具：可以在舞台上绘制矩形或者正方形图形，操作方法与）矩形工具：可以在舞台上绘制矩形或者正方形图形，操

48、作方法与“椭椭圆工具圆工具”完全相同。完全相同。（7）多角星形工具：）多角星形工具：“多角星形工具多角星形工具”与与“矩形工具矩形工具”占据同一位置，占据同一位置，按住按住“矩形工具矩形工具”按钮不放，会弹出工具选择列表，切换到按钮不放，会弹出工具选择列表，切换到“多角星形工具多角星形工具”，使，使用用“多角星形工具多角星形工具”可以在舞台上绘制等边多边形或者等边星形图形。可以在舞台上绘制等边多边形或者等边星形图形。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.1.2 颜色的填充颜色的填充（1）墨水瓶工具：本工具用来给图形对象的线条或几何图形的笔画边框）墨水瓶工具：本工具用来给图形对

49、象的线条或几何图形的笔画边框上色。上色。（2）颜料桶工具：对图像进行填色，根据选项的不同可以采取多种填充）颜料桶工具：对图像进行填色，根据选项的不同可以采取多种填充方式。方式。（3）笔刷工具：既然是）笔刷工具：既然是“刷子刷子”，它起着涂刷的功能。，它起着涂刷的功能。（4）滴管工具：本工具用来进行颜色取样，将一个图形或线条的颜色复）滴管工具：本工具用来进行颜色取样，将一个图形或线条的颜色复制到其他图形或线条上。制到其他图形或线条上。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.2 编辑图形角色编辑图形角色3.2.1 选取角色选取角色利用魔术棒工具可在分离的位图上选取相近色块，操作步骤

50、如下：利用魔术棒工具可在分离的位图上选取相近色块，操作步骤如下：（1）选择位图，通过）选择位图，通过“修改修改/分离分离”菜单，分离图像。菜单，分离图像。（2）选取套索工具选项中的魔术棒图标。）选取套索工具选项中的魔术棒图标。（3）单击）单击“阀值阀值”调节图标，设置阀值，阀值越大选取范围越大。调节图标，设置阀值，阀值越大选取范围越大。（4）在位图上的任意处单击，就会选取与单击处颜色相近的区域。）在位图上的任意处单击，就会选取与单击处颜色相近的区域。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.2.2 复制和删除复制和删除 先选中要复制或删除的对象，然后在对象上按右键，选择复制或删除