请选择入口: 主站 | 电信 | 网通 | 软件商城 | 域名主机
首页 | 分类 | 最近更新 | 排行榜 | 推荐软件 | 手机软件 | 软件资讯 | 装机必备 | 动画游戏 | 软件商城 | 软件发布
网络软件   系统工具   应用软件   联络聊天   图形图像   多媒体类   行业软件   游戏娱乐   编程开发   安全相关   教育教学
高级搜索
 软件报道 | 业界新闻 | 安全资讯 | 软件教程 | 网络软件 | 系统工具 | 应用软件 | 联络聊天 | 图形图像
 多媒体类 | 游戏娱乐 | 数码软件 | 安全相关 | 教育教学 | 操作系统 | 办公软件 | 组网专区 | 网上冲浪
 设计学院 | Photoshop | Flash | Dreamweaver | Fireworks | FrontPage | 3DMAX
您的位置:资讯首页 -> 设计学院 -> Dreamweaver -> 用Dreamweaver做动态文本
用Dreamweaver做动态文本
作者:7star   来源:中国电脑教育报   加入时间:2002-11-22
 
    很多人认为在网页文本上应用特殊效果是作不出太多文章的,故很少涉足,但是如果你仔细研究一下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,确认返回Behaviors面板,最后更改动作触发事件类型为Onmouseover。同样方法再设置当鼠标离开时,将背景颜色改为初始颜色,即##006699。

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

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

 
[1]
上一篇:用Dreamweaver MX实现网站批量更... 下一篇:活用Dreamweaver数据功能
发给好友 给我们投稿 加为收藏
 
 相关软件:
Dreamweaver学友 6.61
Macromedia Dreamweaver V8.02 U...
Macromedia Dreamweaver V8.0 简...
Macromedia Dreamweaver 8.0 Tra...
Macromedia Dreamweaver MX 2004...
Macromedia Dreamweaver MX 2004...
                                    更多>>
 
 相关文章:
Dreamweaver CS4新增相关功能介绍...
教你Dreamweaver中框架的使用技巧...
Dreamweaver中数据库路径的使用
Dreamweaver制作网页经典问题集合...
Dreamweaver CS4 初步试用感受
Dreamweaver写CSS应该学会的技巧
                                    更多>>
 
 相关信息:
中用Dreamweaver做动态文本 相关内容
中用Dreamweaver做动态文本 相关内容
 
 文章搜索
 
   
 
 每日资讯
 
 焦点图文 更多... 
 
 本月TOP10
暂无
 
 
 
A B C D E F G H J K L M N O P Q R S T W X Y Z 按第一汉字声母排列

广告联系 | 用户反馈 | 版权声明 | 下载帮助 | 软件发布 | 镜像合作
Copyright©1998 - 2008 Skycn.com All Rights Reserved