How should I convert this image design to code efficiently?

Yo!

I made a design of what my new body section should look like in fireworks MX - where I do all my work.

But I need help in knowing the best way to handle converting it to code. I want to maintain as few cells as possible and use padding/spacing and borders to their fullest.

Here is the example

http://img.photobucket.com/albums/v...nds/neobody.png

I am not concered about the outter dark blue ring or the shadow on this large box. I am also not concered about the title bar - all this I have handled.

Let me explain. My original design simply has the alternating medium and light blue boxes one RIGHT against another - and these cells are commanded by css. So what I've done is put a grey area around them. I would like to not have to go into each pages code and control the addition of this grey area. SO what do you think would be the most efficient way to handle doing this?

Thanks a trillion

Nobody has any good tips? Should I just insert all sorts of grey cells to fit it? I was hoping there was a more sensible way to handle it!

that can easily be done with tables (or css) .

u will have like 7 (i dint count) row, and 1 column

get all the cell paddings, cell spacing right, with some colours,

and images for the gradienty bits

and your sorted..if u need help with the tably stuff..post a prob in the html forum

tom