Header

Vanilla Site created with tables

Navigation Bar

Kompozer by Example
Link 2
Link 3
etc.

Content Area

This is a basic page I created using tables

Currently there are no additional pages, but I want all pages on this site to have the same basic format, with the top banner that will show what each page is about, a Navigation bar on the left for links and this column will contain 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

Before you begin you must set Kompozer up as follows:
  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
     Setting up the Navigation Bar and Content Area Table
  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
     Adding Navigation Bar Text and Links
  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
     Adding Content Area Text
  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
You should now have a page that looks exactly like this page (with the exception of any text you decided to leave out from the content area.)

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.


A note about font type:

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!)

unohoo


- - - - - - - - - - - Example file ends above this line - - - - - - - - - - -
Author: unohoo
KompoZer Version used: 
0.7.10 (20070831)
OS: WinXP Pro SP2
Markup: HTML4
DTD: Transitional
Validation: This pages validates as W3C Transitional HTML4, CSS validation is not possible since no stylesheet is used.

Browser Usage and Compatibility Notes:
1) This example works as expected in all browsers tested by browsershots.org The only minor exceptions are the difference in H1, H2 and H3 font size rendering in different browsers and browser versions.

Editors Notes:
The above design is a simple example of a common layout using tables, it has been created to illustrate the problems faced by a user new to CSS and specifically new to designing using CSS in Kompozer.  This example is used to illustrate what the user is attempting to achieve in CSS in the above menu link Original - CSS

Why do we use HTML4 Transitional?
We believe that most new users who use Kompozer as a WYSIWYG editor will find a transitional doctype easier to manage than a strict doctype. Users who use want to use the strict type will most likely understand HTML, CSS and web authoring much better than a newbie and find this exercise of little value.

Design Notes:
This is a common and clean table layout that is easily accomplished using KompoZer's WYSIWYG facilities. One questionable item is the use of the H1, H2 and H3 tags, some users may prefer to use these tags in a way that provides more value from an SEO (Search Engine Optimization) standpoint. It may be better to tag the headings in the content area with these tags in relation to the relevance to the content.

Note to Users:

You may use this design as a foundation for your own web pages if you so choose, other examples using table layouts with various techniques may also be available on this site.

Note to Example Providers: This page has been left in it's natural (KompoZer) state intentionally, we understand that there are spurious and erratic inline style tags within the page. Please don't write to inform us of errors or mistakes in technique or grammar, instead, if you so choose, please show us how you would do the same thing using CSS, tables or hybrid table/CSS solutions.

Modifications to the "step by step" text of this page and the Editors Notes section provided by Gary777

Back to KompoZer by Example