网页互动按钮的制作
互动按钮有一个突出的优点是它给浏览者一个信号:这里可以点击!并且如果制作精美,也会给人以视觉上的享受。笔者在这里介绍很“酷”的按钮导航系统。在鼠标移动到按钮上后,按钮会自动转起来,而且在旁边提示这部分有什么内容。下面介绍的是网页互动按钮的制作:
(资料图片)
一、制作流程
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。如果在高分辨率浏览器下观看,图像偏在左上方,严重影响了视觉效果,所以需要给页面加上一个和图像颜色比较接近的背景颜色。
关键词: 网页按钮