How to Create a Fully Designed Navigation Bar Using CSS, HTML, and Dreamweaver CS 5.1

I know how you feel—you just started learning website design, so you only know how to do some much, and, quite frankly, your website shows it. You need to add a little pizzazz to your site that makes people want to click around and read what you have to say. One of the most critical parts of your site is the navigation bar. Here’s where your clientele can click amongst your pages and interact with your site virtually. Without a properly functioning navigation bar, people aren’t going to want to continue clicking.

Since you only know so much about CSS and HTML formatting, here’s how to create a simple, yet ultra-functional navigation bar design that will keep your site organized.

The first step in creating a beautifully designed navigation bar is having a properly formatted code in your HTML document. It’s best to start with your index.html page and then copy the code for the navigation bar into your other pages. Start with a basic div id= “navbar” and an unordered list tag, <ul>, followed by a list of what your buttons will be and the links to those buttons in other HTML pages on your site. If you’ve coded correctly, you should have something like what is shown below:

step 1

The next thing you will want to do (after patting yourself on the back), is probably to click on the Design tab and see what all that nonsense turned into. Sadly, not much is going on. Right now, it’s just a very basic navigation bar, as shown below:

step 2

Adding CSS will make it more attractive to your clientele. In your CSS style sheet that is already linked to this page, we need to define a couple elements that will add visual appeal to the navigation bar. First, define the margin and padding for the bar. Define: #navbar ul{ margin: 0; padding: 5px; list-style-type: none; text-align: center;. This will center your navigation bar in the center of your page. Next, define the background color. This will make the background of your navigation bar as what it will appear behind the buttons. For example, defining: background-color: #FF0040 makes the background of the bar a tint of red. So far, this is what we have in the CSS styles sheet:

step 3

Next, define the inline display for your navigation bar. Coding the following makes it pretty self-explanatory:

step 4

Finally, we add some basic decoration and the hovering effect that happens when you place your mouse over the link. You can change the padding to reflect how big you want the buttons to be, their colors, and the hovering color. This is all left up to you, but here’s what I did:

step 5

When you push the ‘Design’ tab now, you have a fully developed navigation bar (Seen below)! You just need to define how the pages will link to other pages in your site, and you’re well on your way to website design!

step 7

-Greg Drupp

~ by gdd7 on October 13, 2011.

2 Responses to “How to Create a Fully Designed Navigation Bar Using CSS, HTML, and Dreamweaver CS 5.1”

  1. I’ve been trying to figure out how to do this forever, and your tutorial seems like the perfect way to figure it out!

  2. I liked the style with which you presented your blog post. It was really informal and it seemed like you really understood where your audience was coming from. Also, your instructions were very clear and the images accompanying them (especially the last few) were conveniently zoomed in, making it easier to focus on what exactly you were talking about.

Comments are closed.

%d bloggers like this: