Full Website Layout - Setting up the basic layout how you want it

Open your HTML file in Dreamweaver.

At the bottom of Dreamweaver you should have a Properties bar. If not press Ctrl + F3.

On this bar you may need to press the small arrow at the bottom right to open the advanced properties.

Click Page Properties

This will bring up the Page Properties Window. Obvioulsy you can use your own settings, but these are the settings I used:

And you can go on to do the Links, Headings, Title/Encoding and Tracing Image.

The background image is the cropped background gradient that we made first. Then set to repeat-x so it only repeats in the X axis. The margins only really need the top margin set to 0px so that the gradient background fits in with the template.

Press OK.

On either the bottom line or the right line as you hover over the table will get a resize icon, hold the mouse still and just click it. This will select the table.

You will need to click within the red area.

This will select the whole table. You will get a thicker black edge around the table.

In the properties bar at the bottom of the screen, select Center from the Align combo box.

Left click the main section of the table which is the big image in the center.

For mine it was slice #28.

In the properties bar click in the Src box and copy the URL.

For me it was images/firefoxlayout_28.jpg

Either cut the URL out or write it down the delete the URL, but don't delete the image.

Left click a blank area of the page then click back on the main image that we just copied the URL from.

Press an arrow key, anyone, doesn't matter which.

Now paste the image URL in the Bg box in the properties bar.

This will make the image the new background so we can type text on top of it.

To the left of the background box there are 2 boxes for Width (W) and Height (H).

For these figures you need to use the 2 figures on the main image of which we deleted the URL from.

Input the 1st number under the width box then the 2nd number under the height box. Press the Enter button on your keyboard. If the figures disappears out of the box don't worry this is because it is defined elsewhere.

For me the width disappeared.

Now left click the image with no URL and press the Delete key on your keyboard. You now have a background you can write on.

Also in the properties bar you can align the cell so that the text starts at the top.

Now if you go in to Code View, you code will now look like this:

As you can see the background of the cell has been set to the image URL and the height is still set as well as the alignment. You can leave it like this and type directly in to the box or you can add an iframe. I would recommend using an iframe as if you have lots of content you will lose your layout.

In your code replace the:

with this code

<iframe xsrc="page.html" height="425" width="795" frameborder="0" allowtransparency="true" name="iframe"></iframe>

So you should get this:

The allowtransparency is what firefox uses so that the backgrounds of other pages are transparent so you can see the background image through it. For IE we need to add extra code to each page we put within the iframe.

<style type="text/css">
body {background-color: transparent}
</style>

Add this code to the HEAD section
of your page and do not define another colour elsewhere in the code.

You may also want to change the name iframe to content or something similar so you can target your links to it.

The src is the source page that is loaded by default. The height and width attributes are the ones of the large image that we deleted.

You can now use the technique of using the image as a background image for your footer as well.

For the links you need to add the target to them.

For example if you have the contact link opening the Contact page in your iframe you will need to add the target to it.

<a xhref="contact.html" target="iframe">Contact</iframe>

The target is what ever name you gave to your iframe.