用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”），控制鼠标移动和离开时的文字大小变换就能够了。

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有