相关文章
45个影响网站排名的因素
购买虚拟主机应注意的几点
网站制作网页设计中如何让CSS控制网页背景？
北京网站设计把BLOG上传到远程空间-Dreamweaver构建Blog
北京网站制作Dreamweaver 8图文快报
网站制作网页Flash动画文件无法显示的解决方法
北京网站设计全Flash网站制作剖析
网页设计dreamweaver mx教程二十:将模板应用到页面
北京网页设计Windows桌面风格页面制作点滴(1)
北京网站建设CSS入门
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网站制作如何制作会移动的广告条
北京网站制作如何制作会移动的广告条
作者： 北京网站建设 日期：2008-03-27 06:03:35 来源： http://www.qt-net.com
资深北京网站建设公司企通互联,专业致力于北京网站建设,北京网站制作,北京网站设计 企通互联,北京网页设计领域,千余网站建设案例，公司拥有国内一流的网站建设、网站制作、网页设计团队，如果您已经有网站的,看看我们精美的网站建设案例也无妨.北京网站建设网址：http://www.qt-net.com
=======================================================================================
在许多网页中，当鼠标移到一张图片上时，又弹出另一张图片，做这种广告条，要用到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键预览。北京网站制作
www.qt-net.com
接下来，我们要进行一系列美化工作，因为这个简单的直线运动效果并不美观，而且广告图片也没有产生变化。北京网站设计
网页设计
三、改变时间栏的属性产生移动变化 北京网站制作 网页设计
www.qt-net.com
（1）在动画移动距离不变的情况下，改名动画移动速度。因为我们拉层进时间轴面板起始时候的帧数是默认的15帧，在上面预览时候就感到速度有点快。要改变速度，我们就得改变动画总共帧数。鼠标左击选中“时间轴面板”中的“第一频道”结束帧不放，向右拖动至你所想要的结束帧，例如75帧处，放开鼠标。此时，结束帧的空白小圆也移至到了第75帧处。按F12预览一下，动画的移动速度明显变慢。但是要注意的是我们只是在保持动画运动轨迹的长度不变的情况下，改变了动画移动的速度，即时间轴上的帧数。如果在同时改变改变起始和结束帧层的位置，就会产生各种不同速度效果，读者可以自己试着尝试。北京网页设计
北京网站设计
（2）产生曲线的运动。上面做的动画只是简单的直线运动，如果改变成曲线的运动，美观程度就大大的加强了。曲线运动中最主要的就是关键帧的设置（只要学习过flash的，这点非常容易理解）。北京网站制作
北京网站制作
a.在“时间轴面板动画栏”上添加一个关键帧: 选择动画栏的第一频道中你想要添加关键帧处， 单击鼠标右健，选择“add keyframe”,即刻在插入点位置添加一个关键帧。北京网站建设 北京网站建设
北京网页设计
b.在添加的关键帧处移动层：在保证选中了后来添加的关键帧下，选择页面中的层，移动层至你所想要的地方。此时直线变化成了曲线。你可以多添加几个关键帧，再移动层，使产生的曲线移动更加光滑。按F12键预览，曲线效果是不是比以前的直线效果好多了？企通互联
企通互联
另附：在使用Dreamweaver4(英文版 www.qt-net.com)的过程中，一次想用layer作动态广告，但无论如何都无法插入layer和table，但无论是重新安装还是汉化都无法使用，由于同事使用过，而且同事也正在学习英文版，因此我想是不是在哪个地方的设置被修改的原因呢？找完所有的设置才发现：只要把 “view菜单下的table view --> layout view修改为standard view,就可以插入layer和table了。网站制作
网站设计
|
|
企通互联
一、用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键预览。北京网站制作
www.qt-net.com
接下来，我们要进行一系列美化工作，因为这个简单的直线运动效果并不美观，而且广告图片也没有产生变化。北京网站设计
网页设计
三、改变时间栏的属性产生移动变化 北京网站制作 网页设计
www.qt-net.com
（1）在动画移动距离不变的情况下，改名动画移动速度。因为我们拉层进时间轴面板起始时候的帧数是默认的15帧，在上面预览时候就感到速度有点快。要改变速度，我们就得改变动画总共帧数。鼠标左击选中“时间轴面板”中的“第一频道”结束帧不放，向右拖动至你所想要的结束帧，例如75帧处，放开鼠标。此时，结束帧的空白小圆也移至到了第75帧处。按F12预览一下，动画的移动速度明显变慢。但是要注意的是我们只是在保持动画运动轨迹的长度不变的情况下，改变了动画移动的速度，即时间轴上的帧数。如果在同时改变改变起始和结束帧层的位置，就会产生各种不同速度效果，读者可以自己试着尝试。北京网页设计
北京网站设计
（2）产生曲线的运动。上面做的动画只是简单的直线运动，如果改变成曲线的运动，美观程度就大大的加强了。曲线运动中最主要的就是关键帧的设置（只要学习过flash的，这点非常容易理解）。北京网站制作
北京网站制作
a.在“时间轴面板动画栏”上添加一个关键帧: 选择动画栏的第一频道中你想要添加关键帧处， 单击鼠标右健，选择“add keyframe”,即刻在插入点位置添加一个关键帧。北京网站建设 北京网站建设
北京网页设计
b.在添加的关键帧处移动层：在保证选中了后来添加的关键帧下，选择页面中的层，移动层至你所想要的地方。此时直线变化成了曲线。你可以多添加几个关键帧，再移动层，使产生的曲线移动更加光滑。按F12键预览，曲线效果是不是比以前的直线效果好多了？企通互联
企通互联
另附：在使用Dreamweaver4(英文版 www.qt-net.com)的过程中，一次想用layer作动态广告，但无论如何都无法插入layer和table，但无论是重新安装还是汉化都无法使用，由于同事使用过，而且同事也正在学习英文版，因此我想是不是在哪个地方的设置被修改的原因呢？找完所有的设置才发现：只要把 “view菜单下的table view --> layout view修改为standard view,就可以插入layer和table了。网站制作
网站设计
上一篇：北京网站设计用DreamWeaver定制网站的颜色
下一篇：网站建设dreamweaver mx教程二十五:几种CSS样式