XARA Navagation Bars and Fusion Web Hosting Fusion Galleries   How to bring Xara Webstyle Navigation bars into the NetObjects Fusion Data Base Bringing your Webstyle projects into NetObjects Fusion has Never been Easier Expanded Tutorial Modified 12/28/03 To See a Condensed Version of this Tutorial Click Here Not Using Fusion Yet?  Get Your Free 7.0 Trial Now. To Purchase Fusion 7.5 Click Here To See What's New In Fusion 7.5 Click Here. gotFusion.com - Where You Find All Your Answers Tutorial goal: Provide Fusion users with the necessary steps to properly introduce "ALL" Xara Files into the Fusion Data Base in such a manner that they will become an integral part of the Fusion .nod file system, including Xara's .js files. Xara will save image files in either .gif or .jpg format. For the purpose of this tutorial we will be using the .gif format. Lets get started, shall we. Phase 1 Create your Xara Menu files as you normally would using Xara Webstyle. Save your Xara generated files to their own unique folder on your desktop and give it a name that will help you identify which site it belongs to, and what's in the folder. For the purposes of this tutorial let's name it "Xara Assets site 101" Phase 2  NOTE: This next step is critical.  It is extremely important to remember that Fusion will draw it's assets from where ever you designated them to come from, whether they came from the root of your "C" drive or from within a nested folder structure on a particular zip disk, Fusion will ultimately record asset locations into it's data base and will always  look in these established locations for the needed assets each time you publish the site. If for some reason these asset locations are changed you will then have to go through the process of reintroducing those assets back into the Fusion Data Base. Otherwise, on publish, Fusion will error on locating the needed assets. Therefore, it is a good policy to keep ALL site assets within the Fusion Site assets folder. POSITION XARA ASSETS: Okay, Using Windows Explorer, move the desk top folder called "Xara Assets site 101" that contain your newly generated Xara files into your Fusion Site "Assets" folder. See Figure 1.0 Fig. 1.0 Phase 3 Creating a Special "Holding" Page for .js file links. Open the site in which your Xara Files will be used (the same site where you placed your Xara Files into the assets folder) Now we need to create a special page that will be used to hold the hidden keys that will allow your Xara Menu Nav Bar .js files to become an integral part of Fusion's .nod Filing system. Go to "Site View" by clicking the "Site View" Icon in the upper main toolbar. See Figure 1.2 With your mouse cursor highlight one of your page icons and Right-click on it, select "New Page" See Figure 1.3 Fig. 1.2 Note: You can name this new page anything you like as long as the name does not conflict with any other page name in your site (same name). For the purpose of this tutorial lets name this new page ".js file Link holding page" Fig. 1.3 Now we have to set the publish properties of this new page to "Don't publish". Highlight the new page and put a check mark in the "Don't Publish" check box in the page properties palette. See Figure 1.4 Note: The reason we need to set this new page to "Don't Publish" is because we are going to use it to store the internal links to our Xara .js files. Linking to these .js files is what will bring them into the Fusion Data Base by making them an active and used asset for your site. Fig. 1.4 Now we have to make Fusion aware that these Xara .js files exist and that they are part of our site. To do this, all we need to do is put two text links on our ".js file link holding page" that will link to the two Xara .js files that we put into our assets folder earlier. Create 2 text links, one for each Xara .js file and link them each to their corresponding .js files. See Figure 1.5 Fig. 1.5 Fusion now has our .js files logged into it's .nod file data base and will publish when needed and will also include them in an "Export to Template" process. Phase 4    Modified 12/28/03 Placing Xara's .js script  Menu data onto  your page using the html attributes of a text box. The Xara .js file Contains the necessary Xara Navigation Bar display information and must be placed on your page in the location where you want your Nav Bar to be displayed. For this tutorial we will place our Xara Nav Bar in the home page Master Border area. Click and draw a text box in the Master Border area or the area where you want your Xara Nav Bar to be(a small sized text box will do).  See Figure 1.6 Fig. 1.6 While having the new text box selected, click the "HTML" button on the Text Properties" palette (See Figure 1.7) Fig. 1.7 Locate your Xara generated html file, open it and view the source. In that source will be the .js file script. This is the script that we need to insert into the "HTML" properties of our text box. Insert the script into the "Before Tag" area of the text Object HTML. See Fig. 1.8 below. Fig. 1.8 Phase 5 Note: So far, we have brought in and associated all of the Xara files with the exception of the Nav bar .gif files. Normally we would bring in image files by using the Fusion "Picture" tool, but not so in this situation. What we need to do now is bring in each one of the Xara .gif files and force Fusion to publish them when we execute the "Publish" command.  Once these .gif files are published, the Xara .js and HTML files will look for all these .gif files and display our Nav Bar perfectly. Let's go ahead and do that now. Go to "Assets" view, click on "Assets" then "New File Asset."  See Figure 1.8 Fig. 1.8 The below new  "File" dialog box will be in view. See Figure 1.9 Click the "Browse" button and browse to the site assets folder where we stored all the Xara files and select the first Xara .gif file in the group. IMPORTANT, place a check mark in the "Always publish file" option check box. Repeat this process until you have brought in all of the Xara .gif files into your assets view list. Fig. 1.9 Phase 6 Site Publish Settings: Set your site publish settings to either "by Site Structure" or "by Flat"  See Figure 1.10 Fig. 1.10 That's it, just add your other site content and you are ready to publish. To see a sample site that was produced using this method click here. Xara Design Note Unlinked Button Design Note: In the event that you decide to have a "Future link" in your Xara Nav System, as illustrated in Figure 1.11. Please keep in mind that Xara 3.0 & 4.0 will generate one blank .html page for each one of those unlinked buttons. It will not be necessary for you to bring those blank pages into Fusion in order for your Nav Bar to function properly. Just delete the extra html pages Xara generates for those blank links and only keep the one main Xara html file. Fig. 1.11 [Authors Notes] This Tutorial  written and maintained  by Rich DeCruz, GotFusion, LLC My personal thanks to Charlie Haywood for his expert assistance in designing the mechanics of this tutorial.  Xara Xone is is the best one-stop resource for Xara-X, vector graphics and drawing software. gotFusion wishes to thank Gary W. Priester and Xara Xone.com for publishing this tutorial in their Guest Tutorial Section 11/1/03 Updated 12/28/03 |  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  |  Problems with this page? All content copyright © 2002 gotFusion LLC.  The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC Copyright, legal notice & privacy statement