网页制作技术.ppt

,*,*,*,*,*,*,*,*,*,*,*,*,*,*,*,*,网页制作技术,（第二版）,网页制作技术,任务一 设计网页,学习目标,了解网页设计的有关知识和术语，理解相关概念,熟悉网页构成的基本元素,掌握网页制作的基本原则和布局思想,了解网站开发的基本流程和制作步骤,上网浏览总结各种不同类型网页布局的特点,任务一 设计网页,目录：,知识,1,网页的有关术语,知识,2,网页的基本构成元素,知识,3,网页设计的基本原则,知识,4,网页设计的美学法则,知识,5,网页的布局原则,知识,6,网页的布局结构,任务,1,设计网站的标志（,Logo,）,任务,2,设计网站的宣传标语,任务,3,设计网站的标准色彩,任务,4,设计网站的标准字体,任务,5,设计网页,任务一 设计网页,知识1 网页的有关术语,1.,网页（Web）,网页，也称为Web页，是万维网中的基本文档，它是用HTML（超文本标识语言）或者其他语言（如javaScript、VBScript、ASP、PHP、XML等）编写而成的。,知识2 网页的有关术语,2.,网站（Site）,网站是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些网页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。,知识1 网页的有关术语,3.,超文本,（Hypertext）,超文本是一种使用用户 计算机之间进行交流的文本显示技术，通过对关键词或图片的索引链接，可以使这些带有链接的词语或图片指向相关的文件或者文本中的相关段落。,知识1 网页的有关术语,4.,浏览器,浏览器是安装在电脑中（客户端）用来查看万维网中超级文本的一种工具软件。,5.,FTP（文件传输协议）,FTP是文件传输协议的英文缩写，是快速、高效、可靠的信息传输方式。,知识1 网页的有关术语,6.,静态网页,静态网页是指浏览器与服务器端不发生交互的网页,7.,动态网页,动态网页除了静态网页中的元素外，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。,知识2,网页的基本构成元素,1.,文字,2.图像,3.,超链接,4.,表格,5.,表单,6.,事件与行为,7.,动画,8.,框架,9.,音频,10.视,频,11.交互,知识3,网页设计的基本原则,1,.主题鲜明,2.,结构合理,3.,形式与内容统一,4.,技术与艺术统一,5.,整体与局部统一,知识4 网页设计的美学法则,1,.统一与变化,2.,对比与调和,3.,对称与均衡,4.,节奏与旋律,5.,单纯与秩序,知识4 网页设计的美学法则,1,.统一与变化,2.,对比与调和,3.,对称与均衡,4.,节奏与旋律,5.,单纯与秩序,知识5 网页的布局原则,1,.平衡,2.,对比,3.,疏密度,4.,比例,5.,凝视,6.,空白,7.,图片说明,知识6,网页的布局结构,1.,“同”字型结构布局(型结构布局),所谓同字型结构就是指页面顶部为“网站标志广告条主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。,知识6,网页的布局结构,2.,“国”字型布局,国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型,。,3.,T型布局,页面的顶部是“网站标志广告条”，左面是主菜单，右面是主要内容。,知识6,网页的布局结构,4.,“三”型布局,这种布局多用于国外站点，国内用得不多。特点是在页面上由横向两条色块，将页面整体分割为 3 部分，色块中大多放广告条、更新和版权提示,知识6,网页的布局结构,5.,对比布局,采取左右或者上下对比的布局.,6.,POP布局,页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。,网页制作技术（第二版）,主编 许莉,中国水利水电出版社,网页设计与制作,任务三 制作多媒体页面,学习目标,了解网页标记语言HTML的基本语法和常用标签命令,掌握页面标题、属性、头文件的设置方法,掌握常用网页元素的插入方法,掌握动画、声音、视频的插入方法,完成简单多媒体页面的制作,任务三 制作多媒体页面,目录：,知识,1,HTML,的基本结构,知识,2,常用的,HTML,标签命令,知识,3,常用网页元素的插入,任务,1,完成页面的准备工作,任务,2,插入,Flash,动画,任务,3,插入声音或音乐,任务,4,插入视频,任务,4,制作多媒体页面,任务三 制作多媒体页面,知识1,HTML的基本结构,Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标记语言”，它是一种专门用于创建web超文本文档的结构语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。,1.HTML的标签结构,在HTML中，所谓标签，指的是对于元素内容进行控制的符号，其具体形式是用一对尖括号“”括起来的字符串。,(1)单标签,(2)双标签,内 容,(3)标签属性,知识1,HTML的基本结构,2.HTML的文件结构,一个HTML文档，通常由两部分组成：即标头区（head）和主体区（body）。,标头区（head）：用于存放该HTML文档的属性内容，即该页面的序言，一般情况下，此处都包含有Web页面的标题（Title）；主体区（body）：定义Web页面的具体内容。,在HTML文件中，各个部分中所定义的项都称为元素（element）。标头区定义的元素称为头元素，在主体区中定义的元素称为主体元素。,【例3.1】一个HTML文档的基本结构,知识1,HTML的基本结构,3.HTML的文常用的HTML标签种类,HTML标签的命令种类繁多，常用HTML标签命令可分为以下几种类型：,(1)文件结构命令,(2)文字版面编辑命令,(3)链接命令,(4)列表命令,(5)表格命令,(6)表单命令,(7)图像命令,(8)框架命令,知识2 常用的HTML标签命令,1.,文件结构命令,文件结构命令用来标记出HTML文件的结构，常用的文件结构命令有：,【例3.2】Html文档中文件结构命令的使用,知识2 常用的HTML标签命令,2.,文字版面编辑命令,(1)标题标签：,一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大。,【例3.3】显示六个等级的标题,知识2 常用的HTML标签命令,(2)文件段落标签：,为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。,标签还有一个属性ALIGN，它用来指名字符显示时的对齐方式，一般值有LEFT（左）、CENTER（中）、RIGHT（右）三种。,【例3.4】文件段落标签示例,知识2 常用的HTML标签命令,(3)文字格式控制标签,标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。,格式：,FONT标签的相关属性：,face设置文字使用的字体，默认值为宋体,size设置文字的大小，默认值为3,color设置文字的颜色，默认值为黑色,【例3.5】控制文字的格式,知识2 常用的HTML标签命令,(4)格式化文本标签,为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：,粗体,斜体,加下划线,打字机字体,大型字体,小型字体,闪烁效果,表示强调，一般为斜体,表示特别强调，一般为粗体,用于引证、举例，一般为斜体,【例3.6】字体样式示例,知识2 常用的HTML标签命令,(5)行中断标签,在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。,【例3.7】无换行示例和换行示例,知识2 常用的HTML标签命令,(6)文字滚动标签,滚动字幕的使用使得整个,网页,更有动感，显得很有生气。用HTML的滚动字幕标签所需的代码最少，能够以较少的下载时间换来较好的效果。该标签语法格式如下：,滚动字幕,标签属性的语法为：,知识2 常用的HTML标签命令,3.,链接命令,链接命令就是用来标记超文本链接，一个链接的基本格式如下：,链接文本,标签表示一个链接的开始，表示链接的结束；,属性“HREF”定义了这个链接所指的地方；,通过点击“链接文字”可以到达指定的文件。,(1)本地链接,(2)URL链接,(3)内部链接,知识2 常用的HTML标签命令,4.,列表命令,在HTML页面中，列表命令可以起到提纲挈领的作用。列表主要分为两种类型：一是符号列表，二是有序列表。,(1)符号列表,符号列表使用的一对标签是，每一个列表项前使用。,(2)序号列表,序号列表和符号号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：,第一项,第二项,第三项,知识2 常用的HTML标签命令,5.,表格命令,表格是一种常用的显示数据和资料的方法，它清晰、直观，简明扼要，是用于排列内容的最佳手段。在HTML页面中，表格是对文本和图形进行布局的一种方式。,HTML中常用的表格命令有：,.定义了表格的开始和结束,【例3.14】一个简单的表格,第1行中的第1列,第1行中的第2列,第1行中的第3列,第2行中的第1列,第2行中的第2列,第2行中的第3列,知识2 常用的HTML标签命令,6.,表单命令,表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格多行文本输入标记.,【例3.16】多行文本输入标记示例,【例3.17】文字输入和密码输入,知识2 常用的HTML标签命令,7.,图像命令,网页中插入图片用单标签，当浏览器读取到标签时，就会显示此标签所设定的图像。超文本支持的图像格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。,插入图像的标签的格式为：,【例3.18】插入图片,知识3,常用网页元素的插入,1.,插入文本,(1)普通文本：直接插入,(2)特殊文本：使用“插入”栏中的“文本”选项卡，如图3-17所示。也可以选择【插入】|【HTML】|【特殊字符】菜单命令下的相应命令插入相应字符。,(3)空格：Dreamweaver CS4的HTML代码只允许字符之间包含一个空格，若要在文档中添加其他空格，必须插入不换行空格，也可以设置一个在文档中自动添加不换行空格的参数选择。,方法1：在“插入”栏的“文本”选项卡中，单击“字符”按钮，在下拉列表中选择“插入不换行空格”选项。,方法2：选择【插入】|【HTML】|【特殊字符】|【不换行空格】菜单命令。,方法3：按【Ctrl】+【Shift】+【空格键】键输入。,方法4：将输入法切换到全角状态再按空格键。（推荐使用）,方法5：在代码中直接输入,知识3,常用网页元素的插入,2.,插入图像,(1)直接插入图像：,(2)用占位符插入图像,插入图像后，在属性面板中可设置图像的宽度、高度，垂直边距、水平边距，替换文本等，默认情况下图像的对齐方式为基线对齐。,3.插入导航条,导航条由图像或图像组组成，这些图像的显示内容随操作不同而变化。一个网页中只允许有一个导航条。,导航条有4种状态：一般（未单击或未交互时所显示的图像）、滑过（指鼠标指针滑过“一般”图像时所显示的图像）、按下（单击后所显示的图像）、按下时鼠标经过（鼠标指针滑过“按下”图像时所显示的图像）。,知识3,常用网页元素的插入,4.,插人水平线,方法1：选择【插入】|【HTML】|【水平线】菜单命令,方法2：在“常用”插入栏中，单击“水平线”按钮,5.插入日期,在插入栏中，选择“常用”，然后单击“日期“按钮，打开“插入日期”对话框.,插入多媒体,知识3,常用网页元素的插入,6.,插人多媒体,在插入栏中，选择“常用”，然后单击“媒体”按钮，可插入Flash。,任务1 完成页面的准备工作,任务2 插入Flash动画,任务3 插入声音或音乐,任务4 插入视频,任务5 制作多媒体页面,本章结束,网页制作技术（第二版）,主编 许莉,中国水利水电出版社,网页设计与制作,任务四 制作网站链接,学习目标,理解相对路径和绝对路径的概念,掌握内部链接和外部链接的创建方法,掌握各种特殊链接的创建方法,掌握图像链接的制作方法,任务四 制作网站链接,目录：,知识,1,绝对路经与相对路径,知识,2,内部链接与外部链接,知识,3,其它特殊链接,任务,1,制作网站链接,任务,2,制作锚点链接,任务,3,制作图像链接,任务三 制作多媒体页面,知识1 绝对路经与相对路径,一般说来，链接的路径可以使用3种表示方式，即：绝对路径、相对路径和基于站点根目录的路径。,1.绝对路径,在链接中，绝对路径提供了链接文档的完整URL地址，例如：绝对路经与相对路径,3.站点根目录相对路径,基于站点根目录的相对路径从站点的根目录开始，同源端点的位置无关。通常使用“/”表示根目录，所有基于站点根目录相对路径都以“/”开始，。,站点根目录相对路径与绝对路径的源端点位置无关，解决了绝对路径在测试上的麻烦，在测试基于根目录的链接时，可以在本地站点中进行测试，而无须连接到 Internet 上。,知识2 内部链接与外部链接,1.内部链接,内部链接指网站内部页面之间的相互链接关系，创建内部链接一般采用“属性”面板设置和拖动指向链接页面的方法。,2.外部链接,创建外部链接的方法比较简单，不论是图像还是文本，都可以创建链接到绝对地址的外部链接。,知识3 其它特殊链接,1.脚本链接,脚本链接是指执行JavaScript代码或调用JavaScript函数。,2.下载链接,链接到下载文件的方法，和链接到网页的方法完全一样。当被链接的文件是 exe 文件或 zip文件等浏览器不支持的类型时，这些文件会被下载，,3.邮件链接,Email链接是一种特殊的链接，单击这种链接，将打开一个空白通信窗口。在Email通信窗口中，允许用户创建电子邮件，并发送到指定的地址。,4.空链接,选中要制作空链接的对象（文本或图像），在属性面板的“链接”文本框中直接输入，就制作了一个空链接。,任务1 制作网站链接,任务2 制作锚点链接,任务3,制作图像链接,任务4 制作热点链接,本章结束,网页制作技术（第二版）,主编 许莉,中国水利水电出版社,网页设计与制作,任务五 上传站点,学习目标,掌握站点测试服务器的设置方法,掌握站点检查的方法,掌握远程服务器的设置方法,掌握上传站点的技巧,任务,五 上传站点,目录：,知识,1,站点的检查,知识,2,站点的报告,任务,1,检查链接,任务,2,生成站点报告,任务,3,检查目标浏览器,任务,4,上传站点,任务三 制作多媒体页面,知识1 站点的检查,1.浏览器兼容性检查,“浏览器兼容性”功能可对文档中的 HTML 进行测试，检查是否有目标浏览器不支持的任何标签、属性、CSS属性和CSS值。此检查对文档不作任何方式的更改。,2.链接检查器,选择“链接检查器”功能可用来在打开的文件、本地站点的某一部分或者整个本地站点断开的链接和未被引用的文件。Dreamweaver只验证那些指向站点内文档的链接，将出现在选定文档中的外部链接编辑成一个列表，但并不验证它们。,知识2 站点的报告,在测试站点时，通过使用“站点报告”命令，可以对整个站点的工作流程或HTML属性运行站点报告。为多个 HTML 属性编辑和生成命令使你能够检查外部链接、可合并嵌套字体标签、遗漏的替换文本、冗余的嵌套移除的空标签和无标题文档。,任务1 检查链接,任务2 生成站点报告,任务3 检查目标浏览器,任务4 上传站点,本章结束,网页制作技术（第二版）,主编 许莉,中国水利水电出版社,网页设计与制作,任务六 制作网页动画,学习目标,了解Flash CS4的功能、特点，以及工作界面,掌握Flash CS4的基本操作方法,理解帧与时间轴的概念,理解元件与实例的概念,掌握逐帧动画的制作方法,掌握补间形状动画的制作方法,掌握传统补间动画的制作方法,掌握补间动画的制作方法,任务六 制作网页动画,目录：,知识,1 Flash CS4,的功能和特点,知识,2 Flash CS4,的工作界面,知识,3 Flash CS4,的基本操作,知识,4,帧与时间轴,知识,5,元件与实例,知识,6,逐帧动画,知识,7,补间形状动画,知识,8,传统补间动画,知识,9,补间动画,任务,1,创建逐帧动画,任务,2,创建补间形状动,任务,3,创建传统补间动画,任务,4,创建补间动画,任务六 制作网页动画,知识1 Flash CS4的功能和特点,Adobe Flash是一款非常优秀的网络动画编辑软件，其应用领域从简单的动画特效到动态的网页设计、网站广告、游戏制作、教学课件、手机程序等等。随着版本的不断升级，软件本身的功能也不断增强。,发展到了Adobe Flash CS4，和以前的版本发生了极大的改进。新增了骨骼工具、反向运动制作以及3D旋转工具，ActionScript 3.0的基本使用方法也发生了很大变化，可以说这些都是革命性的改变，使Flash不再只是一款网页动画工具，更具备了专业的动画制作功能。,知识2 Flash CS4的工作界面,运行Flash程序，进入开始页。,知识2 Flash CS4的工作界面,选择创建文件类型后，进入主界面，包括菜单栏、工具箱、舞台与标尺、时间轴面板与浮动面板。,知识3 Flash CS4的基本操作,图形绘制,1）选择工具,2）部分选取工具,3）套索工具,4）钢笔工具组,5）,线条工具,6）,矩形工具和基本矩形工具,7）,椭圆工具和基本椭圆工具,8）,多角星形工具,9）铅笔工具,10）刷子工具组,11）橡皮擦工具,12）Deco工具,知识3 Flash CS4的基本操作,文本编辑,1）创建静态文本,静态文本是Flash中普遍应用的一种文本格式，静态文本在影片播放中不会改变。创建静态文本的具体操作步骤如下：,使用文本工具，在舞台上单击进行文本输入；或是拖来一个文本框都后输入文本，绘制好的静态文本框没有边框。在舞台上选取文字，在属性面板上调整该段文字的字体、大小、颜色、粗细、对齐方式、段落格式等属性信息。,2）创建动态文本,在Flash界面中一些需要进行动态更新的内容通常用动态文本来显示。动态文本框中的内容既可以在影片制作过程中输入，也可以再影片模仿过程中动态变化。具体操作步骤如下：,使用文本工具，在舞台上单击进行文本输入或是拖来一个文本框都后输入文本；在属性面板中的“文本类型”下拉列表中选取“动态文本”，绘制好的动态文本框会有一个黑色边界。,知识3 Flash CS4的基本操作,3）创建输入本文,输入文本是让用户可以进行直接输入的地方。可以通过用户的输入得到特定的信息，比如说用户名称、用户密码等。,输入文本的属性面板中，段落设置里，可输入文本的“行为”中还包括了密码显示的选项，如图所示。选择了密码显示以后，用户的输入内容全部用“*”进行显示。而最多字符则规定用户输入字符的最大数目。,知识3 Flash CS4的基本操作,4）设置文本属性,文本类型：用来设置文本类型，分别为静态文本、动态文本和输入文本。,系列：设置当前选中文本的字体。,样式：设置文本是否加粗或是倾斜。,大小:设置当前文本的字体大小。可以通过滑杆设置也可以自己输入数值。,颜色:设置当前文本颜色。,消除锯齿：选择不同的对文字消除锯齿的方式。,可选：使文本在用户的机器上显示为可选，这样用户可以复制文本粘贴到其他的单独的文档中。,将文本呈现为HTML：用适当的HTML标签保留当前文本格式。,在文本周围显示边框：为文本字段显示黑色边框和白色背景。,上标/下标：为文本设置上标或下标的状态。,格式：设置当前段落所选文本的对齐方式。有“左对齐”、“居中对齐”、“右对齐”、“两端对齐”4种对齐方式。,间距：设置字符之间的间隔。,边距：设置文本字段的边框与文本之间的间隔。,行为：设置动态文本或输入文本的行类型。,方向：设置当前文本的方向。默认的方向是水平的。,链接：为选择的文本创建超链接。在文本框中输入要链接到的一个URL地址，在浏览器中预览，可发现用户将光标移动到链接文本时会出现手性图标，点击后会链接到一个内部或外部HTML文件。,目标：对超链接目标属性进行设置。,知识3 Flash CS4的基本操作,对象编辑,1）对象的变形,使用“任意变形工具”，可以将工作区中的对象进行旋转、倾斜、缩放、扭曲和封套等变形操作。其中，扭曲和封套功能只适用于形状对象，当对象为元件、文本、位图、渐变时，则这两种变形操作选项处于不可用状态。选择“任意变形工具”后，工具箱对应的“选项”区域会出现“贴紧至对象”、“旋转与倾斜”、“缩放”、“扭曲”和“封套”这5个选项，如图所示。,贴紧至对象,在移动对象时，可选择这一选项来对齐对象。,旋转与倾斜,缩放,扭曲,封套,知识3 Flash CS4的基本操作,2）渐变变形,“渐变变形工具”是用来调整颜色渐变的工具。,将五角星形的填充设置为线性渐变填充。然后选中“渐变变形工具”，拖曳右侧中间的方形手柄，可以调节渐变的宽度；拖曳右侧上方的圆形手柄，可以调节渐变的旋转角度。,将五角星形的填充设置为放射状渐变填充。然后选中“渐变变形工具”，拖曳右侧上方的方形手柄，可以调节渐变的宽度；拖曳右侧中间的圆形手柄，可以调节渐变的直径；拖曳右侧下方的圆形手柄，可以调节渐变的旋转角度。,知识3 Flash CS4的基本操作,知识3 Flash CS4的基本操作,3）对象的调整,对象的对齐,打开【窗口】|【对齐】面板，可以对多个对象进行对齐操作。如图所示。对齐方式分别有左对齐、水平中齐、右对齐、顶对齐、垂直中齐和底对齐。,分布是针对三个对象以上的操作，比如ABC三个对象的顶部分布，就是指将A的顶部到B的顶部的距离与B的顶部到C的顶部的距离调整为相等。,匹配大小是指将2个或多个对象的高度、宽度或高度和宽度调整为相等。,间隔也是针对三个对象以上的操作，是指将多个对象之间的垂直间隔或水平间隔调整为相等。,知识3 Flash CS4的基本操作,对象的合并,选择【修改】|【合并对象】子菜单中的相关命令可以合并或改变现有对象，从而创建新的形状。,联合,交集,打孔,裁切,知识3 Flash CS4的基本操作,3D旋转和平移,使用3D旋转工具可以在3D空间中将影片剪辑对象进行X、Y、Z轴的相应旋转。,使用3D旋转工具选中影片剪辑对象，其中红色线条表示X轴控件，绿色线条表示Y轴控件，蓝色线条表示Z轴控件，橙色线条表示自由旋转控件，可以同时绕X轴和Y轴旋转。下图显示了分别以X轴、Y轴、Z以及同时绕X轴和Y轴旋转的效果。,知识3 Flash CS4的基本操作,使用3D平移工具可以在3D空间中移动影片剪辑。使用该工具选中影片剪辑对象后，X、Y、Z轴分别显示在对象上，其中，X轴为红色，Y轴为绿色，Z轴为中间的一个黑色圆点。下图显示了X轴、Y轴与Z轴的平移效果。,知识4 帧与时间轴,场景：用于绘制、编辑和测试动画的地方。一个场景就是一段相对独立的动画。一个Flash可以由一个场景或多个场景组成。播放动画时，会按照场景的顺序从前往后播发。,帧：是构成动画的基本单位。每帧都显示不同的内容。,关键帧：由用户设置，是定义在动画中起关键性变化的帧，决定一段动画的必要帧。在时间轴上包含内容的关键帧，显示为黑色的实心圆点。关键帧应该插入在一段动画的开始和结束位置。,属性关键帧：这是Flash CS4中出现的新的概念，是指在补间范围中为补间目标对象显示定义一个或多个属性值的帧。,空白关键帧：就是什么内容都没有的关键帧，在时间轴中显示为黑线围着的矩形方格。默认状态下每一层的第一帧都是空白关键帧，在其中插入内容后就变成了关键帧。,过渡帧：出现在过渡动画的两个关键帧之间，显示了过渡动画中的若干过渡变化效果。在时间轴上显示为带有箭头直线的浅蓝色方格。,帧频：动画播放速度，即每秒中播放的帧数量。帧太快就会看不清动画，太慢就会是动画不连贯。一般地说，在Web上，每秒12帧的帧频为最佳效果。,元件：场景中的部件。可以多次调用。,层：为了方便操作，可以把不同的内容放在不同的透明层上管理。根据不同的用途，层可分为标准层、引导层和遮罩层。默认情况下，建立的都是标准层，经过转换可以变为引导层或遮罩层，它们只起辅助效果，导出时不显示。,库：保存元件的面板。,知识4 帧与时间轴,时间轴面板,1）图层区,每个图层都包含一些舞台中的动画元素（包括声音或action指令语句），上面图层中的元素遮盖下面图层中的元素。,2）时间帧区,Flash影片将播放时间分解为帧，用来设置动画运动的方式、播放的顺序及时间等。默认时是每秒播放12帧。,3）状态栏,位于时间轴的最下方，指示所选的帧编号、当前帧频以及到当前帧为止的运行时间，,知识4 帧与时间轴,帧操作,1）选择帧,要选择一个单独帧，操作如下：单击该帧，选择它。选择它后，该帧变为当前帧。,2）插入关键帧,插入关键帧有三种方法：,在时间轴上选取一帧，再按F6。,用鼠标右键单击时间轴上的某帧，在弹出的菜单中选择插入关键帧命令。,在时间轴上选取一帧，然后在插入菜单中，单击时间轴菜单，然后单击关键帧。,3）插入空白关键帧,插入空白关键帧有三种方法：,在时间轴上选取一帧，再按F7。,用鼠标右键单击时间轴上的某帧，在弹出的菜单中选择插入空白关键帧命令。,在时间轴上选取一帧，然后在插入菜单中，单击时间轴菜单，然后单击空白关键帧。,4）删除/移动/复制帧,如果要删除帧，则先选择帧，再单击鼠标右键，从弹出菜单中选择清除帧命令即可。,如果要移动帧，只要先选取要移动的帧，并将其拖动到适当位置就可以了。,如果要复制帧，先选定一帧或多帧，单击鼠标右键，从弹出菜单中选择复制帧命令，再从编辑菜单中选择粘贴命令，将复制的帧粘贴到新的位置。,知识5 元件与实例,创建元件,元件是指在Flash中创建的图形、按钮或影片剪辑。创建的元件可以在影片中或其他影片中重复使用，当创建了一个新元件时，它便自动添加到库中，库是Flash设计者专门为用户管理其元件和导入的位图、声音而创建的。,Flash可以创建三种元件，分别为图形元件、按钮元件和影片剪辑元件。,图形元件：一般是静态图片或者是和影片的主时间轴同步的动画，无法使用交互控制和声音。,按钮元件：对鼠标运动作出反应，用户可以使用它来控制影片，可以设置一个按钮执行各种动作。它在交互影片中起到激发某一事件的作用。,影片剪辑元件：是Flash中最具有交互性、功能最强的部分，基本上是小的独立电影，也可以是单帧动画，可以在内部集成声音和按钮。它拥有自己独立的时间轴，其播放与主时间轴没有直接关系。,知识5 元件与实例,1）创建图形元件,直接创建的图形文件,将对象转换为图形元件,2）创建按钮元件,一般来说按钮有四种基本状态：,弹起状态：没有任何鼠标时的状态。,触摸状态：当鼠标处于按钮上方时的状态。,按下状态：鼠标按下时的状态。,点击状态：定义响应鼠标的区域，此区域在影片中是不可见的。,3）创建影片剪辑元件,知识5 元件与实例,编辑元件,1）编辑元件引用对象,2）编辑库元件对象,创建实例与编辑实例,1）创建实例,2）编辑实例,调整色调,调整透明度,调整亮度,调整高级选项,知识6 逐帧动画,逐帧动画的概念,逐帧动画（Frame By Frame），这是一种常见的动画形式，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画。,逐帧动画在时间轴面板上的表现形式,逐帧动画在时间帧上表现为连续出现的关键帧；或者是非连续出现的关键帧。,知识7 补间形状动画,补间形状动画的概念,在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“补间形状动画”。,补间形状动画在时间轴面板上的表现形式,形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头。,使用形状提示,1）形状提示的作用,在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。,2）添加形状提示的方法,先在形状补间动画的开始帧上单击一下，再执行“修改”|“形状”|“添加形状提示”命令，该帧的形状上就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”，用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变。,知识7 补间形状动画,传统补间动画的概念,所谓“传统补间动画”，是相对于Flash CS4提供的全新的动画方式“补间动画”而言的。它指的是，在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash 根据二者之间的帧的值创建的动画。,与补间形状动画不同的是，构成传统补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。,传统补间动画在时间轴面板上的表现,传统补间动画建立后，时间轴面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头。,知识8 传统补间动画,补间动画的概念,补间动画是Flash CS4提供的全新补间动画方式，是指通过为一个帧中的对象属性指定一个值并为另一个帧中的相同对象的属性指定另一个值创建的动画。Flash会计算这两个帧之间该属性的值。,传统的补间动画是由关键帧组成的，而补间动画则是由属性关键帧组成的。属性关键帧是在补间范围中为补间目标对象显示定义一个或多个属性值的帧。属性关键帧是以小菱形图标来表示的，但是补间的第一帧例外，它是默认的属性关键帧，以黑色圆点表示。能够创建补间动画的对象包括图形元件、按钮元件、影片剪辑元件以及文字。补间动画中可记录对象的属性包括位置、倾斜、缩放、颜色、旋转、滤镜等。若要在文本上创建补间颜色效果，就必须先把文本转换为元件。滤镜属性不包括应用于图形元件的滤镜。,补间动画在时间轴面板上的表现,补间动画建立后，时间轴面板的背景色变为淡蓝色，在起始帧和结束帧之间有若干个小菱形图标。,知识9 补间动画,认识动画编辑器面板,在时间轴面板的右边有一个“动画编辑器”面板。通过该面板可以查看当前选中的补间属性及其属性关键帧。它还提供了向补间中添加具体属性值的工具，可以精确快速地控制动画的属性调整。,知识9 补间动画,任务1 创建逐帧动画,任务2 创建补间形状动画,任务3 创建传统补间动画,任务4 创建补间动画,本章结束,网页制作技术（第二版）,主编 许莉,中国水利水电出版社,网页设计与制作,任务七 制作高级动画,学习目标,理解引导层、遮罩层的概念,理解反向运动的概念,掌握引导层动画的创建方法,掌握遮罩动画的创建方法,掌握骨骼动画的创建方法,掌握声音的添加方法,掌握发布动画的方法,任务七 制作高级动画,目录：,知识1 引导层,知识2 遮罩层,知识3 反向运动,知识4 声音文件的导入,知识5 动画的发布,任务1 创建引导层动画,任务2 创建遮罩层动画,任务3 创建反向运动效果,任务4 为按钮添加声音,任务七 制作高级动画,知识1 引导层,引导层是用来定义物体运动路径的层。引导层分为“普通引导层”和“运动引导层”两种。其中“普通引导层”只起到辅助定位的作用，多用于版式，而“运动引导层”是引导物体沿着特定的路径运动。如果将多个层链接到一个运动引导层，那么多个对象就将沿同一条路径运动。,知识1 引导层,创建引导层和被引导层,一个最基本“引导路径动画”由两个图层组成，上面一层是“引导层”，下面一层是“被引导层”，同普通图层一样。,在普通图层上点右键，选择“添加传统运动引导层”，该层的上面就会添加一个引导层，同时该普通层缩进成为“被引导层”，如图所示，“图层1”是被引导层，而“图层3”是普通图层。,知识1 引导层,引导层和被引导层中的对象,引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。,而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能应用形状。,由于引导线是一种运动轨迹，不难想象，“被引导”层中最常用的动画形式是传统补间动画，当播放动画时，一个或数个元件将沿着运动路径移动。,知识1 引导层,向被引导层中添加元件,“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。所以操作时特别得注意“引导线”的两端，被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头，如图所示。,知识1 引导层,应用引导层的技巧,“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如运动方向，在“属性”面板上，选中“调整到路径”复选框，对象的基线就会调整到运动路径，对象在运动时两保持与路径的切线夹角不变。而如果选中“贴紧”复选框，元件的注册点就会与运动路径对齐。,引导层中的内容在播放时是看不见的，利用这一特点，可以单独定义一个不含“被引导层”的“引导层”，该引导层中可以放置一些文字说明、元件位置参考等。,在做引导路径动画时，按下工具箱中的“对齐对象”按钮，可以使“对象附着于引导线”的操作更容易成功，拖动对象时，对象的中心会自动吸附到路径端点上。,过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。,向被引导层中放入元件时，在动画开始和结束的关键帧上，一定要让元件的注册点对准线段的开始和结束的端点，否则无法引导，如果元件为不规则形，可以点击工具箱中的“任意变形工具”，调整注册点。,如果想解除引导，可以把被引导层拖离“引导层”，或在图层区的引导层上单击右键，在弹出的菜单上选择“属性”，在对话框中选择“一般”，作为一般图层类型。,如果想让对象作圆周运动，可以在“引导层”画一根圆形线条，再用【橡皮擦工具】擦去一小段，使圆形线段出现2个端点，再把对象的起始、终点分别对准端点即可。,引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持圆润，让Flash能辨认出线段走向，否则会使引导失败。,知识2 遮罩层,遮罩层上的对象可以看作是孔，透过孔可以看见被遮罩的层。,创建遮罩层和被遮罩层,在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在某个图层上单击右键，在弹出菜单中选择“遮罩层”，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为。如图所示，其中“图层2”为遮罩层，“图层1”为被遮罩层，“图层3”为普通图层。,知识2 遮罩层,构成遮罩和被遮罩层的元素,遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。,被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。,遮罩中可以使用的动画形式,可以在遮罩层、被遮罩层中分别或同时使用补间形状动画、传统补间动画、补间动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。,知识2 遮罩层,应用遮罩层的技巧,遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。,要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。不能用一个遮罩层试图