Navigation bars (Easiest to hardest methods)

We tried method #1 early on in class. It was so easy you probably even forgot that we did it as it looked more like working with a table in a word document. While there are good reasons for not using a table based menu, it's a legitimate practice to use a table based menu as a placeholder until you have the time to unravel the CSS and correctly edit a premade menu.

About the mid point in our class we tried method #3. We went over this step by step menu build in class. The danger was that if you miss one step, your menu won't function... It was an 11 page document (remember). Having said that however, it was an important excercise as you were able to see what happens in the CSS as each rules is applied. Trying this should help you understand and appreciate any of the menu making resources available to you online (most of which are free or low cost Dreamweaver plugins)

Lastly we tried method #2 in class. Method #2 was to use menumaker.com. Plenty of similar sites offer free and similar menu sample and tools. This site has editable menus already made and the code is split into two parts the html and the css. This is a good choice for new designers who want a css based menu but don't have the skills yet to position using floats. In order to work with ready made menus a desigher should be able to work and understand:

Method #4 is using Dreamweaver's Spry, which is reserved for students in the advanced class who are capable of creating their own menus at the Method #3 level.

1. Table Based

CAUTION: This is the simplist method but virtually obsolete because it doesn't take advantage of the versatilityor power of CSS. Yes it can be used if the designer can't get the css menu fully functioning but better to use it as a place holder with the expectation that a CSS driven menu will be replace the table based menu in the testing phase.

2. Use a Menu building resource / or steal it

SUMMARY: We tried method #1 early on in class. It was so easy you probably even forgot that we did it. About the mid point in our class we then tried our a CSS based menu - it is method #3 / see below (instructions pdf download and the links to screenshots of the 4 steps

3. Method Taught in Class

SUMMARY: We went over this step by step menu build in class. The danger was that if you miss one step, your menu won't function. Having said that however, it was an important excercise as you were able to see what happens in the CSS as each rules is applied. The CSS did primarily two things

  1. PLACEMENT: put a list based menu onto one line
  2. DESIGN: color, font, size, links (changes when hovering (mouse over) or active)

TITLE: Insert Divs and CSS Styles with CSS based Navigation Page 1 of 11
REVIEW & Instructions / Setting up Divs and classes and a nav bar in CSS
In Case You Want to Try METHOD #3 - Download the PDF

This is a 4 step review on how to build a single web page with a fully functioning navigation bar styled with CSS. There are 4 main steps in building our single page with working navigation bar. This handout includes the specific steps. There is a multitude of other ways to do this, but this is how our class will do it so that we will improve time efficiencies, which is a major concern to all web developers at any stage of their career and in their learning curve.

Step 4 / The finished page
(results of completing all the instructions up to and including Step 4) is online at
http://www.melaniestewart.com/webdesign/review_divs_d.html

Step 1
The goals is to create a page which sets up our Divs & CSS styles
http://www.melaniestewart.com/webdesign/review_divs_a.html

Step 2
The goal is to define the positioning of our Divs using CSS classes
http://www.melaniestewart.com/webdesign/review_divs_b.html

Step 3
The goal is to add a working navigation bar positioned (styled with CSS)
http://www.melaniestewart.com/webdesign/review_divs_c.html

Before starting, make sure you know where you are going. Examine the web pages above. Make sure each Step appears the same as the examples above before proceeding. Any error will be compounded in further steps.