Navigation Bar

S

Smuj56

New Member
Hey folks.

need some quick Advice on navigation bars.
i make web designs in photoshop and put them into dreamweaver then make Divs ect ect..

my question is, do you make navagation bars in photoshop and then slice them up, and if yes how do you make a navigation bar go into a already made template with a div space ready for it to be put in ?
if no do you make them in flash ?

iv tried looking on google and watching videos but not much help.

Thanks for your help peeps :icon_notworthy:
 
If you are making navigation in HTML the semantic way of doing it is to use an unordered list of links. There are loads of examples at; Listamatic: one list, many options - Using CSS and a simple list to create radically different list options. If you want to use images/rollovers for menus then check out the CSS Sprite Technique; A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death.

Flash for menus is OK as long as you offer an HTML alternative for non-flash devices such as iPads.

Hope that helps.
 
Hey Corrosive thanks for your time, I had a look at the list info. and i understand it.

so how would i take an image of a nav bar i make on photoshop and put it into the list items the way it is on photoshop if that makes sence, ( yes im a rookie :p )

i made a quick nav image so say i sliced this into parts ... if you can help me understand how i put this into lists for a navigation that would be a great help.

11l1zzk.jpg


thanks for your help

Adam
 
Smuj56 said:
... my college tutor dosnt teach it just now.
Click to expand...

<rant>Excuse me? Where did they dig him up from? 1996?? That is disgraceful!</rant>

Anyhoo, you'll probably have to do some background reading as well (oh and maybe change college courses).

The way I'd tackle that menu is to create an unordered list in HTML;

Code: 
<ul id=nav>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Services</li>
<li>Contact Me</li>
</ul>

Then remove the text from your nav bar image so you are left with just the background. Set that image as the background to the nav id with CSS.

Display the li tags inline so that they line up next to each other (default is display: block;) and then use the link pseudo classes (link, visited, hover, active) to set the link colour text as green and no underline (default is blue and underlined). Then set a rollover colour on hover and active.

Set some margin and padding on the li tags so they space out nicely and you are done.

Before doing much more you need to get a really good grasp of how to use CSS and HTML to create a website. If your school won't teach you then get on W3 and do some reading/playing/learning; W3Schools Online Web Tutorials

Let us know how you progress.
 
Thanks for all your replies.

will take a look at this video for css just now.
and will also look into the unordered list method.

David thanks for your idea haha but i need to understand how to do it, if i ever need a nav bar thats dosnt have to be important i know where to look now ;) cheers haha.

Adam
 
the above is ok but if you want more than just text that changes color when hovering your mouse you will have to create at least two images for each menu item..?
 
byronc said:
the above is ok but if you want more than just text that changes color when hovering your mouse you will have to create at least two images for each menu item..?
Click to expand...

I'd always recommend one big image for rollovers. The menu bar non-over above and the over state below. Then use the CSS 'Sprites' technique to create the rollovers with background positioning. That way you avoid javascript (in case the viewer has it switched off) and you can still offer HTML alternatives for the text using 'Phark' image replacement.
 
You must log in or register to reply here.
Back
Top