This is one of my first tutorials I ever wrote a couple of years ago, and it’s quite popular because so many new designers fine using tables to be confusing for layouts. Now I know the latest craze is pure CSS layouts, but I’m old school and still use tables. So, this is a concept that is a bit confusing for the new DreamWeaver users. I will show you how to slice up a basic content box and use DreamWeaver to create the tables and format the box to accept content without displaying a mess whenever the content is too much or the size of the browser window is changed etc…

First off, I will use Corel Photopaint to slice up the content box, but you can certainly do this in any graphics program, including Photoshop or even MS Paint.

Here is the content box I made:

As you can see, this is a very basic content box with a header, footer and content area. For a HUGE and very complete guide to slicing, check out my massive slicing tutorial guide at www.slicingguide.com, which shows you step by step how to slice up an advanced layout. This tutorial is so big, it’s basically it’s own website!

If you’re new to slicing and using Dreamweaver, then start off with this simple concept tutorial, then move on to more complicated adventures is slicing land.

We will need to cut the box up into 3 sections… a top piece, middle section and bottom piece. I’ll start by masking the top section, copy it to clipboard (copy or ctrl-c) and create a new document from the clipboard.

We’ll name this header top.gif (click to view)

Next we do the same thing to create the middle graphic.

Name that middle.gif (click to view)

Last we do the same for the footer graphic…

Name that bottom.gif (click to view)

Please continue to the next page.