转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
制作会移动的广告条         ★★★★

制作会移动的广告条

作者:闵涛 文章来源:闵涛的学习笔记 点击数:671 更新时间:2009/4/23 12:15:49
  在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到Macromedia DreamWeaver中的Layer(层)和Timeline(时间轴)功能,还得准备两张大小基本相同的广告图片。我们已最新版本DreamWeaver4.0(英文版)为例,制作移动的广告条。 

  一、用DreamWeaver打开任意一个网页,空白页也可。在菜单中选择“插入Insert”-> “层Layer”,即看到网页中多了一个空白Layer1,你也可以为他命名。再将光标点到空白Layer1内,选择“插入Insert”-> “interactive Image”-> “rollover image”,在弹出的对话框中分别插入你的广告条的图片(请注意original image 表示第一张图片,rollover image 表示当鼠标移到第一张图片时,又出现的图片,而且一定要把preload rollover image选中),调整层大小,使层尽可能与图片大小相近。

  二、在菜单栏选择“修改Modify”-> “时间轴Timeline”-> “添加对象到时间轴Add object to Timeline”。点击后,弹出对话框,告诉你只有图象和层才能添加到时间轴。对话框按确定后,我们选中Layer(单击层标记或层边界,或用层面板选择一层,当一个层被选中时,层边界会显示出调整大小手柄,按住鼠标左键不放,拖进时间轴动画栏的第一频道,即面板上竖写1,2,3等等的“1”那行,时间轴里面马上增加了一个默认的15帧动画。

  然后,单击动画栏最后关键帧标记,再选中页面中的层Layer1,将它拖动到动画的结束点,或者在“层的属性面板”改变层的“左L”属性大小来确定结束帧层的位置。此时,页面中显示了从动画起始位置到结束位置有一线条,这就是层的运动轨迹。要想让页面打开时候它就开始运动,就在“时间轴TimeLine”面板上的“自动播放Autoplay”前打勾,如图3所示:按在时间轴上中部的“-> ”箭头不放,就可以直接预览这直线动画了,或者按下F12键预览。

  接下来,我们要进行一系列美化工作,因为这个简单的直线运动效果并不美观,而且广告图片也没有产生变化。

  三、改变时间栏的属性产生移动变化 

  (1)在动画移动距离不变的情况下,改名动画移动速度。因为我们拉层进时间轴面板起始时候的帧数是默认的15帧,在上面预览时候就感到速度有点快。要改变速度,我们就得改变动画总共帧数。鼠标左击选中“时间轴面板”中的“第一频道”结束帧不放,向右拖动至你所想要的结束帧,例如75帧处,放开鼠标。此时,结束帧的空白小圆也移至到了第75帧处。按F12预览一下,动画的移动速度明显变慢。但是要注意的是我们只是在保持动画运动轨迹的长度不变的情况下,改变了动画移动的速度,即时间轴上的帧数。如果在同时改变改变起始和结束帧层的位置,就会产生各种不同速度效果,读者可以自己试着尝试。

  (2)产生曲线的运动。上面做的动画只是简单的直线运动,如果改变成曲线的运动,美观程度就大大的加强了。曲线运动中最主要的就是关键帧的设置(只要学习过flash的,这点非常容易理解)。

  a.在“时间轴面板动画栏”上添加一个关键帧: 选择动画栏的第一频道中你想要添加关键帧处, 单击鼠标右健,选择“add keyframe”,即刻在插入点位置添加一个关键帧。

  b.在添加的关键帧处移动层:在保证选中了后来添加的关键帧下,选择页面中的层,移动层至你所想要的地方。此时直线变化成了曲线。你可以多添加几个关键帧,再移动层,使产生的曲线移动更加光滑。按F12键预览,曲线效果是不是比以前的直线效果好多了?

  另附:在使用Dreamweaver4(英文版)的过程中,一次想用layer作动态广告,只要把 “view菜单下的table view --> layout view修改为standard view,就可以插入layer和table了。 



没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

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

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

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

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台