I'm a newbie - Connecting up your graphics in your web-site

Hi eveyone

Can anyone advise me how to build up a web-site so that that it looks nice.

I know it might sound like a daft question. I’ve been using the Sitepoint “Build You Own Web Site The Right Way” book which shows me how to do a graphics header logo (which works fine). But I’ve also been viewing the Source on some random css websites and find that the nicer looking ones split the graphics up into blocks- some even place the .jpeg graphics into tables. On reading the book it implies that we should only be using tables for statistical type data which is what it tables were originally intended for.

So my questions are
i) Why do web-designers split their graphics up on a web-site where it looks like it would be possible to just to the same thing using one .jpeg file instead of about twenty or more .jpeg files if you see what I mean :confused:.
ii) Also is it better to place your graphics in a table or use css to move the div element to the correct place?:confused:

If anyone knows a web-site that might explain how it should be done then that would also be appreciated.


That book uses the correct method and the TABLE elements is NOT for arranging sliced images. It depends by what you mean with sliced images; sometimes it can effect loading times if some of the images compress more than the others as individual images (or as one whole large image).

Though if the sliced image is just a background header then the odds are if they have double figure images then they have done something wrong with their design. However, if you mean for navigation bars/menu then usually it’s best to that CSS and background images are applied.

I can’t comment much on the use of split images as it is a bit hard to understand what exactly you are talking about. Maybe you could provide an example of a website so that we could see what you’re talking about.

That book is good, i started off reading that book almost a year ago, and i’ve grown leaps and bounds since then. the right way really did make an effect I think.

As for your second question, well, in my opinion the use of a table based website is… TERRIBLE! So limiting to say the least. So my answer to that would be to learn more about html and css positioning. It’s definately the better way to go.

I have one more thing to say, learn a little bit about php includes when you are comfortable with html and css. It will really make the learning bit alot easier when you realise you have done something wrong, and need to change your design on alot of pages. An example of this would be having one single file that contains the html of your header for instance, then including that file on all of your pages. That way when you need to change your header, you only need to change one file, instead of every single page that uses your header :slight_smile:

Hope that helps!

O and p.s. Make use of this forum like they say in the book, it helps!

i) a lot of what you see in the net is bad. I wish I could say… hey look at source code and you will be able to learn the techniques of the masters. but what actually happen is clients hire the cheapest or worst… and whatever gets by gets up on the net. :confused:

aside from the fact that tables aren’t semantically correct for layout, splitting your graphic can slowdown your site by adding to the number of server requests.

rule of thumb: if you can get rid of patterned space or large areas of single color by using multiple images… do so. otherwise… NO!!!

Thanks blackberryfan - that was a very interesting tip about using one html file to be the header. Any chance that you could include some example code to call the header file?

Thank you so much