用户名: 密码: 免费注册 忘记密码? 网站地图 | 加入收藏 | 设为首页
首页 | 新闻 | 工具 | 系统 | 办公 | 聊天 | 多媒体 | 网页 | 运营 | 平面 | 欣赏 | 数据库 | 程序 | 服务器 | 组网
网页 | 3dmax | Ghost | Windows Xp| Dreamweaver | photoshop | Flash | office | Alexa | Css | QQ | Asp | PHP | Jsp | Access
Flash MX 2004入门 | 网站推广策略 | CorelDRAW入门 | ASP学习 | 网站建设大师功 | Word入门
  iTbulo.com > 学院 > 网页制作教程 > Dreamweaver教程 > DreamWeaver使用技巧 > 文章正文
Dreamweaver MX动态文本特效制作
iTbulo.COM 2005-10-27 未知()

很多人认为在网页文本上应用特殊效果是作不出太多文章的,故很少涉足,但是如果你仔细研究一下Dreamweaver MX的Behaviors功能,就会发现用Dreamweaver MX其实也可以制作出不少很好的动态文本特效,比如:文字大小变换、动态文本按钮等等。下面我们就结合一个例子谈谈网页中的文本特效。

这个实例效果是:当鼠标移动到网页中按钮上时,实现按钮导航文本变大,同时按钮 颜色进行变换,而移开时恢复初始状态。

Step1:执行菜单“Insert/Table”命令,在编辑区中插入一个一行一列的表格。

Step2:选中该表格,使用快捷键Ctrl+F3打开其属性控制面板,设置表格背景色彩“Bg Color”参数值为#0099FF,表格边线色彩“BrDr Color”参数值为#000000(如图1)。


图1设置表格的颜色

  Step3:选中单元格,设置单元格属性面板中背景色彩“Bg”参数值为#006699,单元格边线色彩“BrDr”参数值为#FFFFFF。通过以上设置,使表格更具有立体感。

  Step4:单击工具栏“Show Design View”按钮,显示代码窗口,在表格开始和结束段加上代码“〈div id="bottun"〉...〈/div〉”使该表格产生一个Div标记名称(如图2)。

  Step5:在单元格中输入按钮导航文本,并设置文本属性,这里可以把导航文本做成超级链接,并设置其字体、字号和居中效果。


图2为表格加入代码

  Step6:同样道理在导航文本开始和结束段加上这样的代码“〈span id="text"〉...〈/span〉”,使该文本产生一个Span标记名称。

  Step7:按快捷键Shift+F3打开Behaviors行为面板,点击面板上“+”按钮,在弹出行为列表中选择“Change Property”动作,这里我们设置几个当鼠标移动和离开按钮文本上时,文本和背景颜色发生变化的动作。选择“Change Property”动作对话框中的“Div”动作类型(Type of Object),在类型名称(Named Object)下拉列表中会列出我们标记的“bottun”标记,选择它并设置Property下拉列表中的“style-backgroundcolor”的New Value值为#6699CC(如图3),确认返回Behaviors面板,最后更改动作触发事件类型为Onmouseover。同样方法再设置当鼠标离开时,将背景颜色改为初始颜色,即##006699。

  同理,我们也是应用这个动作,只要设置了文本“Change Property”的动作(这个动作类型“Span”),控制鼠标移动和离开时的文字大小变换就可以了。

  这样动态文本按钮就制作成功了,当然这个效果还可以再加工,如果你点击选取了该按钮,再进行一次按钮色彩的变换表示已经选中,那么这个动态按钮的效果就更完美了!

文章搜索
相关资讯
相关文章 相关下载
Dreamweaver CS3 最新功能描述
在Dreamweaver中插入有颜色的直线
用Dreamweaver+ASP实现网页分页
Dreamweaver中加入竖直线的问题
Dreamweaver基础教程:层及其应用
焦点信息