中学物理制作课件

FlashAuthorwareFrontPage

Flash

基础教程

目录第一章Flash基础第二章绘画及颜色的使用第三章Flash动画初步第四章元件与实例第五章图层与图层文件夹第六章Flash动画深入第七章加入声音Flash的操作环境

FlashMX的操作环境主要有菜单、绘图工具栏、工具箱、右键快捷菜单、编辑区、时间轴、库和面板组成。

FlashMX

的面板几乎囊括了工具菜单的所有功能，绝大多数的操作都可以由这些浮动面板来轻松实现。这对于用户来说也带来了极大的操作简便性。关于这些浮动面板的作用和具体操作方法，我们将在后面的章节具体介绍。绘图工具箭头工具：选中对象，并可以改变线段和图形的轮廓。部分选取工具：选取图形对象的节点，并通过改变节点修改图形轮廓。套索工具：选择不规则的图形区域。钢笔工具：绘制贝济埃曲线。任意变形工具：图形的自由变形处理。填充变形工具：填充色的变形处理。滴管工具：拾取颜色。画笔工具：绘制较粗的线条，并具有着色功能。

绘图工具箱中包含了绘图所需的各种工具。箭头工具——任意变形工具——

——填充变形工具——套索工具——部分选取工具对齐对象按钮————笔触颜色——填充色——缩放工具绘图工具箱——画笔工具颜色的使用在色彩缤纷的世界里，人们可以看到各种各样的颜色。人眼看到的色彩具有色相（Hue）、饱和度（Saturation）和明度（Lightness）三种属性。——笔触颜色——填充色——交换颜色——黑白——没有颜色单击没有颜色按钮将设置与背景相同的笔触或填充颜色。单击黑白按钮将恢复到黑笔触色和白色填充色的默认设置。单击交换按钮，互换笔触和填充的颜色。

颜料筒的使用选择未封闭区域的空隙大小当单击工具箱中的颜料桶工具按钮，将绘图工具切换为颜料桶工具状态。然后从笔触和填充色按钮或混色器面板中选择填充方式和颜色，最后在目标区域内单击即可进行填充。选择了颜料桶工具后，选项中显示了空隙大小按钮。

不封闭空隙：要求填充的区域必须完全封闭。封闭小空隙：允许填充区域有一些小空隙。封闭中等空隙：允许填充区域有一些较大的空隙。封闭大空隙：允许填充区域有一些更大的空隙存在。填充变形工具填充变形工具用来编辑渐变色和位图填充的方向、大小和中心位置。填充变形主要分为以下几类：1、改变线形渐变填充的样式：调整渐变中心调整渐变线的距离调整渐变线的方向2、改变放射渐变填充的样式：调整渐变中心调整渐变圆的长宽比例调整渐变圆的大小调整渐变圆的方向3、改变位图填充的样式：调整中心位置调整大小调整倾斜方向扭曲变形动画概述

动画在英文里是Animation,也就是说动画与运动是分不开的。世界著名的动画艺术家——JohnHalas曾经说：“运动是动画的本质。”当我们在电影院看电影或在家里看电视时，会感到画面中的人物和动物是连续。但是仔细看一段电影胶片，就会看到所有的动画并不是连续的。这种现象可以由法国人PeterRoget提出的视觉暂留的原理解释。

Flash的制作就如同制作动画片一般，动画片的最小长度单位是格，在Flash中就叫做帧。我们平时所看的电影是按每秒24帧的播放速率播放的，而Flash是以每秒12帧的速率播放。动画分类运动动画变形动画逐帧动画帧的分类关键帧普通帧创建变形动画前一节我们讲到了运动动画的制作，这一节，我们将深入研究变形动画的制作方法。其实，在变形动画中，除了改变图形的形状外，还可以改变图形的位置、大小、颜色等等。在某一时间，设计一个图形的变形效果最好。如果要在同一时间设计多个图形同时变形，所有的图形必须放在同一个图层。下面我们通过两个离子来说明变形动画的创建方法。兰色小球变小红砖文字变形效果Flash不能创建组合图形、元件等的变形动画，要创建变形必须将元素分离（ctrl+B）元件概述

元件可以看作是一个特殊的对象，在flash中只需创建一次，然后可以在动画中反复使用。专业点说，元件是存放在库中可编辑并能重复使用的图形、按钮或影片剪辑符号。在FLASH动画制作中使用元件的优点至少有以下几个方面：1、文件尺寸明显减小，系统保存元件后，它的多次引用所需的磁盘空间大大小于保存全部具体数据所需的磁盘空间。2、简化动画作品的编辑，当一个元件被修改之后，它的所有引用都会自动更新，不需要一个一个地作重复修改。3、提高动画的播放速度，当用户从网上下载FLASH作品时，该作品中的元件只需要下载一次，而不管该元件在作品中被引用多少次，这将会大大提高动画的播放速度。实例（Instance)是指元件在编辑区中的实际引用。元件从库中拖到编辑区来，就变成了编辑区中所编辑的一个实例。元件的行为类型

元件行为是指元件在动画中的表现形式，可以分为图形（Graphic)、影片剪辑（MovieClip)和按钮（Button)三种行为类型。图形：用于创建动画中的静态图形和片段。影片剪辑：创建可重复使用的动画片段。按钮：响应鼠标动作，实现与观众的交互。创建按钮

前面我们讲过帧的概念，而对于按钮的创建就要用到所谓的帧，按钮实际上是一个4帧的影片剪辑，分别为：弹起(up):鼠标指针不在按钮上的状态。指针经过(over)：鼠标指针在按钮上但是没有按下。按下(down)：在按钮按下鼠标左键的状态。点击(hit)：按钮的激活区。注：按钮的创建可以按ctrl+F8，然后在行为选项中选择按钮即可。图层概述

在第三章中，我们学了简单的动画制作，这些动画都只有一层。可如果我们要做更为复杂的动画，只有一层是很难完成的。这一点再深入学习后会慢慢体会到多图的好处。我们可以在时间轴（如图）上创建新的图层及文件夹（用于组织和管理图层），此外，Flash除了建立普通图层外，还可以建立引导层和遮照层，关于这两种层，我们在后面会逐个讲到。图层名称——显示/隐藏图层————显示图层轮廓锁定/解除锁定图层插入图层————添加引导层——插入文件夹——删除图层图层的查看与编辑显示或隐藏图层或文件夹：单击眼睛图标，所有图层或文件夹被隐藏；再次单击则重新显示。以轮廓模式显示图层中的内容：单击轮廓图标，所有图层均以轮廓显示。锁定图层或文件夹：单击锁定图标，所有图层被锁定，即不能在上面编辑。

沿路径运动的动画前一章我们讲了引导层的有关概念，下面我们利用引导层来做一个“小球做抛物线运动”的动画。点击进入遮照层动画前面我们将了有关遮照层的知识，接下来我们用遮照层来做一个遮照动画，有助与大家对遮照层有更深的理解。给动画添加音乐在Flash动画中，如果能配以优美的音乐，感染力就会更加强劲。在Flash中声音有两种类型：事件声音和流式声音。下面我们就试着在动画中添加声音。打开一个已经制作完的动画文件，然后新增一个图层，命名为sound。选择文件>导入，打开对话框选择一个你需要的声音文件。在属性面板中，在声音下拉列表框中，选择刚导入的声音文件。文字旋转动画在工具栏中选取文字工具，在编辑区拖动鼠标，画一个文本框，输入“文字旋转”四个字。在属性面板内调整文字的大小和颜色。在第20帧处插入一关键帧，单击工具栏中的缩放按钮，将“文字旋转”文本块缩小。选取第一帧，在编辑区下面的属性面板中，选择补间>动作，创建运动动画。在属性面板的旋转选项中选择顺时针，并在右边的循环文本框中输入3。按Enter测试动画。兰色小球变红砖新建一个文件，将第一图层命名为“变形”。在第一帧处画上一个小球，填充兰色。将鼠标指针移到时间轴第30帧，插入一个关键帧，删除刚才的小球，重新画一个长方形，填上红色。选取时间轴的第一帧，并将小球选中。在属性面板中单击补间有边的小三角，选择形状选项。此时，在时间轴的两个关键帧之间出现浅绿色背景及一条黑色箭头，表示渐变动画制作完成。测试动画效果（Ctrl+Enter）Authorware的创作环境

Authorware的图标工具条菜单系统

Authorware的设计窗口

展示窗口(PresentationWindows)

Authorware的创作过程可以概括为：通过功能图标实现基本制作编辑；利用菜单选项进行控制；在流程设计窗口中搭建程序结构；最后在展示窗口显示程序运行效果。

Authorware图标工具条Authorware所提供的13个功能图标和下方便于调试的标志旗。Authorware图标分类显示图标运动图标

擦除图标和等待图标

框架图标和导航图标

分支图标

计算图标和群组图标

交互图标

动画图标、声音图标和视频图标

显示图标——用于显示、编辑文字和图形。

使用工具板中的文字工具(图2)进行文字输入。鼠标指针变为I形光棒时，表示可在屏幕任意一点进行文字输入。通过Text菜单，还可以设置字体效果。按(图3)可使鼠标指针恢复正常状态，也就是选择物体的状态。

图2

图3

Authorware对文本接收的其他方法

选择菜单中File－>Import命令选中要输入的文件，按Open(打开)按钮

在弹出的RTFImport窗口中，可以选择文字以标准文本块(Standard)显示，还是以滚动文本方式(Scrolling)显示。文本较长，显示区域较小时，可选择滚动方式

通过拖动边缘控制点可以调整文本显示区的大小，并移动到合适的位置

工具板中其他工具的用法

画线工具，用来画水平线、垂直线或45度直线。画完后可对线两端的控制点进行调整。直线工具，用来绘制任意斜率的直线。它的控制点也是可调的。

画圆工具，可画椭圆。若画正圆，只要在拖动鼠标的同时按下Shift键即可。矩形工具，可画矩形。按住Shift键拖动鼠标画出的就是正方形。圆角矩形，画完后，在物体左上方有一个控制点，拖动它可以调整圆角矩形的圆角曲率。

折线工具，在屏幕上任意位置连续点按，就可以画出连续的折线，可以封闭也可以不封闭。最后用双点按结束。画完后，还可以在拐点继续对它进行调整。

菜单中为文字内容和图形设置颜色的方法1.选中改变颜色的物体；2.选择菜单Attributes－>color，在弹出的调色板中选择颜色；3.选择菜单Attributes－>fill，选择填充模式：4.若有两个物体重叠，还应选择菜单Attributes－>mode，选择覆盖模式。Authorware提供五种覆盖模式：不透明方式(Opaque)、半透明方式(Matted)、完全透明方式(Transparent)、反转方式(Inverse)、擦除方式(Erase)。运动图标

到固定点方式(DirecttoPoint)

沿路径到终止点方式(AlongPathtoEnd)

沿直线到计算点方式(DirectToCalculatedPointonLine)

沿路径到计算点方式(AlongPathToCalculatedPoint)

按坐标网格到计算点方式(DirectToCalculatedPointonGrid)

到固定点方式(DirecttoPoint)它完成将物体从当前点到一个固定点的直线移动。你只需拖动物体，将其移到终止点位置即可。

整个运动过程从开始点到终止点经过的时间在Time中设定，单位是秒。另外也可以设定Speed，它的含义是指从当前点到终止点的运动速度是在均匀的几秒钟内运动72个像素点。设置完成以后，可以点Replay按钮看一下整个运动过程。

沿路径到终止点方式(AlongPathtoEnd)先在一个位置设定一个点，再拖动物体到其它位置设定多个点构成一条轨迹，物体的运动就沿着这条轨迹来完成。如果要修改已建立的轨迹，可以移动控制物体位置的某个点，或者在某个地方增加或删除控制点，用Undo可恢复相关操作。双击轨迹中的一个点，可以把折线改为曲线连接。

在这种运动方式下，同步设置还会出现Perpetual选项，表示这个运动永久存在。这时可以在程序的其它位置通过改变运动条件的方法激活或停止物体的运动。注意：只有MotionWhenTrue中输入的变量或表达式的值为1或非0值时，运动才会开始。其缺省值为0。

沿直线到计算点方式(DirectToCalculatedPointonLine)

在一条直线上设置一些刻度，然后利用一个数值，让物体运动到指定的相对位置。

1.首先设置起始点(点Base)，接着设置终止点(点End)，并将物体拖动到终止点位置。那么你就可以在这条被分成等份的直线上指定一个数值对应相应的位置。

2.边界选项的缺省设置为StopatEnds。在这种情况下，如果设置的数值是对应到物理运动的两个端点以外的其它位置，就按边界值的最大、最小值来计算。3.Loop方式是当运动超过边界后，运动到另一个端点，并从头计算坐标，再运动一段。4.GoPastEnds方式表示不对超过边限范围的运动做循环处理，而是继续沿直线往边界外运动。它的数值取值的比率与线段长度相关。

5.运动物体的位置所对应的数值，由Variable/Expression这个区域中的内容来提供，它可以是一个表达式或一个变量，或是确定的一个数值

沿路径到计算点方式(AlongPathToCalculatedPoint)

这种运动方式兼具第二种和第三种运动方式的某些特征。它是在一条路径上进行刻度设置。选择这种运动方式时，有些选项与第三种运动方式一致，包括表示运动位置的变量、表达式或确定的一个数值；用于同步控制的三个选项；以及起始点和终止点位置的设置。而物体运动轨迹的建立过程与第二种运动方式相同。

边界选项只有Loop即循环方式和非循环方式两种选择。

按坐标网格到计算点方式(DirectToCalculatedPointonGrid)

这种运动方式需要通过X、Y两个轴的坐标值来确定物体在平面上运动点的当前位置。选择这种运动方式时，先点按设置基点方式，将物体拖动到一个基点上，再点按设置终止点方式，并拖动物体到终点位置。通过这两个点确定一个矩形区域。这个矩形区域的横向和纵向都可以分隔，我们可以把这种运动理解成两个方向上沿直线到计算点运动方式的合成。

擦除图标和等待图标

擦除图标等待图标擦除图标擦除图标可以擦除指定的物体，并可以设定擦除的方式。把需要把物体显示在屏幕上，这时双击擦除图标，打开它的对话框，选择所要擦除的对象。同时还可以选择各种特殊效果。并对擦除效果设置一些参数。对话框中还有两个选项：一个是PreventCross－fade(避免交叉过渡)，一个是EraseAllIconsExcept(除所列内容以外，擦除全部图标)。

等待图标

等待图标的功能是在流程线上设置一段等待时间，以及等待的结束条件。等待对话框中的一个重要的选项，就是WaitFor。它有三个选项

MouseClick(鼠标点按)、Keypress(按动键盘)、ShowButton。等待对话框中的另一个重要的选项，就是TimeLimit(时间限制)。框架图标和导航图标

框架图标导航图标框架图标框架图标主要用于制作翻页结构。打开框架图标，里面分上下两个部分。一是Entry部分，表示程序一旦进入这个框架图标，就要执行Entry部分中的内容；一是Exit部分，在通过导航图标退出框架图标的时候，就将执行Exit部分中的内容。

框架图标与控制翻页的设置是由其内部的导航图标决定的。在缺省设置下，框架图标中将自动建立一个带有8个永久按扭的交互图标。导航图标五种导航方式

第一种是Recent方式，也就是重新观看刚刚看过的某一页。

第二种是Nearby方式，用于在同一个框架图标内各个页面间进行跳转。

第三种是Anywhere方式，用于跳转到整个程序里任意一个框架图标中的任意一个页面。

第四种是Calculate方式。由于Authorware里每一个图标对应一个ID号，通过一个整数值来标识一个确定的图标。

第五种是Search方式，它的功能是在Authorware中进行检索。

分支图标

分支图标的功能是让程序作一个判断或决定，在当前这个程序结点之后，怎样运行后面的程序。使用分支图标可以解决类似于语言编程方面的IF...Then...结构、Repeat...Until结构或Switch结构。注意：分支图标自身内部不包含任何内容，只包含一些控制。

例我们把三个图标挂接在分支图标的下面。可以将它们从左到右分别命名为：a1、a2、a3。分支图标本身名称叫做a(见左图)。当前分支图标从左到右顺序排列，也就是用1、2、3来排列顺序。因为顺序在分支图标内容起着控制作用。所以一定要明确。

计算图标和群组图标

计算图标群组图标

计算图标

计算图标用一个等号“=”表示，所以也称为等号图标。它的主要作用是在程序中引入函数和变量。在Authorware3.0版本之后，还增加了一些If...then...else和Repeat等程序结构控制语句。

例输入a:=1，表示给变量a进行赋值。输入Path:=，是一个系统变量

用IF语句判断一个时间系统变量Seconds是否大于30秒，成立时赋值a为1，否则a为0。

ifseconds>30then

a:=1

else

a:=0

endif

Authorware的功能扩展，例如调用外部函数，或称为自定义函数，也需要通过计算图标引入。

除直接使用计算图标外，Authorware还有一个辅助实现函数变量控制的操作。就是在任何一个图标选中的状态下，通过选择菜单Date－>Calculations命令，也可以打开一个与计算图标相同的窗口。在这个窗口可以输入一些命令。回车后，可以发现图标的左上角出现一个小的“=”，它表示在这个图标上，赋与了一部分与计算图标功能相同的内容，相当于在该图标之前加入了一个等号图标。它的执行顺序是先执行等号图标里的语句，然后再执行图标里面的具体内容。这种操作不占用新的图标，使用起来比较方便，可以更简练地实现图标之间的跳转。

群组图标组图标用于建立程序组(子模块)，程序组是一系列图标的组合，相当于其它高级语言的子程序。

如果在流程线上已经有一些图标，并且这些图标完成的是相对固定的功能时，就可以把这些图标建成一个组。方法是，按住Shift键的同时，用鼠标点选需要建组的图标。在选中以后，选择菜单Edit－>Group命令，就可以把它们建成一个组。如果不用按键点选的方法，也可以直接用鼠标在流程设计窗口中拖出一个虚线矩形框，圈住需要建组的图标，松开鼠标后，也可以达到全部选中的目的。

如果程序中的图标太多，而流程设计窗口并没有提供滚动条，这样就无法看到下面的图标。所以必须将功能相对集中的一些图标建成组，这样便于程序结构的逐层管理。

建组的第二种方法是从上往下的方法，就是先建立一个空的组，然后再打开这个组，这样就会在它的下一层窗口中出现一个空的流程线。在这个流程线上可以继续搭建程序结构。

当一个组建好后，如果要把组打开，选择菜单Edit－>Ungroup命令，就可以把已建组的图标重新打开。

正是因为有组图标的存在，所以可以在Authorware的设计窗口中逐级进行制作，利用有限的图标板和流程线，制作复杂的程序结构。

交互图标

交互图标是Authorware的重要图标，用来制作具有人机交互控制的多媒体软件。一般说来，基本上有五种交互类型：运算、按键、移动对象、输入文字和下拉式菜单。但在实际的应用中，这五种交互方式是不够用的，Authorware提供了十一种交互方式。十一种交互方式Button－－按钮方式

HotSpot－－热区

HotObject－－热物体

TargetArea－－目标区域

Pull－DownMenu——下拉菜单

Conditional——条件判断

TextEntry——文本输入

Keypress——键盘按动

TriesLimit——限制次数

TimeLimit——限制时间。一、按钮交互：用户操作按钮时发生的响应。你可以用这个功能自动地在屏幕上建立一个按钮。用户可以通过点击按钮进行选择。默认按钮是系统的标准按钮。你也可以建立并粘贴自定义按钮，包括图形按钮和声音按钮。二、热区交互：用户操作指定区域发生的响应。用热区交互建立任意长方形区域或者整个屏幕作为用户可以单击、双击的热区

三、热对象：用户操作指定显示对象发生的响应。热对象是用户通过单击、双击激活的对象，有些类似于热区交互。它们的不同在于：前者是针对对象内的区域作响应，后者是对一矩形固定区域作响应。对象可不限定在固定的区域内，因此对象被设置成热对象后，就算移动此对象到新的地点，在此对象内选取此对象，依然可做出响应，而热区交互，只能对某一个固定矩形区域做出响应。热对象交互可针对不规则的对象做响应，故其弹性远比热区域响应大。

四、目标区：用户将显示对象移到指定区域时发生的响应。这是一种动态响应，可让使用者拖动展示窗口上的对象到某一固定的区域。例如：如果正确就停留于某地，否则让对象自动缓缓移动返回原地。

五、下拉菜单：用户操作下拉菜单发生的响应。当交互图标中存在下拉菜单时，演示窗口菜单中即增加了一项与此交互图标名相同的菜单栏，此交互图标下的每一个下拉菜单响应分支名为下拉菜单中的一条命令。

六、条件交互：满足指定条件时的响应。例如，你可以在用户做错了三次以后显示一条信息。

七、文本输入：可以用来接受用户从键盘输入的文字、数字、符号，如果输入的文字(数字)与响应的标题的名称相吻合，则此交互发生作用。

八、按键交互：用户操作指定按键时发生的响应。允许设置多个响应按键，如“A／a"或“1／2／3"。按键交互使用的功能键必须按下述规定的名称输入：Alt、Backspace、Break、Clear、Ctrl、Delete、End、Esc、F1－F15、Help、Home、Insert、Shift、Pause、Return、Enter、Tab、UpArrow、DownArrow、LeftArrow、RightArrow、PageUp、PageDown。

九、重试交互：用来限制用户操作次数。

十、时间限制：用来限制用户操作时间。

交互衔接画面的处理。可以根据你的需求选取合适的选项。如果你单击Ok－EditDisplay按钮，可编辑整个交互内的所有交互。清除交互方式(EraseInsteraction)有三个选项，OnExit——退出交互时清除画面；AfterEachEntry——每进入新画面之前把旧画面清除；Don'tErase——不清除任何交互内的画面。

动画图标、声音图标和视频图标

动画图标——Movieicon用于播放动画文件。声音图标的功能是在Authorware中播放一段声音。视频图标用于控制计算机中视频的播放。

Start和Stop以及辅助编程。动画图标动画文件格式主要包括BMP序列文件，FLC/FLI动画文件，Director4.0、5.0Dir或Dxr文件，MPEG文件，QuickTime文件，AVI文件等。播放QuickTimeforWindows或VedioforWindows文件要先在Windows中安装相应的播放支持程序。

Timing选项用于同步控制。Mode(模式)选项适用于可装入到Authorware内部的动画文件。Interactivity(交互)选项适用于Director文件，决定Director文件内部的交互控制是否在Authorware中有效。Times/Cycle表示每个运动周期动画的播放次数。UnderUserControl是为QuickTime动画设置的。在动画播放时会出现一个控制条，可以实现暂停或播放等控制操作。选择Directtoscreen选项可使输入的动画文件位于所有的显示层之上，以加快动画的播放速度。UseMoviePalette主要用于256色环境下动画文件的播放，它可以选择是否使用动画中的调色板信息。Audio(声音控制)选项针对AVI文件，用来选择是否播放动画中的声音部分。

声音图标Authorware支持多种声音格式。常用WAVE和AIFF文件格式。装入声音文件后，可以按播放按钮来预听一下效果。第一个区域是同步控制选项，这与以前提到过的相同。Speed(速度)选项，单位是正常的百分之几。StartPlayingWhenTrue选项中可以输入一个条件来启动声音的播放。在PlayingSound选项中可以决定声音播放的次数和结束条件。Once表示只播放一次。Times中可以指定播放的次数。UntilTrue表示不限次数，输入的条件满足时就停止播放。AfterPreviousSound选择这个选项，则表示前一个声音结束后，这个声音才开始播放；如果不选，则此声音会打断前一个声音而立刻开始播放。

视频图标

这个图标必须在显示图标的配合下使用。方法是，首先在流程线上建立一个显示图标，在显示图标里面画一个矩形，并对这个矩形指定一个叫做“透明键”颜色做填充色，这种颜色的缺省色是粉红色。这样所有以“透明键”色覆盖的区域都将成为视频叠加的区域。制作完透色区后，就可以打开视频图标。在视频设置对话框中，先选择相关的显示内容。点按前面所画的矩形就可以建立一个连接。在这里，还可以设置视频播放的一些选项。Start和End为视频开始帧和结束帧。按Replay按钮可以立刻回放指定的视频内容。按Options按钮可以打开一个用于控制的更为详细的对话框。Start和Stop以及辅助编程Start和Stop辅助编程Start和Stop在Authorware图标板上还有两个小旗，一个是白色旗——Start，一个是黑色旗——Stop。这两个小旗用来选择调试程序的段落。在流程线可以直观地用标志旗设置一个起点、一个终点，以突出用于调试工作的针对性。这样就可以调试所指定的某一段结构。

辅助编程在Authorware中还有一个辅助编程的部分，就是图标板最下方的颜色板。这六种颜色用来辅助图标的管理、标注。缺省时，所有图标均为白色。比如可以用不同的颜色来区分哪些是完成部分，哪些是未完成部分。也可以用来区分流程中程序结构相同的部分，或区别需要用户交互的部分。FrontPage教程第1章HTML语言基础第2章FrontPage概览第3章创建与管理站点第4章编辑和格式化文本第5章创建超链接第6章图像操作与映射第7章在网页中使用表格第8章应用表单及表单第9章设计动态网页第一章HTML语言基础什么是HTML语言？HyperTextMarkupLanguage是一种超文本标注语言。是用来描述WWW上超文本文件的。它主要是在原来文本文件的基础上，加一系列的标识符号描述其格式，形成网络文件，当用户使用浏览器下载文件时，就把这些标识解释成它应有的含义，按照一定的格式，将这些被标识的文件，显示在屏幕上。§1、1HTML文档的结构HTML文档中标记有三种：1、<标记名称>文件或文本</标记名称>2、<标记名称属性名=“属性值”……>文件或文本</标记名称>3、<标记名称><html>表明HTML文档开始<heat>表明文件头开始文件头</heat>表明文件头结束<body>表明正文开始正文部分</body>表明正文结束</html>表明HTML文档结束一个HTML文档应具有下面的基本结构：<html><head><title>杭州师范学院</title></head><body><h1align="center"><fontcolor="#0000FF">杭州师范学院</font></h1></body></html>§1.2构成网页的基本标记一、网页标题标记<title>网页文件标题</title>二、标题标记<hnalign=“对齐方式”>标题文本</hn>对齐方式有：Left左对齐Right右对齐Center居中对齐三、分段标记<p>或<p>段落文本</p>四、列表标记1、无序列表<ultype=“类型”>列表起始标记<li>列表项1<li>列表项2<li>列表项3</ul>列表结束标记Type(类型）：disc,circle,square2、有序列表<ol>有序列表起始标记<li>列表项1<li>列表项2<li>列表项3</ol>有序列表结束标记Type(类型）：1,a,A,i,I3、定义列表<dl>定义列表的起始标记<dt>列表项标记<dd>列表项说明标记</dl>定义列表的结束标记五、预格式化标记<pre></pre>六、居中标记<center></center>§1.3超链接一、关于URLURL是UniformResourceLocator英语缩写；一个完整URL由六部分构成：协议：//服务器名称（：端口）/文件夹/文件[#书签]协议：http,ftp,file,gopher,news,mailto;服务器名称：服务器的域名或服务器的IP地址；文件夹：文件：例：

可分为：绝对URL和相对URL。二、超链接标记<ahref=“URL”>……</a>链接内容可以是文本也可是图片；URL可分为：绝对URL和相对URL；三、图象映射图象映射的类型有二种：服务器端图象映射、客户端图象映射图象映射标记格式如下：<mapname=“图象映射名称”><area>…</map>注意：1、<map>和</map>之间可包含若干个<area>标记；2、至少要有一个<area>标记；3、每个<area>标记分别指定地图中每个热点的形状、位置及链接目标。<area>标记的格式如下：<areahref=“URL”shape=“形状”coords=“位置信息”>Shape形状有：rect(矩形)、circ(圆形)、poly(多边形)位置信息：矩形时：coords=“0,0,100,200”（右上角(0,0)与右下角(100,200)）圆形时：coords=“100,100,60”(圆心(100,100),半径(60))多边形时：取值为多边形各顶点的坐标。§1.4控制版面风格一、定义字体<basefont>：用于设置整个网页的默认字体；只能在首部标记<head></head>中出现。<basefontface=“字体”size=“字号”color=“颜色”><font>：用于设置网页中指定文本的字体；只能出现在正文标记<body></body>之间。<fontface=“字体”size=“字号”color=“颜色”>文本</font>二、字体风格1、物理风格a、粗体 <b></b>b、斜体 <i></i>c、下划线 <u></u>d、打字机体<tt></tt>2、逻辑风格强调 <em></em>特别强调 <strong></strong>源代码 <code></code>例子 <samp></samp>键盘输入 <kbd></kbd>变量 <var></var>定义 <dfn></dfn>引用 <cite></cite>较小 <small></small>较大 <big></big>上标 下标 三、水平线<hrcolor=“颜色”width=“%”size=“尺寸”align=“位置”noshade>四 、使用图像<img

src=“目标图像URL”border=“”alt=“”align=“”width=“”hspace=“”vspace=“”>对齐属性align;边框宽度属性border;图片文字描述alt;显示高度hight显示宽度width;图片与文字水平距离hspace;图片与文字垂直距离vspace五、强制换行和禁止换行强制换行<br>禁止换行<nobr></nobr><wbr>字分隔标记六、网页背景和文字颜色

bgcolor 网页背景颜色

background 网页背景图片

text 网页文本默认字体颜色

link 网页文本超链接颜色

alinik 网页文本超链接按左键颜色

vlinik 网页文本超链接单击后颜色§1.5表格一、基本形式<table> 表格起始标记<tr> 表格行起始标记<td>单元格内容</td> 表格单元格标记……</tr> 表格行结束标记……</table> 表格结束标记二、表格标记<table属性=“属性值”>align 对齐方式

background 背景图片

bgcolor 背景颜色

border 边框宽度

bordercolor 边框颜色

bordercolordark 边框背光颜色

bordercolorlight 边框向光颜色

cellpadding 单元格边距

cellspacing 单元格间距

height 表格高度

width 表格宽度三、行标记<tr属性=“属性值”>bgcolor 行的背景颜色

align 行内单元格水平对齐方式

valigh 行内单元格垂直对齐方式

bordercolor 行的边框颜色

bordercolordark 行的边框背光颜色

bordercolorlight 行的边框向光颜色四、单元格标记<td属性=“属性值”>width 单元格宽度

align 单元格水平对齐方式

valigh 单元格垂直对齐方式

bgcolor 单元格背景颜色

background 单元格背景图片

bordercolor 单元格边框颜色

bordercolordark 单元格边框背光颜色

bordercolorlight 单元格边框向光颜色

colspan 单元格占据的列数

rowspan 单元格占据的行数

nowrap 单元格中的文字不自动换行§1.6框架网页一、基本格式<html><head><title>……</title></head><noframes>……</noframes><frameset><framesrc=“URL”>……</frameset></html>二、框架集标记<frameset属性=“属性值”>border 框架边框宽度

bordercolor 边框颜色

rows 横向分割窗口的方法

cols 纵向分割窗口的方法

frameborder 显示框架的边框（0，1）

framespacing 框架边距三、框架标记<frame属性=“属性值”>src URLheight 框架高度

width 框架宽度

name 框架名称

bordercolor 框架边框颜色

frameborder 框架的边框（0，1）

marginwidth 框架左右边距

marginherght 框架上下边距

noresize 框架大小不可改变

scrolling 显示滚动条（yes,no,auto)第二章FrontPage概览1、掌握启动FrontPage的方法和技巧；2、熟悉FrontPage的用户界面；3、掌握在使用FrontPage过程中获取帮助的方法FrontPage的启动一、从[开始]菜单中启动开始→程序→MicrosoftFrontPage二、使用[运行]命令启动开始→运行→运行对话框中输入（FRONTPG.EXE)三、通过快捷方式启动1、桌面上创建快捷方式2、在任务栏上添加快捷方式一、用户界面一、用户界面1、标题栏2、菜单栏3、工具栏4、视图栏5、任务窗口6、工作区7、状态栏二、个性化的菜单和工具栏[视图]→[工具栏]→[自定义]任务窗格是FrontPage2002的新功能；包含三个任务窗格1、[新建网页或站点]2、[剪切板]3、[搜索]三、任务窗格1、[网页]视图普通、HTML、预览2、[文件夹]视图3、[报表]视图4、[导航]视图5、[超链接]视图6、[任务]视图四、视图方式网页视图文件夹视图报表视图导航视图超链接视图任务视图第三章创建与管理站点1、Web站点模板与向导2、创建公司展示站点3、创建其他站点4、管理Web站点3.1Web站点模板与向导一、Web站点模板文件→新建→网页或站点→Web站点模板1、空白站点2、只有一个网页的站点3、个人站点4、项目站点5、客户支持站点6、基于工作组的SharePointWeb站点二、Web站点向导1、导入站点向导2、讨论站点向导3、公司展示向导4、数据库界面向导§3.2创建公司展示站点步骤：文件→新建→网页或站点→Web站点模板启动“公司站点建立向导”选择站点中所包含的网页选择要在主页中显示的主题指定创建产品网页和服务网页的数量选择要在产品网页和服务网页中显示的项目指定访问者在提交意见时所要收集的信息指定保存反馈信息的文件格式设置目录网页的目录显示方式指定要在每个网页顶端和底端显示的内容指定是否在未完成网页中显示“尚未完成”图标输入公司的名称及地址输入公司的电话、传真以及电子邮件地址确定是否为站点选择一个主题[选择主题]对话框完成创建公司站点的工作§3.3创建其他站点一、创建只有一个网页的站点文件→新建→网页或站点→Web站点模板→只有一个网页的站点二、将已有网页导入站点文件→新建→网页或站点→Web站点模板→导入站点向导1、从本地计算机中的目录导入文件2、从万维网（WWW）上的站点导入文件三、创建客户支持站点文件→新建→网页或站点→Web站点模板→客户支持站点四、创建空白站点文件→新建→网页或站点→Web站点模板→创建空白站点五、创建讨论站点文件→新建→网页或站点→Web站点模板→创建讨论站点1、讨论站点向导2、选择讨论站点的主要特性3、输入讨论站点的标题和讨论文件夹的名称4、为提交表单选择输入域5、指定讨论是否受站点保护6、指定文章目录的排序方式7、确定是否将目录页作为站点主页8、选择与搜索表单相匹配的信息9、选择站点主题10、“框架选项”选择11、完成六、创建项目站点文件→新建→网页或站点→Web站点模板→创建项目站点1、指定新站点位置2、打开默任主页“index.htm”§3.4管理站点一、打开站点文件→打开站点选择站点位置选择站点名称二、关闭站点文件→关闭站点按关闭铵钮ALT+F4三、删除不需要的站点资源管理器中删除站点文件夹在FrontPage中选择“文件夹视图”，选择站点文件夹，按鼠标右键，选择“删除”选项。四、导航管理选择“导航”视图导航条的创建方法插入→WEB组件导航条的层次结构各个网页只能出现一次或者不出现。第四章编辑和格式化文本1、网页中输入文本2、编辑网页中的文本3、格式化文本4、格式化段落5、使用项目符号和编号列表6、查找和替换操作7、拼写检查§4.1输入文本一、插入特殊字符“插入”→“符号”二、使用换行符“插入”→“换行符”使用键盘操作：SHIFT+ENTER三、插入其他格式文本“插入”→“文件”§4.2编辑文本一、选定文本1、选定任意数量文本(鼠标拖动的方法)2、选定一个单词（双击鼠标左键）3、选定一行文本（选定栏单击鼠标左键）4、选定一个段落（选定栏双击鼠标左键）5、选定多行文本（选定栏向上、下拖动鼠标）6、选定整篇文档（选定栏三击鼠标左键）键盘选定文本操作：1、向右选定文本：Shift+→2、向左选定文本：Shift+←3、选定到单词结尾：Ctrl+Shift+→4、选定到单词结尾：Ctrl+Shift+←5、选定到行尾：Shift+End6、选定到行首：Shift+Home7、选定到上一行：Shift+↑8、选定到下一行：Shift+↓9、选定到段尾：Ctrl+Shift+↓10、选定到段首：Ctrl+Shift+↑11、选定到下一屏：Shift+PageDown12、选定到上一屏：Shift+PageUP13、选定到窗口结尾：Ctrl+Shift+End14、选定到文档开始处：Ctrl+Shift+Home15、选定整个文档：Ctrl+A二、移动文本剪切、粘贴方法三、复制文本复制、粘贴方法四、删除文本选定、删除五、恢复和重作编辑→撤消编辑→恢复§4.3格式化文本一、格式化文本（格式→字体→字体标签）1、设置字体2、设置字形3、设置字号4、设置文本颜色5、设置文字效果6、突出显示二、设置字符间距（格式→字体→字符间距标签）§4.4设置段落格式格式→段落一、设置段落缩进二、设置段落对齐方式三、设置段间距§4.5项目符号和编号列表一、创建项目符号列表格式→项目符号和编号→图片项目符号标签二、创建编号列表格式→项目符号和编号→编号标签三、创建定义列表格式→项目符号和编号→其它标签四、创建嵌套列表选择“增加缩进量”两次，创建嵌套列表五、编辑列表§4.6查找和替换一、查找编辑→查找→查找和替换对话框二、替换编辑→替换→查找和替换对话框§4.6拼写检查工具→拼写第五章创建超链接1、超链接的表现形式2、创建超链接的方法3、创建和使用书签4、编辑超链接§5.1超链接的表现形式一、超链接由两部分组成：在网页中可以看到的部分，一般称为锚；是超链接所链接的目标。链接目标可以是网页、图片、视频、声音、电子邮件等。二、表现形式：文本超链接图像超链接§5.2创建超链接选择：“插入”→“超链接”（CTRL+K）一、在当前站点中指定链接目标选择“插入超链接”对话框中的原有文件或Web页二、创建指向新网页的超链接选择“插入超链接”对话框中的新建文档三、链接到Internet上的目标在“插入超链接”对话框中的URL地址中输入Internet网址四、创建指向本地磁盘文件的超链接选择“插入超链接”对话框中的原有文件或Web页五、指向E-mail地址的超链接选择“插入超链接”对话框中的电子邮件地址§5.3创建和使用书签书签是网页中被标记的位置或被标记的选中文本，它可以作为同一页面或者其他页面中的超链接的目标。一、创建书签“插入”→“书签”二、编辑时用书签帮助定位在“书签”对话框中选择“转到”三、创建指向书签的超链接选择“插入超链接”对话框中的“书签”按钮或“本文档中的位置四、删除书签“插入”→“书签”进入书签对话框§5.4编辑超链接超链接分为两大类：一类是内部超链接，另一类为外部超链接。一、检查超链接视图→报表→站点摘要→“超链接”项目超链接未检证的超链接断开的超链接外部超链接内部超链接二、修改超链接插入→超链接(菜单或常用工具栏)超链接处单击鼠标右键三、取消超链接插入→超链接(菜单或常用工具栏)四、调整文本超链接的显示效果格式→背景或网页属性→背景五、重新计算超链接工具→重新计算超链接第六章图像操作与图像映射1、网页中图像的格式2、插入图形图像3、设置图像的外观属性4、创建图像映射§6.1Web图像的格式图像类型:图像类型可以分为以下两种:向量(矢量)式图像和点阵(位图)式图像。两种图像各有优势。1.矢量式图像以数学的矢量方式来