The two sections for controlling the look and feel of the page tabs are the Standard Tab Attributes section and the Parent Tab Attribute section. The fields in these sections are identical. If your template contains only one set of tabs, they will be defined in the Standard Tab Attribute section. If your template contains parent tabs and sub-tabs, the parent tabs are defined in the Parent Tab Attribute section and the sub-tabs are defined in the Standard Tab Attribute section.

Each of these sections contains two fields: Current Tab and Non Current Tab. If the template was defined in an earlier version of HTML DB, the fields Current Tab Font Attribute and Non Current Tab Font Attribute will appear after each corresponding tab field. These fields were removed in version 1.6. The formatting that was contained in these fields can simply be included in the tab definition fields.

NOTE

The Tab Font Attribute fields were deprecated in version 1.6.

The HTML specified in the Standard Tab Attributes will be substituted within the header, body, or footer—wherever you placed the #TAB_CELLS# substitution variable. The code for the parent tabs will go wherever the #PARENT_TAB_CELLS# substitution variable is placed within the header, body, or footer definition. Remember, these substitution variables can be placed anywhere on the page. Therefore, your tabs could be at the top part of the page like most HTML DB standard themes, or they could be placed at the bottom of the page like a spreadsheet application.

We will look at two methods for tabs. These methods have a similar structure—a three-cell, single-row table within a table cell. The three table cells format the look of the tab. The first is the start of the tab, the second is the center and is where the name will appear, and the third is the close of the tab, as demonstrated by the following code outline:

<td>
  <table>
    <tr>
      <td> table cell for front part of tab </td>
      <td> table cell for middle part of tab, with tab name and link</td>
      <td> table cell for end part of tab </td>
    </tr>
  </table>
</td>

The first method is the easiest method, in that it uses only one substitution variable. This code listing produces a tab set similar to the one shown here.

The first table cell uses an image that makes up the slanting part of the left side of the tab. The second table cell uses a CSS class that simply has a background color that matches that of the image in the first cell. The #TAB_TEXT# substitution variable takes care of displaying the label and creating the link for the target page. The #TAB_INLINE_EDIT# substitution variable is used internally by HTML DB to display edit links when a developer runs the page and clicks on the Show Edit Links in the Developer’s Toolbar. The last table cell uses an image that makes up the right side of the tab. The following listing of code was for the Current Tab Attributes section. The only difference in the code between the current and noncurrent version is the CSS class and the images referenced in each cell.

<td>
  <img src="#IMAGE_PREFIX#themes/theme_1/ tab_on_left.png" border="0"/>
</td>
<td class="t1ParentTabCenterOn">
  #TAB_LABEL##TAB_INLINE_EDIT#
</td>
<td>
  <img src="#IMAGE_PREFIX#themes/theme_1/ tab_on_right.png" border="0"/>
</td>

The second method also follows the same basic outline. However, it uses individual substitution variables for the tab’s link and label, #TAB_LINK# and #TAB_LABEL#, respectively. Like in the first method, the first cell is the left part of the tab, the second is the middle of the tab, and the last cell is the right side of the tab. This code produces the tabs shown here.

In this code, you will notice that each of the three table cells has an <a> tag defined with an href element that utilizes #TAB_LINK#. This allows the user to click on any part of the tab to activate the link. In the previous example, only the center part of the tab would activate the link. Although this seems like a minor detail, it makes the user’s experience that much easier. In this example, no CSS classes are used; rather, the images are referenced directly. This set of tabs uses six different images—three for the active tab and three for the inactive tab. The code example is for the active tab. Again, there is an image for the left part of the tab, one for the center of the tab, and one for the right side of the tab. These images were created using a good image editor. The left and right images are the size of the curved parts of the tab; however, the center image is only a few pixels wide. The left and right images are used as the actual source for the <a> tag, whereas the center cell uses the image as a background for the entire table cell. This allows the tabs to be a variable width depending on the label of each tab.

<td>
  <table cellpadding="0" cellspacing="0" border="0" style="margin-left:6px;">
    <tr>
      <td style="width:20px;">
        <a href="#TAB_LINK#">
         <img src="#WORKSPACE_IMAGES#tab_active_left.png"
              alt="#TAB_LABEL#" border="0" />
        </a>
      </td>
      <td background= "#WORKSPACE_IMAGES#tab_active_center.png" nowrap="nowrap">
        <a href="#TAB_LINK#">
          #TAB_LABEL#
        </a>
      </td>
      <td style="width:15px;">
        <a href="#TAB_LINK#">
          <img src="#WORKSPACE_IMAGES#tab_active_right.png"
               alt="#TAB_LABEL#"
border="0" />
        </a>
      </td>
    </tr>
  </table>
</td>