Before I Began

The advanced features were used to turn off the Office Live header, navigation and footer.  The advanced features can be activated from the Page Manager under site actions.  The header, navigation and footer can then be unselected for each individual page in Page Properties.  You can select which ones to not use on a page and it will apply only to that page.

If you want to try this you may want to create an experimental page and select to not show the page in the Navigation Menu.  That way your site visitors won't see your work unless you want them to and you can be free to try things out without it effecting a page your visitors will see.  If things don't turn out so well you can remove it all from the page and no harm done.

If you haven't used the Office Live editor or tables much you may want to read Basics of Tables first.

 The Page Background

If you have read the other pages on this site you might guess that it starts with a table.   I choose a Generic table and entered 1 row and 1 column.  I set the width of the table to the width I wanted the page and choose the background color of the darkest gray.

The Header

Inside the first table I  placed another with 2 rows and 2 columns.  This is where everything in the header will be placed. 

The top navigation goes in the top right cell.  I right justified the text and made hyperlinks for each page I wanted in that area.  My logo went in the bottom left cell.  The bottom right I placed the Site Slogan Module (Modules > Site Information > Site Slogan).  If my logo was an image without the site name I would also place the Site Title Module there.  See Creative Modules on how to change the text color of these.

Once everything was in place I changed the cell padding to 0.

The Navigation Menu 

The Menu is a table with a background image.  I've placed it in a table with a gray background so you can see the whole image.  When the table is stretched the image repeats across.  Text hyperlinks are made inside the table.  The disc ( ● ) is from the Character Map in my computer (Programs > Accesories > System Tools)  You can select, copy and paste many of the characters.  The color can be changed like any text.

The Content Area

Another table is placed under the first 2 with 3 columns and 3 rows.  This will hold all of the content of the page.

I merged the first 2 columns of the top row and the top 2 rows of the far right column.  Set the table width to the same width as the header.

All of the images and text are placed in the different cells of the table.  This keeps my images neatly arranged with my text.

The News form  I placed into another table so it would line up nicely with the email one.  I wouldn't go too far with putting too many tables inside of tables inside of yet more tables.  There is probably a simpler way to do the same thing if you think about the layout.

The email form was made using the Form Designer.  See Custom Contact Form for how to make your own.  I placed this one in a 1 cell table and the rounded box is an image used as the table background.  See Images and Tables and Creative Modules for more details on how that works.

Since I didn't use the Site Information Module at the top of the page I put it on the bottom above the Footer Information Module.  These modules display the information you enter into the Header and Footer in the Site designer and would be displayed in the Office Live header and footer if you were using those.

Change all the border colors to the background color and it is finished.