Creating and adding a Xara Webstyle 4 or Menu Maker 1.1 menu bar to Fusion

Xara Webstyle 4 and Xara Menu Maker allow to to create professional, high-quality NavBars & DHTML menus at the click of a button. Now you can integrate these menus into your Fusion site.

Download a FREE 15 day trial of Menu Maker or Webstyle

We have assumed for the sake of simplicity that you will be publishing the site with a flat folder structure. Set this in publish view...

Next make a note of your Fusion site structure and the names of the published files.
More about page naming

The Fusion site structure will essentially need to be replicated in Xara Webstyle 4...

Once you've saved the Xara Webstyle menu files (we aren't going to go into how to use Xara Webstyle here) you will have 1 *.html file, 2 *.js files and a number of graphics files. I'll call these project*.* files but they will in reality have a name of your choice. Save the files to a suitable folder - the assets folder under your NetObjects site name would be ideal.

Next, we need to import each of these elements into Fusion. There are many ways to do it but the most streamlined we've found is:

Create a blank Fusion page where you will create the menu. Select "file"..."import html page" and browse for project.html - this will create what looks like an empty text box on the page - select this - if you have difficulty selecting it use the object tree (F4). On the properties palette uncheck "size layout to text". Pressing enter a few times will help you to see the text box more easily. With the text box still selected click "HTML" on the properties palette. Enter...

in the "after tag" tab. Like so...

Next use the plug-in tool to drag a small box on the page and browse for one of the *.js files. Do the same for the second *.js file. Now add all the image files to the page (drag and drop from explorer onto the page is the quickest way). Don't worry about the position of these objects - they won't be visible when here when we've finished.

Select the 2 plug-in placeholders and all the images (ensure you select even tiny images) and drag them all inside the text box (blue hashing at the edges will show you when the objects are correctly positioned inside the text box). For neatness, select each of these objects in turn and apply Left align from the third tab on the properties palette.

This will have correctly placed all the required assets into the NOD file.

You can now drag the text box and its contents to a masterborder if you wish. Publish and everything should work as planned.

Is there a problem with this solution? Please let us know

Google