首页 > 正在进行安全检测...

正在进行安全检测...

发布时间：2024-01-09 18:02:10 来源：文档文库

小中大

字号：

手机查看

Dreamweaver制作会移动的广告条关键词：DreamWeaver,,你上新浪网首页会看见它页面中有个飘来飘去的广告条，鼠标移上去，还会变成另外的宣传图片。这个广告条没有占用页面的空间，它独立在页面之上，的确是个发布广告条的好方法。那么，这个会移动的广告条到底是如何做成的呢？下面，请跟我一步步学做，看完教材，你也就会自己做了。做这个广告条，要用到MacromediaDreamWeaver中的Layer(层和Timeline(时间轴功能，还得准备两张大小基本相同的广告图片。我们已最新版本DreamWeaver4.0为例，制作移动的广告条。
一、用DreamWeaver打开任意一个网页，空白页也可。在菜单中选择“插入Insert”->“层Layer”,即看到网页中多了一个空白Layer1，你也可以为他命名。再将光标点到空白Layer1内，选择“插入Insert”->“图像Image”，插入你的广告条的第一个图片，调整层大小，使层尽可能与图片大小相近，并设置图片链接。然后把层移到动画的起始位置。二、在菜单栏选择“修改Modify”->“时间轴Timeline”->“添加对象到时间轴AddobjecttoTimeline”。点击后，弹出对话框，告诉你只有图象和层才能添加到时间轴。对话框按确定后，我们选中Layer（单击层标记或层边界，或用层面板选择一层，当一个层被选中时，层边界会显示出调整大小手柄，按住鼠标左键不放，拖进时间轴动画栏的第一频道，即面板上竖写1，2，3等等的“1”那行，时间轴里面马上增加了一个默认的15帧动画。
然后，单击动画栏最后关键帧标记，再选中页面中的层Layer1，将它拖动到动画的结束点，或者在“层的属性面板”改变层的“左L”属性大小来确定结束帧层的位置。此时，页面中显示了从动画起始位置到结束位置有一线条，这就是层的运动轨迹。要想让页面打开时候它就开始运动，就在“时间轴TimeLine”面板上的“自动播放Autoplay”前打勾，按在时间轴上中部的“->”箭头不放，就可以直接预览这直线动画了，或者按下F12键预览。
接下来，我们要进行一系列美化工作，因为这个简单的直线运动效果并不美观，而且广告图片也没有产生变化。三、改变时间栏的属性产生移动变化
（1）在动画移动距离不变的情况下，改名动画移动速度。因为我们拉层进时间轴面板起始时候的帧数是默认的15帧，在上面预览时候就感到速度有点快。要改变速度，我们就得改变动画总共帧数。鼠标左击选中“时间轴面板”中的“第一频道”结束帧不放，向右拖动至你所想要的结束帧，例如75帧处，放开鼠标。此时，结束帧的空白小圆也移至到了第75帧处。按F12预览一下，动画的移动速度明显变慢。但是要注意的是我们只是在保持动画运动轨迹的长度不变的情况
下，改变了动画移动的速度，即时间轴上的帧数。如果在同时改变改变起始和结束帧层的位置，就会产生各种不同速度效果，读者可以自己试着尝试。（2）产生曲线的运动。上面做的动画只是简单的直线运动，如果改变成曲线的运动，美观程度就大大的加强了。曲线运动中最主要的就是关键帧的设置。a.在“时间轴面板动画栏”上添加一个关键帧:选择动画栏的第一频道中你想要添加关键帧处，按住Control键单击，即刻在插入点位置添加一个关键帧。或者鼠标右击选择动画栏的第一频道中你想要添加关键帧处，在弹出的快捷菜单里面选择“添加关键帧AddKeyframe”，也可以加入关键帧。
b.在添加的关键帧处移动层：在保证选中了后来添加的关键帧下，选择页面中的层，移动层至你所想要的地方。此时直线变化成了曲线。你可以多添加几个关键帧，再移动层，使产生的曲线移动更加光滑。按F12键预览，曲线效果是不是比以前的直线效果好多了？
c.直接通过拖动层，生成路径，产生动画。从最初的插入一个层后->选中该层，并一直保持该层被选中状态->移动层到动画起始位置->打开菜单“修改Modify”->“时间轴Timeline”->“录制层移动路径RecordPathofLayer”->在页面上拖动层，创建想要的运动路径->在动画结束处松开鼠标，时间轴内自动生成了一个动画栏，并且定义了一定数目的关键帧。四、添加鼠标触发属性，产生广告图片的交替变化

鼠标触发的各种属性，能产生各种变化。这里我们要用到的是onMouseout和onMouseover两个属性。
打开菜单“窗口Windows”->选择“行为Behaviors”->弹出“行为”窗口->选中层中的广告图片->点击“行为”窗口中的“+”->在弹出的菜单里面选择“对调图象”
在“对调图象”对话框里面浏览选择你的广告图片所在路径->在“对调图象”对话框里系统默认中有个“onMouseout复原图象”前是打勾的->直接按“确定”按钮
“行为”状态窗中多了我们前面说到的onMouseout和onMouseover两个鼠标触发事件。按F12预览，移动鼠标到图片上，看看是不是图片变化了？再移开鼠标，又恢复到原来的图片。这样简单的图片交替行为就完成了五、最后思考的细节
a.关于路径长度。假设动画是从上之下的，网页高度超过一屏，如果路径没有足够长，那么网页被快速浏览到下一屏的时候就看不到上面的层动画。

本文来源：https://www.2haoxitong.net/k/doc/7c6749cd2cc58bd63186bd12.html