And now my friends we begin to code the content box areas, otherwise labeled as Box 6 - Small Content Column and Box 7 - Main Content Column on our Strategy Guide. We'll start off nice and simple by taking a couple of key measurements and then creating the table we'll use for our content columns.

Fig 11a.1 - Our main Strategy Guide - This lesson covers Boxes 6 and 7:

STEP A. In Photopaint, we'll take the measurements of the columns so we know how big to make the cells on the next table we create. It's important to remember where you take your measurements from, because once you do, you have to use those when slicing the images for your columns. So if you take a measurement for the left column of 203 pixels and you slice an image 204 pixels wide, you'll screw up the entire layout.

In Fig 11a.2, I have marked the width of the left content column with a green bar, and it's 203 pixels wide. The right content column width is marked in yellow, and measures 544 pixels wide.

Fig 11a.2 - Taking measurements of the two content columns:

STEP B. Back to Dreamweaver again and create a new table under the Member Login Bar table we created in Lesson 10. This is a vital table and will essentially hold the entire set content columns. We'll create this table at the usual 747 pixels wide with 1 row and two columns.

Fig 11a.3 - Create a new table under the Member Login Bar table with the following settings:

Fig 11a.4 - A new table is created with 1 row and 2 columns:

Click inside the left cell of the table and set the Vertical Alignment to Top, and set the cell's width to 203 pixels.

Fig 11a.5 - Set the alignment and width of the left cell:

Click inside the right cell of the table and set the Vertical Alignment to Top, and set the cell's width to 544 pixels.

Fig 11a.6 - Set the alignment and width of the right cell:

Now that wasn't too painful was it? Well ok, I admit I'm softening you up for the next step. Let's go ahead and slice and code the left content boxes!

[ Previous Lesson ] [ Next Lesson ]