Step by Step Instructions for taking a mock up to the template phase of design

Clean up your PSD file

remove extra layers

label each layer

place layers which belong together next to each other (ie about, about over and about sub navigation)

Create the most complex page as the template. If you have a page which has 11 sub navigation items use that page as the template. All the other pages will be simpler and the content will fit easily. If your template is designed for a simple page, a complex page may not fit.

Make sure you have all the necessary pieces, All the rollover layers, the sub navigation layers, the lines, etc.

Save the file in 2 places so if you accidentally break it you have a back up

Place guides on the document. These guides represent where the slices will be made and also give you a guide to how your table structure will be laid out.

Switch to ImageReady

Create slices (I like create slices from guides, but some folks prefer to slice manually)

Name each slice

Create the rollover effects where needed

Save the file in 2 places (as a psd file)

Now "Save optimized as" and save the images and an html document. The html created by ImageReady is probably not usable, but it will let you test your rollovers and give the client and your team a feel for how the site will look when finished.

If you are doing a unique header graphic for each second level page, and 3rd or 4th level navigational graphics, you may want to create those images in separate documents to make the process easier and more straight forward.

You just produce all the navigational and header graphics for the entire site.

Open Dreamweaver, or an HTML Editor

Most sites require a series of tables within tables. build the outer table and then insert the inner tables. Place all your images in first and make sure the page does not spread or crack when viewed at various resolutions or browsers.

Once the images fit into the table grid correctly, add linking code, alt text, and rollover code for the navigational graphics. All graphics will need alt text.

Type in nonsense text to make sure the page does not break when large amounts of data is entered.

Create the text navigation along the bottom

Format the text the way you want it to look.