Hi all. I'm a beginner/intermediate web developer, I suppose, in that I know HTML, CSS, and some JavaScript. In terms of design I'm not really too bad either, when it comes to Photoshop.

 

But I've had virtually no experience creating actual websites, and issues like these tend to worry me; I want to get everything right, and therefore, I want to make sure I know the right way to do something, which is why I come to forums like this to ask my questions. Thanks a lot in advance to anyone who can help me, it is much appreciated.

 

Okay, here we go: I am using Dreamweaver, but I'm not sure how to go about creating/implementing a navigation table. Obviously, I'd create the navigation bar in Photoshop, but as far as I can tell there are two clear different ways to do this. The first would be to create the navigation bar altogether (i.e. all buttons as one image) in Photoshop, save it as one whole image, and then use image maps (I think that is what they are called) to section each button to be a seperate clickable link. This, to me, seems the "bad" way to do it, maybe because I've never tried it and just don't have much confidence in the method.

 

The second way would be to create the navigation bar in Photoshop, but instead of creating and saving it as one whole image and slicing using image maps, I'd slice the bar into images with Photoshop's slice tool, and then save and implement them on my webpages as seperate images. This, to me, seems easier and it feels like it's the most "done" method.

 

But I'm really not sure. What I've come to this forum to find out is, what do YOU as professional web designers and developers (as that is obviously the level that I am hoping to achieve sometime in the future) do in these cases? How do you create and upload your navigation bars? Do you use one of the above two methods, or a completely different one? Most importantly, is there a "proper", standard, way to do it, which I should be doing?

PS. I'm not sure if it makes a difference, but it will be a JavaScript rollover bar, with 4 categories, and 8 buttons (4 unrolled-over state, 4 rolled-over). Just to let you know, in case it changes anything?

 

Thanks once again, really worrying me so much, this. :/

Edited February 23, 201214 yr by Hashim

Hello, if i was you, i would ditch the idea of using photoshop for now.

 

You can create very nice navigation bars with just pure css even before you think about adding js.

I'm a little confused how you can be a Web Developer and have never built an actual website.

 

Regardless, when creating navigation you need to do it in a semantic way, and the most popular way I've seen is to use a list of some kind.

 

Obviously you need to have some kind of understand about semantic markup, XHTML and HTML5, CSS3 and basic JavaScript/jQuery before you can really work with the web and understand these examples, but here are some articles that should point you in the right direction for navigation:

 

http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

 

http://webdesignerwall.com/tutorials/css3-dropdown-menu

 

Master the basics before you start worrying about being an intermediate (front-end) developer.

 

Oh... and make sure you aren't using Dreamweaver in design view. Code view only, the other views spit out useless crap markup.

I'm a little confused how you can be a Web Developer and have never built an actual website.

 

Regardless, when creating navigation you need to do it in a semantic way, and the most popular way I've seen is to use a list of some kind.

 

Obviously you need to have some kind of understand about semantic markup, XHTML and HTML5, CSS3 and basic JavaScript/jQuery before you can really work with the web and understand these examples, but here are some articles that should point you in the right direction for navigation:

 

http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

 

http://webdesignerwall.com/tutorials/css3-dropdown-menu

 

Master the basics before you start worrying about being an intermediate (front-end) developer.

 

Oh... and make sure you aren't using Dreamweaver in design view. Code view only, the other views spit out useless crap markup.

 

Sorry, maybe I didn't explain well enough. I'm a beginner developer in the sense that I know how to create web pages in HTML and CSS quite easily, I've just never created a web page which has had to go live, they have all been for myself and tested out offline. Hope that helps.

 

What I really wanted to know, though, is how you (as a professional web designer, that is) usually go out doing things like this? If faced with the same situation, and you had to create a JS rollover with buttons created in Photoshop, how would you go about doing it?

 

Lovelock, I'd much prefer to use Photoshop for now, the reason being, a) it gives me a lot of design freedom, and b ) (Something I should also have mentioned) is that I am doing this for a college assignment. Thanks to both of you.

Edited February 24, 201214 yr by Hashim

If you want to use photoshop for buttons you must first find a layout. Then simply just use it as background images in your navigation <div> and use text in your html, so that its SEO friendly.

 

html:

 

<div id="navigation">
<ul>
<a href="#"><li>button1</li></a>
<a href="#"><li>button2</li></a>
<a href="#"><li>button3</li></a>
</ul>
</div>

 

CSS:

 

here the picture showed untill hovered

 

#navigation ul li {
background-image:url('your path to picture');
background-repeat:no-repeat;
width:picture width in px;
height:picture height in px;
color:#FFF;
}

 

here the picture you want to be showed when hoover

 

#navigation ul li:hover {
background-image:url('your path to picture');
background-repeat:no-repeat;
}

 

Not sure if this is what you wanted, but thats how i would set it up

Edited February 25, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

If you want to use photoshop for buttons you must first find a layout. Then simply just use it as background images in your navigation <div> and use text in your html, so that its SEO friendly.

 

html:

 

<div id="navigation">

<ul>

<a href="#"><li>button1</li></a>

<a href="#"><li>button2</li></a>

<a href="#"><li>button3</li></a>

</ul>

</div>

 

CSS:

 

here the picture showed untill hovered

 

#navigation ul li {

background-image:url('your path to picture');

background-repeat:no-repeat;

width:picture width in px;

height:picture height in px;

color:#FFF;

}

 

here the picture you want to be showed when hoover

 

#navigation ul li:hover {

background-image:url('your path to picture');

background-repeat:no-repeat;

}

 

Not sure if this is what you wanted, but thats how i would set it up

 

So you're basically saying to have my whole navigation bar as a background image, put HTML links on top of them in the form of a list, and make the rollover using CSS? Tbh, looking at that code above, it doesn't look like it would work, for some reason. For a start, the HTML links would display in front of the image, wouldn't they? Whereas I want the text to be in the images themselves.

Edited February 25, 201214 yr by Hashim

 

(snip)

 

 

Better nested like this:

 

<div >
<ul id="navigation">
<li><a href="#">button1</a></li>
<li><a href="#">button2</a></li>
<li><a href="#">button3</a></li>
</ul>
</div>

 

To the OP:

 

I've created a brief demo of what can be achieved without a single image. It's a bit rough because I only spent 10 minutes on it, but you get the idea.

Edited February 25, 201214 yr by Renaissance-Design

So you're basically saying to have my whole navigation bar as a background image, put HTML links on top of them in the form of a list, and make the rollover using CSS? Tbh, looking at that code above, it doesn't look like it would work, for some reason. For a start, the HTML links would display in front of the image, wouldn't they? Whereas I want the text to be in the images themselves.

 

What would not work? This is the way all developers create navigation... Ofcause you need to style the links etc. more through CSS, but if you didnt know that, i think what you need to do, is take look at some html/css guides and learn the basics ? This was merely a way to have different buttons showed with a hover function that showed another picture instead.

Updated URL for demo - definitive version (now I've sussed out how to set it as base in JSFiddle).

So you're basically saying to have my whole navigation bar as a background image, put HTML links on top of them in the form of a list, and make the rollover using CSS? Tbh, looking at that code above, it doesn't look like it would work, for some reason. For a start, the HTML links would display in front of the image, wouldn't they? Whereas I want the text to be in the images themselves.

 

The way I would do it is create the HTML without even considering how it looks so in a nice semantic list. Then I would give each li an id, for example, "li1, li2...". You then assign each individual li the relevant background image via CSS and make the actual HTML text transparent, again with CSS.

 

To be honest though I think you would be well served forgetting about Photoshop for now and learning how to create navigation with just HTML/CSS and how to create it semantically. You shouldn't really need images for navigation with the features CSS has.

Edited February 26, 201214 yr by jtuds

If you absolutely have to make something in photoshop, take what RD has done in jsFiddle and replace the CSS gradient backgrounds with repeated photoshop made images. That's it. Text should never, ever be contained within an image.

 

You shouldn't really need to do that though. It's rare the background of a menu calls for some graphic work more complex than what CSS can handle.