PDA

View Full Version : Sliced navbar


K.Simmonds
06-18-2011, 03:27 PM
I have just found and used the slice tool in Photoshop, to make a simple navbar for a website. It worked !! I have now got it onto the site in Dreamweaver and all the 6 different sections are there and I've managed to link all the pages. What do I do to make the section for the page I'm on stand out so that I can see from the navbar which page I'm on ?? Maybe changing the colour of the section for that individual page!

DWcourse
06-18-2011, 11:11 PM
You're headed down a bad road letting Photoshop create any code for you.

But basically you need to create additional images for your buttons and sub them in on a page by page basis. And, if you want a rollover affect that's still more images and then using DW's rollover image behavior (not recommended).

I'd recommend you look into creating a CSS-based menu.

Corrosive
06-19-2011, 06:09 AM
You're headed down a bad road letting Photoshop create any code for you.

DWCourse is spot on. Every time you slice and export from Photoshop a fairy dies :wink:

Cons of the method you have used are that you end up with table based code and that is not semantically correct. A menu should be an unordered list of links. For example;


<ul>
<li>Home</li>
<li>Products</li>
<li>Sales</li>
<li>Contact</li>
</ul>


The other cons of using images and the DW rollover behaviour is that your links are images and so can't be read by people who are visually impaired and use a screen reader to read and navigate pages and Search Engines. Also javascipt (the basis of the rollover behaviour) can be switched off by users so your effect doesn't work.

If you want a graphical menu bar with rollovers then this can be achieved using CSS alone and a method called 'sprites'; http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/

The benefit of sprites is that you use just one image (which will download more quickly than multiple slices), the rollover effect will work with javascript switched off and you can deliver alternative text for Search Engines and screen readers.

It might look a bit daunting at first but well worth a few hours studying this technique :)