《编写多媒体网页的精灵-DREAMWEAVER.docx》由会员分享，可在线阅读，更多相关《编写多媒体网页的精灵-DREAMWEAVER.docx（16页珍藏版）》请在三一办公上搜索。
1、编写多媒体网页的精灵Dreamweaver在网页编写软件层出不穷的今天，MaCromedia公司毅然推出Dreamweaver,其中必定有不同凡响之处。MaCromedia公司在多媒体方面有相当的影响，大名鼎鼎的Freehand、DirectorAUtherWare便诞生在这个公司。Dreamweaver最精彩之处便是强大的多媒体处理功能，在设计DHTM1.(DyamicHTM1.)和CSS(CascadingStyleSheets)方面表现得极为出色，它利用JaVaSCriPt和DHTM1.语言代码轻松地实现网页元素的动作和交互操作，可谓独出心裁。在这方面超过了FrontPage98、Hot
2、dogsHomeSite等著名网页编写软件。和Macromedia公司其他软件的完美协作也是Dreamweaver的一大特色。Dreamweaver是一种WYSIWYGHTM1.编辑器，它可以用于基本页面元素的插入和生成工作。Dreamweaver还可以对内部的HTM1.编辑器和任何第三方的HTM1.编辑器进行方便、实时的访问。Dreamweaver是一种小型灵活的网页编写工具，程序使用一些浮动窗口，设计人员可以用鼠标单击的方式插入图像、表格、表单、APP1.ET.脚本语言等各种对象，这方面延续了所见即所得的编写方式，同时程序也提供对代码的编辑,包括样式表和JavaScript脚本。Dream
3、WeaVer提供行为和时线两种控件来进行动画处理和产生交互式响应，这也是这个软件的优势所在。行为空间提供交互式操作，时线控件使设计人员像制作视频一样来编辑网页。这两种控件分别通过行为面板和时线面板来设置，这方面是本文的重点。初级篇1 .工具栏简介2 .图片3 .表格4 .表单5 .帧中级篇1.层2fi3. CSS高级篇1 .时线的应用2 .时线制作例子工具栏简介我们可以编辑新的网页，也可以直接从网上获得。对一般网页元素的控制可以通过工具条完成。图一是一般元素,图三是表单工具，图三是不可见命令。图一中各工具分别是：A插入图片，B插入表格，C插入横线，D设置层，E插入APP1.ET,F插入ACTl
4、VEX控件，G插入插件，H插入FlashMovieJ插入ShockWaveDirectoro后两项都是Macromedia开发的网际媒体。对整个页面的设置要调出Modify菜单中的PageProperty对话框，这里是基本的设置，如网页的标题、背景颜色、背景图片、超链接文字的颜色和网页使用的文字，这一项应选中SimPIifiedChineSe(GB2312),因为lDreamweaver在处理中文这样的双字节语言的时候用的是两个字符的组合，这一点和Netscape一样，所以如果语言使用西文(Western)的话在用ie浏览的时候将出现乱码。接下来我们利用属性面板对页面进行详细的设置，这个面板可
5、以通过Window的Properties选项打开，也可以双击页面元素,属性面板自动弹出。不同的组件有不同的属性，并且这个面板可以展开。这种方法受可视化程序设计启发，使用起来十分方便，而且直接，整个布局十分清晰，因为有用的属性在选中的时候才显现出来。当我们点击空白页面时，属性面板显示的是页面文字的属性。利用这个属性面板我们可以轻松F为页面文字设置各种属性，如颜色字体字型、对齐方式和浅进等。我们还可以简单地制作超链接和列表。下一节我们将介绍图拉的应用。图片的应用首先我们插入一幅图片。点击图片工具，选择图片，图四是当前图片属性展开时的属性面板情形。图片的属性总是在属性面板的左上角，显示图片的缩略图、
6、图片的大小等文件信息。在这个面板里可以设置图片的长和宽、图片来源、超链接、缺省注释、对齐方式、水平和垂直的空域、低分辨率图片来源及边框。其中对齐方式中出了一般的还有AbSolUteMiddIe和AbSolUteBottom,是HTM1.的扩展语句，分别是中间固定和底边固定。凡是带有文件夹标志的选项都表明有浏览选择功能。通过刷新（RefreshImage按钮）可以看到最新的图片特征。属性面板中有图像地图（MaP按钮）（如图五）功能，使用户简单地设置图像地图，其他专门制作图像地图的软件便显得多余了，Macromedia果然周到。下面我们来看图像地图。图五是制作图像地图的对话框,左边的按钮是图像地图
7、的形状，圆、矩形、不规则图形，对话框下部是为图像地图的每一区域设置超链接、链接目标及缺省注释。选中的区域反显，便于观察，图五中显示的是选中的一矩形区域，可以选择各个划定的区域设置或修改其属性。整个过程简单明了，操作十分方便。下一节我们将为您介绍表格的应用。表格的制作表格功能也很有特色。点击插入表格工具会提示输入表格的行和列及表格的宽度。完成以后需要用属性面板来调节表格的属性。当点击表格四周的边框时表格区域变成黑色，属性面板显示表格属性。请看图六,当属性面板左上角显示的是一个表格时，表明属性面板的当前状态是表格属性。在属性面板中可以简单地设置表格的名称、行列数、表格的宽和边框，以及对齐方式元素外
8、围空白大小。值得注意的是属性面板下面的一行，左面的四个小按钮分别是：使表格的长度最小、使表格的宽度最小、表格宽度按像素记、表格宽度按百分比记。当你的表格比较复杂，每一元素的大小都不同时通过这些工具可以很快地恢复原来状态。在属性面板的下一行还有表格四周的空白区大小和设置边框和背景的颜色，边框由基本色、高光和阴影组成。凡是在文字域有灰色方框就表明有颜色表可供选取。当我们点击表格内部区域时，属性面板显示表格元素的属性，你可以为表格设置其文本属性，包括文字的格式、颜色、对齐方式、超链接及超链接的目标等属性，通过面板下一行的选项我们可以针对表格的行列或元素做具体的设置。值得注意的是右下角的四个小按钮，分
9、别是将纵向的两个元素合并成一个、将横向的两个元素合并成一个、将纵向的一个元素分成两个、将横向的一个元素分成两个。进行元素拆分的时候只是针对以前合并的对像。图七是有四个按钮和表格的例子。下一节我们将为您介绍表单的制作。表单的制作下面我介绍一下表单(form)的制作。表单是提供交互式操作的重要手段，用户可以通过表单输入相关信息，使网页动态地处理用户要求或与服务器进行交流。在DreamWeaVer中表单的制作简单明了，功能强大。调出表单工具条。可以把相关的表单项，如CheCkbox、RadiobottomxSelectform等建在一个表(form)中，当增加一个表时会出现一个红色的虚线框。并且你可
10、以选择表单的传递方式。第二个工具是文字域，一共有三种属性，请看属性面板(图八)，整个文本域都归结在这一工具中，为了处理的方便需要为文本域取一个名字，在TeXtFieId下方的区域内。右边的CharWidth是文本区显示的字符宽度，当文字内容长于设置的宽度时可以用滚动条或键盘来读取，本例可以显示20个字符。下面的Num1.ines是文本域的行数，本例是4行。再右边是选择文本区的模式，是一行、多行还密码输入方式。如果我们看一下HTM1.代码，当使用单行或密码方式时，者R是使用方法，只不过类型(Type)不同罢To而使用多行文本域使用的是方法。当然我们没有必要关心具体的HTM1.代码，我想说的是Dr
11、eamweaver有很好的灵活性和智能化。我们可以通过属性面板右下方的InitVal区设置文本区的初始值，选单行或密码方式时初始区也为一行，本例是多行的情况。Dreamweaver的文本区工具有一个缺点，在多行情况下不能设置回车方式(软回车还是硬回车)，需要自己在HTM1.代码区内加上。按钮(botton)、选择框(CheCkbox)、无线钮(Radiobotton)的设置比较简单。对选项菜单(ChoiceMenu)的设置是这样的，在Dreamweaver中选项菜单分成列表(list)和菜单(MenU)两种。请看图九，当选择Menu方式，右侧的Height和Selections选项不可选。选项
12、内容选右侧的1.iStVaIUeS按钮，弹出如图十的对话框，左边的加减号的按钮是增加或减少选项和相应的值。右侧的两个按钮可以调整选项的位置，本例是将第一个选项调到第三个的情况。当选1.ist选项时可以选列表的高度和是否允许多选。下一节我们将为您介绍帧的制作。帧的制作在Dreamweaver中分栏(frame)十分简便。并且程序允许用户对整个页面进行编辑。将网页分栏可以使用Modify菜单中的FrameSet命令，并选择分栏方式，如左侧分栏、右侧分栏、上侧分栏、下侧分栏。分好以后对每一栏的设置要通过属性面板，如图十一，图十一的上部是FrameSet的属性，下部是每一栏的属性。对每一栏可以设顶栏的
13、HTM1.文件，有无滚动条，可不可以改变栏的大小及栏的边。然后我们可以分别对每一栏进行编辑，就像编辑不分栏的页面一样。这样我们既可以看到整个页面的情况，也可以方便地对单个栏进行编辑，十分方便直观。有时我们需要撤消已分好了的栏，但我们在MOdify菜单中找不到撤消的命令，在属性面板中也没有关于栏数的设置，怎么办呢？其实对栏的撤消更简单，这和改变栏的大小一样，只需要拖动栏的边界，当我们看不到要撤消的栏的时候，栏就被撤消了，这时如果我们注意一下属性面板的话，会发现栏数改变了。我们也可以调出FrameS浮动面板来监视栏的编辑，便于查看整体布局和快速选择要编辑的栏。FrameS浮动面板在WindoW菜单
14、中。如图十二是先左右分栏，再将右侧的栏上下分栏的情况。下一篇我们将为您介绍Dreamweave的中级功能层和行为的应用。层的应用Dreamweaver在编辑动态HTM1.方面别具特色，程序利用层叠样式表和JavaSript脚本语言进行编辑。一般的用户不必关心具体的实现方法或具体的代码，而是像进行影像编辑一样一帧一帧的设计，所以使用的时候有点不像编写网页而是在进行多媒体设计。如果你用过AdobePremiere的话，就会很快熟悉这种编辑方法。再具体的实现上分为行为(Behavior)和时线(timeline)行为用来对外界的情况进行响应,产生交互式的操作,这些响应是基于HTM1.和JavaScr
15、ipt语言并与具体的浏览器有关。而时线则根据页面元素的位置、大小、内容的变化来实现。其中引入层是实现网页精美动画的关键。层是建立动态HTM1.的基础。我们可以在insert菜单或直接在工具条中找到层工具，就是这个小图标。选中后就可以在网页上划定一个矩形区域表示建立一个新的层,选中一个层后这个层边界用细框线表示出来,左上角有一个小的标记。我们可以在这个划定的矩形区域内编辑任何内容，就像编辑一般的网页一样。我们看下面这个例子，图A一先后建立了三个层，第一层是包含一副风景画的图层,第二个层是包含汽车的层，最上面的第三层是海鸥。其中第三层是一张GIF89A的图片，所以我们可以通过第三层看到下面的前两个
16、层。层的大小可以是任意的，但不能小于层中的元素。也就是说我们不能通过改变层的大小来改变层中元素的大小，这个例子中要改变第三层中海鸥的大小只能通过对海鸥这幅图的属性来改变。在上一期介绍插入图片的段落中有相关内容。当我们选中一个层进行操作时(注意是对层的内容进行编辑，而不是对层本身)，这时该层的边框由灰色变为黑色，我们就可以在这个层中插入或修改各种元素。并且选中以后活动层的左上角出现一个小方块的标志。上面的例子是单击这个小方块后的情况，这时层的边界出现八个小方块点，我们可以通过用鼠标拉动这些点来改变层的大小。为了对层进行更好的管理还需调出层控制面板(选WindoW中的Iayer命令)。图A二是针对
17、上一个例子的层面板。面板上标出了三个层的情况。层面板一共有三个选项供选择，有眼睛标记的选项是显示或隐藏层。当点最上面的眼睛标记时可以对所有层进行显示和隐藏操作。在下面还有三个眼睛标记，上面的两个是睁开的眼睛，表示本层可见,下面一个是一个闭合的眼睛，表示本层，也就是层一是隐藏的，为了更好地说明层面板的使用方法，层面板没有和例图完全对应，例图中的第一层是显示的。我们可以为每个层指定名称，缺省时名称按层建立的先后命名为Iayer1、Iayer2层面板中Z项指的是Z-order,层的顺序，Z值越小表明该层的位置越靠下。还有另一种简单的方法来改变层的顺序是：点住要改变层次顺序的层的名字拖动到适当的位置，
18、就像PhotOShoP中的层管理一样。下一节我们将介绍行为的应用。行为的应用如果想要使网页更“聪明”的话，就要使用行为来感知外界的信息并做出相应的响应。这些外界信息包括鼠标的活动，如页面的调用与关闭、鼠标移动到页面元素上点击元素或移开元素，以及焦点的改变和键盘的情况等各种变化，对不同的页面内容有不同的事件，另外能够响应的事件也和浏览器有关，一般说来，3.0的浏览器能够响应的事件要少于4。浏览器，而IE4能够响应的事件要多于Netscape4.0浏览器，我们可以根据不同的浏览器进行不同的设置。图A三是一个简单的例子，这个页面有两项内容，一部分是上面的文字Clickhereformoreinfor
19、mation”并成为一个超链接，下面是一个汽水瓶的图片。现在想要产生这样的效果，当浏览者将鼠标移到超链接的文字之上的时候发出一段开启汽水瓶的声音，这段声音是已有的资源。我们可以这样做。将超链接设置成工作的焦点，可以用鼠标在这行文字上点一下。这时调出行为浮动面板（WindoW菜单的behavior命令），如图A四这个浮动面板一共有两部分组成。左边是事件，右边是对事件的响应。我们可以看到浮动面板的事件栏中显示了Events,表明现在是对刚才选中的超链接所产生的各种可能的事件。在这一栏中我们可以选择浏览器的类型，例子中是选择IE4作为目标浏览器，我们点击加号会弹出一个菜单，菜单中列出各种可能产生的事
20、件。我们选择事件，当鼠标移动到目标元素上的时候就会产生事件信息，选中以后这一事件被加入事件栏中，一个页面元素可以激发许多事件。当一个事件有响应的时候这个事件才是有价值的事件，因为即使没有选事件也是存在的，也是会在适当的时候被激发，只是没有响应所以对页面没有任何影响。用同样的方法我们点击行为浮动面板右侧的响应栏中的加号按钮，这里也列出了所有可能的响应，包括改变属性、检查插件、声音控制、浏览器状态条显示何种信息，跳到指定的地址上，打开新的浏览器窗口。弹出消息以及层的变化等等。我们选择声音控制（mrolsound）一项，这时会自动弹出对话框提示我们开始和结束声音。图A五就是弹出的对话框，选择合适的声
21、音文件后（注意，要选择网页允许的声音文件格式）整个有关本例的事件及响应的设置就完成了。我们没有编写一句代码就完成了较为复杂的交互式操作，这足以表明DreamWeaVer在编写高级网页时的优越性。我们可以用这种方法编写出十分精彩的网页，比如：当我们开启一个网页的时候先奏一段音乐（这里用到对On1.Oad事件的响应），当浏览者将鼠标移动到网页的各个项目上时，这一项目闪烁并响起音乐且状态条显示项目的说明（这里用到对OrlMOUSec）Ver事件的响应，响应为图片来源控制、声音控制和状态条信息的设置），当浏览者随超链接进入新的页面并点击页面的Mc）V格式的电影时检查浏览器是否有quicktime插件，
22、如果有就播放这段电影（对OneliCk事件响应，响应为检查插件），我们可以将一幅图片作为一超链接，当浏览者点击或按下任意键时显示目标页（用到对OnKeyPress和OnMOUSeOVer事件的响应），如果是商业或教育网页我们还可以对OnHeIP和OnErrOr等事件产生响应。我们还可以对整个页面进行控制（用到对OnReadyStateChang6事件的响应），如果浏览者结束浏览时说一些感谢的话或传达一些信息或打开相关网页就要用到对OnCIose事件的响应等等，还有许多更精彩的事件和不同寻常的响应事件留给广大读者去发现吧。下一节我们将为您介绍CSS的应用。CSS的应用DreamWeaVer具有强
23、大的编辑层叠样式表(CSS)能力，对层叠样式表的编辑能力要远远强于Frontpage98o虽然Dreamweaver并没有声明对CSS2的支持，但程序本身对层叠样式表的扩展已基本具备了CSS2的基本规范，这一点是其他网页编写软件所不及的。如果不具备这样强大的层叠样式表编辑功能，DreamWeaVer在编写DHTM1.方面的能力会大打折扣，看一看网页的源代码就会知道几乎每一个精彩的动画都要靠CSS的参与。当然，要得到理想的显示效果还要有新的浏览器，我在IE4.01下观看Dreamweaver的例页才得到正确的显示结果。我向大家推荐使用40的浏览器，特别是IE。要编辑或管理层叠样式表首先要从win
24、dow菜单调出样式浮动面板。如图A六所示。这个浮动面板一共显示了三个自定义的样式：StyIe1.Style2和Style3。浮动面板上显示的样式都不是HTM1.关键字。改变HTM1.关键字是隐含的不直接显示在这个浮动面板上。对每一种样式我们都可以进行编辑删除、施加于页面元素等操作。可以通过右击样式的名称来实现上述操作。在将样式施加到页面元素时可以选中样式再向页面加入新的内容或点中所要施加样式的内容，一行或一段，再点中样式。所以如果要进行一般的编辑一定要选中(none)一项。如果我们点样式浮动面板下面的,StyleSheet”按钮就可以对样式进行编辑。这时弹出一个对话框。如图A七所示。这个对话框
25、列出了增加或改变的所有样式。“p”和“pre”的属性更改后在样式浮动面板中不显示而在这个对话框中将列出来。在这个对话框下部的Stlyledefinitiorf栏中显示选中样式的设置情况，如果设置内容过多将显示不出来。这个对话框中的“1.ink”一项指明要设置的样式的外部链接，即一个CSS文件。如果我们要定义一个新的样式就点“new”键，这时弹出newstyle”对话框，如图A八所示。通过这个对话框我们可以选择自定义的样式、HTM1.关键字或CSS选择器提供的各种样式，例图中自定义了一个名为“Styler的新样式。确定以后会自动弹出新的对话框使用户对选定样式进行编辑。这个对话框如图九所示,左边一
26、栏是新样式的各种属性，右面是属性的细节。例图是“type”属性的各种参数。带星号的参数都是扩展的样式属性，现有的浏览器可能不支持。如图A中的“type”属性的参数，我们可以设置字体、字的颜色、字间距、字型及附加线等各种参数值。图A十是以上例子在IE下的显示情况。有关样式表的具体细节十分庞杂，这里不可能作过多的介绍，有兴趣的读者可以参阅有关资料。Dreamweaver中精彩的时线功能在下一章介绍。时线的应用我想时线应该是Dreamweaver中最精彩的内容了。因为它在实现网页动画时没有用到ACtiVeX、以及任何插件或JaVaaPPlets,DrearnWeaVer通过改变层和页面图片在不同时间
27、上的属性来制作动画。也是因为这个原因，用Dreamweaver编辑的带有层动画的网页必须用4.0或更新的浏览器浏览。用时线制作动画可以改变的属性有层的位置、大小、透明度或改变各层的上下位置关系。用时线还可以对页面的各种行为进行设置。也就是说,将行为也纳入时线的编辑,这使得我们所编辑的网页更富于变化、更精彩。比如我们可以用时线改变一幅不属于某一个层的图片的文件源（这是制作动画最基本的方法），然后在某一个特定的帧上执行一个行为。下面我们来看一下时线浮动面板。时线面板负责改变层或图片在整个时间上的属性。如果要打开这个面板可以选Window菜单中的timelines命令。下面我们看这个面板的具体内容。
28、请看图B一。面板上最上一栏是控制项。下面标有大写B（Behavior）的栏是行为栏，中间是时间标尺，标尺上有一个红色的小块是监视块，这个小方块表明了当前的显示状况。最下面是各个项目，图中有两个项目，一个是层项目，一个是图片项目。下面我来介绍时线面板的具体用法。选择栏中包含对时线名称的选择和修改，当我们建立多个时线时可以用这个选择项快速地在各时线间穿插，在网页比较复杂时建立多个时线可以更好的编辑或组织。图中显示的时线是,timelinelo接下来的几个按钮是监视位置的选择，最左边一个是将监视块调到最左边。倒退按钮是将监视块向左移动一小格，播放按钮是将监视块向右移动一小格，如果当前位置上没有任何项
29、目则使用播放按钮监视块不会向前滑动，而使用倒退按钮则立即回到项目的尾端（最右端）。这几个按钮中间是监视块所在的具体位置。可以通过这个框确定监视块的详细位置。“Fps”框允许作者指定动画每秒的帧数，缺省值为15,这是一个平均数，每秒15帧在大多数情况下可以达到较好的显示效果。如果浏览者的机器更好的话我们还可以增加每秒的帧数，这样显示效果更加平滑。这一栏右面的“Autoplay”检查框是设置动画的播放方式。选中时会弹出对话框告诉用户这一项已选中，当网页被开启的时候会自动播放动画。如果我们选中“1.oop”检查框，也会弹出对话框告诉用户这一项已选中，动画会循环播放。一般情况下这些项都可以选中，除非我
30、们为了使网页更灵活而设定在浏览者执行某种动作时播放动画。比如当传输速度十分有限时，我们可以先使用一幅静止的图片，当浏览者点击这幅图片时播放动画。这样既分散了等待的时间，使浏览者不至于因为长时间看不到网页而放弃浏览，又兼顾了网页的质量。我们可以随时点击带有问号的按钮来获得帮助,就像其它浮动面板上的问号按钮一样。时线面板中的行为栏功能不凡。我们可以在任意位置上增加相应的行为以增强对页面的控制和对外界的适应。图一中的时间栏中有两个方块，一个黑色，另一个是中间有黑色减号标志的淡紫色方块。黑色的一个在我们点中行为栏上某个区域后出现表明已选中这个区域，可以在这个时间上设置行为，选中的同时监视块也滑到选中的
31、时间上，这样作者可以看到执行行为时页面的状态。另一个表明在此时线上已设置了行为。我们可以用下面简单的方法设置行为。对已设置行为的区域双击行为栏上的小方块会弹出行为浮动面板，并显示已设置的行为。关于行为的设置和修改方法可以参阅上一篇文章。对没有设置行为的区域可以先选中这个区域，再点击右键弹出菜单（也可以不选，直接点右键，不过这样不容易确定行为施加的具体时间），选择uAddBehavior*1命令，以后的情形和上一种完全一样。我们可以用鼠标点住行为栏中的小方块进行拖动，以改变行为生效的时间。当我们选择循环执行动画的时候会自动增加一个行为。点击这个行为可以看到激发这个行为的事件是“onFramexx
32、，与这个事件相应的是“GoToFramexx，所以如果这个滑块设置在项目的内部，项目不会得到完整的执行，而滑块放在项目的外部，在项目完后会有一段停顿。一般我们应该将这个滑块放在项目刚好结束的位置上，这样以生成无停顿的动画。一般的用户只需要了解怎样在时线上设置和修改项目就可以完成不错的动画了。图B中有两个项目，分列于两栏，表明这两个项目是同步的。如果想要一个项目在另一个项目执行完指挥执行，简单的方法是将项目用鼠标拖动到另一个的后方，当然也可以用同样的方法将一个项目拖动到另一个的下方使之与另一个并列。项目条是淡紫色的，选择整个项目后项目条会变成灰紫色。选整个项目的时候不要点项目条上的圆点，这些圆点
33、是项目的关键帧，我们可以设置关键帧来完成整个动画。要改变关键帧的位置，可以用鼠标直接拖动这些圆点。要使整个项目执行的时间长一些就要向右拖动最后一个圆点，这时整个关键帧的位置都会改变。如果需要还要对各关键帧的位置重新调整。另一种定量改变项目长度的方法是点击右键选择“AddFrame来增加项目长度，选RemoveFrame”来缩短项目长度。如果要改变一个项目开始的位置可以拖动这个项目的第一个关键帧，这时项目会缩短，如果不想改变项目的长度可以点住整个项目拖动到合适的位置。并且选中整个项目时改变层的属性作用于整个项目。如果要增加或删除项目，可以选择右键弹出的菜单中的“AddObject和RemoveO
34、bject命令。所有这些命令都可以在“Modify”菜单中找到。下一节我们将结合宴例对时线进行进一步的讲解。时线制作的简单的例子下面我通过一个简单的例子展示用时线编辑动画的具体步骤。为了使动画更生动，我选择了一幅GIF动画（当然也可以用时线一帧一帧地做图片动画，这里选择了一幅现成的图片，另外用时线面板做的动画文件要小，因为一般情况下可以用jpg图片串接成一幅动画），然后指定其运动的路径来达到动感十足的页面效果。首先建立一个层,在这个层中加入选中的GlF图片，在用Dreamweaver编辑的时候，GIF的动画是不会动起来的，最后的效果要在浏览器中才能看到。在建立的层中插入图片后的效果如图b二。然
35、后我们选中这个层将它加入时线中（使用Modify菜单的AddObjectToTimeIine命令）。这时的时线面板增加了新的项目，并且这个项目被选中，如图b三。这时只有两个关键帧，要做一幅完整的动画是不够的，所以还要加入新的关键帧。我们再按照上面的方法加入四个关键帧。然后选中整个项目，将层移动到初始位置。下面我们为这幅图片设置运动路径。首先选择最后一个关键帧，将图层移动到动画终结的位置上，这时出现一条动画运动的路径，如图b四所示。然后选择倒数第二个关键帧将图层移动到相应的位置上，这时运动路径也会跟着变化。接着我们依次对倒数第三、倒数第四个关键帧做类似的设置。如果感觉路径的形状不理想，可以选中有
36、关的关键帧重新设置。完成以后的路径和时线面板如图b五，图中显示的是第三帧。这时的效果是天鹅沿选定的路径飞行，飞行的速度可以通过改变时线面板上的项目长度进行调整，以使天鹅展翅的速度和飞动的速度相一致。如果用DreamWeaVer的时线面板制作动画，调节时间就方便多了。如果感觉动画不够连贯可以增加每秒的帧数。完成以后会发现天鹅飞到目的地后又跳回到起始位置重新开始，如果让天鹅绕一个圈飞回来效果会好一些。因此我又使用AdObelmageReady将原始动画一帧一帧地翻转过来构成新的动画。然后回到DreamWeaVer中增加一些关键帧，使飞行路线成为一条封闭圆滑的曲线。还有一个问题需要解决，使天鹅飞到左
37、边后改变动画文件源，接下来的飞行使用新做的GIF动画。我们可以这样做，选中图层中的GIF图片，选MOdify菜单中的4AddObjectToTimeline命令，这时时线面板增加了一个新的项目，并在左端表明项目的类型为“image”，如果监视块不在初始位置，就要点住新项目使其在初始位置开始。如图b六。新的项目有两个关键帧，对这幅动画已经足够了。将第二个关键帧的位置调整到层的第六帧，也就是图层运动到最左边的位置。选中这一帧，在属性面板中将图片的源位置（“src”）改为刚刚做的GIF动画名。整个动画完成。最后的时线面板如图b七，显示效果如图b八。我们可以再进一步将刚完成的动画加到网页上，使这只天鹅在文字上飞行，这种效果足以让最挑剔的浏览者瞠目。对DreamWeaVer了解越多，就越为它非凡的网页制作能力所震撼，就越觉得它难以割舍。像梦一样，清新自然又难以想象。
