How to Create a Navigation Bar in Adobe Dreamweaver

Alright so you started your website, great! You have your title, some text, and even a picture or two, you’re on a roll! But wait! You just remembered that you’re missing that crucial element found on every website. That’s right, the navigation bar. Luckily for you, I’m going to show you  how to easily create a navigation bar in Adobe Dreamweaver, and even format it as well!

Alright so to start off you will need to open two new sheets in Adobe Dreamweaver: one html and one css. You could do this without a css, but using one will save you a lot of time, particularly since you will want your navigation bar on every page of your website.

Let’s start with the html. You will need to create an unordered list consisting of everything you want included in your navigation bar. Use the following html script as a guide.

An example of a navigation bar using an unordered list in Adobe Dreamweaver is written below:

My navigation bar includes links to “Home,” “Class Websites,” “Blog,” “Projects,” and “Contact Me.” Each is an external website except “Projects” and “Contact” me which are html sheets, as noted by the .html in the link.

IMPORTANT NOTE:   just adds a space between the words in my navigation bar. In the above example, I have three spaces between each link.

Now that we have the dirty work done, it’s time to add some style and make our navigation bar actually look like a navigation bar!

Here’s where you will need the css sheet. Open and save the css as something descriptive so that you will know what is. For example, I labeled mine, “Main Layout” because I plan on using it for every page in my website.

For a css, simply define what element you want to format (for example ul) and follow with an open curly bracket {. Then you can add whatever formatting you like. Dreamweaver will guide you through this process, so play around with it a little until you find something you really like. 

Here is an example of the code for my navigation bar.

The final result of the above code is this:

The following table describes the functions of some simple codes you might want to use. IMPORTANT NOTE: You must finish every command with a semi-colon, ; in order for it to work.

The final step is inserting your css into every page that you want the navigation bar to appear. To do this, type the following code into the <head> section of your html:

<link rel:”stylesheet”; type:”text/css”; href=”MainLayout”;

Recall that I named my css “MainLayout.” You will want to browse and find the stylesheet you created and insert that instead.

Remember, feel free to play around with different styles until you find the one that matches you and your website perfectly! Nothing wrong with some trial and error! It’s all a part of the creative process.

So long my aspiring web designers!


~ by stacyteierle on September 19, 2011.

One Response to “How to Create a Navigation Bar in Adobe Dreamweaver”

  1. This layout of pictures and text is great. Some of the code in the pictures was too small to read, but the descriptions did a nice job supplementing.

Comments are closed.

%d bloggers like this: