How To Make A Navigation Bar by rahmatfauzi08


More Info
									How To Make A Navigation Bar

This page tells how to make a navigation bar (navbar) for your website.

The navbar uses an HTML table for the layout, and CSS to make it easy to set and change the
styles such as fonts, colors, underlining etc. It's in a virtual include so that it can be updated
on every page at once by changing just one file.

I'm using KompoZer (an update of Nvu) for the tutorial so anyone can follow along and do
what I've done.

This is part of a tutorial on how to create a website template that you can customize and
update easily. If you've followed the website template tutorial so far you shouldn't have much
trouble. If you haven't seen the rest of the tutorial you'll need to look at it to be able to make
the navigation bar.

Your website won't get traffic or make sales for you unless you know more than just how to
make a website. It'll just sit there in cyberspace looking pretty and doing nothing, and that is
reality for 95% of website

This Navbar's Styling
The navbar I'm creating in this tutorial will be text based with no underlining. It will have the
same color for visited and unvisited links, and a different color when a link is hovered over.

Text based navbars are quick to load, easy to make, and you can make them look quite smart.
Once you've learned how to make this navbar, you'll be able to style one how you want.

Creating The Navbar
 I prefer to make the navigation bar in a web page editor for speed and because it's easy,
though if you're competent with HTML, you can use that to code your navbar.
Fire up KompoZer and create a new page with a table
that has just one cell. Make it say 180 pixels wide to
fit the 200 pixel wide column in the template you've
already created.

In the table, type in the list of pages that you want for
your website's navigation. Then create the links to
those pages. Don't worry about colors or underlining
at this stage.

Saving The Navbar
Open the source code (click source at the bottom left
of the KompoZer page), copy everything between the
<body> and </body> tags, paste it into a text editor
such as wordpad, and save it with the extension of
your choice, either htm, .html, .shtml, .txt, .inc. or .ssi.

I normally use .html because that is the language the
page is built with.

Your text editor may use formatting you can't see,             Example of a basic navigation bar,
which can put a lot of strange characters into your            without styling being applied. I've
navigation bar. For example, Wordpad can use rich              divided the navbar into sections
text formatting on the file even though it is saved as         which can improve click-throughs
html. Try saving it as a text file first (.txt) to remove      when you have a long navbar.
any formatting to stop the problem.

As your website grows it will be easy to add more links to the navbar.

Styling The Navbar
The navbar will be styled using the CSS file that we've used for all the styles in the web
template. So open your website template page in KompoZer, and open the CSS editor.

You'll need to make a series of new styles for the navigation bar links, so click on the palette
icon at the top left of the CSS editor. In the right pane select Style applied to an element with
specified ID attribute.

In the text box below a hash (#) will appear. Right after the hash, leaving no space, type
navbar, so you get #navbar. Then click Create style rule.

The new #navbar style rule will appear in the left pane, and the right pane will change so you
can select the attributes for this style rule.

Select the text tab at the top of the CSS editor and start making the navigation bar styles the
way you want them. For this example I'll use a custom font family, Times Roman, serif, to
contrast with the body text. I'll set font weight to bold, alignment to left, and font size to

You can set the background color now, to color the entire navbar if you want to. Select
Background at the top of the CSS editor, then set the color to what is appropriate for the
website you're building. Alternatively, if you can't get the effect you want with CSS, you can
set the background colors in the HTML table the navbar is in.

We'll set the font colors soon.

Styling The Navigation Bar Links
The links have four states that you'll need to set the styles for. They are the unvisited link
(a:link), the visited link (a:visited), the link when the mouse pointer is hovering on it
(a:hover), and the active link (a:active).

                                                                 The same navbar with text
                                                                 styling applied via CSS. The
                                                                 background color was applied
                                                                 in the HTML table. "Page 2"
                                                                 shows the difference with the

                                                                 It would be very easy to
                                                                 change any part of the styling.
Most navbars have the unvisited link and the visited link
with the same style, usually the hover is different and
sometimes the active link will be different. It's all easy to
do with CSS when you make a navigation bar.

I'll also make the links with no underlining, to make it
look a bit nicer. Underlining isn't needed in the navigation
bar because it's obvious the links are links.

All the links will be made the same way that you styled the
navbar above.

Click on the palette icon at the top left of the CSS editor.
In the right pane select Style applied to an element with
specified ID attribute. After the hash in the text box, type
navbar a:link, so you get #navbar a:link then click Create
style rule.

Set Font Family to unspecified (we already specified it in
#navbar above). Set font size to 1em which will keep it the
same size as specified in #navbar, set the color to
whatever is appropriate for your site, font weight to
inherited, text decoration to none, and everything else to
unspecified.                                                    This is the same navbar with
                                                                different styling. Text is still
Create another style rule for #navbar a:visited and style it    styled with CSS, while the
exactly the same as #navbar a:link.                             background colors are in the
                                                                HTML table.
Create a style rule for #navbar a:hover and make it the
same as #navbar a:link, except for the font color.

Last of all, you can make a style rule for #navbar a:active. When visitors click on a link the
link style will change.

Once you've learnt the techniques, you can experiment with the styling to make a
navigation bar that suits you and your site.

Linking To The Navbar In Your Website Template
So far you've made the navigation bar in an HTML table and styled it with CSS.

To make the CSS styles work you'll need to wrap divs around your navbar file, and the
navbar itself needs to be inserted in your web page template via a virtual include. Then, just
changing the one navbar file will change the navbar on every page in your website.
Linking To The CSS Styling
Assuming you called your CSS navbar style navbar, type
<div id="navbar"> at the start of the navbar file, and at the end of the navbar file type </div>

I'm also using a CSS class I've called borderless table to stop the borders I've applied to the
main table being used on the navbar table. So I'm using another div <div class="borderless
table"> as the first line of my navbar file.

             The start of the navbar file showing the two opening div commands.

                The end of the navbar file showing the closing div commands

Creating The Virtual Include Link
You'll need to create a link for the virtual include. In the source code of your web page
template put the link where you want the navbar to be displayed. Write the link as shown
below, but where the link says navbar.html, use the name you called your navbar file.
<!--#include virtual="navbar.html" -->

If you put the navbar.html file in another folder e.g. support-files (which I normally do) the
the link would be

<!--#include virtual="support-files/navbar.html" -->

          The navbar virtual include in the web page source code (shown in green)

Checking Your Navbar

Unfortunately you can't see your navbar in operation in KompoZer or even by opening the
web page template that is stored on your computer. You have a few choices to be able to see
your navbar on the actual web page to check that it looks right.

You could buy high end web page software such as Dreamweaver, but that is expensive. Or
you could install an apache server on your computer but that is quite complicated.

To top