网页设计 百分网手机站

网页互动按钮的制作

时间:2020-09-02 13:18:05 网页设计 我要投稿

网页互动按钮的制作

  互动按钮有一个突出的优点是它给浏览者一个信号:这里可以点击!并且如果制作精美,也会给人以视觉上的享受。笔者在这里介绍很“酷”的按钮导航系统。在鼠标移动到按钮上后,按钮会自动转起来,而且在旁边提示这部分有什么内容。下面介绍的是网页互动按钮的制作:

  一、制作流程

  1.准备好制作按钮的素材。两个互动图像中,平常状态的是一个透明静态GIF图像,翻转状态的是一个透明的动态GIF图像。

  2.运行DW,新建一个HTML文档。

  3.再插入一个准备好的背景图像。

  4.设置此网页的属性,页边距设为0,背景颜色设置为和图像右下角颜色接近的色彩。

  5.单击“Object”面板的“Common”子面板中的“Draw layer”按钮,在适当的位置画一个长方形的层。

  6.将光标定位到层中,然后单击“Object”面板中“Common”子面板中的“Insert Rollover Image”按钮。

  7.在弹出的`“Insert Rollover Image”面板中,输入按钮的名称,分别选择两个图像作为互动图像。

  8.按照5~7的步骤插入所有的互动按钮。

  9.在按钮后的空白处画一个层,然后在层中输入第一个按钮的注释。按照这样的方法插入所有按钮的注释层。

  10.打开“Window”菜单,选择“Layers”命令。

  11.将所有注释层的属性设置为“Hide”。

  12.切换到“Behavior”面板。

  13.在“Behavior”面板的“Events For”一栏中,选择下拉列表中的“4.0 and Later Browser”。

  14.选择页面中的第一个按钮。

  15.在“Behavior”面板中单击“+”按钮,在弹出的菜单中选择“Show-Hide Layers”。

  16.在弹出的设置面板中,保持按钮层不变,把它自己的注释层设为“Show”,把其余注释层设为“Hide”,并把鼠标事件设为“MouseOver”。

  17.再为第一个按钮增加一个“Show-Hide Layers”的行为,保持其他层不变,把注释层设为“Hide”,鼠标事件为“MouseOut”。

  18.按照13~17的步骤,为其他按钮进行同样的设置。

  19.OK,大功告成,按F12键预览效果。

  二、制作说明

  在本例中,由于按钮需要放到背景图像上的某个位置,所以要求背景图像应该相对于浏览器左上角固定。考虑到两个浏览器中页边距的不同,故页边距设成0。如果在高分辨率浏览器下观看,图像偏在左上方,严重影响了视觉效果,所以需要给页面加上一个和图像颜色比较接近的背景颜色。

【网页互动按钮的制作】相关文章:

Photoshop制作网页按钮的方法09-29

使用PhotoShop制作斜纹质感网页导航按钮教程11-20

网页设计中如何设计按钮11-15

如何用photoshop制作苹果风格的按钮11-27

网页设计的制作步骤11-14

怎么制作自己的网页09-04

photoshop高光常用按钮的制作方法11-27

dreamweaver怎么制作网页09-24

fireworks网页优化制作09-08

制作网页,dreamweaver的基本步骤07-22