用Dreamweaver做动态文字

[来源：广州网站建设] [作者：广州网站建设] [日期：2007-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”），控制鼠标移动和离开时的文字大小变换就可以了。

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

上一页：相对路径和绝对路径在网页中的用途

下一页：用DW4添加背景音乐及制作动态字

最新文章