Coding a Sliced Content Box

This tutorial will teach you how to create a content box that auto-matically expands when content is added.

1. Firstly create your own content box design in Adobe Photoshop, or any other image design program. This tutorial uses Adobe Photoshop.

2. Flatten your image by pressing Layer > Flatten Image. This will flatten all the layers into one.

3. Select the marquee tool ( ) and select the top portion of your content box like mine. Select up to where the text will be.

4. Copy and paste this section of the image to a new document. Name it content_top.gif. Do this technique to the top, middle, and bottom sections of your content box. Name the images: content_top.gif, content_mid.gif and content_bottom.gif You can also save them as .jpg, however, gif is smaller in size, and doesn't lose any image quality, therefore resulting in faster page loads.

content_top.gif

content_mid.gif

content_bottom.gif

5. Close Photoshop, and open up Dreamweaver. Create a new html document.

6. Press Insert > Table and choose the following settings:

Note: Edit the width to your own needs. My image width was 180 pixels, so I made a table 180 pixels wide.

7. Select the top row, and press Insert > Image. Select content_top.gif and insert it into this row. Now select the bottom row, and press Insert > Image, and choose content_bottom.gif to go in the bottom row.

8. Now select the middle row. For the middle row, we want to insert text, so we must make a background image. To do this, find the Background Image bar, located in the Properties section at the bottom of the screen.

Press the folder and browse for content_mid.gif. This will make the background image as content_mid.gif.

So far, your project should look like mine.

9. Now, with the middle row still selected, press Insert > Table, and make the settings:

Rows: 1
Columns: 1
Table Width: 100 Percent
Border thickness: 0 pixels
Cell padding: 10
Cell Spacing: 0

Press OK, and another table will be placed inside the middle rows. This stops the content box from breaking apart. Input your text, and when you reach the edge, the text will fall onto another line; extending the content box.

This is my final result.

Hope this helps!