This page describes how to use a text editor to add a Xara Xtreme NavBar into an existing web page. Click here for other ways of including NavBars.

The exact method depends on which button states your NavBar uses. (Using only the Mouse Off state is the simplest; using the Selected state the most complicated.)
 

NavBars with only the Mouse Off button state - Show me

1. In Xara Xtreme create the NavBar and save it to disk. This creates a series of GIF or JPEG files for the buttons and an HTML (web) page. We recommend saving the NavBar to the same folder as the existing web page. If you save the NavBar to a different folder, you need to copy over the GIF/JPEG files.
2. In the text editor open the Xara Xtreme-created web page.
3. In the text editor open the existing web page.
4. You have to copy one block of text.
   Copy the block of HTML code that starts
   <table name="XaraTable"...
   and ends
   </table> Show me
   Copy the entire block including these two lines.
5. Paste this block of text into the HTML code for the existing page where you want the NavBar to appear.

If you want to use the same NavBar on other pages, you only need to repeat steps 3 and 4.
 

NavBars with Mouse Off and Mouse Over states - Show me

You need to copy two blocks of text into the existing page.

1. In Xara Xtreme create the NavBar and save it to disk. This creates a series of GIF or JPEG files for the buttons and an HTML (web) page. We recommend saving the NavBar to the same folder as the existing web page. If you save the NavBar to a different folder, you need to copy over the GIF/JPEG files.
2. In the text editor open the Xara Xtreme-created web page.
3. The first block of text is the JavaScript that controls the button behavior.
   Select and copy the block of text that starts:
   <!-- Navbar def -->
   and ends
   <!-- Navbar def end --> Show me
4. In the text editor open the existing web page.
5. Paste the block of text into the web page immediately before the </head> tag.
6. The second block of text displays the NavBar graphics.
   Select and copy the block of text that starts:
   <table name="XaraTable"...
   and ends
   </table> Show me
7. Paste this block of text into the HTML code for the existing page where you want the NavBar to appear.

If you want to use the same NavBar on other pages, you need to repeat step 3 through 7 for each page.

Note:
If, when you run your web page, you get a Runtime error message, this means the JavaScript block is missing or in the wrong place.

NavBars with the Selected state - Show me

You need to copy two blocks of text into the existing page.

1. In Xara Xtreme create the NavBar and save it to disk. This creates a series of GIF or JPEG files for the buttons and one HTML (web) page for each button. Each page has a different button shown in the selected state. We recommend saving the NavBar to the same folder as the existing web pages. If you save the NavBar to a different folder, you need to copy over the GIF/JPEG files.
2. In the text editor open the appropriate Xara Xtreme-created web page.
3. The first block of text is the JavaScript that controls the button behavior.
   Select and copy the block of text that starts:
   <!-- Navbar def -->
   and ends
   <!-- Navbar def end --> Show me
4. In the text editor open the existing web page.
5. Paste the block of text into the HTML code for the existing page immediately before the </head> tag.
6. The second block of text displays the NavBar graphics.
   Select and copy the block of text that starts:
   <table name="XaraTable"...
   and ends
   </table> Show me
7. Paste this block of text into the HTML code for the existing page where you want the NavBar to appear.
8. Repeat steps 2 through 8 for the other pages.

Note:
If, when you run your web page, you get a Runtime error message, this means the JavaScript block is missing or in the wrong place.