Just a note before we go any further. Never slice the entire layout THEN try to code it. That’s a recipe for disaster. Think of this as trying to built a walkway with interlocking stones. You fit the stones as you go, then cut the stones as required until the job is done. You’ll never see a contractor arrive with 2000 pre-cut stones and get the job done without having to use that saw again. So as we do this, we’ll be switching back and forth between Dreamweaver and Photopaint.

STEP A. The first thing we need to do is figure out how wide the layout is going to be. In Photopaint, I have my work area configured to show me the document dimensions at the bottom of the screen at all times. You can also see the document dimensions by clicking on Image > Resample and looking at the current dimensions (make sure you’re using pixels for your unit of measure).

Fig 5.1 - Opening the Resample Tool to view document dimensions:

Fig 5.2 - Using the Resample Tool to view document dimensions:

STEP B. At this point, all we’re interested in is width. We can see the total width of our layout is 790 pixels, so we can create our first table in Dreamweaver. Switch over to Dreamweaver and click the Insert Table button.

Fig 5.3 - Click on the Insert Table button:

Fig 5.4 - Use the following Table settings and click OK:

Fig 5.5 - You should now have the following table on your page (Click on image for fullsize sample):

STEP C. The table now has the correct width, but we need to center it and stretch it down the entire page so that no matter what, the page always takes up at least the entire height of the browser window. With your table still selected, you will need to adjust the settings in the property box like this:

Fig 5.6 - Before adjusting table property values:

Fig 5.7 - AFTER adjusting table property values:

Fig 5.8 - Your table should now be centered and stretching to the bottom:

Your site's Primary Table is now complete, and we can move on to setting our Primary Background!

STEP D. Time to add the table's main background image! Switch over to Photopaint and zoom right in to the left border (400%) and let's create a background image. Now we have to be careful because this layout is loaded with gridlines, so we have to cut it out intelligently so the grid pattern works correctly. You can see me working here with the Rectangle Mask Tool (Hit 'R'). Click and hold where you want the mask to start and start dragging your mouse to the right. Release the mouse button when you have masked off the entire area.

Fig 5.9 - In the process of creating a rectangle mask:

Fig 5.9 - Here you can see the area I have masked off in the layout image. This is the area we will use for our Primary Background (Click on image for fullsize sample):

Hit Ctrl-C to copy the masked area to clipboard and then Ctrl-Shift-N to paste the object as a new document. You now have your table background image! I will now save this image as main_bg.gif in the images sub-folder I created.

Fig 5.10 - main_bg.gif created from STEP D (Click on image for fullsize sample):

STEP E. Go back to Dreamweaver and your main table should still be selected. In the properties box, click on Background Image Browse button to select the new background image we created:

Fig 5.11 - Select the Background Image Browse button (See red circle) :

Fig 5.12 - Browse to the main_bg.gif image and click on the image once to highlight it then click OK or just double-click the image name:

Fig 5.13 - Your Primary Table is now using the main_bg.gif image as the Primary Background image:

LIVE SAMPLE - You can see a live sample of what our index.html page looks like HERE! Feel free to compare your work by viewing my example's source code.

And now we have our basic page and main table up and running. Now things start to get complicated and this is where most people get confused.

[ Previous Lesson ] [ Next Lesson ]