网页互动按钮的制作

网页互动按钮的制作

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

　　一、制作流程

　　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。如果在高分辨率浏览器下观看，图像偏在左上方，严重影响了视觉效果，所以需要给页面加上一个和图像颜色比较接近的背景颜色。

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