|
September, 2000:
Creating Unique Backgrounds
This month’s Tech Tips is from Team NetObjects member David Lewis.
I like unique backgrounds. I don’t use them all the time, but I find in certain situations, they can really make a difference to the look of a site, especially when using your own navigation and not existing SiteStyles.
With NetObjects Fusion, there are quite a few ways to add a background to your Web site. You can assign a color or a small image that tiles to fill in the screen, or use AutoFrames to have different color backgrounds, but these are basic.
My current favorite trick is to create an image for the background that “frames” the content, but doesn’t use AutoFrames and includes the navigation—I’ll tell you how to set links with the background in a moment. Now, if you want to use rollover navigation, you can follow the same steps, but don’t include the navigation as part of the background. Just leave a space for it, utilize MasterBorders, and place the images over the background. Here’s what you do:
Step 1
In your favorite graphics application, design your background area and navigation. Include an area where your text will fit. Have a look here for an example of what I mean. I used this on a project I run for NetObjects
The key here is that you need to make the image big enough so that it doesn’t tile (repeat itself over and over) with the largest percentage of screen resolutions. In this case, I set the width to 1280 pixels and set the length to my longest text block, say 2200 pixels. So, you ask, what do you do if your text is longer? Well, what I do is create a “Part 2”; I carry the text to another page. Visually, I don’t like going over 2200 pixels for a page length, but of course, you can set the length as long or as short as you like.
Also, I tend to just use one length background on all the pages and adjust the page length in NetObjects Fusion when the page is shorter. Doing this means that the background only needs to load once. If you use different length backgrounds, these must load each time you go to a page with a new background, and this diminishes the visitor’s experience.
Step 2
In NetObjects Fusion, switch to Page view, select the layout area, and then, on the Layout Properties dialog box, choose the Background tab. Next to the Image option on the Background tab, click the button with the “…” on it, locate the background you want to use and select it. The background is set!
Now, that was simple, but if you used my example to try things out, you may be stumped as to how you could click on the icons? In the example, along the top bar—which looks a lot like the NetObjects Fusion navigation bar—you’ll see a series of icons. Normally, you’d use the Hotspot tool to create a Hotspot to set your links. But, because the image is a background, you can’t use it … hmmm. So how do you make them clickable? Easy!
1. Create a white image the same size as the biggest icon. I’ve saved one, so you don’t need to make one.
2. Save it as a GIF.
3. Bring it into NetObjects Fusion as a graphic object.
4. Select the image, then choose, from the Picture Properties dialog box, the Effects tab.
5. In the Transparency option area, select Use Color to make the graphic transparent.
6. Place the image over the icon area of the navigation bar, then set the link as you would for any other graphic object.
7. Repeat the process until all your icons are set.
Ah, but what would you do if you wanted to use rollovers? Simple. Just don’t put the images as part of the background. Create them separately, and utilize a MasterBorder that fits around the navigation area. Then, place the rollover components as needed over the navigation bar.
Done.
|
