Tabbed Pages with multiple zones

Peter Allen explained about the tabs on the page here.
I am gonna extend this part to include multiple webpart zones on the page.
Step1: Coding the Tabbed page.
Open a notepad and paste the below code. Save the file as 'TabbedPage.aspx'.

<%@ Page Language="C#" MasterPageFile="~masterurl/default.master" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register tagprefix="WebPartPages" namespace="Microsoft.SharePoint.WebPartPages" assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderAdditionalPageHead">

<script type="text/javascript">
if(typeof jQuery=="undefined")
{
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");}
</script>

<style>#tabs ul.tabNavigation{ margin: 0; padding: 0; list-style: none; height: 20px; /* Push the tabs 1px down to hide the top-border of the tabbedWindow */ position: relative; top: 1px; border-bottom: #998b7d 1px solid;}#tabs ul.tabNavigation li{ float: left; padding: 0; margin: 0 5px 0 0; background: none;}#tabs ul.tabNavigation a{ background-color: #fff; border: 1px solid #bbb; display: block; padding: 4px 0 1px; text-decoration:none}#tabs ul.tabNavigation a.selected{ font-weight: bolder; background-color: #C0C0C0; border-bottom: #bbb 1px solid;}#tabs ul.tabNavigation a span{ padding: 0 10px;}#tabs div.tabbedWindow{
background-color: #fff;
}#tabs ul.tabNavigation a:hover{ background-color: #F0F0F0 ;}
</style><script type="text/javascript">

$(function () { var tabContainers = $('div#tabs > .tabbedWindow'); tabContainers.hide().filter('#tab-1').show(); $('div#tabs ul.tabNavigation a').click(function () { tabContainers.hide(); tabContainers.filter(this.hash).show(); $('div#tabs ul.tabNavigation a').removeClass('ms-topnavselected selected'); $(this).addClass('ms-topnavselected selected'); return false; }).filter('#tab-1').click(); }); </script>
</asp:Content>

<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderMain">

<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" colspan="3" valign="top" width="100%">
<WebPartPages:WebPartZone runat="server" Title="loc:Header" ID="Header" FrameType="TitleBarOnly">
<ZoneTemplate>
</ZoneTemplate></WebPartPages:WebPartZone> </td> </tr>

<tr> <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" colspan="3" valign="top" width="100%"> <WebPartPages:WebPartZone runat="server" Title="loc:Tab" ID="Tab"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td> </tr> <tr> <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<div id="tabs"> <div class="tabbedWindow" id="tab-1"><WebPartPages:WebPartZone id="ID1" runat="server" title="Zone Tab 1"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-2"><WebPartPages:WebPartZone id="ID2" runat="server" title="Zone Tab 2"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div> <div class="tabbedWindow" id="tab-3"><WebPartPages:WebPartZone id="ID3" runat="server" title="Zone Tab 3"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-4"><WebPartPages:WebPartZone id="ID4" runat="server" title="Zone Tab 4"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-5"><WebPartPages:WebPartZone id="ID5" runat="server" title="Zone Tab 5"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>

<div class="tabbedWindow" id="tab-6"><WebPartPages:WebPartZone id="ID6" runat="server" title="Zone Tab 6"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div> <div class="tabbedWindow" id="tab-7"><WebPartPages:WebPartZone id="ID7" runat="server" title="Zone Tab 7"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-8"><WebPartPages:WebPartZone id="ID8" runat="server" title="Zone Tab 8"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-9"><WebPartPages:WebPartZone id="ID9" runat="server" title="Zone Tab 9"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="waste"></div> </div>
</td>



<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<div id="tabs"> <div class="tabbedWindow" id="tab-1"><WebPartPages:WebPartZone id="ID10" runat="server" title="Zone Tab 10"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-2"><WebPartPages:WebPartZone id="ID11" runat="server" title="Zone Tab 11"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-3"><WebPartPages:WebPartZone id="ID12" runat="server" title="Zone Tab 12"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-4"><WebPartPages:WebPartZone id="ID13" runat="server" title="Zone Tab 13"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-5"><WebPartPages:WebPartZone id="ID14" runat="server" title="Zone Tab 14"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-6"><WebPartPages:WebPartZone id="ID15" runat="server" title="Zone Tab 15"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-7"><WebPartPages:WebPartZone id="ID16" runat="server" title="Zone Tab 16"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-8"><WebPartPages:WebPartZone id="ID17" runat="server" title="Zone Tab 17"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-9"><WebPartPages:WebPartZone id="ID18" runat="server" title="Zone Tab 18"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div> </div></td>



<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<div id="tabs"> <div class="tabbedWindow" id="tab-1"><WebPartPages:WebPartZone id="ID19" runat="server" title="Zone Tab 19"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-2"><WebPartPages:WebPartZone id="ID20" runat="server" title="Zone Tab 20"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-3"><WebPartPages:WebPartZone id="ID21" runat="server" title="Zone Tab 21"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div><div class="tabbedWindow" id="tab-4"><WebPartPages:WebPartZone id="ID22" runat="server" title="Zone Tab 22"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-5"><WebPartPages:WebPartZone id="ID23" runat="server" title="Zone Tab 23"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-6"><WebPartPages:WebPartZone id="ID24" runat="server" title="Zone Tab 24"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-7"><WebPartPages:WebPartZone id="ID25" runat="server" title="Zone Tab 25"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-8"><WebPartPages:WebPartZone id="ID26" runat="server" title="Zone Tab 26"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
<div class="tabbedWindow" id="tab-9"><WebPartPages:WebPartZone id="ID27" runat="server" title="Zone Tab 27"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
</div></td>

</tr> <tr> <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" colspan="3" valign="top" width="100%"> <WebPartPages:WebPartZone runat="server" Title="loc:Footer" ID="Footer" FrameType="TitleBarOnly"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td> </tr> <tr>
</tr> <script language="javascript">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</script></table></asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderPageTitle"> Site</asp:Content>

I embedded the parallel zones with the extra DIVs and seperated by HTML TD(Table Data) node. make sure that you follow the below standrds:

1. Every extra TD should have the name defined with a specific name.
   

   <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%"> 

2. Every TD must have a DIV defined with a standard name "tabs", thats where the code gets the reference.
   

   <div id="tabs">

Step2:Upload the aspx page to a doc lib.
Go to any document library and upload the dashboard.aspx page. After uploading the page, moify the page (site actions -> Edit Page).
Step3: Linking the tabs with the actual webpart zones.

Click on the 'tabs' zone's add webpart link and add a content editor webpart. Modify the CEWP Source Editor and paste the below code.

<!-- Code to hide Tab Page Help Link -->
<script type="text/javascript"> 
$(document).ready(function() {      
$('#TabPageHelp').hide();   });
</script>
<!-- Code to add Tabs -->
<div id="tabs">   
<ul class="tabNavigation ms-WPBody">       
<li><a href="#tab-1" class="selected ms-topnavselected"><span>Tab-1</span></a></li>        
<li><a href="#tab-2" ><span>Tab-2</span></a></li>        
<li><a href="#tab-3" ><span>Tab-3</span></a></li>        
<li><a href="#tab-4" ><span>Tab-4</span></a></li>        
<li><a href="#tab-5" ><span>Tab-5</span></a></li>        
<li><a href="#tab-6" ><span>Tab-6</span></a></li>        
<li><a href="#tab-7" ><span>Tab-7</span></a></li>        
<li><a href="#tab-8" ><span>Tab-8</span></a></li>        
<li><a href="#tab-9" ><span>Tab-9</span></a></li>     </ul>      
<div style="clear: both"></div></div>

Step4: adding webparts.
Now, when you click on the 'Tab1', you see the three zones with three parallel Table Data structure. By selecting the desired tab, add web parts to the zones.