Creating Navigation Bars

Navigation Bars are sets of button graphics and some associated HTML code, often used for navigating web pages. Xara LX makes it easy to create horizontal or vertical bars or bars with custom spacing. You create the basic button graphic, then let Xara LX generate the other buttons and an HTML (web) page for testing the bar.

Xara LX can also create rollover buttons (buttons that change state) - see Creating Rollovers. (Rollovers create more complicated HTML code on the web page. If you are an Internet novice, we suggest using only simple bars.)

When you create a bar you can also create a BackBar (a design that appears behind the buttons) - more details.

To create a Bar:

1. To create a bar you first need an example button. Create this button in the regular way.

This button becomes the left-hand button (for horizontal bars) or top button (for vertical bars). If your button design includes text, your example button can show either appropriate text for the left/top button or sample text. (Sample text is useful to gauge the maximum width required for the finished buttons.)

2. Select the Button & NavBar Tool.

3. If necessary, select the button - see Selecting navigation bar objects.

4. Click New. This opens the Bar Properties dialog box.

5. Select the required options in the Bar Properties dialog box - more details on these options.

6. Click Create on the Bar Properties dialog box to create the extra buttons.

7. Edit the buttons as required. (For example, by changing the text.)

If you want to use this navigation bar in Macromedia Dreamweaver, there is a separate page describing how to do this.

If you are not using Dreamweaver:

8. When you have made the changes click Export on the Button & NavBar Tool Infobar.

You can either create a new test page or insert the navigation bar into an existing .htm or .html page. (See Using the graphics and HTML code below.)

Xara LX creates an .htm file that contains the HTML required to display the buttons, plus the bitmaps (GIFs or JPEGs) for the buttons.

9. Type in the name you want for the .htm file.

10. Select the file format for the button graphics. GIF is usually best but if the buttons include complex shading or photographs, JPEG may produce smaller files. For more information see Internet bitmaps overview.

11. Click Save. This opens the regular Bitmap Export dialog box. For more information on any of the options click Help on this dialog box.

You have the option of viewing the Bar in your regular browser.

Using the graphics and HTML code on a web page

To include the bar on a web page requires some HTML code in the web page. This description assumes you know how to edit a web page and have a basic knowledge of HTML. You have two options:

Let Xara LX copy the HTML into an existing web page - this is the easiest option if the page already exists.

Let Xara LX create a test page so you can test the bar before including it in the final page.

For either option you may need to move the bar to where you want it on the page. Technical Note: the bar is contained in a Table. This ensures correct formatting. Copy the entire Table to where you want the bar to appear. The Table starts

<table name="XaraTable"...

and ends

</table>

You may also need to copy the graphics files to your web server:

1. We recommend copying the graphics to the same folder as the web page. If you use a different folder to the web page, you need to edit the SRC attributes to point to the correct folder.

2. Copy the graphics to your web site. The buttons are named Button1.gif, Button2.gif etc.

For complex bars there may be other graphics with names such as r2c1.gif plus a file called shim.gif. Copy all these to your web site. Technical note: Shim.gif is a dummy graphic used for padding.

3. Unless you assigned a web address to the button, the bar uses a dummy address to jump to when the button is clicked. You need to edit this to point to the correct page. The link address is in the HREF attribute of the Anchor tag:

<a href="untitled.htm" ...>

Movies (not working in this version)

Creating Navigation Bars

_______________

Related Topics