首页  学校文化  作品展示  咨询留言  课程介绍  招聘求职  权威认证  精彩教程
咨询留言
在线报名
对外事业
您当前的位置:长城教育网 >> 精彩教程 >> 网页设计 >> 正文
长城学校暑期八折优惠招生 长城学校大专学历、中专学历证书班招生-学历网上可查 长城学校对外事业部承揽业务
利用DW4.0制作滚动公告栏
作者:长城学校     来源:长城教育网     点击数:     更新时间:2007-4-21   
  文章导读:
大家都知道,利用网页制作利器DW 4.0,可以轻松地设计出许多具有动态效果的网页。“滚动公告板”是大家常见的一种很好的信息发布形式,而在DW 4.0 中,综合利用“图层”和“时间轴”的制作技巧,就可以做出“浮动”在网页上面,可以任意拖动位置的滚动公告板,下面我们来看看这个效果的实现步骤。
导读广告

算机学校 唐山电脑学校 唐山计算机学校

正文:

1. 首先,我们准备一张背景图片bg.gif,作为滚动公告栏的样式。打开DW 4.0,单击对象浮动工具栏中的图层工具,在网页中插入一个图层Layer1,设置这个图层和图片bg.gif相同大小,然后将bg.gif设置为图层背景。这样图层Layer1就成为滚动面板的样式。

  2. 接下来我们需要在这块面板上定义出滚动文字区域的位置,这就需要在公告栏背景图层Layer1上叠加一个图层Layer2。方法是单击对象浮动工具栏中的图层工具,按住“Alt”键不放,然后在Layer1上需要显示滚动文字的区域拖动鼠标,画出图层Layer2。

  3.接下来需要绘制可以在Layer2区域中滚动的文字层,用和第2步同样的方法,在Layer2中绘制一个图层Layer3,注意在这里Layer3的宽度必需小于Layer2的宽度,而长度可以不限,根据文本内容的长度自由调节。如果上面的操作无误的话,这时3个图层在Layers(图层)浮动窗口中显示的层极关系。

  4. 现在,滚动板的基本框架已经完成,接下来我们在Layer3中加入所需要发布的文字内容。单击Layer3的标签,出现它的属性栏如图3所示,在属性栏中设置Clip(剪辑)项,使文本的显示区域占满Layer3,这里设置L(左)、T(上)值为0,而R(右)、B(下)的值分别和Leyer3的W(宽)、H(高)相同。

  5. 在Layer3中输入发布的文字内容后,下一步就是让这些内容“滚动”起来。利用DW4.0的Timelines可以轻松地实现。打开Timelines面板,并把图层Layer3拖动到Timelines中。通常的滚动消息是从下到上逐行滚动的,因此,在这里我们先单击Timelines的第一帧,把Layer3拖动到Layer2的最下方的位置;然后单击Timelines的最后一帧,把Layer3拖动到Layer2最上方的位置,这样Layer3就会在Timelines的第一帧和最后一帧之间从Layer2的下方出现,滚动到上方消失。拖动Timelines中的播放块可以看到运动效果。

  接下来调整文本滚动的速度,一般情况下,在Timelines中设置动画速度为2Fps(2帧/秒)比较合适,同时动画的长度设置得越长,则整体播放速度越慢。可以通过不同的尝试以达到最佳的效果。然后,勾选Timelines面板上的Autoplay(自动播放)和Loop(循环)复选框,这样在网页加载时文本就会自动反复滚动。


6. 最后,我们让这个浮动的滚动公告可以被鼠标拖动。用鼠标在Timelines的Behaviors(行为)轨道(即最上面一条轨道)的第一帧位置双击,弹出Behaviors窗口,单击行为窗口左上方的“+”按钮,在下拉菜单中选择Drag layer(拖动层),在弹出的菜单中选择层 “Layer1”→拖动 “不限制”,确认即可。

  这样,一个可以拖动的滚动公告栏就制作成功了。可以直接保存为网页或者按“F12”键预览。另外,按上面第1步到第5步的步骤设置好层之后,利用Timeline还可以制作出在网页中自动漂移的公告栏,多作灵活的尝试,大家就可以用DW4.0创作出更多的精彩。
<--begin vote--><-- #EndEditable -->

长城计学校 长城教育版权所有 唐山电脑学校 唐山计算机学校

  文章录入:长城学校
  • 上一篇文章: Flash基础开发习惯(二)

  • 下一篇文章: 没有了
  • 我要咨询   我要报名   打印此文  关闭窗口
    热门文章
    推荐文章
    相关文章
    在Photoshop中关于文字的25条技巧...
    在Photoshop中关于文字的25条技巧...
    关于Photoshop中命令的21条技巧(...
    卡巴斯基几种实用的使用方法
    系统安全之对IE浏览器优化设置 (...
    系统安全之对IE浏览器优化设置 (...
    系统安全之对IE浏览器优化设置 (...
    系统安全之对IE浏览器优化设置 (...
     普通 忘记Windows XP登录密码的解决方...
     普通 怎样制作刻录系统自动还原光碟
     普通 显示器故障要这样修 六种完美解决...
     普通 显示器故障要这样修 六种完美解决...
     普通 零磁道损坏的修复
     普通 硬盘损抢修数据
     普通 Windows XP系统不能正常关机的解...
     普通 突破难“关”-Windows XP关机故障...
     推荐 Adobe InDesign CS 简介
     推荐 电脑艺术设计大师之路#7-图像调...
     推荐 电脑艺术设计大师之路#6-图像调...
     推荐 3DS Max 7 Mental Ray渲染器全攻...
     推荐 电脑艺术设计大师之路#5-探索图...
     推荐 用Photoshop设计微形3D界面01
     推荐 3DS Max 7 Mental Ray渲染器全攻...
     推荐 Firewoks 营造残破纹理02
     
     
     
     
     
    设为首页 | 加入收藏 | 关于学校|  对外事业 | 联系站长 | 友情链接 | 咨询留言