Website Build

[SalientAnimal]

Hi All,

 

I'm looking for some advice on a website I'm busy building for selling things online. I've basically designed the layout I want and how I want it to look in photoshop. A big portion of the layout is a flat image though.

 

What is the best way to incorporate this into an actual website?

Is it best to use <table> tags or <div> tags?

I have attached a copy of my design as an image. The only thing that is currently missing on this image is a navigation menu at the top.

 

 

I would really appreciate any help here.

 

Thanks

[haku]

We cannot teach you web design in a thread. Most of us studied for months/years before being able to take a design from photoshop and turn it into HTML. Putting that into an e-commerce system takes months of learning that ecommerce system first as well.

 

Imagine if you found a car forum, and said 'I've drawn a picture of a car, how do I build this? Should I use aluminum or steel?', you can imagine you wouldn't get that much help. Basically you are in the same position here.

 

To answer your question though, only use tables for tabular elements, and only use divs when they should be used, and not other elements instead.

 

Confusing answer right? A few months of studying web design should clear the answer up for you.

[SalientAnimal]

I have done some web design before. But I don't always get the results I want. I've built functional PHP sites as well. Was really only looking for advice on what I should do with my design. I don't want my design to end up like on of my past builds that I didn't really get the result that I had planned previously.

[DaveyK]

How does it not end up like you want it to? I understand that certain layouts have function or structural boundaries but you are still sole responsible for your own designs and "them not turning out the way you hoped" is something you chose to do, in my personal opinion.

 

I personally work a lot with <div>s, but who doesnt.

[haku]

Nothing wrong with divs - until HTML5 kicked in (and after tables went out) they were the primary generic HTML building block. Fortunately HTML5 has given us a number of new tags we can use instead of divs.

 

The problem I was more referring to however is divitis - using divs for absolutely everything, when other tags are more appropriate.

[haku]

I have done some web design before. But I don't always get the results I want. I've built functional PHP sites as well. Was really only looking for advice on what I should do with my design. I don't want my design to end up like on of my past builds that I didn't really get the result that I had planned previously.

 

What kind of answer are/were you hoping to get? Your question was extremely broad, so you can't really expect more than an extremely broad answer.

[SalientAnimal]

I appreciate the fact that my question was really broad, but was looking for some advice.

 

Like do I use divs, or do I rather use tables?

Do I keep it as a flat image, or do I break up the sections, i.e the side navigation, frames for images, etc.

 

I'll admit I'm not the greatest when it comes to building websites and that's why I appreciate the advice giving by those who have learnt over time

[DaveyK]

When possible I would use small sections of images for web design or even just use as much CSS as possible. Just looks better.

 

Besides, all elements have purposes and I'm not too familiar with html5

[haku]

I appreciate the fact that my question was really broad, but was looking for some advice.

 

Like do I use divs, or do I rather use tables?

Do I keep it as a flat image, or do I break up the sections, i.e the side navigation, frames for images, etc.

 

I'll admit I'm not the greatest when it comes to building websites and that's why I appreciate the advice giving by those who have learnt over time

 

Only use tables for tabular data. Do not use them for positioning. Only use Divs when there is not a more appropriate tag available. For example, if the contents are a paragraph, you should use a paragraph tag. If they are a list, you should use list tags.

 

Do not keep it as a flat image. Do as much as possible with CSS, and keep the images to a minimum (they slow down page load times). Text should almost never be part of an image.

[Libellula]

As said previously, do not use tables. Tables are no longer usefull in website deisgn such as this, especially responsive website design - which is something you'll want eventually. You will primarily use only DIV tags. As for your large image, I would personally break it up into sections. This helps load times and there's really no reason to have one gigantic image anymore. Hopefully you have experience with CSS style sheets as you mentioned you have done some website design. After you have planned out your DIV areas, use the style sheet to designate which parts of your image go where as the background. Since your DIV styles work independently from your content styles, it should flow seamlessly.

 

I was not able to see the image you said you had attached, so I am only going off your information above. If you still have questions, please ask and I might be able to help further.

Good luck!