Slice And Code

Learn to slice a design and then code the HTML for it. With this tutorial, you will learn how to create a content box using tables.

STEP ONE:

First, I created a quick design. It is a 100x100 pixel grey box with a 1 pixel black border. I want to use this for content boxes so I'm going to slice the pieces and then code the HTML. You can see that I set up 6 guidelines 10 pixels apart.

Slice and code step 1

STEP TWO:

Now that I have my design ready it's time to slice it up. Open Image Ready. Because I have set up my guidelines exactly the way I want to slice the design I can go to the menu option "Slices" and choose "Create Slices From Guides". I deleted a few slices that were not needed and I'm left with the following:

Slice and code step 2

STEP THREE:

I then have to give a name to each of the slices that I'm going to use. I name them using some sort of abbreviation that makes it easy to understand. For example, slice 1 is the top left corner. How about I name it "tl". Slice 4 is the top right corner so I'm going to name it "tr". Now slice 2 can be used as a repeating background at the top so I'm going to name it "tbg". Here's a summary:

Slice 1: tl (top left corner)
Slice 2: tbg (top repeating background)
Slice 4: tr (top right corner)
Slice 5: lbg (left repeating background)
Slice 6: contentbg (repeating background for content)
Slice 7: rbg (right repeating background)
Slice 10: bl (bottom left corner)
Slice 11: bbg (bottom repeating background)
Slice 12: br (bottom right corner)

Of course, don't forget to save the images now!

STEP FOUR:

Now for the HTML. I'm going to set up a table with three rows and columns. The width of the table will be 100 pixels and the height will be based on how far down the content takes it! Here is what the HTML should look like:

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="tl.gif" width="5" height="5"></td>
<td background="tbg.gif" width="290" height="10"></td>
<td><img src="tr.gif" width="5" height="5"></td>
</tr>
<tr>
<td background="lbg.gif" width="5"></td>
<td background="contentbg.gif" width="290">
This is where the content goes...
</td>
<td background="rbg.gif" width="5"></td>
</tr>
<tr>
<td><img src="bl.gif" width="5" height="5"></td>
<td background="bbg.gif" width="290" height="5"></td>
<td><img src="br.gif" width="5" height="5"></td>
</tr>
</table>

And this is what the result will be:

Top left Top right
This is where the content goes...This is where the content goes...This is where the content goes...This is where the content goes...
Bottom left Bottom right

If you want to make the box wider, just change the width of the table and the respective cells! Enjoy!

back