Vanilla Site created with tables

This is a basic page I created using tables

The goal of this basic layout is for a site design that will have a top banner to show what each page is about, a Navigation bar on the left and the content area to the body and any additional elements needed to present the content in a consistent manner across browsers.

It took me about 15 minutes to create this basic page using only insert table and setting properties through KompoZer's utilities, using normal mode and the menu choices. I did go into the advanced edit on the table to specify the alignment.

Setting Up Kompozer

1. On the menu bar select View > Show/Hide:
   a. Check Format Toolbar 1
   b. Check Format Toolbar 2
   
   
2. On the menu bar select Tools > Options > Settings > General:
   a. Check "Maintain table Layout when inserting or deleting cells"
   b. Check "Use CSS styles instead of HTML elements and attributes
   
   
3. On the menu bar select Tools > Options > Settings > Advanced:
   a.  Check Markup > Language:  HTML 4
   b.  Check Markup > DTD:  Transitional
   c. Check Behavior of Return Key > Return in a paragraph always creates a new paragraph

Creating the Page Step by Step:

Start with a new page and before doing anything click Save, give the page a title when it asks and save the file. If you want this to be your home page save the file as index.html, otherwise give the file a descriptive name when saving it. The instructions below are very descriptive and detailed, this is done to accommodate users on all levels but particularly new users who may want to follow along step by step on their own.
    
     Setting up the Header Table

1. Choose Insert Table from top menu bar, a window will pop up. click on the precisely tab

2. Set the following items to the settings below:
   a. Rows: 1
   b. Columns: 1
   c. Width: 90% (make sure you chose percent)
   d. Border: 0
   e. Ok
   

3. Double click on the table (the Table Properties window opens)
   a. Click the Tables Tab at the top left of the window
   b. Set Table Alignment to Center
   c. Set the Background color to Dark Gray (#666666 in the Hex field)
   d. Click the Cell Tab at the top left of the window
   e. Set Vertical Alignment to Middle
   f. Set Horizontal Alignment to Center
   g. Click OK
   
   
4. Enter the text "Vanilla Site created with tables"
   a. Highlight the text
   b. On the Format 1 toolbar select H1 from the pull down menu (by default it says Body)
   c. On the Format 2 toolbar click on the color picker Text icon (the Top box) and select white foreground text.
   d. Click Ok
   

1. Press the down arrow to locate the cursor on the row below the table you just created.
   
   
2. Choose Insert Table from top menu bar, a window will pop up. click on the precisely tab
   
   
3. Set the following items to the settings below:
   a. Rows: 1
   b. Columns: 2
   c. Width: 90% (make sure you chose percent)
   d. Border: 0
   e. Click OK
   
   
4. Double click on the LEFT cell of the table (the Table Properties window opens)
   a. Click the Tables Tab at the top left
   b. Set Table Alignment to Center
   c. Click the Cell Tab at the top left of the window
   d. Set the Width to: 20% (make sure you chose percent)
   e. Set Vertical Alignment to Top
   f. Set Horizontal Alignment to Center
   g. Set the Background color to Yellow (#FFFF00 in the Hex field)
   h. Click OK
   
   
5. Double click on the RIGHT cell of the table (the Table Properties window opens)
   a. Click the Cell Tab at the top left of the window
   d. Set the Width to: 80% (make sure you chose percent)
   e. Set Vertical Alignment to Top
   f. Set Horizontal Alignment to Left
   g. Click OK
   
   
6. Delete the blank space between the Header table and the Navigation/Content tables.
   
   
7. Click OK and Save

1. Click inside of the Navigation Bar Cell (the left cell of the bottom table)
   a. Enter the text "Navigation Bar"
   a. Highlight the text
   b. On the Format 1 toolbar select H2 from the pull down menu (by default it says Body)
   c. Click Ok

2. Click Insert > Link
   a. Enter the Link text ("Link 1" can be used in the example, Gary777 included a link back to the home page for ease of use in this example)
   b. Enter a URL for the link (# was used in the example to refer to the same page)
   c. Click OK

3. Repeat Steps 2 - 2c until you have links 1 - 3 inserted.
   
   
4. Save your work
   

1. Click inside of the Content Area Cell (the right cell of the bottom table)
   a. Enter one or more paragraphs of descriptive text 
   b. Highlight the text breaking your selections into logical paragraphs by highlighting text and
       selecting Paragraph from the Format 1 toolbar (by default it says Body)
   c. Click Ok

2. Repeat Steps 1 - 1c until your done.
   
   
3. Save your work

A note about cell padding and cell spacing:

You can also choose the cell spacing and padding if you'd like, where spacing is the amount of space you are allowing between the edge of the cell and the start of the object, such as text, and the padding is the amount of space between tables and cells (for this one I chose 0 so the tables butt up against each other.

A note on placing large amounts of text on the page:

Let's say you have a word document that you want to put on your web page. If you just copy and paste it from Word, you'll end up with Microsoft's formatting which will most likely yield unpredictable results, make a real mess of your html and will take longer to load because of all the added Microsoft specific CSS formatting styles.

I've found the best way to 'launder' the text is to copy and past the Word document into a plain text editor such as notepad (making sure word wrap is off!!!)

Copy and paste the plain text you've just created and now you can highlight the text and select properties such as font color, typeface, etc. The text will appear as you want it on your web page without the word processing formatting which can get quite ugly.

Just because you have a font installed on your computer doesn't mean that everyone who will be viewing your site will have the same fonts installed on their computer, A Mac user may have an entirely different set of fonts installed than a Windows user for example. So stick to a small set of web safe fonts that most people will likely have such as; Ariel, Times New Roman, Verdana (there are more, and a little research via Google "web safe fonts" will help you find what you are looking for); or

You can choose to not specify a font at all, in this case the default browser font will be used, you can still choose whether it will be a variable or fixed font and set relative font sizes, etc. This means the site visitor will see the default font as set in their browser. (Which is what will happen if you set a font they don't have installed on their computer anyway!)