电子课件-网页制作技术(第二版)-.ppt

1、网页制作技术（第二版）网页制作技术任务一 设计网页 学习目标 了解网页设计的有关知识和术语，理解相关概念 熟悉网页构成的基本元素 掌握网页制作的基本原则和布局思想 了解网站开发的基本流程和制作步骤 上网浏览总结各种不同类型网页布局的特点任务一 设计网页 目录：知识1网页的有关术语知识2网页的基本构成元素知识3网页设计的基本原则知识4网页设计的美学法则知识5网页的布局原则知识6网页的布局结构任务1设计网站的标志（Logo）任务2设计网站的宣传标语任务3设计网站的标准色彩任务4设计网站的标准字体任务5设计网页任务一 设计网页知识1 网页的有关术语1.网页（网页（Web）网页，也称为Web页，是万维

2、网中的基本文档，它是用HTML（超文本标识语言）或者其他语言（如javaScript、VBScript、ASP、PHP、XML等）编写而成的。知识2 网页的有关术语2.网站（网站（Site）网站是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些网页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。知识1 网页的有关术语3.超文本超文本（Hypertext）超文本是一种使用用户 计算机之间进行交流的文本显示技术，通过对关键词或图片的索引链接，可以使这些带有链接的词语或图片指向相关的文件或者文本中的相关段落。知识1 网页的有关术语4.浏览器浏览器 浏览器是安装在电脑中（客

3、户端）用来查看万维网中超级文本的一种工具软件。5.FTP（文件传输协议）FTP是文件传输协议的英文缩写，是快速、高效、可靠的信息传输方式。知识1 网页的有关术语6.静态网页静态网页 静态网页是指浏览器与服务器端不发生交互的网页7.动态网页动态网页 动态网页除了静态网页中的元素外，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。知识2 网页的基本构成元素网页的基本构成元素1.文字文字2.图像3.超链接超链接4.表格表格5.表单表单6.事件与行为事件与行为7.动画动画8.框架框架9.音频音频10.视频频11.交互知识3 网页设

4、计的基本原则网页设计的基本原则1.主题鲜明主题鲜明2.结构合理结构合理3.形式与内容统一形式与内容统一4.技术与艺术统一技术与艺术统一5.整体与局部统一整体与局部统一 知识知识4 网页设计的美学法则网页设计的美学法则1.统一与变化统一与变化2.对比与调和对比与调和3.对称与均衡对称与均衡4.节奏与旋律节奏与旋律5.单纯与秩序单纯与秩序 知识知识4 网页设计的美学法则网页设计的美学法则1.统一与变化统一与变化2.对比与调和对比与调和3.对称与均衡对称与均衡4.节奏与旋律节奏与旋律5.单纯与秩序单纯与秩序 知识知识5 网页的布局原则网页的布局原则1.平衡平衡2.对比对比3.疏密度疏密度4.比例比例

5、5.凝视凝视6.空白空白7.图片说明图片说明 知识6 网页的布局结构网页的布局结构1.“同同”字型结构布局字型结构布局(型结构布局型结构布局)所谓同字型结构就是指页面顶部为“网站标志广告条主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。知识6 网页的布局结构网页的布局结构2.“国国”字型布局字型布局 国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型。3.T型布局 页面的顶部是“网站标志广告条”，左面是主菜单，右面是主要内容。知识6 网页的布局结构网页的布局结构4.“三三”型布局型

6、布局 这种布局多用于国外站点，国内用得不多。特点是在页面上由横向两条色块，将页面整体分割为 3 部分，色块中大多放广告条、更新和版权提示知识6 网页的布局结构网页的布局结构5.对比布局对比布局 采取左右或者上下对比的布局.6.POP布局布局 页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。知识6 网页的布局结构网页的布局结构7.Flash 布局 整个或大部分幅面的网页本身就是一个 Flash 动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。任务1 设计网站的标志（设计网站的标志（Logo）任务2 设计网站的宣传标语设计网站的宣传标语任务3 设计网站的标准色彩

7、设计网站的标准色彩 网站给人的第一印象来自视觉冲击，确定网站的色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。一般来说，适合于网页标准色的颜色有蓝色、黄橙色、黑灰白色 3 大系。任务4 设计网站的标准字体设计网站的标准字体 文字是网页的主要组成部分，是信息的重要载体，正确选择字体不仅关系到网页的美观，还对浏览者的阅读及信息的传达有直接的影响，字体同标准色彩一样，标准字体一般指用于标志、标题和主菜单的特有字体。默认的网页字体一般是宋体。为了体现网页的特有风格，也可以根据需要选择一些特别字体，如飘逸的华文行楷、返朴归真的隶书和亲切随意的手写体等。总之，要根据自己网页

8、所要表达的内涵，选择与主题相符合的字体。目前，常见的中文字体有近 30 种，常见的英文字体有近百种，网络上还有许多专用英文艺术字体供下载，所以要寻找一款满意的字体并不是很困难。网页中通常使用的字体为宋体，黑体，楷体，仿宋体，常用的字号有9pt，11pt。任务5 设计网页设计网页1.草案草案2.粗略布局粗略布局3.定案定案本章结束网页制作技术（第二版）主编 许莉 中国水利水电出版社网页设计与制作任务二 创建和编辑站点学习目标 了解Dreamweaver CS4的功能和特点 掌握Dreamweaver CS4的工具面板及属性面板的使用 了解网站目录管理规范 掌握创建和编辑站点的方法任务二 创建和编

9、辑站点目录：知识1 Dreamweaver CS4的功能和特点知识2 Dreamweaver CS4的工作界面知识3 站点任务1 创建本地站点任务2 管理站点 任务3 创建站点内容 任务二 创建和编辑站点知识1 Dreamweaver CS4的功能和特点1.插入表格实时视图新增功能2.针对 Ajax 和 JavaScript 框架的代码提示3.全新用户界面4.相关文件和代码导航器5.HTML 数据集6.Adobe InContext Editing(预发布版)7.Adobe Photoshop 智能对象8.更全面的 CSS 支持9.Subversion 集成10.Adobe AIR 创作支持新

10、增功能11.跨产品集成12.跨平台支持知识2 Dreamweaver CS4的工作界面首次开启Dreamweaver CS4时，会出现一个欢迎界面，知识2 Dreamweaver CS4的工作界面在Dreamweaver CS4菜单右上部分有一个工作区选项菜单，可根据格局需要选择不同样式的工作界面。知识2 Dreamweaver CS4的工作界面应用程序开发人员布局：知识2 Dreamweaver CS4的工作界面设计人员紧凑布局：知识2 Dreamweaver CS4的工作界面Dreamweaver CS4工作界面：知识2 Dreamweaver CS4的工作界面1.菜单栏2.插入栏3.文档

11、工具栏4.编辑窗口5.状态栏状态栏6.网页标签7.面板组知识3 站点1.本地站点本地站点本地站点实际上存放网页的本地文件夹，即本地工作目录。它可以放在本地计算机上，也可以放在网络服务器上。2.远程站点远程站点远程站点是存储用于测试、生产、协调文件的地方，具体是哪些文件取决于开发环境。一般远程文件夹位于运行Web服务器的计算机上。3.测试服务器文件夹测试服务器文件夹测试服务器文件夹是Dreamweaver处理动态页面的文件夹。Dreamweaver使用此文件夹生成动态内容并在工作时连接到数据库。主要在对动态页面进行测试时使用。任务1 创建本地站点创建站点名为“网页制作学习站点”的本地站点，本地文

12、件夹为“C:mysite”（本地文件夹可事先在Windows 系统中创建，它将作为本站点的根目录。）任务2 管理站点1.1.编辑站点编辑站点任务2 管理站点2.2.删除站点删除站点任务3 创建站点内容1.1.新建页面新建页面任务3 创建站点内容2.2.新建素材文件夹新建素材文件夹本章结束网页制作技术（第二版）主编 许莉 中国水利水电出版社网页设计与制作任务三 制作多媒体页面学习目标 了解网页标记语言HTML的基本语法和常用标签命令 掌握页面标题、属性、头文件的设置方法 掌握常用网页元素的插入方法 掌握动画、声音、视频的插入方法 完成简单多媒体页面的制作任务三 制作多媒体页面目录：知识1 HTM

13、L的基本结构知识2 常用的HTML标签命令知识3 常用网页元素的插入任务1 完成页面的准备工作任务2 插入Flash动画 任务3 插入声音或音乐 任务4 插入视频 任务4 制作多媒体页面任务三 制作多媒体页面知识1 HTML的基本结构的基本结构Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标记语言”，它是一种专门用于创建web超文本文档的结构语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。1.HTML的标签结构 在HTML中，所谓标签，指的是对于元素内容进行控制的符号，其具体形式是用一对尖括号“”括起来的字符串。

14、(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标签种

15、类 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

16、】显示六个等级的标题知识2 常用的HTML标签命令(2)文件段落标签：为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。标签还有一个属性ALIGN，它用来指名字符显示时的对齐方式，一般值有LEFT（左）、CENTER（中）、RIGHT（右）三种。【例3.4】文件段落标签示例知识2 常用的HTML标签命令(3)文字格式控制标签 标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。格式：font face=值1 size=值2 color=值3文字 FONT标签的相关属性：face

17、设置文字使用的字体，默认值为宋体size设置文字的大小，默认值为3color设置文字的颜色，默认值为黑色【例3.5】控制文字的格式知识2 常用的HTML标签命令(4)格式化文本标签 为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：粗体 斜体 加下划线 打字机字体大型字体小型字体 闪烁效果 表示强调，一般为斜体 表示特别强调，一般为粗体 用于引证、举例，一般为斜体【例3.6】字体样式示例知识2 常用的HTML标签命令(5)行中断标签 在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言

18、规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。【例3.7】无换行示例和换行示例知识2 常用的HTML标签命令(6)文字滚动标签滚动字幕的使用使得整个网页更有动感，显得很有生气。用HTML的滚动字幕标签所需的代码最少，能够以较少的下载时间换来较好的效果。该标签语法格式如下：滚动字幕 标签属性的语法为：知识2 常用的HTML标签命令3.链接命令链接命令 链接命令就是用来标记超文本链接，一个链接的基本格式如下：链接文本 l标签表示一个链接的开始，表示链接的结束；l属性“HREF”定义了这个链接所指的地方；l通过点击“链接文字”可

19、以到达指定的文件。(1)本地链接(2)URL链接(3)内部链接知识2 常用的HTML标签命令4.列表命令列表命令 在HTML页面中，列表命令可以起到提纲挈领的作用。列表主要分为两种类型：一是符号列表，二是有序列表。(1)符号列表符号列表使用的一对标签是，每一个列表项前使用。(2)序号列表序号列表和符号号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：第一项第二项第三项知识2 常用的HTML标签命令5.表格命令 表格是一种常用的显示数据和资料的方法，它清晰、直观，简明扼要，是用于排列内容的最佳手段。在HTML页面中，表格是对文本和

20、图形进行布局的一种方式。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

21、 Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。插入图像的标签的格式为：【例3.18】插入图片知识3 常用网页元素的插入常用网页元素的插入1.插入文本插入文本(1)普通文本：直接插入(2)特殊文本：使用“插入”栏中的“文本”选项卡，如图3-17所示。也可以选择【插入】|【HTML】|【特殊字符】菜单命令下的相应命令插入相应字符。(3)空格：Dreamweaver CS4的HTML代码只允许字符之间包含一个空格，若要在文档中添加其他空格，必须插入不换行空格，也可以设置一个在文档中自动添加不换行空格的参数选择。方法1：在

22、“插入”栏的“文本”选项卡中，单击“字符”按钮，在下拉列表中选择“插入不换行空格”选项。方法2：选择【插入】|【HTML】|【特殊字符】|【不换行空格】菜单命令。方法3：按【Ctrl】+【Shift】+【空格键】键输入。方法4：将输入法切换到全角状态再按空格键。（推荐使用）方法5：在代码中直接输入 知识3 常用网页元素的插入常用网页元素的插入2.插入图像插入图像(1)直接插入图像：(2)用占位符插入图像 插入图像后，在属性面板中可设置图像的宽度、高度，垂直边距、水平边距，替换文本等，默认情况下图像的对齐方式为基线对齐。3.插入导航条插入导航条 导航条由图像或图像组组成，这些图像的显示

23、内容随操作不同而变化。一个网页中只允许有一个导航条。导航条有4种状态：一般（未单击或未交互时所显示的图像）、滑过（指鼠标指针滑过“一般”图像时所显示的图像）、按下（单击后所显示的图像）、按下时鼠标经过（鼠标指针滑过“按下”图像时所显示的图像）。知识3 常用网页元素的插入常用网页元素的插入4.插人水平线插人水平线方法1：选择【插入】|【HTML】|【水平线】菜单命令方法2：在“常用”插入栏中，单击“水平线”按钮5.插入日期插入日期 在插入栏中，选择“常用”，然后单击“日期“按钮，打开“插入日期”对话框.插入多媒体插入多媒体知识3 常用网页元素的插入常用网页元素的插入6.插人多媒体插人多媒体 在插

24、入栏中，选择“常用”，然后单击“媒体”按钮，可插入Flash。任务1 完成页面的准备工作任务2 插入Flash动画任务3 插入声音或音乐任务4 插入视频任务5 制作多媒体页面本章结束网页制作技术（第二版）主编 许莉 中国水利水电出版社网页设计与制作任务四 制作网站链接学习目标 理解相对路径和绝对路径的概念 掌握内部链接和外部链接的创建方法 掌握各种特殊链接的创建方法 掌握图像链接的制作方法任务四 制作网站链接目录：知识1 绝对路经与相对路径知识2 内部链接与外部链接知识3 其它特殊链接任务1 制作网站链接任务2 制作锚点链接 任务3 制作图像链接任务三 制作多媒体页面知识1 绝对路经与相对路径

25、 一般说来，链接的路径可以使用3种表示方式，即：绝对路径、相对路径和基于站点根目录的路径。1.绝对路径绝对路径在链接中，绝对路径提供了链接文档的完整URL地址，例如：http:/ 相对路径可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相关。如果链接中源端点和目标端点位于一个目录下，则在链接路径中只需要指明目标端点档名称即可。知识1 绝对路经与相对路径3.站点根目录相对路径站点根目录相对路径 基于站点根目录的相对路径从站点的根目录开始，同源端点的位置无关。通常使用“/”表示根目录，所有基于站点根目录相对路径都以“/”开始，。站点根目录相对路径与绝对路径的源端点位置无关，解决了绝对路

26、径在测试上的麻烦，在测试基于根目录的链接时，可以在本地站点中进行测试，而无须连接到 Internet 上。知识2 内部链接与外部链接1.内部链接内部链接 内部链接指网站内部页面之间的相互链接关系，创建内部链接一般采用“属性”面板设置和拖动指向链接页面的方法。2.外部链接外部链接 创建外部链接的方法比较简单，不论是图像还是文本，都可以创建链接到绝对地址的外部链接。知识3 其它特殊链接1.脚本链接脚本链接 脚本链接是指执行JavaScript代码或调用JavaScript函数。2.下载链接下载链接 链接到下载文件的方法，和链接到网页的方法完全一样。当被链接的文件是 exe 文件或 zip文件等浏览

27、器不支持的类型时，这些文件会被下载，3.邮件链接邮件链接 Email链接是一种特殊的链接，单击这种链接，将打开一个空白通信窗口。在Email通信窗口中，允许用户创建电子邮件，并发送到指定的地址。4.空链接空链接 选中要制作空链接的对象（文本或图像），在属性面板的“链接”文本框中直接输入，就制作了一个空链接。任务1 制作网站链接任务2 制作锚点链接任务3 制作图像链接制作图像链接任务4 制作热点链接本章结束网页制作技术（第二版）主编 许莉 中国水利水电出版社网页设计与制作任务五任务五 上传站点上传站点学习目标 掌握站点测试服务器的设置方法 掌握站点检查的方法 掌握远程服务器的设置方法 掌握上传站

28、点的技巧任务五五 上传站点上传站点目录：知识1 站点的检查知识2 站点的报告任务1 检查链接任务2 生成站点报告 任务3 检查目标浏览器 任务4 上传站点任务三 制作多媒体页面知识1 站点的检查1.浏览器兼容性检查浏览器兼容性检查 “浏览器兼容性”功能可对文档中的 HTML 进行测试，检查是否有目标浏览器不支持的任何标签、属性、CSS属性和CSS值。此检查对文档不作任何方式的更改。2.链接检查器链接检查器 选择“链接检查器”功能可用来在打开的文件、本地站点的某一部分或者整个本地站点断开的链接和未被引用的文件。Dreamweaver只验证那些指向站点内文档的链接，将出现在选定文档中的外部链接编辑

29、成一个列表，但并不验证它们。知识2 站点的报告 在测试站点时，通过使用“站点报告”命令，可以对整个站点的工作流程或HTML属性运行站点报告。为多个 HTML 属性编辑和生成命令使你能够检查外部链接、可合并嵌套字体标签、遗漏的替换文本、冗余的嵌套移除的空标签和无标题文档。任务1 检查链接任务2 生成站点报告任务3 检查目标浏览器任务4 上传站点本章结束网页制作技术（第二版）主编 许莉 中国水利水电出版社网页设计与制作任务六 制作网页动画学习目标 了解Flash CS4的功能、特点，以及工作界面 掌握Flash CS4的基本操作方法 理解帧与时间轴的概念 理解元件与实例的概念 掌握逐帧动画的制作方

30、法 掌握补间形状动画的制作方法 掌握传统补间动画的制作方法 掌握补间动画的制作方法任务六 制作网页动画目录：知识1 Flash CS4的功能和特点 知识2 Flash CS4的工作界面 知识3 Flash CS4的基本操作 知识4 帧与时间轴 知识5 元件与实例 知识6 逐帧动画 知识7 补间形状动画 知识8 传统补间动画知识9 补间动画任务1 创建逐帧动画任务2 创建补间形状动任务3 创建传统补间动画 任务4 创建补间动画任务六 制作网页动画知识1 Flash CS4的功能和特点 Adobe Flash是一款非常优秀的网络动画编辑软件，其应用领域从简单的动画特效到动态的网页设计、网站广告、游

31、戏制作、教学课件、手机程序等等。随着版本的不断升级，软件本身的功能也不断增强。发展到了Adobe Flash CS4，和以前的版本发生了极大的改进。新增了骨骼工具、反向运动制作以及3D旋转工具，ActionScript 3.0的基本使用方法也发生了很大变化，可以说这些都是革命性的改变，使Flash不再只是一款网页动画工具，更具备了专业的动画制作功能。知识2 Flash CS4的工作界面 运行Flash程序，进入开始页。知识2 Flash CS4的工作界面 选择创建文件类型后，进入主界面，包括菜单栏、工具箱、舞台与标尺、时间轴面板与浮动面板。知识3 Flash CS4的基本操作 1.图形绘制1）

32、选择工具2）部分选取工具3）套索工具4）钢笔工具组5）线条工具6）矩形工具和基本矩形工具7）椭圆工具和基本椭圆工具8）多角星形工具9）铅笔工具10）刷子工具组11）橡皮擦工具12）Deco工具知识3 Flash CS4的基本操作 2.文本编辑1）创建静态文本静态文本是Flash中普遍应用的一种文本格式，静态文本在影片播放中不会改变。创建静态文本的具体操作步骤如下：使用文本工具，在舞台上单击进行文本输入；或是拖来一个文本框都后输入文本，绘制好的静态文本框没有边框。在舞台上选取文字，在属性面板上调整该段文字的字体、大小、颜色、粗细、对齐方式、段落格式等属性信息。2）创建动态文本 在Flash界面中

33、一些需要进行动态更新的内容通常用动态文本来显示。动态文本框中的内容既可以在影片制作过程中输入，也可以再影片模仿过程中动态变化。具体操作步骤如下：使用文本工具，在舞台上单击进行文本输入或是拖来一个文本框都后输入文本；在属性面板中的“文本类型”下拉列表中选取“动态文本”，绘制好的动态文本框会有一个黑色边界。知识3 Flash CS4的基本操作 3）创建输入本文输入文本是让用户可以进行直接输入的地方。可以通过用户的输入得到特定的信息，比如说用户名称、用户密码等。输入文本的属性面板中，段落设置里，可输入文本的“行为”中还包括了密码显示的选项，如图所示。选择了密码显示以后，用户的输入内容全部用“*”进行

34、显示。而最多字符则规定用户输入字符的最大数目。知识3 Flash CS4的基本操作 4）设置文本属性文本类型：用来设置文本类型，分别为静态文本、动态文本和输入文本。系列：设置当前选中文本的字体。样式：设置文本是否加粗或是倾斜。大小:设置当前文本的字体大小。可以通过滑杆设置也可以自己输入数值。颜色:设置当前文本颜色。消除锯齿：选择不同的对文字消除锯齿的方式。可选：使文本在用户的机器上显示为可选，这样用户可以复制文本粘贴到其他的单独的文档中。将文本呈现为HTML：用适当的HTML标签保留当前文本格式。在文本周围显示边框：为文本字段显示黑色边框和白色背景。上标/下标：为文本设置上标或下标的状态。格式

35、：设置当前段落所选文本的对齐方式。有“左对齐”、“居中对齐”、“右对齐”、“两端对齐”4种对齐方式。间距：设置字符之间的间隔。边距：设置文本字段的边框与文本之间的间隔。行为：设置动态文本或输入文本的行类型。方向：设置当前文本的方向。默认的方向是水平的。链接：为选择的文本创建超链接。在文本框中输入要链接到的一个URL地址，在浏览器中预览，可发现用户将光标移动到链接文本时会出现手性图标，点击后会链接到一个内部或外部HTML文件。目标：对超链接目标属性进行设置。知识3 Flash CS4的基本操作 3.对象编辑 1）对象的变形 使用“任意变形工具”，可以将工作区中的对象进行旋转、倾斜、缩放、扭曲和封

36、套等变形操作。其中，扭曲和封套功能只适用于形状对象，当对象为元件、文本、位图、渐变时，则这两种变形操作选项处于不可用状态。选择“任意变形工具”后，工具箱对应的“选项”区域会出现“贴紧至对象”、“旋转与倾斜”、“缩放”、“扭曲”和“封套”这5个选项，如图所示。贴紧至对象在移动对象时，可选择这一选项来对齐对象。旋转与倾斜缩放扭曲封套知识3 Flash CS4的基本操作 2）渐变变形 “渐变变形工具”是用来调整颜色渐变的工具。将五角星形的填充设置为线性渐变填充。然后选中“渐变变形工具”，拖曳右侧中间的方形手柄，可以调节渐变的宽度；拖曳右侧上方的圆形手柄，可以调节渐变的旋转角度。将五角星形的填充设置为

37、放射状渐变填充。然后选中“渐变变形工具”，拖曳右侧上方的方形手柄，可以调节渐变的宽度；拖曳右侧中间的圆形手柄，可以调节渐变的直径；拖曳右侧下方的圆形手柄，可以调节渐变的旋转角度。知识3 Flash CS4的基本操作 知识3 Flash CS4的基本操作 3）对象的调整对象的对齐打开【窗口】|【对齐】面板，可以对多个对象进行对齐操作。如图所示。对齐方式分别有左对齐、水平中齐、右对齐、顶对齐、垂直中齐和底对齐。分布是针对三个对象以上的操作，比如ABC三个对象的顶部分布，就是指将A的顶部到B的顶部的距离与B的顶部到C的顶部的距离调整为相等。匹配大小是指将2个或多个对象的高度、宽度或高度和宽度调整为相

38、等。间隔也是针对三个对象以上的操作，是指将多个对象之间的垂直间隔或水平间隔调整为相等。知识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

39、 CS4的基本操作 使用3D平移工具可以在3D空间中移动影片剪辑。使用该工具选中影片剪辑对象后，X、Y、Z轴分别显示在对象上，其中，X轴为红色，Y轴为绿色，Z轴为中间的一个黑色圆点。下图显示了X轴、Y轴与Z轴的平移效果。知识4 帧与时间轴 场景：用于绘制、编辑和测试动画的地方。一个场景就是一段相对独立的动画。一个Flash可以由一个场景或多个场景组成。播放动画时，会按照场景的顺序从前往后播发。帧：是构成动画的基本单位。每帧都显示不同的内容。关键帧：由用户设置，是定义在动画中起关键性变化的帧，决定一段动画的必要帧。在时间轴上包含内容的关键帧，显示为黑色的实心圆点。关键帧应该插入在一段动画的开始和

40、结束位置。属性关键帧：这是Flash CS4中出现的新的概念，是指在补间范围中为补间目标对象显示定义一个或多个属性值的帧。空白关键帧：就是什么内容都没有的关键帧，在时间轴中显示为黑线围着的矩形方格。默认状态下每一层的第一帧都是空白关键帧，在其中插入内容后就变成了关键帧。过渡帧：出现在过渡动画的两个关键帧之间，显示了过渡动画中的若干过渡变化效果。在时间轴上显示为带有箭头直线的浅蓝色方格。帧频：动画播放速度，即每秒中播放的帧数量。帧太快就会看不清动画，太慢就会是动画不连贯。一般地说，在Web上，每秒12帧的帧频为最佳效果。元件：场景中的部件。可以多次调用。层：为了方便操作，可以把不同的内容放在不同

41、的透明层上管理。根据不同的用途，层可分为标准层、引导层和遮罩层。默认情况下，建立的都是标准层，经过转换可以变为引导层或遮罩层，它们只起辅助效果，导出时不显示。库：保存元件的面板。知识4 帧与时间轴 1.时间轴面板1）图层区每个图层都包含一些舞台中的动画元素（包括声音或action指令语句），上面图层中的元素遮盖下面图层中的元素。2）时间帧区Flash影片将播放时间分解为帧，用来设置动画运动的方式、播放的顺序及时间等。默认时是每秒播放12帧。3）状态栏 位于时间轴的最下方，指示所选的帧编号、当前帧频以及到当前帧为止的运行时间，知识4 帧与时间轴 2.帧操作1）选择帧要选择一个单独帧，操作如下：单

42、击该帧，选择它。选择它后，该帧变为当前帧。2）插入关键帧插入关键帧有三种方法：在时间轴上选取一帧，再按F6。用鼠标右键单击时间轴上的某帧，在弹出的菜单中选择插入关键帧命令。在时间轴上选取一帧，然后在插入菜单中，单击时间轴菜单，然后单击关键帧。3）插入空白关键帧插入空白关键帧有三种方法：在时间轴上选取一帧，再按F7。用鼠标右键单击时间轴上的某帧，在弹出的菜单中选择插入空白关键帧命令。在时间轴上选取一帧，然后在插入菜单中，单击时间轴菜单，然后单击空白关键帧。4）删除/移动/复制帧如果要删除帧，则先选择帧，再单击鼠标右键，从弹出菜单中选择清除帧命令即可。如果要移动帧，只要先选取要移动的帧，并将其拖动

43、到适当位置就可以了。如果要复制帧，先选定一帧或多帧，单击鼠标右键，从弹出菜单中选择复制帧命令，再从编辑菜单中选择粘贴命令，将复制的帧粘贴到新的位置。知识5 元件与实例 1.创建元件元件是指在Flash中创建的图形、按钮或影片剪辑。创建的元件可以在影片中或其他影片中重复使用，当创建了一个新元件时，它便自动添加到库中，库是Flash设计者专门为用户管理其元件和导入的位图、声音而创建的。Flash可以创建三种元件，分别为图形元件、按钮元件和影片剪辑元件。图形元件：一般是静态图片或者是和影片的主时间轴同步的动画，无法使用交互控制和声音。按钮元件：对鼠标运动作出反应，用户可以使用它来控制影片，可以设置一

44、个按钮执行各种动作。它在交互影片中起到激发某一事件的作用。影片剪辑元件：是Flash中最具有交互性、功能最强的部分，基本上是小的独立电影，也可以是单帧动画，可以在内部集成声音和按钮。它拥有自己独立的时间轴，其播放与主时间轴没有直接关系。知识5 元件与实例 1）创建图形元件直接创建的图形文件将对象转换为图形元件2）创建按钮元件一般来说按钮有四种基本状态：弹起状态：没有任何鼠标时的状态。触摸状态：当鼠标处于按钮上方时的状态。按下状态：鼠标按下时的状态。点击状态：定义响应鼠标的区域，此区域在影片中是不可见的。3）创建影片剪辑元件知识5 元件与实例 2.编辑元件1）编辑元件引用对象2）编辑库元件对象3

45、.创建实例与编辑实例1）创建实例2）编辑实例调整色调调整透明度调整亮度调整高级选项知识6 逐帧动画 1.逐帧动画的概念逐帧动画（Frame By Frame），这是一种常见的动画形式，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画。2.逐帧动画在时间轴面板上的表现形式逐帧动画在时间帧上表现为连续出现的关键帧；或者是非连续出现的关键帧。知识7 补间形状动画 1.补间形状动画的概念在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“补间形状动画”。2.补间形状动画在时间轴面板上

46、的表现形式形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头。3.使用形状提示1）形状提示的作用在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。2）添加形状提示的方法先在形状补间动画的开始帧上单击一下，再执行“修改”|“形状”|“添加形状提示”命令，该帧的形状上就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”，用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或

47、不在一条曲线上时，“提示圆圈”颜色不变。知识7 补间形状动画 1.传统补间动画的概念所谓“传统补间动画”，是相对于Flash CS4提供的全新的动画方式“补间动画”而言的。它指的是，在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash 根据二者之间的帧的值创建的动画。与补间形状动画不同的是，构成传统补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。2.传统补间动画在时间轴面板上的表现传统补间动画建立后，时间轴面板的背景色变为淡紫色，在起始帧和结束帧

48、之间有一个长长的箭头。知识8 传统补间动画 1.补间动画的概念补间动画是Flash CS4提供的全新补间动画方式，是指通过为一个帧中的对象属性指定一个值并为另一个帧中的相同对象的属性指定另一个值创建的动画。Flash会计算这两个帧之间该属性的值。传统的补间动画是由关键帧组成的，而补间动画则是由属性关键帧组成的。属性关键帧是在补间范围中为补间目标对象显示定义一个或多个属性值的帧。属性关键帧是以小菱形图标来表示的，但是补间的第一帧例外，它是默认的属性关键帧，以黑色圆点表示。能够创建补间动画的对象包括图形元件、按钮元件、影片剪辑元件以及文字。补间动画中可记录对象的属性包括位置、倾斜、缩放、颜色、旋转

49、、滤镜等。若要在文本上创建补间颜色效果，就必须先把文本转换为元件。滤镜属性不包括应用于图形元件的滤镜。2.补间动画在时间轴面板上的表现补间动画建立后，时间轴面板的背景色变为淡蓝色，在起始帧和结束帧之间有若干个小菱形图标。知识9 补间动画 3.认识动画编辑器面板在时间轴面板的右边有一个“动画编辑器”面板。通过该面板可以查看当前选中的补间属性及其属性关键帧。它还提供了向补间中添加具体属性值的工具，可以精确快速地控制动画的属性调整。知识9 补间动画 任务1 创建逐帧动画 任务2 创建补间形状动画 任务3 创建传统补间动画 任务4 创建补间动画 本章结束网页制作技术（第二版）主编 许莉 中国水利水电出

50、版社网页设计与制作任务七 制作高级动画学习目标 理解引导层、遮罩层的概念 理解反向运动的概念 掌握引导层动画的创建方法 掌握遮罩动画的创建方法 掌握骨骼动画的创建方法 掌握声音的添加方法 掌握发布动画的方法任务七 制作高级动画目录：知识1 引导层 知识2 遮罩层 知识3 反向运动 知识4 声音文件的导入 知识5 动画的发布 任务1 创建引导层动画 任务2 创建遮罩层动画 任务3 创建反向运动效果 任务4 为按钮添加声音任务七 制作高级动画知识1 引导层 引导层是用来定义物体运动路径的层。引导层分为“普通引导层”和“运动引导层”两种。其中“普通引导层”只起到辅助定位的作用，多用于版式，而“运动引