Dreamweaver 也能做动画_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

Dreamweaver 也能做动画

作者：闵涛文章来源：闵涛的学习笔记点击数：628 更新时间：2009/4/23 12:32:08

有什么好办法让每一个进入自己网站的球迷朋友也一起激动一下呢？本文将告诉你怎样使用Dreamweaver和几个简单的步骤完成漂亮而富有创意的动画效果。

　　效果描述：
　　当浏览者进入你的网站后，会看到屏幕左侧有一个足球，右侧是一个球门，足球将以漂亮的弧线直挂球门死角，并如此循环。
　　听起来好象很复杂，别担心，有Macromedia 的网页魔法师Dreamweaver MX在此，一切将迎刃而解。制作中主要应用了表格、层以及时间线控制。
　　步骤1：
　　首先你应当拥有两张图片，一个是足球，一个是球门，在世界杯期间，我实在不知道还有什么比这两样东西更容易找到了，你可以在Fireworks中对找到的图片素材做进一步处理，当然也可以自己直接在Fireworks中绘制。值得注意的是两张图片都请制作为GIF格式的透明图像。好，现在我们拥有了一张足球图片Ball.gif，宽为30 ，高也是30；

　　另外还有一张球门的图片Door.gif，宽为60 ，高为80。

　　步骤2：
　　打开Dreamweaver MX，新建一个页面并以你喜欢的名字保存，点击工具栏上的Insert Table图标按钮插入表格：

　　在弹出的对话框中设置Rows为1(一行)，Columns为1（一列），Width为778px。
　　点击OK按钮完成表格的插入。使用鼠标选择刚刚插入的表格（鼠标在表格框线上单击），在下方Properties面板中设置表格位于页面正中，即Align属性为Center。

　　步骤3：
　　在表格中任意位置单击鼠标，在下面的Properties面板中设置Align为Right。

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

　　步骤4：
　　在工具栏上选择Draw Layer按钮：

　　拖曳鼠标绘制一个层，在层中任意位置单击鼠标后在工具栏上选择Insert Image按钮，在弹出的对话框中选择图片Ball.gif，点击ok按钮。
　　步骤5：
　　鼠标右键单击绘制的层，在弹出菜单中选择Add Timelines

　　这样就添加了一根时间线。我们可以在下方的Timelines面板中看到。

　　步骤6：
　　我们在Timeline上的最后一帧（第15帧）按下鼠标并拖拽，将最后一帧拖拽到第35帧。

　　确认你现在选择了第35帧（如果没有，请用鼠标单击第35帧），然后鼠标拖曳绘制好的层向球门方向运动，并放置在球门上。

　　你可以看到一条线段将Ball.gif的起始位置（第1帧的位置）与终点位置（第35帧）连接起来，这就是它的运动轨迹。
　　步骤7：
　　下面来为运动轨迹增加弧度，鼠标右键单击第10帧，在弹出菜单中选择Add Keyframe即可在这一帧添加关键帧。

　　确认你现在选择了第10帧，然后鼠标拖曳绘制好的层向球门防线运动，我们可以看到运动的轨迹将按照我们拖曳的位置不同而改变。将图片并放置在合适位置，放置的时候适当考虑球的速度与轨迹。

　　如果想更夸张或者更精确的控制运动，可以使用同样的方法添加关键帧并拖曳移动位置即可。
　　步骤8：
　　将Timeline面板的AutoPlay选项与Loop选项后的选择框选中，启动Autopaly选项可以使浏览者一进入页面就看到动画效果，不需要其他事件激活，Loop选项可以使动画循环播放。

　　好了，我们完成了动画效果的制作，你可以按下键盘的F12键来检测动画效果，做进一步的修改。看，漂亮的弧线，球进了！

[网页制作]Dreamweaver MX打造弹出“向导”  [网页制作]使FrontPage与Dreamweaver亲密合作
[网页制作]Fireworks/Dreamweaver双剑合壁造弹出菜单(2)  [网页制作]Fireworks/Dreamweaver双剑合壁造弹出菜单(1)
[网页制作]Dreamweaver CS3集成Spry效果试用  [网页制作]Dreamweaver cs3 彩蛋
[网页制作]体验Adobe Dreamweaver CS3新特性  [网页制作]Dreamweaver 批量做web网页
[网页制作]Dreamweaver MX进阶教程：制作虚线  [网页制作]Dreamweaver MX建站攻略：创建样式表

教程录入：mintao 责任编辑：mintao

上一篇教程：活用Dreamweaver数据功能

下一篇教程：浮动菜单是如何作出来的mouse事件

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……