Zymic

We need to now slice our layout, select the slice tool: Now drag around the area of the top header/banner (make sure its above the navigation). See below:

Now slice the home button, make sure its inline with the stroke lines, see below, (zoom in):

Now do the same for your next button, for me its the "about" button:

Now do the same for all of your top buttons:

We now need to slice the left content box:

And now do the same for the main content box (make sure your inside of border lines), and you should have something looking like below:

Now simply slice around the copyright bar:

Your Layout should be looking like below, click the image to enlarge:

We now need to save it ready for the web. Go to: [ File > Save For Web ] and use the gif settings below:

Now click Save & save it in the folder you wish to keep the site in. Then save it as "image" this will be the name of the images.

Now open up image.html in the folder you stored your site in. Your layout should now be coded in tables etc, photoshop is handy isnt it?

Open up image.html and re-save it as index.html. Give the layout a black background and center the layout if you wish.

Now click on the first button on your navigation bar. Mine was home. Point the SRC to your home html page, (for example link it to home.html, we shall create that page later on). You must always target it into "iframe", so helps us later on.

Now simply link all of your navigation buttons to the pages you wish, remember to target them to "iframe" like above.

Now click on the first content box image:

In the <"TD"> tag type in background= then the image name, width & height of the image you selected. (Left content box bg image). As shown below.

Then simply delete the image leaving the table data area left with its background. Doing this will allow you to add content into the box as you have deleted the image and all what's left is the BG. Now simply add in a font tag like I did and add the words "content here" for an example.

Now click on the first main box image:

Now using the method we used for the first content box make a background for it using the main images width, height & src as shown below:

Then simply delete the image leaving the table data area left with its background. We now need to add in an iframe, the iframe will carry all the main content of the layout. Copy the below iframe code but make sure the height and width of the iframe matches with its background.

Now save your page, your computer may crash ;) ! Preview the layout in a browser, hopefully your iframe will be showing but with a page not found page.