CuteTabs Installation Instructions

CuteTabs is ( Copyright 1997, P. Lutus.

CuteTabs is CareWare. Please see http://www.arachnoid.com/careware.

The CuteTabs Java applet creates a row of tabs for site navigation. When the visitor passes his mouse cursor over the tabs, they change appearance and a message appears on the browser status bar. When a tab is clicked, the applet moves to the selected page and the selected tab is emphasized. See http://www.arachnoid.com for an example of the tabs in a typical setting.

CuteTabs relies on both frames and Java for its effects - a browser must support both for the applet to work as intended.

NOTE: To upload the CuteTabs Java class files to your site, you must use an FTP client program that supports long file names. If, after uploading the files, they appear to have such names as "cuteta~1.cla" instead of "CuteTabs.class," you must replace your FTP client program with one designed in and for the present. There are any number of free FTP client programs that can handle long file names.

Overview

CuteTabs is used to simplify site navigation. As seen by a visitor, a row of tabs appears at the top of the browser display. Pressing a tab moves to that tab's target page. CuteTabs is designed so that the tabs blend with the called pages, creating the illusion that the tab is located on the top of the called page.

CuteTabs also offers the option of color-coding each tab independently, so a scheme of color-coded pages and coordinated tabs further increases the ease of navigation.

The pages that are called by the tabs can be destination pages or (in more complex sites) index pages. This method simplifies the navigation of complex sites - one can always press a tab at the top of the screen to change categories.

Installation

Here is a typical setup sequence for CuteTabs:

1. Create a directory for the CuteTabs applet class files and the site index page. Let's say for this example that we have called this directory "tabcontrol."

In this download package you will find the following files:

installation.rtf
installation.txt
CuteTabs.class
TabButton.class
TabCanvas.class

The first two files are different versions of the file you are now reading. The other two files are the required class files for the Cute Buttons applet. Place the two class files in the "tabcontrol" directory you created.

2. Create a frames-aware HTML page containing code that looks more or less like this (this is not a complete page):

<FRAMESET ROWS="40,*" frameborder="0" framespacing="0" border="0">

<FRAME SRC="tabcontrol/siteindex.html" NAME="windex"  NORESIZE scrolling="no" marginwidth="0" marginheight="5" frameborder="0" framespacing="0">

<FRAME SRC="frontpage.html" NAME="wmain" NORESIZE scrolling="auto" frameborder="0" framespacing="0">

<NOFRAMES>

<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">

<Center>
<Table border=1 width=80% align=Center Colspec="L20 " cellpadding=20 bgcolor="#ffffc0">
<Tr><Td align=center><FONT COLOR=#0000ff>Your browser does not support frames. Tsk, tsk. You will be automatically moved to the non-frames version of my front page in five seconds. But I strongly recommend that you update your browser.
</FONT>
</Td></Tr>
</Table>

<meta http-equiv="refresh" content="5; url=frontpage.html">

</Center>
</BODY>

</NOFRAMES>

</FRAMESET>

This code block sets up a frame window at the top of the page for the CuteTabs applet, places the site's main page in the center of the display, and provides for the possibility that the visitor's browser doesn't support frames. It also names the two frame windows "windex" and "wmain" for future reference.

This page listing is set up so that there is no page border between the index page and the called page(s). This makes the tabs appear to be attached to the called page.

3. The above-referenced "tabcontrol/siteindex.html" page contains this code (this is not a complete page):

<BODY BGCOLOR="#000000" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">

<CENTER>

<applet
    code=CuteTabs.class
    name=CuteTabs
    width=1280
    height=40 >
	<param name="b1" value="Top|../frontpage.html|||The main www.arachnoid.com page">
	<param name="b2" value="Articles|../idx_articles.html|||Books, articles, slides, graphic images">
	<param name="b3" value="Applications|../idx_applications.html|||Online, interactive Java/JavaScript applications">

	<param name="b4" value="Programming|../idx_programming.html|||Programming resources inc. Arachnophilia">

	<param name="b5" value="Math etc.|../idx_math_etc.html|||Math articles, jokes, interesting Web sites">

	<param name="b6" value="Members|../idx_members.html|||Member home pages plus more resources">

	<param name="b7" value="Feedback|../lutusp/sign_in.htm|||Guest book, E-mail">

	<param name="targetwindow" value="wmain">
	<param name="bgcolor" value="#c0c0c0">


<A HREF="../frontpage.html" target="wmain">Top</A> |
<A HREF="../idx_articles.html" target="wmain">Articles</A> |
 <A HREF="../idx_applications.html"  target="wmain">Applications</A> |
 <A HREF="../idx_programming.html"  target="wmain">Programming</A> |
 <A HREF="../idx_math_etc.html"  target="wmain">Math etc.</A> |
 <A HREF="../idx_members.html"  target="wmain">Members</A> |
 <A HREF="../lutusp/sign_in.htm"  target="wmain">Feedback</A><p>

</applet>

</CENTER>

</BODY>

This code block launches the applet if the visitor's browser supports Java, and provides a conventional list of links if the browser does not. In keeping with normal frames coding, all the links and the applet itself are pointed to the main target window "wmain."

The "targetwindow" parameter show above is required to direct the page changes to the correct window. The "bgcolor" parameter sets the background color for the entire applet.

Notice that the applet width is set to 1280. This allows the applet work with nearly all current browser display sizes and (because the tabs are left-justified) function correctly with small displays.

Notice the vertical delimiters "|||" without values between. These delimiters must be present even if the values are not specified. Each button is defined in this way:

<param name="b1" value="Top|frontpage.html|(tabcolor)|(textcolor)|The main www.arachnoid.com page">

The name of the definition must be the lowercase letter "b" followed by a digit, as shown in the code example above. In the value field, vertical bars '|' separate the button label, the target URL, optional colors for the tab body and text, and the status line message.

Here are some examples of definitions:

Button Index
Tab Label
Target URL
Status Line Message
B1
Top
Frontpage.html
The main page
B2
Articles
Idx_articles.html
Some articles and books
B3
Applications
Idx_applications.html
Online applications

The tab label is the text that appears on the tab itself. The target URL is the address of the target for this button. The status line message appears on the browser status line when the mouse cursor is over the button.

4. Font Face and Size

There are optional specifications for font face and size:

<param name="fontface" value="Helvetica">
<param name="fontsize" value="14">

The value for "fontface" must be one of the following list, and case must be preserved:

Dialog
Helvetica
TimesRoman
Courier
DialogInput
ZapfDingbats

The default values in CuteTabs are Helvetica and 14 point. If you change the size of the font, each tab changes size automatically in response, and you may have to adjust the size of the applet, and the size of the frame window, to compensate for this.

5. Controlling tab color

The tab body and font colors can be customized. To change all the tab body colors at once, use the "tabcolor" command. Example:

<param name="tabcolor" value="#c0ffc0">

The font color for all tabs can also be set. Example:

<param name="fontcolor" value="#c0ffc0">

These values can also be set for individual tabs, for example to have a color-coded tab set. Here is an example of a tab definition with all options used:

<param name="b1" value="Top|frontpage.html|#ffffc0|#0000ff|The main www.arachnoid.com page">

In this definition, the first (leftmost) button is defined as having a label of "Top," a destination of "frontpage.html," a tab body color of light yellow (#ffffc0) and a text color of blue (#0000ff).

6. Miscellaneous commands

Here are some other less-often-used commands.

<param name="initialtab" value="1"> -- This option changes the default initial activated tab to any number.

<param name="topmargin" value="5"> -- This option controls the distance between the top of the tabs and the top of the browser display.

<param name="bgcolor" value="#c0c0c0"> -- This option controls the color of the background of the tab (applet) window. This should be set to the same color as the page in which the tab control appears.

<param name="shadowoffset " value="2"> -- This option controls the offset of the shadow that is drawn if the text color is brighter than the tab color.

Visit http://www.arachnoid.com to see an example of CuteTabs in action.


