Navigate This!

People used to believe that the world was flat. Today we know better. Even so, many people still believe that Web sites are flat. If you believe this, then visitors to your site run the risk of falling off the edge (surely you've been to sites where you've done just that, finding yourself on a page with no exit—the cyber equivalent of a Sartre play).

Likewise, you've been to sites that are the web equivalent of Christopher Columbus. You think you're going to India, but you end up in the Caribbean, and consequently you call Native Americans "Indians" by mistake.

Navigation can make or break a Web site. Broken links make you look incompetent; links to the wrong pages make you look stupid. You look bad either way. Luckily, NetObjects Fusion helps you prevent that.

In NetObjects Fusion, just as in any good Web site, navigation isn't something tacked on, it's integral to each and every page on the site. NetObjects Fusion can handle navigation automatically with almost no input from you, or you can use it to create the most custom, jived-out navigation on the face of the planet. It's up to you.

NetObjects Fusion helps make you look smart in two ways:

First, it helps you organize your site so it's more logical. Web sites aren't flat. They consist of levels, starting at the home page and working down to the first level (kind of like sections), the second level (chapters), and the third level (topics). While you don't want a flat site, you also don't want a site that's so deep you get the bends trying to get back up, either.

Second, NetObjects Fusion ensures your links are correct. You can move or rename pages with abandon, secure not only in the knowledge that all the links will continue to work correctly, but in the fact that you won't have to raise a finger (or click a mouse) to keep the links current. It will even check links all over the Web for you; just make sure you're on-line, then go to Assets, click on the links tab, and choose Assets/Verify all links.

Navigation Automation
a.k.a. AutoPilot

When you create a site, NetObjects Fusion automatically builds navigation for each and every page on the site. You don't have to do a thing for your pages to all be neatly, accurately, and understandably linked. This is invaluable for sites that change often (such as Intranets) because it means that everything's always up-to-date—without your having to lift a finger. That's one less thing you have to worry about.

These buttons can even be the fancy-schmancy "rollover" buttons that change when your site visitor's mouse goes over them. Automatically. No code to write. No code to debug. No bugs, m'lady. OK, so you're probably too young to get that one (there was this shelf paper with build in insecticide--doesn't sound like a healthy idea now, but at the time it was very big).

NetObjects Fusion puts all navigation into what are called MasterBorders. Unless you remove them, you'll get a graphic banner along the top of the page, buttons for the home page and first level along the left edge of the page, and text links along the bottom. You're free to place any of these items any place you want, so you're not locked into anything. You can have buttons along the top, left, right, bottom, or all of the above.

NetObjects Fusion automatically creates the text for these items, even generating the graphic banner and button text. You just tell NetObjects Fusion what font, size, color, and other specifics you want by clicking on the Style button. This means you don't have to use a graphics program to get a stylish graphic look. It also means that if you're adroit with graphics programs you can create a single banner and button image, and have Fusion customize it for every page on your site. Efficient, effective, not to mention pretty swank.

Look here: NetObjects Fusion automatically created the banner at the top of the page and the buttons along the left (in case you're wondering, the style is Nautica).

If you change the page names, or the page order, or add or removed sections, NetObjects Fusion automatically updates this graphic navigation bar, all by itself ( as seen on the right). You don't even have to think about it. What a relief! You can't beat that.

Because it´s all automatic, you can simply change the style, and voila, the design of the entire site, including all banners and buttons, is updated instantly. This allows you to experiment (or play!) with design until you get just what you want—without worrying about having to manually update all your pages.

If just thinking about navigation confuses you or gives you an Excedrin Headache #640x480, then don't think—relax. NetObjects Fusion will take care of you. If you like this setup and just want to change the way the graphics appear, you can choose one of NetObjects Fusion's 150+ nifty styles (take a look at them in the Stylizer), or you can create your own completely custom look that still takes advantage of NetObjects Fusion's navigation automation.

Of course, you don't have to stick with this. You can do whatever you want. Eschew a banner! (I'm sorry, I just love the word "eschew" which means "abstain from" and "Eschew a banner!" is something I'm going to put on a bumper sticker someday.) Put your navigation on any edge of the page you want.

Create your own custom buttons by double clicking on a navigation button and showing NetObjects Fusion what graphic you want it to use—yes, it's really that simple.

OK, so NetObjects Fusion's navigation is easy. But is it flexible? You want flexible? I'll show you flexible.

Belly Up to the NavBar

When you click on one of NetObjects Fusion's NavBars, take a look at the properties palette (if it isn't turned on, choose View/Palettes/Properties Palette. You'll notice that the Properties Palette's NavBar tab gives you more choices than you can shake a stick at, unless you're particularly good at stick shaking.

First you can control which style buttons (if any) are used—primary, secondary, or plain text (always efficient)—and tell NetObjects Fusion if you want to use "highlighted" buttons that show the reader "in case you hadn't noticed, this is the current page,"  (this site uses them—look at the navigation bar at the top of the page and the button that stands out is the section you're in now!) Highlighted buttons are a good idea, and so easy to do in NetObjects Fusion that you really should use them. Trust me, I know these things.

Click on the Options button and you can choose which pages you want to link to:

• the first level
• the parent level (meaning the level above the current level because we all know parents are so above all us kids),
• the current level (which should be self-explanatory, if not, think of it as the "present," "prevailing" level,
• the child level, (not to be confused with the "inner child" level, which I hear is going to be a feature in some future version) but is the layer below the current layer. This is also the place where you tell NetObjects Fusion whether you want the bar to be horizontal or vertical.

Because you can set up as many MasterBorders as you want, you also can set up as many automatic NavBars as you want. Some text, some graphics, some pointing to the parent level, some to the current level, some borders pointing to both (that's what Mr. Big, a.k.a. my editor, did on his font sales site, click here to see it, then look at this page, you'll see how different parts of the site have different NavBars, the second one having two—one that shows the parent pages, the other showing the current level of pages. Lots-o-links gives the visitor the chance to go directly to where they want to go without having to pass go.

That's all very well and good, but now let's talk about most designer's favorite subject: "How do I change how it looks?" What a good question; I'm so glad you asked.

The Look

NetObjects Fusion offers three ways to add graphics to navigation (as well as allowing you to opt for text-only navigation).

1. Stock Style: You choose one of the pre-designed styles (and perhaps a typeface of your own) and voila, the names of your pages all become names of buttons and your site has graphic navigation faster than you can say, "Transparent and Interlaced." These standard buttons are good if you have to get something up in a hurry or if you have no artistic ambitions (or ability). Think of them as McWebSite, but more tasteful (with positively no clowns anywhere in site). You can see them all in the Stylizer.
   
   Below is a site design any Trekker could love. It comes with NetObjects Fusion, and it´s totally automatic.
   
    
2. Self Style: Now, if you're the type whose ego or artistic temperament wouldn't allow you to use stock buttons even if you were creating your very last Web site as your ship was sinking in the mid-Atlantic (personally for this I'd recommend finding the nearest lifeboat and using the tres nautical "Nautica"), you can create your own standard button design (using the typeface of your choice) and allow NetObjects Fusion to set the page names in the typeface you choose. Click on the Styles button and either create your own style by clicking on the "New Style" button, or edit an existing one by double clicking on the style name, then double clicking on the style element—in this case, a primary or secondary button. Then click on "Set Style" and boom, you're done—NetObjects Fusion will have added your custom icon to all the navigation.
   
   
   Here the text in the "ransom note" banner along the top is generated automatically, as is the text on top of the "fingerprint" buttons. The fingerprint that leans to the left is the "highlighted" button.
   
   
   Here´s another custom style--this time, the buttons look more like buttons. But the typeface is unique.
   
   
   
   And here´s the style used for this site. The banner is a graphic the same color as the background, so all you see is the text, which NetObjects Fusion has generated automatically.
   
   If you want to get really tricky, you can have NetObjects Fusion use a "highlighted" icon when you're on a particular page (as all three of these styles show). This helps the reader see what page they're on just by looking at the navigation buttons. All you do is tell NetObjects Fusion what graphic you want used for highlighted icons, and in less time than it takes to unwrap a chocolate and recycle the aluminum foil wrapper, you have a site with highlighted navigation buttons.
    
3. Super Style: OK, with you it's all custom. Even your black T-shirts are custom made by Armani (so it's just a good excuse to go to Milan a few times a year for a really good ham sandwich). You don't want one graphic for all your buttons, you want buttons that seamlessly meld together to create a navigation system that looks like a Martha Stewart buffet table (complete with copper casseroles and cakes covered with candied California cacti), or the dashboard of a 57 T-Bird (the ones with the see-through speedometer), or a map of the moles on Brad Pitt's butt.
   
   Well, you've come to the right place, because not only can you do any of these things (if you have the inclination and the rights) but also you can do them and still enjoy NetObjects Fusion's automated navigation. (Stop drooling, you'll ruin that custom T-shirt.) This site uses custom buttons along the top, but still uses NetObjects Fusion´s automatic navigation bar, so that the proper section names are highlighted. If a page is moved from section to section, this updates, so the proper section is always highlighted. Yeah, I know, it´s very cool.

Here's how (and this is really, really hard, so pay very close attention).

1. Select the NavBar.
2. Select the Property Palette's NavBar tab.
3. Uncheck "Use Highlighted Buttons."
4. Double click the button you want to replace with your custom graphic.
5. Up comes a dialog box with the intriguing little name of "Image File Open." Go to the folder and directory that contains the GIF or JPG you want to use for the button, select it and click on OK. Your custom button appears.
   
   If you're not using highlighted buttons then you're done. Finito. If you do want to use highlighted buttons (and I know you do), then it's just a few more steps.
6. Go to the page that will display the highlighted button (for example, on the page called "Desserts" the Desserts button would be highlighted).
7. Check "Use Highlighted Buttons."
8. Double click on the button that would be highlighted. Up comes our friend the "Image File Open." Go to the folder and directory that contains the GIF or JPG you want to use for the button, select it, and click on OK. Your custom highlighted button makes its appearance.

Done. You've now replaced both the normal and highlighted buttons.

Do that just once and NetObjects Fusion remembers that this is the picture you want used as a navigation button to that page. That's it. Really. What did that take, 30 seconds? Don't worry, no one but you need know how easy this is. You can say the change took hours and use that time for some retail therapy, or lunch, or a nap, or all three!

Smarty Links

Smart Links. No, they're not some cholesterol-free faux-breakfast sausage made out of seaweed and yam skins (which really aren't bad, I just had some for breakfast this morning and it beats real sausage because, after all, you're never quite sure what's in it, I'm shuddering to think about it even now).

Smart Links are links that are smart (duh!) because instead of linking to a specific page, they link to a relative page, such as the up, down, next, previous or the next or previous page in a "stack" created from a database. (Other programs make you code this all by hand, so one change can cause a horrible ripple effect of broken links.) NetObjects Fusion's Smart Links are extremely handy because they always work, even if you move the current page, or add or remove pages—the smart link will still link to the correct "next" or "Previous" or parent (up) or child (down). Automatically. Reliably.

As with everything it does, NetObjects Fusion is smart, but it never tries to outsmart you.

Mousing Over

One more trick and we're done, I promise. Let's say you want those fancy JavaScript "mouse over" buttons (you know the kind that seem so excited by the mouse pointer that they actually change color when it goes over them!) without having to do any scripting whatsoever (I love this feature).

 

Just make sure the components toolbar is turned on (choose View/Toolbars/Component Tools), then click on the icon that looks like a finger pointing at a picture and draw a box.

The Properties palette will display some options. Double click on the "initial image" and choose the file you want to display when the page displays. Double click on "mouse over image" and choose the image you want to display when the mouse goes over the picture. If you want the picture to change again when the mouse is removed, double click on "mouse out image" and select another graphic (or the first graphic if you just want it to go back to the original picture).

That's it. If you want to see this in action, you'll need to publish the site (because this won't work just on a page preview). While you've been clicking away, NetObjects FusionNetObjects Fusion is writing a whole-bunch-o-JavaScript for you, so you can look like a programming expert, or better, like a designer who can actually get a neat effect like this to work!

All of this makes NetObjects Fusion the right way to build a site today. Why? Because the right tools not only help you get the job done, they help get the job done right

 

• Go back to Dot Com
• Go forward to Dot´s Substance of Style
• For an interactive tour of NetObjects Fusion, click here.

 

Meet Dot Com

If you're really busy, just read this.

Site Seeing: How Fusion lets you organize, reorganize and build an entire site in a single step.

As the Page Turns: What you see is really really what your site visitor gets — no restrictions, no guesswork, no mistakes, no experience necessary. Complete power and control, and the simplest way to connect your database to the web.

Navigate This! Automatic navigation generation. Navigation built and updated automatically — always accurate and up-to-date. No other program has this feature

The Substance of Style: Professional design, built in. Create attractive sites immediately, no design experience required. Even the most demanding designer can achieve the effects they want.

Covering your Assets: One stop control over your contents and links.

Publish not Perish: Send your site to the world in a single click.