Getting Started             

  1. Place the class files (rySurfBoard.class, rySBList.class and ryWrapper.class) 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 SurfBoard to appear:
    <APPLET CODE=rySurfBoard WIDTH=275 HEIGHT=275>
    <param name=Copyright value="SurfBoard © 1998 CodeBase [www.codebase.co.uk]">
    <param name=BgColor value="C0C0C0">
    <param name=BgImage value="paper.jpg">
    <param name=3DBorder value="yes">
    <param name=SoundSelect value="s11.au">
    <param name=SoundButtonDown value="s10.au">
    <param name=SoundButtonUp value="s10.au">
    <param name=DefaultTarget value="mainframe">
    <param name=Testmode value="no">
    <!--LABEL SETTINGS-->
    <param name=Label value="CodeBase SurfBoard">
    <param name=LabelColor value="000000">
    <param name=LabelFont value="Helvetica,bold,16">
    <param name=ShowUnderscore value="yes">
    <!--PREVIEW SETTINGS-->
    <param name=PreviewTextColor value="00C000">
    <param name=PreviewFillColor value="000000">
    <param name=PreviewFont value="Dialog,plain,13">
    <param name=PreviewLines value="4">
    <!--LIST SETTINGS-->
    <param name=ListTextColor value="000000">
    <param name=ListFillColor value="F0F0FF">
    <param name=IncreaseListWidth value="10">
    <param name=ShowItems value="8">
    <param name=InitialSelect value="2">
    <!--IMAGE-BUTTON SETTINGS-->
    <param name=PlainImage value="prod1.gif">
    <param name=OverImage value="prod2.gif">
    <param name=PressedImage value="prod3.gif">
    <!--FUNCTIONAL SETTINGS-->
    <param name=Entry1 value="Products & Services">
    <param name=Entry2 value="CodeBase Menu Systems">
    <param name=Entry3 value="Online Registration">
    <param name=Entry4 value="A nice picture">

    <param name=URL1a value="products.htm">
    <param name=URL1b value="productmenu.htm">
    <param name=Target1b value="topframe">
    <param name=URL1c value="counter.htm">
    <param name=Target1c value="bottomframe">
    <param name=URL2a value="menus.htm">
    <param name=URL3a value="online-reg.htm">
    <param name=URL4a value="mortgage.htm">

    <param name=Display1 value="Details and descriptions of each applet and suite with links to online demos">
    <param name=Display2 value="Find out more about CodeBase menu systems and download evaluation copies">
    <param name=Display3 value="Choose the products you want to purchase and buy them instantly online">
    <param name=Display4 value="*images/clouds.gif">
    </APPLET>

  3. Remove or edit the BgImage parameter and those relating to Sounds and Image-Button, and adjust the aesthetic parameters such as colors and fonts. We've grouped these according to the component they affect to make them easier to understand, but most parameter names should be self-explanatory.

  4. Use the Entry parameter to insert the text that should appear on the List menu. You can use the ShowItems parameter to set how many entries should be visible in the List without scrolling. (Note that in Netscape Navigator 4x, the display of List entries won;t be quite as tidy as in Internet Explorer.)

  5. Use the Display parameter to enter a text description for each menu entry, or enter the URL of an image to be displayed instead, prefixing it with an asterisk (*) so that SurfBoard knows how to handle it. Use the PreviewLines parameter to set how many lines of text the Preview area should be able to display (in other words, adjusting its height).

  6. Edit the URL and Target parameters for each Entry number to set up the links.

  7. There are additional parameters not listed above that let you move components to where you want them and resize them, and the Testmode parameter will give you some help in determining the correct locations for them. These and all the parameters listed above are defined in detail in The Parameters Explained.