您的位置: 首页 > 技术文档 > 网页制作 > Dreamweaver MX制作文字特效
Dreamweaver MX 2004 试用心得 回到列表 Dreamweaver实用七小招
 Dreamweaver MX制作文字特效

作者:纵横一笑 时间: 2003-09-25 文档类型:原创 来自:赛迪网

我们常用的网页制作工具Dreamweaver MX不仅可以制作网页,而且利用其中的CSS滤镜我们还可以对文字或图片进行简单的特效处理。下面我们就通过几个例子来看一看在Dreamweaver中是如何制作特效文字的。

光晕字
首先启动Dreamweaver,在新文档中插入一个1×1的表格,边框设置为0,然后在其中输入需要修饰的文字。

单击右面的浮动面板中的“设计→CSS样式”打开这一浮动面板。

面板右下角的四个按钮分别是:添加、新建、编辑以及删除CSS样式。

注意:在Dreamweaver中,CSS滤镜只能作用于有区域限制的对象,如表格、单元格、图片等,而不能直接用于文字,所以我们要把所需要增加特效的文字事先放在表格中,然后对表格应用CSS样式,从而使文字产生特殊效果。


(图1 新建CSS样式)

单击新建CSS样式按钮,弹出如图1的对话框。

“类型”项选择“创建自定义样式”,“定义在”选择“仅对该文档”,点确定后弹出CSS样式定义对话框(如图2),在类型面板中我们可以定义字体、字号、颜色等内容,本例中我们选择字体为隶书,大小50像素,颜色为白色。


(图2 定义CSS样式)

要产生文字特效,最重要的是在扩展面板(如图3)中的设置,在“视觉效果下”的过滤器中列出的就是所有的CSS滤镜,选择Glow滤镜,它可以使文字产生边缘发光的效果。Glow滤镜的语法格式为:Glow(Color=?, Strength=?),里面有两个参数:Color决定光晕的颜色,可以用如ffffff的十六进制代码,或者用Red、Yellow等单词表示;Strength表示发光强度,范围从0到255。本例中我们设置颜色为红色(Red),发光强度为8,然后确定。


(图3 设置好Glow滤镜)

下面我们将这个CSS样式应用到表格中。把光标移到单元格中,在文档窗
口左下角点击标签选中单元格,然后单击刚才在CSS样式面板中新建的样式,这时标签变为,表明已经对单元格应用了CSS样式。我们在文档窗口中看不出变化,按F12键在IE中预览,效果就出来了(如图4)。


(图4 光晕字效果)

怎么样?不次于在Photoshop中的滤镜效果吧。在网页里放上几个这样的特效字会让网页美观不少,而且我们也可以用PrintScreen键抓屏,然后在画图程序中粘贴保存使之成为单独的图片。

阴影字
有两种CSS滤镜能够使文字产生阴影效果,分别是Drowshadow和Shadow,它们产生的效果略有所不同。

制作阴影字的操作步骤与制作光晕字的过程基本相同,只要在CSS样式中重新选择一种过滤器即可。

Drowshadow滤镜的语法如下:DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 。

其中,Color表示投射阴影的颜色,用十六进制数来表示;OffX、OffY分别代表阴影偏离文字位置的量,单位为像素;Positive为一个逻辑值,1代表为所有不透明元素建立阴影,0代表为所有透明元素建立可见阴影。


(图5 阴影字效果)

例如把过滤器设置为DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1),产生的效果如图5。

遮罩字
CSS滤镜中还为我们提供了遮罩的功能,可以把文字部分处理成遮罩,如果在背景中使用合适的图片,就能产生漂亮的镂空文字效果。

文档窗口中插入一个1×1的表格,单击文档窗口左下角的标签选中整个表格,在属性检查器(如图6)的背景图像中选择一张合适的图片,然后在单元格中输入需要的文字。


(图6 在表格中插入一幅背景图片)

接下来我们为单元格添加Mask滤镜,步骤与前两例类似。在过滤器中选择Mask(Color=?),这个参数决定遮罩的颜色,我们选择用白色。

注意:本例中文字的颜色选择并不重要,因为在最终效果中文字会被镂空,颜色并不会显示出来。


(图7 遮罩字效果友)

设置完成后将这个CSS样式应用到单元格,然后按下F12键就可以看到效果了(如图7)。

注意:背景图片是为整个表格添加的,对应<table>标签,而CSS样式是对单元格添加的,是<td>标签,千万不要搞错。

动感字
制作动感字我们要用到Blur滤镜,作用是产生模糊效果,它的语法格式为Blur(Add=?, Direction=?, Strength=?)。Add参数是一个布尔值,一般来说,当滤镜用于图片的时候取0,用于文字的时候取1;Direction代表模糊方向,单位是角度;Strength代表模糊移动值,单位为像素。比如我们定义Blur(Add=1, Direction=90, Strength=150),在预览中就可以看到如图8的效果。


(图8 动感字效果友)

其实,CSS中很多滤镜也能够用于图片的修饰,如Blur滤镜就可以使图片产生模糊效果。如果我们对这些滤镜都能够熟练应用,那么有时在没有专业图像处理软件的情况下,也能够制作出相当不错的图片效果来。

出处:赛迪网
责任编辑:红色黑客

◎进入论坛网页制作网站综合版块参加讨论

相关文章 更多相关链接
Fireworks 营造残破纹理
DW中实现flash的透明背景
Dreamweaver制作网页幻灯片效果
Fw与Dw结合:看实例学切片
细品DW MX 2004表格设计
作者文章
Dreamweaver MX制作文字特效
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
全兼容的纯CSS级联菜单要点浅析
CSS Sprites 图片整合技术
雅安,一场中式旅行
热烈祝贺"醒狮杯"圆满结束
菊花宝典大赏大奖教程《阳台》
交互设计师怎样和产品团队合作
Photoshop打造个性潮流音乐海报
简单解读面包屑
CSS盒模型
Apple与Microsoft网站可用性研究
栏目最新 栏目最新列表
safari 4 新特性
Photoshop制作精美高光流线字
IE下img多余5像素空白解决方法
XHTML1.0与HTML兼容指引16条
JavaScript优化细节
全兼容的纯CSS级联菜单要点浅析
CSS Sprites 图片整合技术
Photoshop打造个性潮流音乐海报
CSS盒模型
45度地图编辑器及游戏开发心得

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文总共有 30 条评论,现在显示最新的 5 条。评分:- llllllllllllllllllll + 评分人数: 1 ,平均分: 2.00


lcx486 Publish at 2005-2-28 9:01:16 评分2
是啊,很好的又学了一招!!!
61.187.196.38 Publish at 2004-7-20 16:42:24
我试了试,但是没起什么作用。效果一点都没变的。是不是要在表格中才起作用啊?怪了。。我都是按上面说的作的。为什么?
218.6.62.61 Publish at 2004-6-17 16:39:51
很好啊!有时省了用PS做。
218.6.62.61 Publish at 2004-6-17 16:39:04
很好啊!有时省了用PS做。

61.237.149.89 Publish at 2004-6-9 15:46:38
不错,但是介绍的太少了。

查看全部评论

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
《美工神话》
《Flash短片轻松学》
Illustrator CS3质感绘画表现技法
大师之路--Photoshop 完全解析
《用户体验要素》
HTML与CSS入门经典(第7版)
作品集 更多内容

光影练习01 家居城 变态金刚 WESBROOK 毕业设计。 万达2稿 变态金刚 华硕(Asus)手机 Zt23