首页 新闻 搜索 短信 分类 聊天 导航
上移动梦网
赢手机大奖

新浪首页 > 科技时代 > 网上学园 > 主页制作 > 正文
让页面“活”起来--文字特效举例

http://www.sina.com.cn 2002/01/23 14:17 赛迪网--中国电脑教育报

  文/张策

  文字是网页必不可少的元素,但是死气沉沉的文字不免使人感到有些死板。那么为什么不让这些文字动起来呢?使用滚动字幕不但会提高你的网页的技术含量,使网页增添几分色彩,而且还会使网页节省出许多空间。可谓是一举两得。既然这样何乐而不为呢!好的,那么说做就做。

  滚动字幕可分为两种:一种是横向的,另一种是纵向的。

  横向滚动字幕

  效果:单行文字左右方向移动。

  原理:在FrontPage中可以直接在菜单中选取“插入\组件\字幕”中进行相关的设置就可以制作出滚动字幕。在Deamweaver中没有现成的工具来生成这种滚动字幕,别着急我们在网页的HTML原代码中添上几笔就可以实现字幕的滚动效果。

  操作步骤:

  1、新建网页文件并保存。

  2、在你要插入字幕的位置上插入一个一行一列的表格,大小依据文字的大小而定,并把光标停留在表格内。

  3、点击窗口左上角的“Show Code and Design Views”按钮打开原代码窗口,在光标所在位置写下如下原代码:

  < marquee class=l>< font color=#ff0000>

  < font color=#9999ff>★< /font>

  < font color=#ff0000>欢迎您来到我的主页!!!< /font>★★★< font color=#9999ff>★ < /font>< /font>< /marquee>

  说明:其中是设计滚动字幕的标签。是设计文字或符号的颜色的命令。有时还可以应用标签设定文字的飞出方向。

  4、保存。按“F12”键进行预览,感觉一定不错吧!

  纵向滚动字幕

  效果:电视剧的片尾字幕可以说是大家再熟悉不过的了,当你看到从下至上的文字鱼贯而出时,有没有想到有一天你也可以做出这样的效果来,下面的文章就帮你自己动手制作出来这种滚动字幕来。

  原理:它的原理是应用两个层之间的遮罩和应用“Timeline”时间线设置文字层的移动来实现滚动网页的效果的。

  操作步骤:

  1、建立网页并保存。

  2、点击“Common”工具栏中的“Draw Layer”按钮,在编辑窗口中拖出3个层,其中2个作为遮罩层,1个作为滚动层。

  说明:应在遮罩层上填上颜色并将它的宽度设计的大一些,使其能够遮住滚动层。

  3、在滚动层上输入你要设计滚动的文字。点击“Windows\Layers”调出层面板,在层面板中将文字层拖动到遮罩层之下。使之能达到如图1的效果。


图1

  4、点击“Windows\Timeline”调出时间线面板来设置滚动字幕的移动。

  5、两个遮罩层按上下位放在编辑窗口中,中间留出一部分空间作为滚动字幕的空间。把滚动层放在下方的遮罩层之下,并拖动该层的回字型柄将其添加到时间线的第一帧的位置(如图2),确定好移动层的起始位置。为了让滚动层的滚动速度慢一些,我们可以将右侧的关键帧拖动到150帧的位置。将第150帧获得焦点并拖动滚动层的回字型柄将其移动到上面的遮罩层之下。并使滚动层完全被覆盖,确定好滚动层的终末位置。


图2

  6、将时间线面板上的“Loop”、“Auto Play”两个复选框打上勾。

  7、调整网页背景使其与遮罩层适应。

  8、保存文件预览。

  这里只介绍了滚动字幕的基本制作原理,与形成美观的网页还有一定的差距,那么大家行动起来吧!发挥自己的想像力,去制作出有自己特色的滚动字幕来。(责任编辑 Ardeler)


  


发表评论】【初学者园地】【科技聊天】【关闭窗口

新 闻 查 询

 相关链接
运动美 Flash特效文字动画工具 (2002/01/15 18:51)
用Photoshop制作“舞蹈”特效文字 (2002/01/09 15:42)
用FontTwister快速制作文字特效 (2002/01/08 11:16)
Photoshop画笔也能制作特效文字 (2001/11/27 15:35)
JavaScript标题栏文字滚动特效 (2001/09/05 09:56)


科技时代意见反馈留言板 电话:010-82612286 或 010-82628888-3488   欢迎批评指正

网站简介 | 用户注册 | 广告服务 | 招聘信息 | 中文阅读 | Richwin | 联系方式 | 帮助信息

Copyright © 1996 - 2002 SINA.com, Stone Rich Sight. All Rights Reserved

版权所有 四通利方 新浪网