This page describes how to use Macromedia Dreamweaver 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 Dreamweaver open the Xara Xtreme-created web page. You see the NavBar displayed.
3. Select the NavBar.
4. Use Copy on the Edit menu to copy the NavBar.
5. Use Paste on the Edit menu to paste the NavBar into your existing web page.

If you want to use the same NavBar on other pages, you only need to repeat step 5.
 

NavBars with Mouse Off and Mouse Over states - Show me

You need to copy the graphics into your web page and then copy the JavaScript.

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 Dreamweaver open the Xara Xtreme-created web page. You see the NavBar displayed.
3. Select the NavBar.
4. Use Copy on the Edit menu to copy the NavBar.
5. Use Paste on the Edit menu to paste the NavBar into your existing web page.
   If you want to use the same NavBar on other pages, you need to repeat step 5 for each page.
6. In the Xara Xtreme-created web page display the HTML source. (HTML Source in Dreamweaver 3 or Code Inspector in Dreamweaver 4, both on the Window menu.)
7. Select and copy the block of text that starts:
   <!-- Navbar def -->
   and ends
   <!-- Navbar def end --> Show me
8. In your web page display the HTML source.
9. Paste the block of text into the web page immediately before the </head> tag.
   If you want to use the same NavBar on other pages, you need to repeat step 9 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 the graphics into your web page and then copy the JavaScript.

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 Dreamweaver open the appropriate Xara Xtreme-created web page. You see the NavBar displayed with one button in the selected state.
3. Select the NavBar.
4. Use Copy on the Edit menu to copy the NavBar.
5. Use Paste on the Edit menu to paste the NavBar into the appropriate existing web page.
6. In the Xara Xtreme-created web page display the HTML source. (HTML Source in Dreamweaver 3 or Code Inspector in Dreamweaver 4, both on the Window menu.)
7. Select and copy the block of text that starts:
   <!-- Navbar def -->
   and ends
   <!-- Navbar def end --> Show me
8. In your web page display the HTML source.
9. Paste the block of text into the web page immediately before the </head> tag.
   
   Repeat steps 2 through 9 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.