Navbar how-to in DreamWeaver

[Dean_Grobler]

Hello,

I've attached an image of a layout for a site that I designed in PhotoShop. If you look at the Navbar you'll see that I've gave it a 'glossy/glasy' effect. Im new to web development, but I know there is no CSS on the planet that can do that. So how exactly do you get that effect on your web page using DreamWeaver?

The way I thought it might get done, is gaving the Navbar as an image behind the actual links. I could be wrong though...What do the experts say?

And please, the way of doing it in DreamWeaver CS5, I do not want to be manually coding this...

Oh yes! One more thing, you'll see there's lots of white space on the right of the web page design. Does anybody have suggestions of what to put there to fill up the page a bit? The company I'm doing the site for doesn't have content to put there so I'm rather clueless of what I can put the in there...

[macneato]

You would have to use CSS

Just add a div to your navigation and repeat a background image

e.g.

<div class="navigation">
 <ul>
  <li>item 1</li>
  <li>item 2</li>
 </ul>
</div>

.navigation {
 width: 800px;
 height: 20px;
 background: url(../images/YourImage.jpg) repeat-x; /*save your image as 1x20 jpg*/
}

[Dean_Grobler]

How big should this image be roughly? The exact length and width of my Navigation bar or something smaller?

[macneato]

Hi Dean,

Your image should be saved as 1px wide and the same height it is in the design.

[Dean_Grobler]

Thank you so much! Great advice!
Sorted my problem out, shot man.