时间轴——动态网页应用 巧用时间轴，尽显高手风范

随意登录一个网站，我们都可能被满屏幕乱跑的广告、图片搞的眼花缭乱。你知道这样的效果是如何实现的么？你想学会这个技术么？下面就让我们看看怎样用“时间轴”来实现这个网页动态效果。

“时间轴”
“时间轴”只能对“层”发生作用。所以，如果要产生动画效果，首先要创建层，再将图像、文本等内容插入到层中，然后通过移动层来移动这些元素。

1、建立一个目录，将准备好的图片拷入。图说：(1)在硬盘上新建一个文件夹，本例是在D盘新建了一个名为“example”的文件夹。(2)将准备好的图片拷贝至这个目录下。

2、打开Dreamweaver，为这个目录建立站点。图说：(1)按一下[Site]→“New Site”。(2)在站点名称处输入“timelines”。(3)将这个站点定位到D盘的“example”文件夹。

3、还得新建一个HTML文件。图说：(1) 在这里按一下鼠标右键。(2) 选择“New File”（新文件）。(3) 为这个新文件起名为“Timelines.htm”。

4、打开“timelines.htm”，修饰一下这个页面吧！图说：(1)随便写上些文字，本例为“会滑冰的小兔子，你喜欢么？”并将文字全部选中。
(2)按一下键盘上的“Ctrl”键+“F3”键，打开属性面板。(3)参照这里修改文字的大小、颜色、字体、位置。

5、接下来要添加一个新层。图说：(1)按一下键盘上的“Ctrl”键+“F2”键，打开对象面板。 (2)拖拉面板中的“层”图标至操作区。

6、将动画中可爱的小兔子放入建好的层中。图说：(1)按一下[插入图片]图标。(2)在弹出的对话框中，将小兔子图片选中，按一下[Select]（选择）。

7、下面就要调整图片的位置了。图说：(1)选中层柄。(2)将图片移动到操作区右下角的位置。注意：当层被选中时，它的边界会显示出黑色小方块。

8、关键步骤到了，现在我们要将做好的层添加到时间轴面板中。图说：(1)按一下键盘上的“Shift”键+“F9”键，打开时间轴面板。(2)选中操作区中的层，并将它拖动到时间轴面板中。(3)在时间轴中就可以看到一条从第1帧到第15帧的动画栏了。

9、只到第15帧，似乎动画时间太短了，我们将动画的作用时间延长。图说：选中第15帧位置上的小圆圈，同时向右拖动鼠标至第35帧的位置。

10、下面我们还要对动画的播放状态进行一番设置。图说：(1)勾选“Autoplay”选项。(2)勾选“Loop”选项。小技巧：“Autoplay”能够使动画自动播放；“Loop”则能使动画循环播放。这是非常有用的两个选项。

11、动画结束的时候，让小兔子回到左上角吧！图说：(1)点中时间轴上第35帧上的小圆圈。(2)选中操作区中的层，将它移动到左上角的位置。小技巧：这时可以在操作区中看到一条斜线，它是用来标记动画运动轨迹的。

12、只有两个关键帧的动画似乎不太生动，那么再来加上一点变化吧。图说：在动画栏上第15帧位置点一下，按一下键盘上的“F6”键插入一个关键帧。

13、将小兔子移动到你想让它呆着的位置。图说：(1)在操作区中选中层，将它移动到中间的位置。(2)现在你可以按一下键盘上的“F12”键来看看效果了！

结束语：对于每个动画栏我们都可以随意改变其长度，增加关键帧，改变每个关键帧上层的属性，用来丰富动画的效果。有兴趣的话自己试试吧！