| Dreamweaver的介绍(图) |
|
|
| 本站专稿 重庆金桥 2002-01-08 |
一、什么是Dreamweaver
Dreamweaver是美国MACROMEDIA公司开发的集Web页制作和管理网站于一身的所见即所得Web页编辑器，它是第一套针对专业Web页设计师的视觉化Web页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的Web页。
说到MACROMEDIA公司大家不会感到陌生，著名的多媒体开发工具AUTHORWARE和DIRECTOR均出自该公司的旗下，以及目前在互联网(Internet)上越来越流行的网络多媒体开发工具FLASH也是出自该公司的旗下。而Dreamweaver则是MACROMEDIA公司继FlASH以后向互联网(Internet)推出的又一梦幻工具。Dreamweaver、FLASH以及在Dreamweaver推出的针对专业Web页图像设计的FIREWORKS，三者被MACROMEDIA公司称为“网络三剑客”，足见市场的反响和MACROMEDIA公司对它们的自信。如图1所示的动感Web页主界面。
图1 动感Web页主界面
二、Dreamweaver的应用
1．时间线的应用
时间线应该是Dreamweaver中最精彩的内容了。因为它在实现Web页动画时没有用到ActiveX、以及任何插件或Java applets，Dreamweaver通过改变层和页面图片在不同时间上的属性来制作动画。也是因为这个原因，用Dreamweaver编辑的带有层动画的Web页必须用IE 4.0或更新的浏览器浏览。
用时间线制作动画可以改变的属性有层的位置、大小、透明度或改变各层的上下位置关系。用时间线还可以对页面的各种行为进行设置。也就是说，将行为也纳入时间线的编辑，这使得所编辑的Web页更富于变化、更精彩。比如可以用时间线改变一幅不属于某一个层的图片的文件源(这是制作动画最基本的方法)，然后在某一个特定的帧上执行一个行为。
下面来看一下时间线浮动面板，如图2所示。时间线面板负责改变层或图片在整个时间上的属性。如果要打开这个面板可以选“Window”菜单中的“Timelines”命令。
图2 时间线浮动面板
面板上最上一栏是控制项。下面标有大写B(Behavior)的栏是行为栏，中间是时间标尺，标尺上有一个红色的小块是监视块，这个小方块表明了当前的显示状况。最下面是各个项目，图中有两个项目，一个是层项目，一个是图片项目。
2．时间线的使用
选择栏中包含对时间线名称的选择和修改，当建立多个时间线时可以用这个选择项快速地在各时间线间穿插，在Web页比较复杂时建立多个时间线可以更好的编辑或组织。图中显示的时间线是“Tmielinel”。接下来的几个按钮是监视位置的选择，最左边一个是将监视块调到最左边。倒退按钮是将监视块向左移动一小格，播放按钮是将监视块向右移动一小格，如果当前位置上没有任何项目，则使用播放按钮监视块不会向前滑动，而使用倒退按钮则立即回到项目的尾端(最右端)。这几个按钮中间是监视块所在的具体位置。可以通过这个框确定监视块的详细位置。“FPS”框允许作者指定动画每秒的帧数，缺省值为15，这是一个平均数，每秒15帧在大多数情况下可以达到较好的显示效果。如果浏览者的机器更好的话还可以增加每秒的帧数，这样显示效果更加平滑。这一栏右面的“Autoplay”检查框是设置动画的播放方式。选中时会弹出对话框告诉用户这一项已选中，当Web页被开启的时候会自动播放动画。如果选中“Loop”检查框，也会弹出对话框告诉用户这一项已选中，动画会循环播放。一般情况下这些项都可以选中，除非为了使Web页更灵活而设定在浏览者执行某种动作播放动画。比如当传输速度十分有限时，可以先使用一幅静止的图片，当浏览者点击这幅图片时播放动画。这样既分散了等待的时间，使浏览者不至于因为长时间看不到Web页而放弃浏览，又兼顾了Web页的质量。可以随时点击带有问号的按钮来获得帮助，就像其它浮动面板的问号按钮一样。
时间线面板中的行为栏功能不凡，可以在任意位置上增加相应的行为以增强对页面的控制和对外界的适应。时间栏中有两个方块，一个黑色，另一个是中间有黑色减号标志的淡紫色方块。黑色的一个在点中行为栏上某个区域后出现，表明已选中这个区域，可以在这个时间上设置行为，选中的同时监视块也滑到选中的时间上，这样可以看到执行行为时页面的状态；另一个表明在此时间线上已设置了行为。可以用下面简单的方法设置行为。对已设置的区域双击行为栏上的小方块会弹出行为浮动面板，并显示已设置的行为。对没有设置行为的区域可以先选这个区域，再点击右键弹出菜单(也可以不选，直接点右键，不过这样不容易确定行为施加的具体时间)，选择“Add Behavior”命令，以后的情形和上一种完全一样。可以用鼠标点击行栏中的小方块进行拖动，以改变行为生效的时间。当选择循环执行动画的时候会自动增加一个行为。点击这个行为可以看到激发这个行为的事件是“on-Frame XX”，与这个事件相应的是“GO TO Frame xx”，所以如果这个滑块设置在项目的内部，项目不会得到完整的执行，而滑块放在项目的外部，在项目完后会有一段停顿。一般应该将这个滑决放在项目刚好结束的位置上，以生成停顿的动画。
一般的用户只需要了解怎样在时间线上设置和修改项目就可以完成不错的动画了。有两个项目，分列于两栏，表明这两个项目是同步的。如果想要一个项目在另一个项目执行后指挥执行，简单的方法是将项目用鼠标拖动到另一个的后方，当然也可以用同样的方法将一个项目拖动到另一个的下方使之与另一个并列。项目条是淡紫色的，选择整个项目后项目条会变成灰紫色。选整个项目的时候不要点项目条上的圆点，这些圆点是项目的关键帧，可以通过设置关键帧来完成整个动画。要改变关键帧的位置，可以用鼠标直接拖动这些圆点。要使整个项目执行的时间长一些就要向右拖动最后一个圆点，这时整个关键帧的位置都会改变。如果需要还要对各关键帧的位置重新调整。另一种定量改变项目长度的方法是点击右键选择“Add Frame”来增加项目长度，选“Remove Frame”来缩短项目长度。如果要改变一项目开始的位置可以拖动这个项目的第一个关键帧，这时项目会缩短，如果不想改变项目的长度可以点住整个项目拖动到合适的位置。并且选中整个项目时改变层的属性作用于整个项目。如果要增加或删除项目，可以选择右键弹出的菜单中的“Add Object”和“RemoVe object”所有这些命令都可以在“Modify”菜单中找到。
3．简单实例
为了使动画更生动，选择了一幅GIF动画(当然也可以用时间线一帧一帧地做图片动画，这里选择了一幅现成的图片，另外用时间线面板做的动画文件要小，因为一般情况下可以用JPG图片串接成一幅动画)，然后指定其运动的路径来达到动感十足的页面效果。首先建一个层，在这个层中加入选中的GIF图片，在用Dreamweaver编辑的时候，GIF的动画是不会动起来的，最后的效果要在浏览器中才能看到。在建立的层中插入图片后的效果如图7-4所示。然后使用“Modify”菜单的“Timeline”下“Add object To Timeline”子命令将它加入时间线中。
图3 插入图片后
这时的时间线面板增加了新的项目，并且这个项目被选中，如图3所示。这时只有一个关键帧，要做一幅完整的动画是不够的，所以还要加入新的关键帧。再按照上面的方法加入四个关键帧。然后选中整个项目，将层移动到初始位置。下面为这幅图片设置运动路径。首先选择最后一个关键帧，将图层移动到动画终结的位置上，这时出现一条动画运动路径。然后选择倒数第二个关键帧将图层移动到相应的位置上，这时运动路径也会跟着变化接着依次对倒数第三、倒数第四个关键帧做类似的设置。如果感觉路径的形状不理想，可选中有关的关键帧重新设置。完成以后图中显示的是第三帧、如果用Dreamweaver的时间线面板制作动画，调节时间就方便多了。
如果感觉动画不够连贯可以增加每秒的帧数。完成以后会发现到目的地后又跳回到初始位置重新开始。使用Adobe ImageReady将原始动画一帧一帧地翻转过来构成新的动画。然后回到Dreamweaver中增加一些关键帧，使飞行路线成为一条封闭圆滑的曲线。还有一个问题需要解决，到左边后改变动画文件源，接下来的飞行使用新做的GIF动画。可以这样做，选中图层中的 GIF图片，选“Modify”菜单中的“Timeline”下的“Add object To Timeline”命令，这时时间线面板增加了一个新的项目，并在左端表明项目的类型为“image”，如果监视块不在初始位置，就要点住新项目使其在初始位置开始。新的项目有两个关键帧,对这幅动画已经足够了。将第二个关键帧的位置调整到层的第六帧，也就是图层运动到最左边的位置。选中这一帧，在属性面板中将图片的源位置(“src”)改为刚刚做的GIF动画名。整个动画完成。可以再进一步将刚完成的动画加到Web页上，可在文字上飞行，这种效果足以让最挑剔的浏览者膛目。
|
|
|
|
|
 |
|
|
|
|
|
|
|
