10

Now we are ready to export our Buttons and ButtonBar.

Select the Button and Navbar Tool.

Press Export on the Infobar.

In the Image Slicing dialog, select a folder in which to save your files. Key in a name for your file, and press Save.

I have named my file index.htm and have chosen PNG slices (*png) as my export file format. You can also select GIF or JPEG. Do not select BMP (even though it is a choice) as BMP file format is not supported by any Browsers.

The PNG Export Bitmap Options dialog will open in which you can preview two different options in side-by-side windows.

I have opted to use 16 Colors for my Color Depth and Error Diffusion Dithering.

The option on the right, 256 colors, no dithering, will create a file size of 67K while my selected option produces a much smaller file size of 33K. The quality is almost equal.

NOTE: The file size is large because of the speckled fill I used. A solid color fill will result in a much smaller file size.

After you press Export, Xara with chug and whir a bit while slicing and dicing your Button Bar and buttons, and cranking out all the necessary HTML and JavaScripts. You can select preview your ButtonBar. Browse to the folder in which you saved your files, then double click on the first HTML page to launch the page in your Browser.

You can copy and paste the generated scripts into most Web site creation applications. For some reason this is a problem with NetObjects Fusion, the product I use. However, as Fusion can create it's own rollover buttons, I usually create my images in Xara and let Fusion handle the scripting.

Here is how Xara slices and dices the image and BackBar.

It assigns names to each element. While the buttons are named according to their states, the names of the sliced BackBar are a bit more esoteric.

To see the buttons and BackBar in action Click Here.

On the next two pages, you will find a mini-tutorial based upon what we have learned so far, but one that creates irregular - shaped buttons.