12.3 借助于Spry实现Tab面板

前面说过，如果要实现一个真正的Tab菜单，需要JavaScript配合，开发起来必须有JavaScript的使用经验。没有JavaScript经验的设计师可以借助于Adobe公司2007年春天发布的Dreamweaver CS3中新增加的Spry功能来方便地实现。

在本案例中，我们最终实现的效果如图1所示。当用鼠标单击某个Tab时，就会切换到该Tab页。

本实例的文件位于网页学习网CSS教程资源“第12章\02\tab.htm”。该目录下还有一个tab-hover.htm文件。

二者的区别是，在tab.htm中需要鼠标单击才能实现换页，而在tab-hover.htm中，鼠标指针经过某个tab就可以切换到该Tab页，而无需单击鼠标。lodidance.com

图1 当前页面菜单项的超链接

一、建立基本的Tab面板

Dreameavaer CS3中的Spry是一套丰富的JavaScript框架，可以大幅度简化Web开发的复杂度，提高开发效率。

① 首先安装好Dreamweaver CS3软件，创建一个新文档。先保存这个文件，然后在窗口上侧的“插入”工具栏中选择“Spry”项目。单击从右散第3个按钮，如图2所示。这时在视图窗口中就会出现一个最基本的Tab面板了。

图2 Dreamweaver CS3中提供的Spry

② 保存这个页面，在浏览器中预览，效果如图3所示。这个Tab面板就已经做好了，非常简单。

图3 Spry生成的基本Tab面板效果

③ 现在查看一下页面的源代码，可以看到该页面使用了一个JavaScript文件和一个CSS文件。在向服务器上传这个页面的时候，同时要把这两个文件也要上传到相应的目录中，否则页面就无法正常工作了。

④ 再查看一下它的HTML结构，如下：

可以看到，通过一些div和列表定义了这个面板的结构，最外层div的id为“TabbedPanelsl”。里面分为两部分，上面是一个uI列表，id为“TabbcdPanelsTabGroup”，它容纳了各个Tab，每个Tab就是一个列表项；下面是一个div，里面有与Tab个数相同的div，每一个里面放置相应的Tab页内容。

⑤ 如果需要增加Tab的个数，可以选中整个Tab面板，然后在窗口下侧的如图4所示的“属性“面板中单击“加号”按钮。如果希望调整几个Tab之间的顺序，可以通过旁边的三角形箭头按钮实现。最右边的“默认面板”下拉列表用于选择几个Tab页面中，哪一个作为默认打开的页面。

图4 在Dreamweuvcr CS3中可以增加或删除Tab

下面的任务就是以Spry生成的Tab面板为基础，通过对CSS样式的设置，实现更为美观的Tab面板。读者可以根据讲解的方法，设计出自己己希望的Tab面板效果。

二、准备背景图片

各个Tab的宽度可以自动适应Tab文字的宽度，并且当鼠标指针经过某个Tab时，会发生颜色变化，如图1所示。

显然，这个Tab的效果需要背景图片来实现，因此要在Fireworks或者Photoshop等图像处理软件中制作3个图像，分别用于当前Tab、其他的Tab和鼠标指针经过的Tab，如图5所示。

图5中的边线为2像素宽，整个图像200像素宽．30像素高，为了美观，可以做出一些装饰效果，例如图中的投影效果。为了Tab的背景能够适应文字的宽度，显然这里需要使用滑动门技术。

三、设置整体的CSS样式

下面就开始为它设置CSS。前面已经提到，Dreamweaver已经自动生成了一个CSS文件SpryAssets/SpryTabbedPanels.css．我们只需要打开它，然后在它的基础上修改就可以了。

其作用是对整体进行设置，可以不用改，也可以把宽度改为固定宽度，例如500px。然后找到第2段，代码如下：

这段的作用是设置Tab组的样式，也就是uI列表的总体样式，在本案例中不用修改。

四、设置单个Tab的CSS样式

接下来就到关键的位置了，找到如下样式代码。

这段的作用是设定各个Tab的样式，下面简要描述基本思路。

首先将postion属性设置为相对定位(relative)，这样的目的是配合后面的top:1px，使Tab能够向下移动1个像素，使Tab最下面的1像素高度能够和下面内容区域的上边框有1个像素的重合。本案例中，由于边框的宽度为2像素，因此这里将“top:1px”改为“top:2px”。

然后将padding和margin都暂时设置为0，将背景设置为前面准备好的图像文件，然后删除4行关于border的样式，重新设置文字样式。

此外，为了使用滑动门技术来设定两层背景图像，这里将display属性设置为blcok，并确定高度为30像素。

修改完成后，这段代码如下所示：

这时效果可以看到基本的雏形已经产生了。