Step 1.5) What to do without ImageReady.

Sorry! This page is still in need of screenies which I will get around to eventually. Try to follow without pictures if you can.

Though I must say I'm surprised. Nearly everyone who has Photoshop has ImageReady. But yeah, I didn't learn how to use ImageReady until recently, so I'll teach you the way I made websites before I discovered the functions of that program. (More work, though :<)

Open up your photoshop layout. You're going to have to mentally divide your layout into a table with cells in your mind first. Go ahead and use slice if you want. Make sure you rulers are visible. (If not, go to View > Rulers ) and make guidelines by dragging from the ruler.

Now crop by the guides and save each image. Save two versions of an image if it's a roll-over.

Go to dreamweaver, and make a new table. Set cellpadding and cellspacing to 0. Set the width and height of the table to your layout. Make the number of rows and columns however is needed according to your layout. Then merge cells by selecting two or more cells at once, and clicking the merge tool found in the bottom left of the properties panel. Merge cells until it matches your planned layout.

Now in each cell, manually insert the images and background images. Make cell width and height the same as the image width and weight. For content-areas, insert background image and more non-content areas, insert an image. You can also insert rollover images. Make links using the bottom properties panel.

>> Next: Page properties, styles & background image

<< Previous: Designing the Layout