Dreamweaver, like Front Page, is a web development software program that makes creating web sites easy. The best thing about using a web dev program is that it'll do much of the work for you by adding in code like JavaScript or VisualBasic Script when you need to pull off a popular web design trick.
In this article, I'll use Dreamweaver MX 2004 to show you a few ways to create navigation bars for a web site.
Web site navigation is critical! If visitors have a hard time getting around your site, you can bet they'll bail, quickly. So you want to keep your navigation consistent. This article will make some of these tricks look easy, but know that site navigation can be fairly involved to get it right. So do investigate this subject further throughout the Help files for the web dev program you plan to use.
Navigation Bar
The most obvious way to insert a navigation bar is to click Insert > Image Object > Navigation Bar.
However, before you start building your site navigation, you'll want to create some images or buttons with text for each of the areas you plan to display on your bar. There are lots of web sites that allow you to swipe sets of navigation graphics for your site. You can also check out this article that shows you the basics for creating some simple buttons: Learning HTML: Designing Navigation Buttons.
I'll use my buttons from my web site, MouseTrax.com. I've already created dark and light buttons to represent up and down images for the menu items I want.
The Navigation Bar dialog box is fairly straight forward. Realize that you don't need to add images in all positions. But for illustration purposes, I have.
I click the Plus button (+) to add a new item. I give it a name, for coding sake, and then insert the path to each of the buttons I need. When the button is in the UP position, it'll show my UP button...the lighter button. If I had more buttons, I could add them to all the other moves, but that can also become complicated for the user to understand if the buttons are flashing different colors on each move! So keep it simple.
When the user moves their mouse over the button, it'll change to lighten. This lighter button will remain displayed when they click down and when they keep their mouse over the down button.
Now if you have created cool buttons that really look like buttons that have been pressed, you would want to add the variations to each event. This would give the illusion of animation...that the button is really a button being pushed down. (We'll look into this effect further in a future article.)
Be sure to also add Alternative Text, your Alt Tag, so users who don't display graphics will know the meaning of each button. Then add the web page URL for this button...the page your visitors will move to when they click this button.
If you need to go back to make changes to your layout, click Modify > Navigation Bar to display the dialog box again.
To preview how things are going, you can hit F12. If you have setup your browser default, under Edit > Preferences > Preview in Browser, your page will be displayed in your web browser, which will activate the code behind the behavior that you've added to the site.
As you can see in the image below, when I move my mouse over the Personal image, it now changes to a lighter version to represent that it is an active button.
Rollover Images
The standard navigation position on a web page is down the left side. But maybe you want to create a bar along the top? You can do this by adding Rollover Images and linking them to their respective URLs.
Click Insert > Image Object > Rollover Image to display the dialog box. Similar to the Navigation Bar dialog, but less complex, you need to give the element, the button, a name...which is used in the code to know which is which...and then insert the paths to your up/down button images. Add the Alt text and insert the linked page's URL.
After you insert one, move to the next position on your page and add another rollover. This will add images across the page, each using a similar image change...as shown below...and will navigate to a new page when clicked.
Pop-up Menus
A more complex type of navigation is the Pop-up Menu. You can see this demonstrated on MouseTrax.com.
A menu can be trickier to create because you'll want to start with an image or hotspot on a graphical menu display, and then you'll add a drop down menu to that location. To make it look right, you'll need to fuss with the colors and textures of the graphics you use so they match up nicely.
Add an image or hotspot to a graphic on your page for your nav bar. Then click on the Tag Inspector panel and click the Behaviors tab. Choose Show Pop-up Menu.
The Pop-up Menu dialog box will display.
Click the Plus button (+) to add new items to the list for this menu. Enter the text you want displayed in the menu and add the page URL link for its click.
Moving on to the Appearance tab, here you'll make any changes to the font size, position and various colors.
On the Advanced tab, you can make more refined modifications to the look of your menu. As an exaggerated illustration, you can see that I've changed the border to 5pts and made it blue. Obviously, that's a scary looking menu! But I wanted you to see how these options will affect the look of your menu. Play around with the options, just make sure you save often and write down your favorite defaults so you can reset them if need be.
The Position tab allows you to set the way the fly-out will activate when the user mouses over your menu. If you had a side menu, you'd want it to fly-out to the side. For top menus, you'll probably want it to drop down.
If you need to make changes, after you accept your menu, select the graphic on your page with the item you need to change. Go back to the Behaviors tab on the Tab panel. Right click on the item you need to change, i.e., Show Pop-up Menu and choose Edit Behavior. This will bring the dialog box back with all your previous setting so you can make the needed changes.
If you decide you need to add a new item to a previous menu, click the Add Item button and enter the details.
You can also take advantage of the Up/Down buttons along the top to move your menu items around. In the image below, I've decided that rather than just having Dian and Greg's info listed under Personal, I want to have About Us listed first, then have our individual pages shown below that item.
I can make this subheading more obvious by indenting the Dian and Greg info listings, so they appear as submenus to the About Us menu item, as you can see I've done below.
Then when you hit F12 to preview the page, you can see that by mousing over the Personal button, the About Us menu displays. Further mousing over that item displays the Dian and Greg menu items.
The Code
Now realize that while you were having fun messing with borders, colors, shading and things popping up, Dreamweaver was busy applying all types of complex JavaScript code to the underlying code page for your site.
If you click the Code button, or just hit Ctrl + Tilde (~), you can toggle over to the code, which will display a cryptic mess, as you can see below.
Although programs like Dreamweaver make it simple for web novices to develop more sophisticated sites and you don't have to understand the code...not to study it and/or learn a bit about it is totally silly! Since I learned how to write the code long before programs like Dreamweaver were available, it's easy for me to go into the code (where I work most often) to make needed customizations...some that DW won't even allow you to make through the interface, so knowing how to apply brute force coding can save your site! You don't have to learn what it all means, but I strongly suggest you take a little time to study it and learn to at least read some of the logic in the code.
And when you do, you'll see that all this code is referencing another file...mm_menu.js.
This is a JavaScript page that contains even more complex coding. You don't need to bother reading this page, but it is important to understand that this page is being referenced from the previous code on your site page, so you can make sure to also upload this file to your site, in the properly referenced location.
So many people post support questions asking for help because they are totally confused why their web site isn't displaying on their server as it did on their computer. The usual answer is because they either loaded the pages to the wrong location or didn't load all the needed files. You'll save yourself a lot of frustration if you take a little time to RTFM...read the f**** manual (Yes, that IS a technical term!). If your program doesn't have a hardbound book manual, it means it is located within the help files. Hit F1 and start reading to make sure you understand the basics of what you're doing!
Have fun enhancing your site!
|
