收藏 分享(赏)

Dreamweaver超级技巧之文字特效.doc

上传人:gnk289057 文档编号:6837031 上传时间:2019-04-23 格式:DOC 页数:4 大小:261.50KB
下载 相关 举报
Dreamweaver超级技巧之文字特效.doc_第1页
第1页 / 共4页
Dreamweaver超级技巧之文字特效.doc_第2页
第2页 / 共4页
Dreamweaver超级技巧之文字特效.doc_第3页
第3页 / 共4页
Dreamweaver超级技巧之文字特效.doc_第4页
第4页 / 共4页
亲,该文档总共4页,全部预览完了,如果喜欢就下载吧!
资源描述

1、Dreamweaver 超级技巧之文字特效我们常用的网页制作工具 Dreamweaver MX 不仅可以制作网页,而且利用其中的 CSS 滤镜我们还可以对文字或图片进行简单的特效处理。下面我们就通过几个例子来看一看在 Dreamweaver 中是如何制作特效文字的。光晕字首先启动 Dreamweaver,在新文档中插入一个 11 的表格,边框设置为 0,然后在其中输入需要修饰的文字。单击右面的浮动面板中的“设计CSS 样式”打开这一浮动面板。面板右下角的四个按钮分别是:添加、新建、编辑以及删除 CSS 样式。注意:在 Dreamweaver 中,CSS 滤镜只能作用于有区域限制的对象,如表格、

2、单元格、图片等,而不能直接用于文字,所以我们要把所需要增加特效的文字事先放在表格中,然后对表格应用 CSS 样式,从而使文字产生特殊效果。图 1 新建 CSS 样式单击新建 CSS 样式按钮,弹出如图 1 的对话框。“类型”项选择“创建自定义样式”,“定义在”选择“仅对该文档”,点确定后弹出 CSS 样式定义对话框(如图 2),在类型面板中我们可以定义字体、字号、颜色等内容,本例中我们选择字体为隶书,大小 50 像素,颜色为白色。图 2 定义 CSS 样式要产生文字特效,最重要的是在扩展面板(如图 3)中的设置,在 “视觉效果下”的过滤器中列出的就是所有的 CSS 滤镜,选择 Glow 滤镜,

3、它可以使文字产生边缘发光的效果。Glow 滤镜的语法格式为:Glow(Color=?, Strength=?),里面有两个参数:Color 决定光晕的颜色,可以用如 ffffff 的十六进制代码,或者用 Red、Yellow 等单词表示; Strength 表示发光强度,范围从 0 到 255。本例中我们设置颜色为红色(Red),发光强度为 8,然后确定。下面我们将这个 CSS 样式应用到表格中。把光标移到单元格中,在文档窗口左下角点击标签选中单元格,然后单击刚才在 CSS 样式面板中新建的样式,这时标签变为,表明已经对单元格应用了 CSS 样式。我们在文档窗口中看不出变化,按 F12 键在

4、IE 中预览,效果就出来了(如图 4)。怎么样?不次于在 Photoshop 中的滤镜效果吧。在网页里放上几个这样的特效字会让网页美观不少,而且我们也可以用 PrintScreen 键抓屏,然后在画图程序中粘贴保存使之成为单独的图片。阴影字有两种 CSS 滤镜能够使文字产生阴影效果,分别是 Drowshadow 和 Shadow,它们产生的效果略有所不同。制作阴影字的操作步骤与制作光晕字的过程基本相同,只要在 CSS 样式中重新选择一种过滤器即可。Drowshadow 滤镜的语法如下:DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 。其中,Col

5、or 表示投射阴影的颜色,用十六进制数来表示;OffX、OffY 分别代表阴影偏离文字位置的量,单位为像素;Positive 为一个逻辑值,1 代表为所有不透明元素建立阴影,0 代表为所有透明元素建立可见阴影。图 5 阴影字效果例如把过滤器设置为 DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1),产生的效果如图5。遮罩字CSS 滤镜中还为我们提供了遮罩的功能,可以把文字部分处理成遮罩,如果在背景中使用合适的图片,就能产生漂亮的镂空文字效果。文档窗口中插入一个 11 的表格,单击文档窗口左下角的标签选中整个表格,在属性检查器(如图6)的背景

6、图像中选择一张合适的图片,然后在单元格中输入需要的文字。图 6接下来我们为单元格添加 Mask 滤镜,步骤与前两例类似。在过滤器中选择 Mask(Color=?),这个参数决定遮罩的颜色,我们选择用白色。注意:本例中文字的颜色选择并不重要,因为在最终效果中文字会被镂空,颜色并不会显示出来。图 7 遮罩字效果友设置完成后将这个 CSS 样式应用到单元格,然后按下 F12 键就可以看到效果了(如图 7)。注意:背景图片是为整个表格添加的,对应 标签,而 CSS 样式是对单元格添加的,是 标签,千万不要搞错。动感字制作动感字我们要用到 Blur 滤镜,作用是产生模糊效果,它的语法格式为 Blur(Add=?, Direction=?, Strength=?)。Add 参数是一个布尔值,一般来说,当滤镜用于图片的时候取 0,用于文字的时候取1;Direction 代表模糊方向,单位是角度;Strength 代表模糊移动值,单位为像素。比如我们定义 Blur(Add=1, Direction=90, Strength=150),在预览中就可以看到如图 8 的效果。图 8 动感字效果友其实,CSS 中很多滤镜也能够用于图片的修饰,如 Blur 滤镜就可以使图片产生模糊效果。如果我们对这些滤镜都能够熟练应用,那么有时在没有专业图像处理软件的情况下,也能够制作出相当不错的图片效果来。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 管理学资料

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报