用Frontpage创建悬停按钮效果

2016-03-31 18:20 23 1 收藏

今天图老师小编给大家介绍下用Frontpage创建悬停按钮效果,平时喜欢用Frontpage创建悬停按钮效果的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - 软件应用 】

用Frontpage创建悬停按钮效果

   我们经常在网上遇到这样一种情况:当鼠标移到一个按钮上时,按钮的颜色立即发生变化而且还会发光,或者突然变成了另外一幅图片,十分有趣,动感非常之强。这个效果就是悬停按钮。

  要创建悬停按钮可以通过Frontpage 2000来轻松实现。

  在没有任何脚本的情况下利用创建悬停按钮来添加动画到您的网页是一种容易的方式。如同其他的按钮一样,悬停按钮也可以含有指向其他网页或文件的超链接。然而,当站点访问者单击或指向悬停按钮时,该按钮与普通按钮的区别便尽显无遗:它不仅能够发光,还可显示自定义图片甚至播放声音效果!

  下面我们来看看具体怎么创建悬停按钮。

  首先在网页视图模式内,将插入点放置在要创建悬停按钮的位置。

  在插入菜单上,指向 组件 ,然后单击 [悬停]按钮,出现悬停按钮属性对话框(图1)。

  在 按钮文本 框内,键入要放在悬停按钮上的文本标签。如果您要输入的标签比较长,请调整悬停按钮的 宽度 到足以容纳标签的长度。

用Frontpage创建悬停按钮效果 图老师

  图1

  单击右边的字体还可以随意设置文本的字体、字型、大小和颜色。(但您若想使用已包含文本标签的自定义图片,就不必输入任何文本。)

  在 链接到 框中,键入在站点访问者单击[悬停]按钮时,就会出现的网页或文件的 URL。或者单击 浏览 以查找网页或文件的位置。

  要设置按钮在网页上开始显示的颜色,请在 按钮颜色 框中选择要使用的颜色。注意,如果您单击 自定义 并且选择一张要使用在悬停按钮上的图片,则无法修改按钮的颜色。

  要设置按钮的背景颜色,请在 背景颜色 框中为悬停按钮选择一种背景颜色。虽然按钮的背景颜色并不能变成透明的,但您可选择与网页背景颜色相配的颜色。

  要设置悬停效果的颜色,请在 效果颜色 框中为悬停效果选择颜色。

  要设置悬停按钮的大小,请在 宽度 和 高度 框内,修改设置(以像素为单位)。如果您在悬停按钮上使用自定义图片,或者按钮文本太长,则必须设置按钮的宽度和高度以匹配图片或按钮文本的宽和高。

  至于您最感兴趣的效果设置则有发光、反色发光、微微发光、填充颜色、颜色对比、凹进、凸进等7种之多,您不妨耐心地一个一个去试,找出最炫的一种特效。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  实际上更为常用的是,您可以事先准备好两幅大小相同的图片,然后选择对话框左下脚的自定义选项,在这里您可以为悬停按钮设置声音效果或为悬停按钮设置具有动态显示效果的图片。比如在按钮 框内,键入要用作悬停按钮背景的图片的 URL或单击 浏览 来查找图片,然后单击 确定;再在悬停时框内键入要用作悬停按钮变化时的图片的 URL,选定后单击 [确定]即可。

  在播放声音区域,选择操作和声音效果:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  为了使站点访问者在单击悬停按钮时能够播放声音效果,请在单击时框中键入声音效果的 URL或单击 浏览来查找声音效果。

  为了使站点访问者在指向悬停按钮时能够播放声音效果,请在悬停时框中键入声音效果的 URL,或单击 浏览 来查找声音效果文件所在位置。

  注意,因为悬停按钮实际上是 Java 小程序,所以您可使用的声音效果文件只能是 .au 格式;而且您不能使用 .midi 或 .wav 格式的声音文件;此外,.au 文件还必须是 8 位,8000Hz,单声道,u 法则格式。  全部设置完成后,若要预览悬停按钮在访问者利用浏览器浏览您的网页时所呈现的样子,您可以单击预览选项卡,或单击在浏览器中预览(在 文件 菜单上)。

  怎么样,鼠标所到之处,图片翻飞音效滚滚,绝对令访问者折服!

来源:http://www.tulaoshi.com/n/20160331/2057458.html

延伸阅读
celluloid如何创建和编辑按钮   创建按钮:按钮有点击前和点击后两个状态,这需要您准备两张图片作为按钮的点击样式。在页面中创建按钮,有两种方式: 1.点击交互工具栏中 按钮 即可在页面中央生成空白按钮。 2.也可以选中任意的两个图形、图片或是文本框,选择右键菜单中创建为按钮 即可将被选中的两个对象作为点击...
标签: 电脑入门
新建wps演示文稿,选择模板为流光溢彩,版式为空白板式。 依次单击视图母版--幻灯片母版选项,打开母版视图,利用插入文本框,输入文字鼠标悬停效果,调整大小,其他的都不动,关闭母版视图。 图1 依次单击插入图片来自文件命令,打开插入图片对话框,按住键盘CTRL键同时鼠标单击,选择需要插入的6张图片,单击打开按钮,把6张图片插入编...
标签: 鼠标 设计
首先看一下最终效果和分层: 1、 背景色设置为#280021,新建图层,利用钢笔工具画如下图形,填充颜色,然后图层样式中的渐变叠加设置如下: 2、 新建图层,用椭圆工具在图形上面建一个选区,然后填充白色,如图。 3、取消选区,选择滤镜高斯模糊把白色进行模糊。具体数值视效果而定,效果如图。 4、把这个图层的混合模式...
标签: flash教程
我们将使用画图工具和ActionScript 3.0中的时间轴,鼠标事件做一个好看的 单选按钮 。 最终预览 我们先看一下最终作品: 第一步:概述 一个单选按钮或选项按钮是一个图形用户界面元素,允许用户只选择一个预定义的选项集的类型。 在这个教程中,我们将创建一个传统的单选按钮。 第二步:设置Flash 打开Flash创建一个新文档...
标签: PHP
  通过文字传递创建的图形按钮,详细说明请看文内英文说明 <?php Header( "Content-type: image/gif"); // info for the browser     /* PHP3 Button generator, (c) 2000 by IzzySoft (izzysoft@buntspecht.de)     * License: GPL (and it would be nice to drop me a note tha...

经验教程

793

收藏

96
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部