Steps to making a nifty navigation bar in Dreamweaver CS5!

Before continuing it is essential that you

  • Have a good understanding about how to code in HTML and in CSS. If not before continuing go to and learn about it!
  • Have a homepage for a website.
  • Have a CSS style sheet for this homepage
  • Know that the Navigation Bar will help the viewers of your website get from the various other pages you have on your website.

Okay now that you have your basic knowledge, Let’s begin!

We are going to references three pages from my own  website that I will reference for this tutorial.

Part 1

The first page that I was my viewer to go to is my essay page. This page is saved as essay.html and I want it to appear as Oryx and Crake on my website.

Now I will open my hompage on Dreamweaver and press the  split view for the design. Next,  I would type into the html side the following:

The part of the code that says “essay.html”  will be seen on your code.  Where the words “Oryx and Crake” are is what will actually show up on your website.

*Note: You created a class called “lists” because in your CSS document you will have have to put in a format for your Navigation bar later . Also, the horizontal lines ( |<a…..</a>| )  wrapping around the link code will work as dividers when you see the final product. *

Part 2

Under neath this first code you will add the other pages that you would like to see on your homepage.  To do this, repeats the step you did to get your first page on your navigation with the variation with the names of the pages. In this case my  additional pages will be

  • DMCA of 1988
  • Downtown Pittsburgh !
  • Listen Up!
  • Home
Your end result on your html will look like :
 Of course, the names of the links and the links will apply to the pages you have.
Part 3
Now you want to open your CSS style sheet .
In your CSS style sheet you want to identify the class from your html, so it knows where it is applying the changes .
So first type in .lists followed by
ul.lists { list-style-type:none; margin:0; padding:0; }
 li { display:inline; }
.lists {text-align:center;}

This is style is going to make your navigation bar horizontal and it the center of your homepage. 

Part 4

Now you are almost done! Just attach your style sheet, save your index and your navigation bar should look like excluding the color:

Nikki Abban ❤


~ by catchmeonfifth on October 16, 2011.

%d bloggers like this: