Hi everyone,

 

Please provide some feedback to my new design: http://www.online-photo-lessons.com

 

Right now the only link that works is "Photography Basics", the others are a WIP.

 

Thanks for your time.

Sorry to say this but it needs a lot of work.

 

Style looks very dated, gradients are too obvious and the bevel/emboss is overused.

 

Code should have a separate .css sheet linked to. Don't use tables for layout. Don't use javascript to swap images that way.

Sorry to say this but it needs a lot of work.

 

Style looks very dated, gradients are too obvious and the bevel/emboss is overused.

 

Code should have a separate .css sheet linked to. Don't use tables for layout. Don't use javascript to swap images that way.

 

 

I agree the style does look very dated, you need to re-think the colour scheme, and maybe do something with the header.

Sorry to say this but it needs a lot of work.

 

Style looks very dated, gradients are too obvious and the bevel/emboss is overused.

 

Code should have a separate .css sheet linked to. Don't use tables for layout. Don't use javascript to swap images that way.

 

 

Thanks, I will work on it.

 

Regarding CSS, I'm not sure to understand since I didn't use any table in my layout and also my CSS code is located in a separate file.

 

Finally, what's wrong with using Javascript to swap the navigation bar images?

Think this page has potential, but needs quite alot of work. I'd start with a more modern web 2.0 look/feel. Also, cut down on the gradient a little, it's a little extreme.

 

Good luck!

Thanks, I will work on it.

 

Regarding CSS, I'm not sure to understand since I didn't use any table in my layout and also my CSS code is located in a separate file.

 

Finally, what's wrong with using Javascript to swap the navigation bar images?

 

You do link to an external style sheet, but there are numerous styling attributes in your code too.

For creating your rollover navigation bar you definitely used a table. It actually looks to me like you used Dreamweaver to make the table for the navigation and the rollover Javascript (it does it for you automatically). Trust me, there are much much better ways to make a rollover navigation with pure CSS.

 

The problem with rollover Javascript is that if you roll over it, you actually have to wait for the image to load. That sucks. Using CSS you make the two separate images into one, and when you rollover it it actually slides the image down. So there's no loading to be done after the initial page load.

For creating your rollover navigation bar you definitely used a table. It actually looks to me like you used Dreamweaver to make the table for the navigation and the rollover Javascript (it does it for you automatically). Trust me, there are much much better ways to make a rollover navigation with pure CSS.

 

The problem with rollover Javascript is that if you roll over it, you actually have to wait for the image to load. That sucks. Using CSS you make the two separate images into one, and when you rollover it it actually slides the image down. So there's no loading to be done after the initial page load.

 

Now I understand what he ment when talking about using tables: You are 100% right, DW generated the navigation bar for me.

 

Since I'm completely new, I will have to find a good CSS tutorial to deal with my navigation bar...

Hell, you don't even need a tutorial. Just look at website sources.. View > Source, find check out how the navigation for most sites are structured. You can look at and copy other websites CSS too.. just find out the location of the stylesheet they're linking too. From there you can fiddle around with it until it fits your website.

 

HTMLDog.com is good for teaching the basics if you need help.

 

http://www.webcredible.co.uk/user-friendly...tion-menu.shtml

 

Here's a good place to find out how to make a CSS based navigation.

 

http://wellstyled.com/css-nopreload-rollovers.html

 

Here's how to use rollover images. It's quite simple really.. put your two image together in one file, either stacked horizontally or vertically (I prefer vertically). You make the <li> item the same size as the original item.. and all you do with the a:hover effect is you switch the background position to move the image so it fits. It's quite simple and quite powerful.

gdehms,

Thanks for the tips.

As the others have said the colour scheme needs looking at and there are far too many tables in the code.

 

Best of luck.

I agree as well, this site does have some really nice potential but needs a lot of improvement. The css needs its own file, also whats up with the JS? Take Mesa's advice and use only one image with css to do your rollover images. Also when getting your layout together use css to do that for you. Believe me it is so much easier and one less headache for you.

 

Luck!