您现在的位置: 星云电脑教程 >> 电脑教程 >> 网页制作 >> Dreamweaver >> 正文

用 FrontPage 2000 快速制作动态按钮

星云电脑教程 文章来源:赛迪网 作者:星云整理 更新时间:2004-7-31 16:46:30 点击数有问必答

   你一定看到过很多网页上的动态按钮效果,一般而言实现它需要后台的 javascript( 或 VBScript) 网页脚本语言支持,对于只懂使用初级的 “ 所见即所得 ” 网页编辑器的人来说确实是个难题。现在我们就来学一学制作动态按钮的 “ 傻瓜式 ” 方法。我们以制作一个中英文切换的按钮为例。

   其实,动态按钮的实现原理都是一样的,首先制作按钮的图片,然后通过脚本语言捕  
获鼠标在按钮上的事件,对事件做出交换图片的响应。在 Frontpage 2000 里有交换图片的现成语言包。

   首先在 Photoshop 或 Firework 里制作两张用于交换的按钮图片,大小均为:宽度 80 象素;高度 15 象素,并在其中输入按钮的文字,注意两张图片文字的相对位子应基本一致。

   在 Frontpage 中插入一个表格,大小与按钮图片的大小相同 ( 宽 80 象素,高 15 象素 ) ,点击插入图片按钮,在表格内插入初始化显示的按钮图片,即按钮在未进行动态变换时显示的那张图片,在这个例子中我们选择有 “English Button” 字样的图片为初始图片。接下来我们就开始为它做动态效果。选择菜单 “ 格式 ”-“ 动态 HTML 效果 ” ,出现动态 HTML 效果的对话框。确保要做动态变换的图片为选中状态的前提下,在 DHTL 效果多话框内将 “ 开启 ” 选项选择为 “ 鼠标悬停 ” ;应用选择为 “ 交换图片 ” ;并在下面一个选项内指定路径为用于交换的 “ 中文按钮 ” 图片所在的路径。

   好了,一个动态按钮效果的 “ 傻瓜 ” 式制作方法完成了。网页保存后会有一个名为 animate.js 的脚本文件,你可以通过记事本打开它,这里面的就是有 Frontpage 自动生成的脚本语言包。动态按钮效果在 Frontpage 里可以轻松的实现,你也可以改变用于交互的两张图片按照你的需要制作,注意在制作按钮图片时一定要设置两张图片的大小完全一致。

>>

内容搜索
相关文章
推荐文章
热点资讯
专题栏目