用Dreamweaver做动态文本
时间:2005-11-24 | 作者:中国电脑教育报 | 阅读:470这个实例效果是:当鼠标移动到网页中按钮上时,实现按钮导航文本变大,同时按钮颜色进行变换,而移开时恢复初始状态。
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/6!本田中国3月销量5.51万辆 同比下跌8.8%
- 时间:2025-04-07
-
- 中国影史武侠电影票房冠军!肖战射雕英雄传网播定档4月11日
- 时间:2025-04-07
-
- 最冷天玑9400+直屏旗舰!路人上手真我GT7:惊呼很凉很冰
- 时间:2025-04-07
-
- 依然卖爆!小米SU7一季度上险量曝光:3月交付超2.9万台
- 时间:2025-04-07
-
- 波及上千员工!微软在华首家合资公司突然停止中国区运营:赔偿N+1
- 时间:2025-04-07
-
- 亚洲首例!歌手TANK吕建忠成功接受心肝联合移植手术
- 时间:2025-04-07
-
- 怎么进海棠看文_海棠书屋在线看文方法
- 时间:2025-04-07
-
- 豆包消灭联网搜索
- 时间:2025-04-07