HTML Guide - Designing Navigation Buttons

[Archican]

This month I was torn about what to concentrate on for this lesson. I probably should teach you about the pile of miscellaneous codes that you can use to enhance your pages, such as soft breaks, bullets, lists, bars, etc. Or, we could have fun and work with graphics. It's been a rough month, so I decided to go for the fun stuff!

In this article, I'll show you how to create your own navigation buttons. Then I'll show you how to use FrontPage and Dreamweaver to create a Rollover (onMouseOver/onMouseOut) effect, which will display a different picture when the mouse moves over an image. If you don't have a program to create this effect, I'll show you how to write the code yourself.

Creating Navigation Buttons
I occasionally am asked how I created the web buttons on my site. This article will explain how to do it. If you go to MouseTrax Computing Solutions, then click the main logo to enter the site itself, you'll see how the navigation buttons on the site change when you move your mouse over the button. At the end of this lesson, you'll be able to create this effect, too.

You need to use a graphics program to create your button. I use PowerPoint to create the initial design of the buttons. Then I use Paint Shop Pro to finalize the image. But there are other programs you can use. I'll show you the general idea. Then if you have your own favorite graphics program, you may find that you can use it to accomplish the same results.

I open a blank page in Power Point and click View/Toolbars/Drawing to turn on the Drawing toolbar. I select the rectangle tool and draw out a small square.

Image showing a simple rectangle on the page.

A right click is always a good solution to see what you can do to any selected item. When I right click my square, I see the Format option. Here I can set the Fill Effects.

Image of the Format autoshape dialog box with the color fill dropdown showing and Fill Effect selected from that menu.

Have fun and play around with the different settings to come up with something you like.

Image of the fill effect dialog where you can set interesting shading/gradient effects.

To add text to the image, you can right click and choose Add Text. When you need to modify the text, you can then click the item, right click and choose Edit Text. If you need to adjust the text size, you can hold down Shift and hit Home or End to select the text, depending on where your cursor is currently located. Then you can adjust the font size via Format/Font dialog box. You can also set the font color. Bold fonts usually work best, as they show up better on color buttons.

Image of a home page navigation button with gradient shading.

Another trick would be to use the Word Art feature from the Drawing Toolbar to add more exciting text.

Image of the Wordart gallery dialog box showing various text effects.

After you create the Word Art item, you can select it, right click and choose Format AutoShape and move into the Fill Effect dialog again. Set your colors for the text. Then select the text and move the text so that it sits on top of the button. You can click and drag a selection net around the two items, or click the text and then hold down Ctrl and click the button to select them both. Right click and you can choose Group to make the two items into one. This will a make them easier to handle.

Image of home page button with text that has reverse gradient from the colors on the button.

Once you get one button to look the way you want it, you can copy and paste additional buttons, then modify the text to quickly end up with a pile of buttons. To modify the text, you can click around and you'll eventually select the inside item when they in a group. If you have trouble selecting the item, you can ungroup them, make the necessary changes and then regroup the button items. You don't have to use Group. But if you pile text and/or a graphic on the button, it'll be safer if you have to move it, if it's set as one item.

Image of three different nav buttons.

If you're planning to have buttons that change when you move your mouse over the button, you'll need two sets of each button. One will be considered the on button, the one that will appear when the mouse moves over the button. The other will be the off button, the one that displays when it's just sitting there, or after the mouse moves off the button.

Select all the current buttons, copy and paste them onto the page to get a second set. Now you can go through each to make modifications to the appearance of the second set. What you do to make them different is entirely up to you. Maybe you just want to reverse the color shading? Maybe change the outline? Maybe add a graphic? Maybe do a combination of these items? Just remember not to change the size of the buttons. They need to stay the same or they'll look goofy when you mouse over them if one is smaller than the other.

Image of sample nav buttons with various effects.

Tip! In case you're not familiar with a few keystrokes, know that you can hold down the Ctrl key to allow you to move items with the arrow keys a tiny increment at a time. So if you need to make slight adjustments, give that a shot. And if you need to resize an item, you can hold down the Shift key as you drag to resize an item. This will constrain the item so that you'll get equal movement from the vertical and horizontal changes.

Saving Your Buttons
Now comes the tricky part. There are a few ways to save your buttons, depending on what programs you have available. I'll show you a few ways to do it and you'll have to decide which way works best for you or whether you can come up with a better solution.

I have Paint Shop Pro. And cutting out images is very simple for me because I do it all the time. How do you think I get all the images for all these articles! I simply hit Print Screen to take a snap shot of the image I need, paste the picture from my screen into Paint Shop Pro. Then use the selection tool to cut out and save the portion of the image I need. After selecting the image I hit Ctrl/C to copy it, Ctrl/V to paste it back into the program as an individual image and File/Save As to save the file out as an individual JPG or GIF file. I name the file whatever the button is, such as ON_HomePage, OFF_HomePage. Then I place it into my web /image directory.

When I use PowerPoint to create buttons, I feel the image render smoother when I view it in full screen slide view. It may be my imagination, but I prefer to take my screen shot of the button page while in full slide view. So I click View/Slide Show and then hit my Print Screen button (which may be abbreviated on your keyboard, look for Prnt Scrn or a similar button) to save a snap shot of the screen image to the clipboard.

If you don't have Paint Shop Pro, or some other good photo manipulation program, you can use Paint, as it comes with Windows. And you can use that program to cut out your buttons. There's just a little trick when using the program.

After you take your screen shot, open Paint (under Start/Programs/Accessories) and click Edit/Paste to drop the shot on the screen. Click File/Save to save a copy of your master buttons.

You'll need to choose the Selection Tool. However, when you first paste in your image, it's already selected, as is the full image you just pasted. So you'll need to click some other button and then click the square Selection Tool again to force it to let go of your full page so you can cut out the buttons you need. Then carefully select your buttons, one by one.

Image of Paint program with home page button selected.

As you select each one, click Edit/Copy To to save just that selected image off to a single graphic image. If you attempt to copy the image to a new page and save it out as a file, it'll save the full canvas. So you need to do it this way to save just the small button selection itself.

Image of Paint with Edit, Copy To menu displayed.

The problem here is that the only format you can save to from this menu is as a BMP (bitmap) and that format is huge, as compared to the more common JPG or GIF files used on the web. So you won't want to use this format on your web page! That means there's a little more grunt work you'll have to do to convert the file to a smaller format.

After you've saved off all your on/off buttons, reopen each one individually and then click File/Save As and there you'll be able to now save the file as a JPG or GIF file format. You can later delete the BMP files.

If you have PowerPoint 2000, you can save off the individual buttons without much of a problem. If you click the item and choose File/Save As, the file seems to be saved out much larger than expected. But you can click Insert/Clipart to open the Clipart Gallery. Create a new group and hit Ctrl/V and the image will be pasted into your gallery. It comes out the right size and goes into your gallery as a GIF file. That's great. It'll show the path where the clipart files are stored. So you can go into that deep folder path and copy out your buttons to your web's image folder.

Continue here: http://www.profusehost.net/forum/htm...continued.html (HTML Guide - Designing Navigation Buttons (Continued))