Layout Techinques / Tutorials / Advice

In ImageReady you can export the whole thing..images and html. I personally don't like the way IR does this though.

You could do this three ways:
If you can do css positioning you could do it that way

You could export it directly and then go in and tweak the code

Or you could do it by hand:

Create a table with the correct number of rows and columns.

Place the images in thier respective cells and define the height and width of those cells to match the H/W of the images.

To put text on top of an image you would remove that peice of the image and designate it to be the background image of that particular cell. It can be done in the td tag itslef, however if you are concerned about standards, this isn't valid, so you'd do this in your .css file. Then you'd place your text there in that cell.

If you have left whitespace in the sliced image where you will place content, you will remove those images and place your text in those td tags. Beware here.....the content is going to need to be enough to stretch the cell to match the dimentions of the remived image, and also not too much so that it breaks the table layout.

*Edit*

I don't have a lot of time right now, since I'm on my way out soon, but I'm guessing you are new to this?

I've got to run, so run a forum search and I'm sure you'll come up with how to designate theses things in css.

Cool thanks for the help, will give it a shot.

But I have made websites in the past so am not completely new to this. I just though there was a standard way of making a site like this for example:

http://www.hostrocket.com/

Are there a set tutorials on how images go into tables or a srutcture to follow (do's and dont's)? Or css positioning, which i prefer, but dunno how it affects all browsers.

webstandards.org -- check the resources section.

One thing I used to do when I did tabled layouts is put guides on my layout image showing where the table cells would go. Then I could use that as a reference when creating my table structure. After that all you need to do is export the individual graphics and pop them into their proper spots.

I think you'll find that everyone has their own ways of doing this. I don't think there is one standard method or anything like that.

HOWEVER, what you need to know is that web design is generally moving away from that old table model. CSS is the way to go now, and it's actually not all that hard to do a layout that way. Check out A List Apart for more on that.

CSS is the way to go but if your sturbon and waht to stick with tables you can get programs that will cut and dice your images while making the html page for you, couple I've used in the past are dicer and imagecutter. The html isn't pretty and in some cases is only square/rectangles, no row/colspans.
Can be a good base to star with thou.

I've recently been using Illustrator's slicing capabilities for CSS designs. Whoo-ah!