巧用Dreamweaver MX设计导航栏特效 - Dreamweaver - 八月网
内容字号：
段落设置：
字体设置：
巧用Dreamweaver MX设计导航栏特效
时间： 05:46:37 来源：八月网人气：评论：
&　　关于导航栏的设计有很多特效，但你浏览过这样一种导航栏特效吗?当鼠标移到导航栏目上时，导航栏目会被一层蒙版所遮盖，而鼠标移开时蒙版也随之移开。该特效其实可以在Dreamweaver MX中设置两个CSS属性分别控制，当鼠标移到和移开导航栏目时显示背景图片，并设置导航栏表格的鼠标响应事件即能实现。当然背景图片至关重要，需要一张动态的、可长短交替变换的GIF图片，可以用Fireworks制作该图片。
　　制作背景效果图
　　在Fireworks中新建一个170&17像素、背景为透明的文档。更改油漆桶填充颜色为淡灰色(#F1F1EF)，选取工具栏Rectangle Tool工具，使用该色将编辑可视区画一个矩形。再次更改油漆桶填充颜色为黄褐色(#FF9900)，以同样的方法在图片最左侧画一个小矩形(如图1)。最后导出GIF图片并命名为mouseover.gif，以后用作鼠标移到导航栏目上时显示的背景图片。
　　在这张做好效果图基础上，制作鼠标移开时的动态GIF效果图。执行菜单Windows/Frames命令打开帧控制面板，点击四次面板下部New Frame按钮添加四帧，添加这四帧作用是：在每一帧上设置由长到短的淡灰色(#F1F1EF)背景层图片以实现动态变换效果。选取第一帧图片中的淡灰色背景层图片，单击帧面板右上角三角形按钮，执行弹出菜单Copy to Frame命令，在Copy to Frames对话框中选择All Frames确认将淡灰色背景层图片复制到各帧中，当然别忘记也将黄褐色(#FF9900)矩形层图片也复制到各帧中。选取第一帧图片，使用鼠标调整淡灰色背景层图片大小至编辑可视区域右侧1/5处。同理调整2、3、4帧淡灰色背景层图片逐渐变短至消失于左侧黄褐色小矩形中，选取油漆桶填充颜色为深紫色(#003366)，填充黄褐色小矩形为该色。为了使效果更加流畅，双击帧控制面板各帧后时间延迟参数，将其设置为8(如图2)。最后导出mouseout.gif动画文件。
分享给小伙伴们：
本类最新文章您当前所在位置： >
> 网页设计
Dreamweaver文字特效的制作方法介绍
大家知道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)。注意：背景图片是为整个表格添加的，对应标签，千万不要搞错。动感字制作动感字我们要用到Blur滤镜，作用是产生模糊效果，它的语法格式为Blur(Add=?, Direction=?, Strength=?)。Add参数是一个布尔值，一般来说，当滤镜用于图片的时候取0，用于文字的时候取1;Direction代表模糊方向，单位是角度;Strength代表模糊移动值，单位为像素。比如我们定义Blur(Add=1, Direction=90, Strength=150)，在预览中就可以看到如图8的效果。图8 动感字效果相信大家已经学会Dreamweaver文字特效的制作方法了吧!感谢大家对我们网站的支持!相关推荐：&
上一篇：下一篇：
本文相关阅读
高校查询分数线
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
地区批次线查询
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
科目理科文科综合其他
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
院校所在地北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
其它中央部委
类型工科农业师范民族
层次本科高职(专科)
高考志愿③部曲
频道热门推荐
栏目最新更新如何用Dreamweaver MX制作文字特效
如何用Dreamweaver MX制作文字特效：
&&&&&&& 我们常用的网页制作工具Dreamweaver MX不仅可以制作网页，而且利用其中的CSS滤镜我们还可以对文字或图片进行简单的特效处理。下面我们就通过几个例子来看一看在Dreamweaver中是如何制作特效文字的。
　　光晕字
　　首先启动Dreamweaver，在新文档中插入一个1&1的表格，边框设置为0，然后在其中输入需要修饰的文字。
　　单击右面的浮动面板中的&设计&CSS样式&打开这一浮动面板。
　　面板右下角的四个按钮分别是：添加、新建、编辑以及删除CSS样式。
　　注意：在Dreamweaver中，CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接用于文字，所以我们要把所需要增加特效的文字事先放在表格中，然后对表格应用CSS样式，从而使文字产生特殊效果。
&新建CSS样式
　　单击新建CSS样式按钮，弹出如图1的对话框。
　　&类型&项选择&创建自定义样式&，&定义在&选择&仅对该文档&，点确定后弹出CSS样式定义对话框，在类型面板中我们可以定义字体、字号、颜色等内容，本例中我们选择字体为隶书，大小50像素，颜色为白色。
&定义CSS样式
　　要产生文字特效，最重要的是在扩展面板（如图3）中的设置，在&视觉效果下&的过滤器中列出的就是所有的CSS滤镜，选择Glow滤镜，它可以使文字产生边缘发光的效果。Glow滤镜的语法格式为：Glow(Color=?, Strength=?)，里面有两个参数：Color决定光晕的颜色，可以用如ffffff的十六进制代码，或者用Red、Yellow等单词表示；Strength表示发光强度，范围从0到255。本例中我们设置颜色为红色（Red），发光强度为8，然后确定。
&设置好Glow滤镜
　　下面我们将这个CSS样式应用到表格中。把光标移到单元格中，在文档窗
口左下角点击标签选中单元格，然后单击刚才在CSS样式面板中新建的样式，这时标签变为，表明已经对单元格应用了CSS样式。我们在文档窗口中看不出变化，按F12键在IE中预览，效果就出来了。
&光晕字效果
　　怎么样？不次于在Photoshop中的滤镜效果吧。在网页里放上几个这样的特效字会让网页美观不少，而且我们也可以用PrintScreen键抓屏，然后在画图程序中粘贴保存使之成为单独的图片。
　　阴影字
　　有两种CSS滤镜能够使文字产生阴影效果，分别是Drowshadow和Shadow，它们产生的效果略有所不同。
　　制作阴影字的操作步骤与制作光晕字的过程基本相同，只要在CSS样式中重新选择一种过滤器即可。
　　Drowshadow滤镜的语法如下：DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 。
　　其中，Color表示投射阴影的颜色，用十六进制数来表示；OffX、OffY分别代表阴影偏离文字位置的量，单位为像素；Positive为一个逻辑值，1代表为所有不透明元素建立阴影，0代表为所有透明元素建立可见阴影
&阴影字效果
　　例如把过滤器设置为DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1)，产生的效果。
　　遮罩字
　　CSS滤镜中还为我们提供了遮罩的功能，可以把文字部分处理成遮罩，如果在背景中使用合适的图片，就能产生漂亮的镂空文字效果。
　　文档窗口中插入一个1&1的表格，单击文档窗口左下角的标签选中整个表格，在属性检查器的背景图像中选择一张合适的图片，然后在单元格中输入需要的文字。
&在表格中插入一幅背景图片
　　接下来我们为单元格添加Mask滤镜，步骤与前两例类似。在过滤器中选择Mask(Color=?)，这个参数决定遮罩的颜色，我们选择用白色。
　　注意：本例中文字的颜色选择并不重要，因为在最终效果中文字会被镂空，颜色并不会显示出来。
&遮罩字效果友
　　设置完成后将这个CSS样式应用到单元格，然后按下F12键就可以看到效果了。
　　注意：背景图片是为整个表格添加的，对应＜table＞标签，而CSS样式是对单元格添加的，是＜td＞标签，千万不要搞错。
　　动感字
　　制作动感字我们要用到Blur滤镜，作用是产生模糊效果，它的语法格式为Blur(Add=?, Direction=?, Strength=?)。Add参数是一个布尔值，一般来说，当滤镜用于图片的时候取0，用于文字的时候取1；Direction代表模糊方向，单位是角度；Strength代表模糊移动值，单位为像素。比如我们定义Blur(Add=1, Direction=90, Strength=150)，在预览中就可以看到如图8的效果。
&动感字效果友
　　其实，CSS中很多滤镜也能够用于图片的修饰，如Blur滤镜就可以使图片产生模糊效果。如果我们对这些滤镜都能够熟练应用，那么有时在没有专业图像处理软件的情况下，也能够制作出相当不错的图片效果来。
阅读本文后您有什么感想? 已有
人给出评价!
11-09-2211-07-2311-03-2111-03-0310-03-2909-08-2109-08-0609-04-18
注：您的评论需要经过审核才会显示出来
没有查询到任何记录。
Copyright &
PC6下载().All Rights Reserved
备案编号:湘ICP备号Dreamweaver超级技巧之文字特效_Dreamweaver教程_
Dreamweaver超级技巧之文字特效
来源：人气：31248
　　应用目标：制作文字特效
　　应用软件： MX
　　操作难度：★★☆☆☆
　　我们常用的网页制作工具Dreamweaver MX不仅可以制作网页，而且利用其中的滤镜我们还可以对文字或图片进行简单的特效处理。下面我们就通过几个例子来看一看在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 光晕字效果
　　怎么样?不次于在中的滤镜效果吧。在网页里放上几个这样的特效字会让网页美观不少，而且我们也可以用intScreen键抓屏，然后在画图程序中粘贴保存使之成为单独的图片。
　　阴影字
　　有两种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)的背景图像中选择一张合适的图片，然后在单元格中输入需要的文字。
　　接下来我们为单元格添加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滤镜就可以使图片产生模糊效果。如果我们对这些滤镜都能够熟练应用，那么有时在没有专业图像处理软件的情况下，也能够制作出相当不错的图片效果来。
优质网站模板