Many websites have a common set of links on every page to the main sections of their website. These links afford visitors a quick way to access other parts of the site. They are usually positioned in a standard place on a web page, and are sometimes dressed up to look like clickable buttons. By convention, this set of links is referred to by webmasters as a "navigation menu". This chapter of the Dreamweaver CS5 Tutorial shows you how you can customise the navigation menu on your website.
Note that I will assume in this article that you have been following the earlier chapters of the tutorial. If this is not true, you may want to start with chapter 1. In fact, if you are completely new to creating websites, most people find the article How to Make / Create Your Own Website: The Beginner's A-Z Guide a better starting point.
By the end of this chapter, you will know how to add and remove items from your navigation menu, change the text in the menu into clickable buttons, and customise the colours ("customize the colors" if you use some other variant of English) of the menu button. This chapter also discusses some ways to solve the problem of the uneven columns on your web page.
As I'm sure you've already realised, the web page that you're currently working on, derived from Dreamweaver CS5's two column template, already has the skeleton of a navigation menu built into its left column. It actually functions somewhat like thesitewizard.com's menu, which you can find on the left column of this page that you're reading, in that whenever you hover your mouse over a button, it changes colour. The only reason your menu doesn't appear to work at the moment is because we haven't actually pointed the "Link one", "Link two", etc, buttons to anywhere useful.
Start up Dreamweaver and open your "index.html" page.
Select the words "Link one" by dragging your mouse over them, and type "Home" (without the quotes). This will replace the existing words. Alternatively, you can click your mouse somewhere in those words and use your DEL or Backspace key to remove the existing words, and replace them with "Home". Leave your text cursor in that button. Do not click elsewhere.
In the PROPERTIES panel at the bottom of the Dreamweaver window, replace the hash ("#") mark in the "Link" field with your home page's URL. If you're not sure what I mean, please return to Chapter 5: How to Make Your Images and Text into Clickable Links with Dreamweaver CS5. The only difference between what I'm describing here and what you did in the last chapter is that, here, you've got to delete the "#" mark first.
You now have a "Home" button as the top button in your navigation menu, pointing to your website's home page. In other words, there are now 2 links on your web page that point to your home page: your site logo and the "Home" button of your navigation menu. This is standard practice on many websites.
Now modify the other buttons so that you get the following (in any order you like):
Make a "Site Map" button with a link pointing to "sitemap.html" (without the quotes). If you prefer absolute URLs
(explained in chapter 5),
make the link point to "http://www.example.com/sitemap.html" (without the quotes). You should of course replace
"www.example.com" with your actual web address.
Note: I know you don't have a page called "sitemap.html" yet. You'll be creating it in the next chapter. Since it doesn't exist at
the moment, if you're using relative URLs, you obviously won't be able to click the folder button to select a file, so just type
"sitemap.html" (without the quotes) into the Link field, replacing the "#" sign.
Make a "Feedback" button with a link pointing to "feedback.html" (without the quotes). If you don't like the
word "Feedback", use "Contact Us", "Contact Form" or "Support" or something like that. As before, if you prefer to use
absolute URLs, point the link to "http://www.example.com/feedback.html" instead. Again, replace
www.example.com with your actual URL.
Important: even if you create a button called "Contact Form" or "Support" or some other thing, the link must
point to "feedback.html" (or the absolute URL version of "http://www.example.com/feedback.html").
This is because we'll be creating a feedback form with a filename of feedback.html for your website in chapter 8,
and if you change the link here, your button will lead to a
404 File Not Found error.
Let me say that again: change the visual label on the button to any word (or words) you like. But the filename must remain
feedback.html (or its absolute URL version).
Optional: If you like, you can also make an "About Us" button with a link pointing to "about.html" (without
the quotes). As before, you can use an absolute URL if that's what you've been using above.
An "About Us" page is used by some sites, particularly commercial ones, to give visitors some information about the people or company behind the website. For personal websites, some webmasters place their resume or curriculum vitae here, presumably to attract prospective employers.
This is an optional button. You don't have to link to an "About Us" page if you don't plan to create such a page later.
Depending on whether you created the "About Us" button or not, you either have one unused button (with the words "Link four") or no more buttons left. Don't panic. Just read on. The next sections will show you how to add new buttons and delete buttons from your menu.
For many webmasters, four buttons aren't enough to contain all the important links they want to place in their navigation menu. To add additional buttons to your menu, do the following.
Put your text cursor in the last button in your navigation menu by clicking your mouse somewhere there. Use the arrow keys on your keyboard to move the text cursor to the end of the word (or words) in that button.
Hit the ENTER key (or RETURN key on the Mac). A new button will be created. However, this new button will not have the appearance of the previous ones. Don't worry. Read on.
Type the word or words you want to appear on that button. For example, if you have a "Price List" page, type "Price List" (without the quotes) into that space. Yes, I know that the words will not be centred ("centered") on the page and the background colour is still wrong. This will change in the next step.
Select the words you just typed. Again, one way of doing this is to drag your mouse over those words. Leave those words selected and go immediately to the next step.
Enter the URL (whether absolute or relative) of that page in the "Link" field in the PROPERTIES panel. (Just click to place your text cursor in the "Link" field and type the address of the page you want to link to.) If you feel a sense of deja vu here, it's because it's exactly the same procedure you used to create your other text links in the previous chapter.
When you have finished typing your URL, hit the ENTER key (or RETURN key on the Mac). The appearance of the button will immediately change to match those of the other buttons supplied by Dreamweaver.
The above steps can be repeated to create as many buttons as you wish.
If you have created one too many buttons, and want to remove one of them, here's one way of doing it.
Select the text on the button you want to delete. For example, you can do this by dragging your mouse over the words on the button to highlight it.
Hit the DEL key. This removes the words, but leaves a narrow horizontal gap in your menu.
Move your mouse pointer so that it is directly over the narrow space in that gap. Click the right mouse button.
A pop-up menu should appear. Click the "Remove Tag <li>" item on that menu. Your button should disappear.
Your menu buttons are not exactly the same as the other text on your web page. As I'm sure you already know when you tested your website in the previous chapters, when you move your mouse over those buttons in a web browser, the buttons change colour. (You won't be able to see that colour change in Dreamweaver since it is a web editor, not a real web browser.)
In view of this, if you want to change the colour of your menu buttons, there are two sets of colours that you can fiddle with. The normal colour of the button when the mouse is not hovering over it, and the colour of the button when a mouse moves over it.
Important: the steps below assumes that you are familiar with the procedure taught in chapter 4 on How to Change the Background of Your Website in Dreamweaver CS5. It's exactly the same procedure. You may want to review that chapter if you've forgotten it.
Place your text cursor in one of the buttons of your navigation menu. One way to do this is to click somewhere in the "Home" button. Actually, it doesn't really matter where the text cursor lands on, as long as it's in one of the buttons.
Look in the CSS STYLES panel on the right side of the Dreamweaver window. Notice the following two lines in the Rules section:
The line "ul.nav a, ul.nav a:visited <a>" is the line to doubleclick if you want to configure
the colour of the normal button (when the mouse is not hovering over it).
The line "ul.nav a:hover, ul.nav... <a>" is the line to doubleclick if you want to configure
the colour of the button when the mouse pointer is hovering over it. (Look for the word "hover" in the line if you
have trouble distinguishing between those two lines.)
Be sure to doubleclick only one of the above two lines. Do not doubleclick the "a:hover, a:active, a:f... <a>"
line. That is for the normal links on your web page. The line you're looking for must start with the text
"ul.nav".
(If you cannot locate those two lines, make sure that you've clicked somewhere in one of the buttons of the menu. You may also have to scroll down the Rules section. If you can't even find the Rules section, please refresh your memory by looking at chapter 4 again.)
The CSS Rule Definition dialog box that you're probably familiar with by now will appear. Click the Background line in the left column. The contents of the right side of the dialog box should change.
Click the colour picker box next to the "Background-color" field to change the colour.
When you're done, remember to click the "OK" button on the CSS Rule Definition dialog box.
At this point, your home page is almost complete. All that remains is to delete the placeholder text under your navigation menu (assuming you've not already done so). This is the dummy text that begins "The above links demonstrate a basic navigational structure..." (etc). The text can be deleted the same way you delete any other text on your web page, that is, by clicking to put your text cursor somewhere among the words and using the DEL or Backspace key.
When you've done that, you'll probably realise that you've created a new problem. Your left column is now substantially shorter than your right column.
(Okay, you didn't actually create that problem. It was there all the time, disguised only by the placeholder text Dreamweaver put in that column. In any case, you can't exactly leave the placeholder text there in your website.)
Depending on your colour scheme and how much text you've placed in your right column, the short left column on your web page may either be a horrifying eyesore or not even noticeable.
If you're not sure what I'm talking about here, it probably means that under your current screen resolution, your right column is approximately the same length as your left column. Another possibility is that you've set the same colour for both your columns as well as for the space behind the two columns. Otherwise, you'll probably have noticed that your left column stops short halfway down the page since your left column, in all probability, is shorter than your right column. And it's noticeable all the more because, by default, it has a non-white background, in contrast with the right column and the space behind the two columns.
There are two ways of solving this problem.
The easiest way around this is to set the same background colour for your left and right columns as well as for the space behind them. This is the solution I adopted for thesitewizard.com. You only have to look at the page you're reading to see what I mean. The left column is actually very much shorter than the right column. Had I set a different background colour for that column, you will immediately notice that it does not extend all the way down the page. But since I didn't, the left column merely looks like an empty patch of space where I paste my navigation menu and other material. In other words, it doesn't really look like a column.
If you want to take this approach, return to the chapter on setting background colours in Dreamweaver CS5 to change the colours of those three sections.
Note that your web page background does not have to be all white like mine for this to work. If you are creative, you can still play around with colours and/or background images so as to provide your site with a unique look.
Another way is to add blank lines to the left column. To do this, just click somewhere in the space under your navigation menu (where you just deleted Dreamweaver's placeholder text). Then hit the ENTER (or RETURN) key multiple times until the column has the length you like.
This is not really a foolproof method, since web browsers will resize your web page columns to fit your visitors' computer monitors. What might appear on your computer as perfectly balanced columns might appear on a bigger or smaller browser window as uneven in some way. The best you can do in this case is to test under the common screen resolutions and make sure your website looks reasonably okay under the most common ones.
Incidentally, your web page's ability to adapt to different window sizes and monitor sizes is the consequence of using a "liquid" layout (since your page is based on Dreamweaver's two column liquid layout). If you're interested in knowing more about this, please read What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts? That article however predates Dreamweaver CS5, and so refers to additional templates using the "Elastic" and "Hybrid" layouts. These layouts no longer exist in CS5, probably because they are superfluous and, in my opinion, not actually useful in real life.
Once you've finished configuring, save your work with "File | Save All" (not "File | Save" if you have changed the colours). Then publish and test your site as before.
Now that your home page is complete, you should take the time to check your website under different screen resolutions. You don't have to buy multiple computers to do this. Simply resize your web browser. An easy way to do this if you use Windows is to use the method I mentioned in my article How to Test Your Website Under Different Screen Resolutions under Windows the Easy Way. Otherwise, just do it manually; you'll have to estimate the window size in that case.
Bear in mind as you test your navigation menu on your home page that you haven't actually created any of the other pages your menu links to (other than the Home page). As a result, you will probably get 404 File Not Found errors when you click buttons other than the "Home" button. This is normal so don't panic when it happens. We will fix most of those File Not Found errors in the next chapter. (Of course if you get a File Not Found error when you click your Home button, then you need to fix your link to your Home page, since that already exists.)
If everything works, congratulations are in order. You've completed your website's home page.
In the next chapter, you will learn how to use Dreamweaver's famous template system. This system allows you to create and manage multiple pages on your site in a convenient and efficient fashion. With this system, whenever you need to make a common design change to your website, you only need to change it in one place, and Dreamweaver will automatically update all your pages for you. At the same time, you will also be creating other pages on your site.
Copyright © 2010-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All Dreamweaver Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Customize Your Website's Navigation Menu Bar with Dreamweaver CS5
