江西广告网

标题: 用dreamweaver做动态文本 [打印本页]

作者: wfcvn 时间: 2007-4-26 22:35
标题: 用dreamweaver做动态文本

很多人认为在网页文本上应用特殊效果是作不出太多文章的，故很少涉足，但是如果你仔细研究一下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”），控制鼠标移动和离开时的文字大小变换就可以了。这样动态文本按钮就制作成功了，当然这个效果还可以再加工，如果你点击选取了该按钮，再进行一次按钮色彩的变换表示已经选中，那么这个动态按钮的效果就更完美了！

-------------------------------------- http://www.huoyue.com.cn 活跃网，活跃人群的论坛，访问活跃网，将给您带来意想不到的收获，还可以免费为您开论坛，让您免费拥有与朋友、网友交流的论坛。你是年轻人吗？你活跃你就上！

欢迎光临江西广告网 (http://bbs.jxadw.com/)