为网页添加特效

核心提示： 用frontpage可视化编辑样式表你一定见过许多主页上有这样的链接，它并不像普通链接总是带下划线，为网页添加特效(3)，当鼠标指上去时，链接文字就会变色并出现下划线，这样，一个动态效果按钮就做成了，这都是样式表的功劳！用frontpage打开要编辑的html文件，使用选单命令&ldquo

用frontpage可视化编辑样式表

你一定见过许多主页上有这样的链接，它并不像普通链接总是带下划线，当鼠标指上去时，链接文字就会变色并出现下划线，这都是样式表的功劳！

用frontpage打开要编辑的html文件，使用选单命令“format(格式)”〉“stylesheet...(样式...)”打开“format stylesheet(样式格式)”对话框，这里显示了当前文件内联样式表的内容，你可以在〈!－－...－－〉 之间添加或修改样式表语句。如果要添加新的样式语句，首先要输入标签(如：a:link、a:hover、a:active、a:visited 它们分别表示：正常情况下未访问过的、鼠标接近时、鼠标点击时、访问过的链接的样式)。然后，把光标停在这个标签末尾，点击对话框左下角的“style...(样式...)”按钮，进入“style(样式)”对话框，在这里你可以跟据需要设置多种样式属性。如果要更改某个标签的样式，只要光标停在相应标签后面的一对大括号中代码的任意位置，然后按“style...(样式...)”按钮进行修改即可。

例子：你希望鼠标移动到链接上时，文字背景变为黄色，文字本身变为红色且无下划线。先在〈!－－...－－〉之间输入a:hover，然后把光标停在它末尾，按“style...（样式...）”按钮进入“style（样式）”对话框，在“colors（颜色）”页中设置“foreground color（前景颜色）”为红色，“background color（背景颜色）”为黄色，在“text（文本）”页中设置“decoration（修饰）”为“none（无）”，然后确定。这时，frontpage已将代码{ background－color: rgb(0,0,128); color: rgb(255,255,255); text－decoration: none }添加到a:hover标签后面，是不是比自已编容易得多？

制作鼠标指针指在上面时会变化的动态按钮

在frontpage中通过选单命令：“insert（插入）”〉“active elements（active单元）”〉“hover botton（动态按钮）”，可以制作动态效果的按钮。但是，这种按钮效果是基于java applet 小程序的，它有速度慢、不能显示提示文本、鼠标指针不能变为手形等缺点。这里介绍用dreamweaver 2.0 制作基于javascript的动态按钮的方法。

在制作这种按钮效果之前，首先要为每个按钮制作两张不同的图片，一张是正常情况下要显示的图片，另一张是鼠标指针停留在按钮上时要显示的图片。图片命名时最好有规律，比如两张图片名分别是botton.gif 、botton_1.gif。

首先在frontpage中插入第一张图片，并设好超级链接，文件保存后用dreamweaver调入（如果熟悉dreamweaver，可以不要frontpage“帮忙”）。单击已插入的第一张图片选中它，点击“behaviors (行为)”窗口（如果未显示，按f8显示它）中的＋号按钮，在选单中选“swip image（交换图片）”打开对话框，按“browse（浏览）”按钮选择第二张图片，最后点“ok”确定。这样，一个动态效果按钮就做成了，简单吧。