But below i will use a VERY SIMPLE layout for this, as i don't have 3 days to make a design and then a massivly complex tutorial about it.
This is the simple design:
And you take away the text to look how to slice it. and you get a 44KB file.
Now this is fine if your site doesn't contain many images, but remember yours does, and you want to cut down on the amount of images and there file sizes. now first off all you can take away that banner at the top, just chuck it into another file. because what we can do is as the rest of it is repeating it's self after this we just crop it down to a small image about 10px in height or even smaller if you want. like such:
Now thats only 4KB, but don't forget we chucked out the banner, so like we cut down atleast 38KB there.
Now time for some coding.
body {
margin: 0px;
padding: 0px;
background: url(slim.jpg) repeat-y #f19946 center;
}
This code will place that slim image in the centre of the page and it will go all the way down. but if you don't wish for it to go all the way down the page, you can simply put it in a div, with a fixed height.
Next all we have to do is create a container div to hold every other div we will need to place the rest of our content.
#container {
width: 604px;
margin: 0px auto;
padding: 0px;
}
so something like that will do.
and then some html.
<div id="container">
<img src="header.jpg" alt="Simple Header" />
</div>
of course not forgeting our alt tag.
Now because each of these coloumns are of equal widths, we can use class's instead of ID's which is always good. so we get this.
.coloumn{
float: left;
margin: 10px 10px 0 10px;
width: 180px;
}
and then add this html into the container div
<div class="coloumn">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div class="coloumn">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div class="coloumn">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
A screen shot from Firefox browser:
Although this appears very simple in ways, with a complicated design the coding would be different and alot harder, and how often are the coloumns exact.
If someone has a complicated design and think they could make use of this. then please send me over a psd and i shall add to this tutorial.
Sorry for it's simplicty, just take what you have learnt and put it into practice, and feel free to ask me if you get stuck.