Dreamweaver 也能做动画(上)

　　效果描述：

　　当浏览者进入您的网站后，会看到屏幕左侧有一个足球，右侧是个球门，足球将以漂亮的弧线直挂球门死角，并如此循环。

　　听起来好象很复杂，别担心，有Macromedia 的网页魔法师Dreamweaver MX在此，一切将迎刃而解。制作中主要应用了表格、层连同时间线控制。

　　步骤1：

　　首先您应当拥有两张图片，一个是足球，一个是球门，在世界杯期间，我实在不知道更有什么比这两样东西更容易找到了，您能够在Fireworks中对找到的图片素材做进一步处理，当然也能够自己直接在Fireworks中绘制。值得注意的是两张图片都请制作为GIF格式的透明图像。好，现在我们拥有了一张足球图片Ball.gif，宽为30 ，高也是30（如图1）；另外更有一张球门的图片Door.gif，宽为60 ，高为80（如图2）。

　　
图1　　　　　　图2

　　步骤2：

　　打开Dreamweaver MX，新建一个页面并以您喜欢的名字保存，点击工具栏上的Insert Table图标按钮插入表格（如图3），

图3

　　在弹出的对话框中配置Rows为1(一行)，Columns为1（一列），Width为778px（如图4）。

图4

　　点击OK按钮完成表格的插入。使用鼠标选择刚刚插入的表格（鼠标在表格框线上单击），在下方Properties面板中配置表格位于页面正中（如图5），即Align属性为Center。

图5

　　步骤3：

　　在表格中任意位置单击鼠标，在下面的Properties面板中配置Align为Right（如图6），

图6

　　这是配置表格中单元格的对齐属性。在工具栏上选择Insert Image按钮，在弹出的对话框中选择图片Door.gif，效果如图所示（如图7）。

图7