轻松制作IE式按钮条
阳光
2001年 3期
要不要让自己网页上的按钮鼠标移上去就会突出来？但是要学会Java Script，要学会做JAVA APPLET！要不要让网页上的灰色按钮鼠标移上去就会变成彩色？但是要学会VBSCRIPT，要学会……要不要为自己的网页安上一个IE式的按钮条？以上这些其实只需要简单的几个步骤外加小小的几行CSS代码，当然是真的！OK，Let’s Go！
第一步：准备按钮的图片
每个按钮只要一个彩色图片即可。这里有一个小技巧：只要找一些图标并转成GIF文件就行了，大的按钮用32×32的图标，小的按钮用16×16的图标。这样的图片即好看体积又小。这里假设我们要做一个按钮：功能是在新窗口打开home.html，图片名为home.gif。
第二步：在你的网页头中加入以下几行CSS代码
这里的TDUp定义是鼠标移到按钮上时的样式（即突出时），第一行意思是按钮底边1像素宽、实心、深灰色；第二行意思是按钮左边1像素宽、实心、白色；第三行定义右边，同底边；第四行定义顶边，同左边。TDDown定义的是鼠标移出按钮时的样式（即平常状态），第一行意思是按钮底边1像素宽、实心、灰色；第二、三、四行分别定义左、右顶边，同底边；第五行定义了按钮为灰度效果显示，即不显示彩色。要说明网页底色为灰色（即普通菜单条的颜色）时的样式，底色如为其他颜色，TDUp中四边的颜色要做相应调整，TDDown中四边的颜色要定义成底色。
第三步：将你的网页底色设为灰色
第四步：在你的网页中需加入按钮的地方加入如下代码
这里用了一个表格，其中第三行的意思是：本单元格一般使用TDDown样式，当鼠标移入时使用TDUp样式，当鼠标移出时恢复TDDown样式，当鼠标在本单元格上点击时，在新窗口打开home.html。第四行就是我们刚才准备的图片。
为什么不用来打开页面而要用ONCLICK？这是因为做链接时有几个缺点：1.鼠标移到上面时会变成手形；2.点击后图片上会留下一个难看的虚线框（焦点）；3.如果单元格比图片宽（为了美观一般都比图片宽），则只有当鼠标在图片上点击才有效而在其他地方点击时无效（虽然这时也在按钮上）。特别是第2、3条缺点使得我们的按钮条与真正的IE按钮条相差甚远。
我要一排几个按钮，不，我要一列几个按钮，啊不，我要几行几列按钮怎么办？只需照上面的样子加几个 | 就是一排按钮，加几个|
就是一列按钮，组合起来就是N行N列了，你看着加吧。
另外，最好将网页设计成框架形式，将按钮条当成一个框架，将打开的页面放在另一个框架内，这样就更完美了。你也可以不用灰度效果而做成其他效果，如ALPHA效果、光晕效果等等，全看你的喜好。
好了，到此为止，全部搞定，快将下面所附代码录入并存成一个HTML文件看看效果吧。或者到我的主页上瞧瞧（我主页上的按钮是ALPHA效果），我的主页：http://sunlight.spedia.net。
附：实例源代码
