DreamWeaver制作会移动的广告条

在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到Macromedia DreamWeaver中的Layer(层)和Timeline(时间轴)功能,还得准备两张大小基本相同的广告图片。制作移动的广告条。

  一、用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键预览,曲线效果是不是比以前的直线效果好多了?

  另附:在使用Dreamweaver的过程中,一次想用layer作动态广告,但无论如何都无法插入layer和table,但无论是重新安装还是汉化都无法使用,由于同事使用过,而且同事也正在学习英文版,因此我想是不是在哪个地方的设置被修改的原因呢?找完所有的设置才发现:只要把 “view菜单下的table view --> layout view修改为standard view,就可以插入layer和table了。

时间: 2024-10-27 23:47:34

DreamWeaver制作会移动的广告条的相关文章

如何制作会移动的广告条

广告 编者注:文章内容为汉化版本的Dreamweaver 4.0,配图为英文版本的 Dreamweaver 4.0 你上新浪网首页会看见它页面中有个飘来飘去的广告条,鼠标移上去,还会变成另外的宣传图片.这个广告条没有占用页面的空间,它独立在页面之上,的确是个发布广告条的好方法.那么,这个会移动的广告条到底是如何做成的呢?下面,请跟我一步步学做,看完教材,你也就会自己做了. 做这个广告条,要用到Macromedia DreamWeaver中的Layer(层)和Timeline(时间轴)功能,还得准

制作会移动的广告条

    在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到Macromedia Dreamweaver中的Layer(层)和Timeline(时间轴)功能,还得准备两张大小基本相同的广告图片.我们已最新版本DreamWeaver4.0(英文版)为例,制作移动的广告条.     一.用DreamWeaver打开任意一个网页,空白页也可.在菜单中选择"插入Insert"-> "层Layer",即看到网页中多了一个空白Layer1,你也可以

Flash制作汽车广告条教程

  本例思路 .导入汽车素材,然后制作出汽车出现动画广告. .在Flash的辅助软件SWiSHmax中制作文字动画. .导入汽车剖面图素材,然后制作出汽车剖面图广告. Part 1 制作汽车广告 (1)新建一个大小为700×150像素,帧频为20fps的空白文档,然后制作一个如图7-1所示的背景. 图7-1 制作背景 (2)按Ctrl+R组合键导入本书配套光盘中的"Chapter/素材/汽车.png和楼.png"文件,如图7-2所示. 图7-2 导入素材 (3)将小车转换为影片剪辑,然

网页上的广告条设计

广告|设计|网页 banner条,是网站用来作为盈利或者是发布一些重要的信息的工具.但是它又不能作为网页的主要内容,因为它的主要目的是吸引人的注意力,让人来购买某种商品,或者是让人注意网站的一些动向,一些新的东西要让用户知道.从这个角度出发,就决定了它的性质.那就是作陪衬,但是又是非常重要的部分,这就是广告条的一些基本的特征与要求. 广告条的出现给网页的制作带来很多的东西,不光是要求附加一些可能是设计者不愿意加的东西,使他们不得不在制作网页的同时要把广告条作为整体的一部分来考虑,当然这同时也是

购物网站的Banner广告条设计方法和技巧

本文主要分析和讨论了购物网站的banner广告条的设计方法和技巧,在文章最后还总结了下设计这些banner一些经验,很值得网页设计师们来分享,毕竟banner广告条设计也是网页设计的一部分. 每周的<午间欢乐购>和<周末疯狂购>,已经成为视觉组的固定需求.从开始接触到现在5个月的时间里,思维也和这些小小banner逐渐碰撞出火花. 前期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

网站制作中如何插入一条彩色直线

网站制作中如何插入一条彩色直线方法一: 首先在网页编辑窗口中插入一个一行一列的表格,然后在这个表格中插入一个1pixel × 1Pixel的透明图像(在dreameaver4中控制页面布局所使用的spacer image正是这样的图像,所以如果你不会用软件制作这样的图像,可在dreameaver4中如此生成Object面板,首先点选Objiect面板的View 中的layout view(布局视图),再点draw layout table,在网页编辑窗口中拖动生成一个布局表格(layout ta

js实现网站最上边可关闭的浮动广告条代码_javascript技巧

本文实例讲述了js实现网站最上边可关闭的浮动广告条.分享给大家供大家参考.具体如下: 这是一款广告条代码,平时浮动在网站最上边,可关闭,设计唯美简洁,带关闭按钮,自适应网页宽度,色调明了,相信有不少朋友会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-clase-able-adv-codes/ 具体代码如下: <html> <head> <title>网站页首可关闭广告条</ti

Photoshop制作常见的BANNER广告中国风水墨毛笔字

  Photoshop制作常见的BANNER广告中国风水墨毛笔字.今天的PS教程超级简单,建议零基础的同学试一下,效果也是一直很火的水墨毛笔字,特别好上手,5分钟内3个步骤轻松搞定,新手别错过咯. 我也不知道这种中国风字体设计Banner什么时候火爆起来.我觉得首先应该感谢淘宝,每当淘宝大促的时候必然有很多这样的风格的Banner充斥着你的眼球.有非常强烈的视觉冲击力,抓人眼球. 当然最近这种风格的海报大热必须感谢小米的雷总和格力的董小姐. 说了这么多,感觉做为一个设计师不去学会这种风格没法混设

网页中广告条的关闭方法

广告|网页 在FLASH广告条中加入关闭的按钮只要在按钮上加入quit退出的命令即可. on(release){fscommand("quit");} 现在在FLASH PLAYER中点击退出即可关闭FLASH PLAYER,但在网页中却不可以退出.在网页中要想直接实现退出是不可能的,不过我们可以利用层的隐藏属性来实现.具体插入层的方法这里就不多说,看看下面的代码吧. <div id='right' style='position: absolute; visibility:z-