Now that you have learnt ("learned" in US English) how to make hyperlinks (see chapter 5), it is time to customise the navigation menu found in the left column of your website.
If you have arrived at this chapter from outside thesitewizard.com, you may want to start at first chapter of this tutorial. (The one you're reading now is chapter 6.) Otherwise you may not understand what I'm talking about when I refer to things that have already been covered previously. If this is your first website, it's probably a good idea to start at the very beginning, with the guide on How to Make / Create a Website.
By the end of this chapter, you will have modified the navigation menu bar so that it contains buttons that link to the other important pages on your website. You will also have changed the colours of the menu to match the scheme on the rest of the page.
Most websites have some sort of navigation menu. This "menu" is actually just a list of links that point to important pages on the site. You can see an example of this in the left column of every page on thesitewizard.com, including this one (unless you're reading this page on a modern smartphone, in which case, you will probably need to scroll to the bottom of the page for the menu; I moved it there for small screens so that visitors can read the main article more comfortably). At present, it is dressed up to look like a series of buttons pointing to the home page, the feedback form, the site map, and so on. Other sites may put the menu in the right column, or astride both columns on the top of the page. There are also some that place it at the foot of the page.
While its placement is not terribly important (as long as you put it in the usual places mentioned above), its existence is. For the most part, your visitors will probably not even notice its presence. Our minds automatically filter out extraneous details so that we can concentrate on our main task of reading the page. However, on those occasions when your visitors need to go to other parts of your site, the menu finds its raison d'être.
This does not mean that you have to list every single page of your site in the menu. For sites bigger than a few pages, this is usually impractical. Not only will your menu be excessively long (and therefore too cluttered to be useful), it will also bloat the size of your page, making it take forever to load and consuming your bandwidth allotment on your web host. As such, most webmasters only mention certain key pages in the menu. For example, at the time I write this, thesitewizard.com has nearly 400 pages, but I only list a few main pages.
What constitutes a "key page"? Well, that depends on the purpose of your website. For example, if your site sells products and services, then the pages listing your products, the price list, and the order form are vital pages. You want to make sure that no matter where your visitor is on your site, they will be able to find their way there. (Otherwise what's the point of your site?) And there are also certain standard links that most visitors expect to be able to find in the navigation menu, like your home page, the site map and the feedback form (also known as the contact form).
More information about those standard pages will be provided later in this and the next chapter.
As it stands, the navigation menu in your left column has four buttons that currently do not appear to actually do anything. Carry out the following steps to make them into working buttons.
If you have closed Dreamweaver since the previous chapter, start it again and load your home page.
Select "Link one" by dragging your mouse over those words to highlight it. Type "Home" (without the quotes), overwriting the existing words.
Click to put your text cursor in the "Link" field of the Properties panel, and replace the hash ("#") mark that is currently there with the web address of your home page. For example, if your website has a URL of "http://www.example.com/", type "http://www.example.com/" (without the quotes) followed by the ENTER (or RETURN key on the Mac). Alternatively, you can also use a relative URL (see chapter 5 if you've forgotten what that is).
With this step, the top button of your menu now says "Home" and is a clickable link pointing to your home page.
Incidentally, I know that you already made the site logo link to your home page in the previous chapter. However, the home page is also de rigueur the first link of a site's navigation menu, and users have come to expect it there. Not only will keeping to this convention make your site more user-friendly, since the links are where they are "supposed to be", but it will also help novice users who don't know that the site logo is actually clickable.
(By the way, when you hit the ENTER key after typing your URL, your button may have an additional thin blank line underneath. This is just a temporary visual glitch. You didn't do anything wrong. Just ignore it. It will go away eventually when you replace the text on the next button or when you do something else.)
Apart from the topmost link, which should always be "Home", the other links can be in any order you want. I'll simply suggest a sequence in this article, but feel free to put them in a different order.
Select "Link two" and replace the words with "Feedback" (without the quotes). Note that unlike the "Home" link above (which has a fixed convention across nearly every site on the internet), you don't actually have to use the word "Feedback"; for instance, some people prefer to say "Support", "Contact Us" or "Contact Form".
Modify the "Link" field for that button so that it says "feedback.html" (without the quotes). Do
not use any other name for this link. Do not use capital (uppercase) letters, spaces or change it in any way.
If you do, you will have problems when you complete chapter 8. Don't worry if your button says "Support", but
the link says "feedback.html". What the button reads and what the link says are two separate things. One is for
the user to read, and should be in plain English so that they can understand it. The other one is for the browser
to use, and can be in thick computerese or whatever. The reason it needs to say "feedback.html" and not some other
thing is because you'll create a file called "feedback.html" in chapter 8, and if you use a different name here,
your button will not link to the right file.
If you are running a business, you probably should have an "About Us" page somewhere on your site, to tell your visitors something about your company. (Look at it as a chance to promote your company.) The page is optional for personal and hobby websites. For those not planning to create an "About Us" page, skip to the next point.
Select "Link three" and replace the text with "About Us", "About Me", "About" or some such thing. Change the link from "#" to "about.html" (without the quotes).
Replace "Link four" (or "Link three" if you have skipped the About Us page above) with "Site Map" and its corresponding link "#" with "sitemap.html" (without the quotes).
When you reach this paragraph, you will either have an extra unused button (because you didn't create an About Us button), or you have run out of dummy buttons to reuse (because you did). Whichever the case may be, you will undoubtedly want to add more buttons to your menu to point to the other important pages. Some of you will also want to know how to delete unwanted buttons that you have added by mistake.
Click somewhere in the bottommost button in your menu. This will put the blinking text cursor somewhere amidst the text. Position the cursor so that it comes after all the words in that button, but still on the same line. You can do this using the arrow keys on your keyboard. For example, if the last button says "Site Map", move the text cursor so that it is just after the "p" in "Map".
Hit the ENTER key (or the RETURN key on the Mac). This will create a very thin anaemic-looking button underneath, and puts the text cursor there. In fact, at this point, it won't even look like a button to you, but more like a very thin line.
Type the words you want the button to show. For example, if you are creating a page to list all your products, type "Products" (without the quotes). The button will become taller, to accomodate the words you entered, but it will still not look like the others: the text will not be aligned properly, and the colour will be wrong.
Select the words that you've just typed. If you find it difficult to highlight everything using the mouse, use the keyboard: ie, hold down the shift key on your keyboard while using the arrow keys to move the cursor over the letters you want to select.
Type the URL that you want the button to point to into the "Link" field of the Properties panel, followed by the ENTER key. There will not be any "#" for you to overwrite, so just type your address into the blank field. For example, if you're linking to the Products page, type "products.html" (without the quotes).
Since you will be creating your own filenames here, it may be a good idea to read How to Create Good Filenames for Your Web Pages if you haven't already done so. For your own sanity (and for future compatibility), it's best not to create filenames that have spaces or capital (uppercase) letters in them. If you want to separate words from each other, use a hyphen ("-").
The text appearing on your button should now be centred, and have the same colour scheme as the rest of your menu.
Repeat the above procedure as many times as you need, till you have all the buttons you want.
Select all the words appearing on the button that you want to delete.
Hit the Delete key on your keyboard. This causes the button to collapse into a thin sliver.
Move your mouse pointer so that it is directly over the remnants of the button and click the right mouse button.
Click the "Remove tag <li>" item in the menu that pops out. The button should disappear completely.
Warning: if you don't see "Remove tag <li>" in the menu, but see something else, like "Remove tag <ul>", do not click it. Hit the ESC key instead to get rid of the menu, and try again. Clicking "Remove tag" with wild abandon, without making sure that it's really "Remove tag <li>" and not something else, is generally a bad thing. It may result in your accidentally deleting the formatting from the menu or even the entire menu itself.
If you make a mistake that you don't know how to recover from, try using the "Edit | Undo" menu item. That is, click "Edit" from the menu bar, followed by "Undo [whatever]" from the menu that appears, where "[whatever]" is the operation that you last performed. (The "Undo" menu item says different things depending on what you did before invoking the menu, but it will always begin with the word "Undo".)
On the other hand, if you have made so many errors that even the "Undo" button is unable to repair, you may want to abandon all the work you did in the current session and reload your file from your last save. To do this, click "File | Close" and when Dreamweaver issues a dialog box saying "Save changes to index.html?", click "No". Then reopen the file again by doubleclicking the "index.html" line in the Files panel. Be warned that this will cause you to lose everything you have done since your last save, so only do it as a last resort. And don't do it at all if you have saved your file after you made your mistake, since you'll only load back the same error-filled page, this time with no Undo facility.
If you have altered your background colours in chapter 4, and have been waiting with bated breadth to match your menu colours to the scheme found on the rest of the page, your moment has arrived.
Unlike the rest of the page, however, the buttons on the menu actually have different colours depending on whether a mouse pointer is hovering over it. (You will only be able to see the button's default colour in Dreamweaver; to view the colour when a mouse pointer is over it, you will need to use a web brower.)
Click your mouse pointer somewhere in any one of your navigation menu buttons (it doesn't matter which). This puts your text cursor in the middle of the word (or words) on one of the buttons.
Look for the Rules section in the CSS Styles panel on the right side of Dreamweaver. You should see these 2 lines.
The line saying "ul.nav a, ul.nav a:visited <a>" contains the rules for the default button.
By "default", I mean the button as it appears on the page when the mouse is not pointing at it.
Another line saying "ul.nav a:hover, ul.nav... <a>" holds the rules for the button
when the mouse pointer is hovering over it. Notice that the line is almost the same as the other one, except
that "a:hover" occurs somewhere within it.
Doubleclicking one or the other of these lines will bring up the CSS Rule Definition dialog box with the relevant rules that you can modify. For example, if you want to change the default colours, doubleclick the first line described earlier. Do the same with the "a:hover" line to customise the button colour when the mouse is over it.
The CSS Rule Definition dialog box, which you'll probably find very familiar since you have repeatedly encountered it in the earlier chapters, will appear. Yes, it is the same dialog box and it behaves exactly as it has in the previous chapters with no new unpleasant surprises.
Click the "Background" line in the list box on the left to bring up the options pertaining to colours.
Change the colour of your button to your satisfaction using the colour picker for the "Background-color" field. Please see chapter 4 if you've forgotten how to do this. The procedure is exactly the same as that of changing the background colour of any other part of the page.
Click the "OK" button for the CSS Rule Definition dialog box when you're done.
Now that your navigation menu is complete, all that remains is to remove the placeholder text that is under the menu. I'm of course referring to the eyesore that begins with the words "The above links demonstrate a basic navigational..." (etc).
With 6 chapters' worth of web editing under your belt, getting rid of this rubbish should pose no difficulty for you. Just put your text cursor somewhere amidst those lines and fire away with your Delete or Backspace key.
When you finish it, you will undoubtedly realise that you have created a new problem. To be fair, though, the problem was always there (and not actually of your own making). All you have done is to uncover the skeletons that were previously hidden.
With the dummy text that artificially lengthened your left column gone, you may notice that your left and right columns do not have the same lengths, possibly making your page look somewhat lopsided. Actually, whether or not this is a problem, or indeed even noticeable, depends on your colour scheme, the amount of content you put in the right column and of course, the number of buttons you currently have in your left.
If it's a problem for your page, there are at least 2 possible solutions.
The most obvious way to deal with the problem is to simply insert extra blank lines in the left column till the two columns have roughly the same lengths. That is, just put your text cursor somewhere under the navigation menu, and start hitting the ENTER key till the two columns are more or less equal.
However, this is not the ideal solution, given that you are currently using Dreamweaver's "liquid layout" for your website (which you selected in Chapter 1). In a liquid layout, your web page adjusts to the width of your visitor's screen area, with the width of the columns shrinking or expanding as necessary. As such, what appears to be a perfect fit on your computer may not be one on your visitor's.
Of course, there's nothing to stop you from switching to a fixed layout. However, before you rush out to do this, just to solve this fairly minor problem, note that each type of layout brings with it its own issues, and you may be exchanging one set of problems for another. More information about the different layouts and their pros and cons can be found in "What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts?" for those who are interested.
My preference is to disguise the unbalanced columns through the (hopefully) clever use of colour. You can see this at work on all my sites. On thesitewizard.com, indeed on this very page that you're reading, the background of both the left and right columns share the same colour. The use of identical colours hides the fact that there are actually two columns of vastly different heights. Instead, the page gives the impression that it has only a single column with a wide margin and a navigation menu pasted on the top left. On another of my sites, thefreecountry.com, I gave the left column the same colour as the rim around both columns. This allows me to produce a 2-column effect without also having the appearance of a height-challenged left column.
While you probably can't follow the trick I used on thefreecountry.com exactly the same way (not without a fair bit of technical tinkering, since the rim around your columns are thicker), the basic principle of using colours to blend the shorter column with its environment can be adapted to suit your site's design. Play around with the colours of all the different sections of your site (not forgetting that you can also adjust the background that both columns share), and with a bit of creativity, your page can actually look attractive even though you privately know that one column is shorter than the other.
For the lazy among you, who can't be bothered to experiment, just do what I've done with thesitewizard.com. Give the background of both columns the same colour (it doesn't have to be white, if you think that it's too plain).
Note: once again, if you are viewing this page with a modern mobile browser, such as those found on a smartphone, you may not be able to see what I'm talking about (where thesitewizard.com is concerned). If you can't visualise what I'm saying here, temporarily use your desktop or laptop computer so that you can see what I've done with the colours in the 2 columns of this page.
As of this chapter, your home page is complete. If you were deferring any changes to later, because you thought you still had a long way to go, now is the time to do those things. That way, you can have the satisfaction of seeing a production-ready home page when you test your site.
Save your page with "File | Save All" and upload it to your site with "Site | Put". Then run your web browser and load your home page.
It's not sufficient to glance at your menu to verify that the colours are acceptable. You will also need to move your mouse pointer over at least one of the buttons to see if the hover colour works well with the rest of the page.
Click all the buttons on your menu, one by one. The Home button should take you back to the current page. If it doesn't, it means you have the wrong URL in the Link field. Return to Dreamweaver to fix it.
All the other buttons should lead to an error page saying something like "404 File Not Found" or its equivalent. This is as it should be, since you haven't created those pages yet. If nothing happens when you clicked a button, it means that you have either left the link pointing to "#" or you have forgotten to make it a link. Again, this is easily handled by returning to Dreamweaver and putting the correct URL in the Link field.
Now that the home page is complete, it's a good idea to check if it works on a screen resolution that is smaller than yours. Otherwise, you may go around with the impression that your site is perfection personified, only to find that everything is askew when viewed on a monitor that has a lower resolution.
It's simple to simulate a monitor with a lower resolution without having to buy one. Simply resize your browser window so that it doesn't fill the entire width and height of your existing monitor. For example, if your current monitor has a resolution of 1366 x 768, and you want to see what your site looks like on a 1024 x 600 display, resize the window so that it is about three quarters the width of the screen (since 1024 divided by 1366 is roughly 0.75 or three quarters). As implied by the above, the first number in the stated resolution is the width and the second the height, so a screen resolution of 1280 x 800 means the width is 1280 pixels and the height 800.
(Note that "screen resolution" does not refer to the physical size of the screen. If you are thinking "I have a 14 inch monitor", you're looking at the wrong number. Screens that are, say, physically 14 inches can come with lots of different resolutions, depending on the model and the manufacturer. In general, higher resolutions allow more things to be displayed on the screen regardless of the physical size.)
If everything works out fine, it means that your home page is truly complete. Congratulations!
In the next chapter, you will use Dreamweaver's site management facilities to create most of the other pages of your website. Dreamweaver's site management features, along with its fabled template system, lets you maintain multiple pages of your website with minimum effort.
Copyright © 2013-2017 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 the Navigation Menu Bar on Your Website using Dreamweaver CS6
