Getting Started             

If this page looks like a painful read, you may prefer to use TreeView Professional Designer, a 32-bit Windows® utility that provides a friendly visual interface for adding TreeView Professional to your page, with built-in page previewing and easy editing of an existing <APPLET> tag.
  1. Place the jar and cab files (TreeViewPro.jar and TreeViewPro.cab) in the directory containing the HTML document into which you want to insert the applet (or into a different directory, and add the correct CODEBASE= attribute to the applet tag given below).

  2. Add the following applet tag to your HTML document in the position you want TreeView to appear:
    <APPLET CODE="ryTreeViewPro.class" ARCHIVE="TreeViewPro.jar" WIDTH=200 HEIGHT=325>
    <param name=CabBase value="TreeViewPro.cab">
    <param name=Copyright value="TreeView Professional (c) 1998 Cool Focus [www.coolfocus.com]">
    <param name=BgColor value="FFFFFF">
    <param name=TextColor value="000000">
    <param name=FocusTextColor value="C00000">
    <param name=SelectTextColor value="FFFFFF">
    <param name=SelectorColor value="000080">
    <param name=SelectorBorderColor value="000000">
    <param name=BorderColor value="000000">
    <param name=OutlineColor value="000000">
    <param name=ScrollBgColor value="404040">
    <param name=ScrollFgColor value="F0F0FF">
    <param name=Font value="Dialog,plain,12">
    <param name=UseHandCursor value="no">
    <param name=AutoCollapse value="no">
    <param name=DefaultTarget value="mainframe">
    <param name=Mode value="plain">
    <param name=SingleImage value="single.gif">
    <param name=InitialSelect value="0">
    <param name=ExpandAll value="no">
    <param name=Sound value="yes">
    <param name=OpenSound value="show.au">
    <param name=CloseSound value="hide.au">
    <param name=LinkSound value="select.au">
    </APPLET>

  3. Edit the color parameters according to the color-scheme you want to use. Set the required font, taking care to keep the font's name, style and size in the correct order, and choose whether to use the hand-shaped cursor or the default.

  4. Set the value of the DefaultTarget parameter to the name of the frame into which the majority of your links should be opened.

  5. Now begin adding items to the menu. Unlike many large-scale menus, TreeView Professional is extremely simple to set up. Nevertheless, as this is your first time, let's hold hands and do it together...

    Note that items are added to the tree in numerical order. Folders are denoted by asterisk symbols preceding their labels; the number of asterisks dictates the level at which the folder will be placed. Start by adding a folder to the tree. Since this must be at the top level, we give it one asterisk:

    <param name=Item1 value="*First Folder">

    Pages are automatically placed at the last level defined so they don't need any asterisk additions. To add two pages to the folder just created, Items 2 and 3 will be something like this:

    <param name=Item2 value="Page One">
    <param name=Item3 value="Page Two">

    Giving us the beginnings of a tree that looks like this when the folder is expanded:

    Repeating the same values almost exactly in the next three parameters gives another folder again containing two entries, so the complete code thus far looks like this:

    <param name=Item1 value="*First Folder">
    <param name=Item2 value="Page One">
    <param name=Item3 value="Page Two">
    <param name=Item4 value="*Second Folder">
    <param name=Item5 value="Page One">
    <param name=Item6 value="Page Two">

  6. To add another level (a subfolder inside the last folder we added), we just add an extra asterisk before the folder's label:

    <param name=Item7 value="**Sub of Second Folder">

    Adding pages to this folder works just as above: don't give them any asterisks and the applet automatically knows they're pages rather than folders and places them into the last folder added:

    <param name=Item8 value="Page One in sub">
    <param name=Item9 value="Page Two in sub">

  7. Want to add a subfolder to the subfolder we just created? Just throw in an extra asterisk again. We'll also put a page inside this folder.

    <param name=Item10 value="***A sub of the sub">
    <param name=Item11 value="And an item in the sub-sub!">

  8. Of course you can add more subfolders to these subfolders (such as value="****Sub of the sub-sub") down to 8 levels and 8 asterisks. But for now we've got all we want in that 'Sub of the Second Folder'. What we want is another sub of the second folder, so that means another 2-asterisk folder:

    <param name=Item12 value="**Another 2nd-level folder...">
    <param name=Item13 value="...containing a page">

  9. Of course you can add more content to this subfolder in the same way. Or to create the next root folder, use a single asterisk as with the very first folder we added. Remember that pages are always added to the last folder you created: if a folder is to contain a mixture of pages and subfolders, the pages must therefore be added first. (Actually, you can get around this rule without much difficulty if you want to, as explained in Example #3.)

  10. Finally, you need to add corresponding URL parameters to make these entries link somewhere. For example, to make the page we added as Item2 link to 'index.htm', add the following parameter:

    <param name=URL2a value="index.htm">

    Each entry can link to 4 URLs. To have Item2 link to multiple pages, assign values to the parameter names URL2b, URL2c and URL2d. The Target parameter works in exactly the same way. If a URL doesn't have a correspondingly-numbered Target parameter, it will use the one specified in the DefaultTarget parameter. To specify a different target frame for URL2a, use the parameter Target2a.

    Folders can also act as links in the same way. In the case of folders, of course, clicking the folder name or icon will open its link(s) at the same time as expanding or collapsing that branch of the tree. You may prefer not to assign URLs to folders to avoid aggravating your users!

  11. The Item parameters also provide a way to use different images for each item on the menu. These details, and explanations of every parameter including those above are given in The Parameters Explained.