Customise the Navigation Menu with Dreamweaver CS5.5

How to Customise the Navigation Menu on Your Website with Dreamweaver CS5.5

By Hanumantha Rao.N Assoc Prof  @HanuTechVision

Goal of This Chapter

By the end of this chapter, you will have modified your navigation menu so that they have buttons linking to the other important pages of your site. You will also have, optionally, changed the colours of the buttons so that they fit into the colour scheme of your site.
This chapter also discusses some ways in which you can deal with the unbalanced columns on your web page.

What Do You Put on Your Navigation Menu?

Before we continue, please take a look at the navigation menu in the left column of any page on thesitewizard.com. Don't be distracted by the fact that the buttons change colour when your mouse hovers over them. (Your menu buttons will work that way too.) The thing I actually want to draw your attention to is the types of links I placed in that menu. Notice that the buttons only link to the main sections of thesitewizard.com, as well as to a very few pages that people may want to access from anywhere on the site, like the site map, the home page, and the feedback form. That is, they don't link to every single page on the site.
Since you will be working on your navigation menu (or "navbar" as some people like to call it) from the next section onwards, you will need to decide which pages on your site you want to link to. If your site is going to have hundreds of pages, like mine does, you won't be able to link to everything. (Actually, you can, but your menu will be very long, and your page will be very large and take forever to load.)
Whatever you decide, your navigation menu should at minimum include the following pages:

• Home Page

  Although your site logo already links to your home page, it's still good to have the home page as the top item in your navigation menu. Bear in mind that your site will attract all kinds of visitors, including new Internet users who may not be familiar with the convention that you can click the site logo to go to the main page. Remember that one of your goals in web design is to make it easy for your visitors to get to where they want to go on your website.

• Site Map

  You will be creating a site map in the next chapter. I'll also discuss the importance of that page and what it does at that time. For now (or rather, later on in this chapter), just create a button pointing to the site map.
  Your site map will be located at "http://www.example.com/sitemap.html", where "www.example.com" is (of course) replaced by your actual domain name.

• Feedback (or Contact) Form

  You will be creating a feedback form in the final chapter of this tutorial. As such, you'll need a button that links to the feedback form.
  Your feedback form will be located at "http://www.example.com/feedback.html", with the "www.example.com" portion replaced by your site's real domain.

• About Us (optional)

  If you are creating a business site, you should create an "About Us" page to tell your visitors about your company. For personal sites and hobby sites, this page is optional. (In other words, only add an "About Us" button if you want to have an "About Us" page.)
  Your About Us page will have an address of "http://www.example.com/about.html", again with the "www.example.com" replaced accordingly.

• Other Pages for Commercial Sites

  If you're selling goods or services, you should create buttons for each of the following:
  
  • Products (or Services)
  • Prices
  • Order
  If you have a physical store, you may also want to create a button that links to a page where you can give your shop's address and provide a map showing visitors how they can get there. Call the button "Location" or "Store locations" or something like that.
  The filenames of these pages can be anything you like. However, for the reasons I describe in my article on How to Create Good Filenames for Your Web Pages, do not put spaces or capital (uppercase) letters in your filenames. For example, an address of "http://www.example.com/products.html" is good, but an address of "http://www.example.com/Products.html" may cause problems in the future.

As you've probably deduced from what I said above, plan both the names you want to put on the buttons, as well as the filenames of the pages linked to. For the Site Map, About Us and Feedback Form pages, please use the filenames I supplied above. You will be using those same filenames in chapters 7 and 8 when you create those pages, so if you change them in this chapter, your buttons will not connect to the pages you create in the next couple of chapters, and you will get 404 File Not Found errors when you click the buttons.

How to Change the Navigation Menu Items into Clickable Buttons

1. Start up Dreamweaver and open your home page. You can open the page by doubleclicking "index.html" in the FILES panel on the right side of the Dreamweaver window.
2. This step is almost identical with what you did in chapter 5, where you changed textinto clickable links.
   Select the words "Link one" by dragging your mouse over them. Then type "Home" (without the quotes). This should overwrite the existing words with what you type.
   Click the "Link" field in the PROPERTIES panel at the bottom of the Dreamweaver window. Delete the hash ("#") mark that is currently in that field. In its place, type the web address of your home page. For example, type "http://www.example.com/" (without the quotes) into that field, if that is the URL of your home page. Like the link to your home page that you made in chapter 5, you can, alternatively, use a relative URL if you prefer. (Please see chapter 5 to find out what relative and absolute URLs are, if you can't remember what they mean.)
   With this step, the top button in your navigation menu is now a clickable link to your home page.
3. Select "Link two" (second button) and replace it with "Feedback Form" (without the quotes). Alternatively, you can also use "Contact Form", "Contact Us", "Feedback", "Support" or whatever you want as the label for your feedback form. (It doesn't really matter.) Replace the "#" in the "Link" field of the PROPERTIES panel with either the absolute URL of "http://www.example.com/feedback.html" (without the quotes) or the relative URL of "feedback.html" (without the quotes). If you use an absolute URL, remember to change the "www.example.com" part to your own domain.
4. Select "Link three" and replace it with "Site Map" (without the quotes). Change the corresponding "#" in the "Link" field of the PROPERTIES panel to either the absolute URL of "http://www.example.com/sitemap.html" (without the quotes, and with the "www.example.com" portion replaced with your domain) or the relative URL or "sitemap.html" (without the quotes).
5. If you've decided to have an "About Us" page, replace "Link four" with "About Us" (or "About me", or even just "About"). The "Link" field for this button should be set to either "http://www.example.com/about.html" or "about.html". Again, don't enter the quotes, and remember to replace the domain with your own.
   If you don't want an "About Us" page, just skip this step.

At this point, you've either run out of buttons, or have one left over, depending on whether you've created an "About Us" button. Read on to find out how you can add more buttons to your navigation menu, as well as how you can delete buttons that you don't want.

Note that you do not have to put your buttons in the order I suggested above. Apart from the "Home" button, which should always be the first button in your navigation menu, feel free to use any order for the other buttons. Just remember to match the correct page URLs to the labels you place on those buttons. That is, if you replace "Link three" with your About Us page, be sure to use the URL for the About Us page when you modify the Link field in the PROPERTIES panel, and not the Site Map URL.

How to Add a New Button to Your Navigation Menu

1. Click your mouse somewhere in the last button of your menu. This places the blinking text cursor amidst the words there. Use the arrow keys on your keyboard to move the cursor to the end of the word (or words) on that button. For example, if the last button says "Site Map", make sure that your text cursor is after the "p" of "Map".
2. Hit the ENTER key (or RETURN key on the Mac). This creates what looks like a tiny sliver of a button below the last button and puts your cursor there.
3. Type the label you want to put on that button. For example, if you want the next button to say "Order Form", type "Order Form" (without the quotes). Don't worry if the things you type are not properly aligned, or that they don't have the same colour as the other buttons. This will be fixed in the next step.
4. Select the words you just typed. You may find it easier to select them if you drag your mouse backwards from the last letter of the last word. Alternatively, hold down the Shift key on your keyboard while pressing the arrow keys to select the word.
5. Type the URL of that page into the Link field of the PROPERTIES panel, followed by the ENTER key. Don't worry that there isn't any hash ("#") mark in that field. For example, type "order.html" into that field (or its absolute URL version, if that's what you used for the other items in your menu).
   The words on the button should now be centred. The button itself will also change colour to match the other buttons on the menu.

If you want even more buttons, just go through the above procedure again for each new button.

How to Delete a Button from Your Navigation Menu

1. Select all the words on the button that you want to delete. For example, if you want to delete the "Order Form" button on your menu, drag your mouse over the words "Order Form" to select them.
2. Hit the DEL button on your keyboard. This shrinks the button down to a thin horizontal gap on your menu.
3. Position your mouse so that it is directly over that narrow sliver. Click the right mouse button to bring up a pop-up menu.
4. Click the "Remove Tag <li>" item on that menu. The button should disappear altogether.
   Warning: if you do not see "Remove Tag <li>" in the menu, but see something else, like "Remove Tag <ul>", do not click it or you may end up removing all the formatting on your navigation menu, if not the whole menu itself. Instead, hit the ESC key to get rid of the pop-up menu. When you do this, your text cursor will disappear, so you'll have to put it back where it needs to be again, that is, click to place it in that narrow gap that used to be your menu button. Once you see a tiny version of your cursor blinking away in that remnant of a button, right click the gap once more. The right click menu should pop up, allowing you to try this step again.

If you make a mess of things, and find that you've accidentally removed all the formatting from your navigation menu or some other disaster that you don't know how to fix, see if you can undo the mistake by using the "Edit | Undo" menu item. That is, click "Edit" on the menu bar, followed by the "Undo [...etc...]" item in the menu that drops down. (The "Undo" menu item says different things depending on what you just did, but it will always begin with the word "Undo".)
If your mistake is so disastrous that even the Undo button cannot fix, you may also want to consider closing your file without saving anything. That is, click "File | Close" and when Dreamweaver asks you whether you want to save your changes, choose not to save. Then reopen the file again by doubleclicking the "index.html" item in the FILES panel. This will cause you to loose any work you've done since your last save, but at least you'll have got your navigation menu back. Of course if you have saved your file after you made your mistake, then don't do this, since you'll only load back the same error-filled page with the additional problem that you won't be able to use "Edit | Undo...".

How to Change the Colour of Your Navigation Menu Buttons

Now that you know how to modify the buttons on your navigation menu, all that remains is to make sure that the colour of the menu matches that of the rest of your site. You'll probably want to do this if you have modifiedyour site's background colours in chapter 4 to something substantially different from the original.
This entire section is optional. If you like your menu's current colour scheme, just skip to the next section.
There are two sets of colours that you can change on your navigation menu. The first is the normal colour of the button. The second is the colour of the button when your mouse cursor is hovering over it. (No, you cannot test this second colour in Dreamweaver itself, since the latter is not a web browser.)

1. Click somewhere in any one of the buttons on the navigation menu.
2. Two lines should appear in the Rules section of the CSS STYLES panel on the right side of Dreamweaver.
   
   • The line that reads "ul.nav a, ul.nav a:visited <a>" contains the rules for the normal button. Doubleclick this line if you want to change the default colour of the button.
   • The line that reads "ul.nav a:hover, ul.nav... <a>" contains the rules for the menu button when the mouse is hovering over it. Doubleclick this line if you want to change the colour of the button when a mouse cursor is directly over it.
   The two lines look very similar, so look carefully before you click. One line contains the word "a:hover" somewhere, and the other doesn't. The line with the "a:hover" is the one that lets you change the button colour when the mouse is hovering over it. The other one lets you change the default colour.
3. This should bring up the CSS Rule Definition dialog box that you have encountered over and over again in the previous few chapters. To change the background colour of the button, click the "Background" line in the list box on the left column of the dialog box.
   The right side of the dialog box should change. You should be familiar with this section since you used it in chapter 4 to modify the background colour of the various sections of your web page. The procedure is the same for the navigation menu button, that is, click the box for "Background-colour" to get the colour picker pop-up and select your colour.
4. Click the "OK" button for the CSS Rule Definition dialog box when you're through with your changes.

Deleting the Placeholder Text in the Left Column

Now that we've finished configuring the menu buttons, it's time to get rid of the placeholder text directly below the menu. I'm, of course, referring to the eyesore that begins with the words "The above links demonstrate a basic navigational..." (etc).
Getting rid of those words should be child's play to you by now. Just click your mouse somewhere in the text and use your Backspace and/or Del key to get rid of them. The bigger problem, as I'm sure you'll realise as soon as you've deleted the junk, is what to do with the unbalanced columns that results. This is the topic of the next section.

How to Fix the Lopsided Columns

Most of you will probably have noticed by now that the left and right columns of your page are somewhat unbalanced. Those of you who have a lot of content in your right column but only a few buttons in your left will see a left column that stops short halfway down the page. Others with a lot of buttons in your navigation menu, but little content in the right column will see a page that appears to be supported by the left column, with the right side of the page a vast expanse of empty space.
There are two ways to deal with this lopsidedness.

1. Hiding the Unbalanced Columns with Visual Tricks

   One way is to hide the fact that your columns are not equal in length by adjusting the background colours. You can see this method in action by simply looking at thesitewizard.com's pages, including this very page you're reading. Notice that my left column is actually very short; far shorter than my right. I've tried to reduce the ugliness of this by setting the same background colour for my left and right columns. This gives the illusion that my page is a single column page with a wide left margin where I pasted my navigation menu and other stuff.
   You are of course not restricted to using a white background for this to work. Play around with colours or background images if you like. With a bit of creativity, you can make your page look attractive in spite of having this wide margin.
   For those who have forgotten how to change the background colours, please refer to chapter4.

2. Balancing the Columns by Adding Blank Lines to the Shorter Side

   The second way to fix this problem is probably one that has already occurred to you: add blank lines to the column that is shorter. This can be done the usual way: click to place your cursor in the column you want to lengthen, then hit the ENTER (or RETURN) key repeatedly to create blank lines.
   Although this is the obvious solution, it is actually not a very effective solution. Even if you meticulously adjust your page so that both columns are equal in length in Dreamweaver, be aware that your site will appear different on other computers with different monitor sizes (or more accurately, screen resolutions). This is mainly because your web page uses what is known as a "liquid" layout which you selected in chapter 1 when you first created your home page. Such a layout adjusts its width according to how big the browser window is. Since your visitors are unlikely to have the exact same screen size as you do, your site may appear with unbalanced columns on their computers, even if it looks perfect on yours.
   On the other hand, if you disregarded my suggestion to use a liquid layout in chapter 1, and chose a fixed layout instead, it's possible that adding blank lines to the shorter column is a viable solution.
   (Before you rush out to change your site layout to a fixed layout just so you can solve your lopsided columns problem by hitting the ENTER key, be aware that each layout has its own pros and cons. See What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts? if you want to know more.)

Fine Tune Your Home Page

With this chapter, your home page is complete. As such, if you were holding off making any changes till later, because you thought you still had a long way to go, now is a good time to do those things. That way, you can have the satisfaction of seeing a finished home page when you test your site.

Testing Your Menu

Save your page with "File | Save All" and publish it to your site with "Site | Put".
Go to your site with your web browser and load your home page.

1. Check Your Colour Scheme

   To check your colour scheme, it's not enough to give your site a cursory visual survey. You should also move your mouse over your navigation menu so that you can see if the hover colour looks good with your the rest of your page.

2. Check Your Buttons by Clicking Them

   Click the buttons on your navigation menu. The Home button should take you right back to your current page. If it doesn't, go back into Dreamweaver and fix it by entering the correct URL.
   The other buttons should result in "404 File Not Found" errors. This is expected, since you have not actually created those pages yet. If nothing happens when you clicked a particular button, then something is wrong. Either you've left its link pointing to "#", or you've forgotten to make it into a link. Return to Dreamweaver, check the button again and fix it.

3. Check Your Page Under a Lower Resolution

   It's possible to design your site thinking that everything is fine, only to find out later that it doesn't look good on computers other than your own. This is especially so if you are designing your site on a monitor with a high resolution. This is why you need to check how your page appears in a lower screen resolution as well.
   It's possible to do this without actually buying another computer. All you need is a web browser like Opera. Since Opera is free, and available for many systems including Windows, Mac OS X, and Linux, get it and install it on your computer. Then configure Opera to show you the size of its window by clicking "Tools | Preferences" from the menu, followed by clicking the "Advanced" tab, and the "Browsing" line in the left column. The contents of the right side will change. Click to put a tick in the "Show webpage dimensions in title bar" checkbox. Now whenever you resize the browser window, Opera will show you the size of the window in its title bar.
   Use this feature to check your site under low resolutions like 1024x600 (the screen resolution of many netbooks) and perhaps also 1366x768. That is, just resize the Opera window till you see those numbers (especially the widths, that is, 1024 and 1366) in the title bar (the topmost part of the browser window).

Congratulations. You have now completed your home page.

Next Chapter

In the next chapter, you will learn to use more of Dreamweaver's site management features, including its well-known template system, so that you can create and maintainmultiple pages on your website with minimal effort. You will also use that system to create most of the other pages of your website.