Header

Vanilla site created with CSS

navbar

Kompozer By Example
Link 2
Link 3
etc...

Content Area

Currently there are no additional pages, but I want all pages on this site to have the same basic format, where the top banner will show what each page is about, a Navigation bar on the left and this column will contain any additional elements needed to present the content in a consistent manner across browsers.

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 > General:
    a. Check "Maintain     table Layout when inserting or deleting cells"
    b. Check "Use CSS styles instead of HTML elements and attributes
    c. Leave other options as they are ?

  3. On the menu bar select Tools > Options >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
    d. Leave other options as they are ?

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 or all levels but particularly new users who may want to follow along step by step on their own.

Step by Step (These were the steps I followed when attempting to create this page using KompoZer and CaScadeS using the Windows operating system)

  1. Enter the text "Vanilla Site created with tables"
    a. Highlight the text (by dragging your mouse over the desired text from left to right while holding the left mouse button down)
    b. On the Format 1 toolbar select H1 from the pull down menu (by default it says Body)
    c. Click Ok
    d. Hit enter
  2. 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
    d. Hit enter
  3. Enter the Text "Content Area"
    a. Highlight the text
    b. On the Format 1 toolbar select H3 from the pull down menu (by default it says Body)
    c. Click Ok
    d. Hit enter
Adding Navigation Bar Text and Links

  1. Click below the Navigation Bar text

  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 5 - 5c until you have links 1 - 3 inserted.

  4. Save your work
 Adding Content Area Text

  1. Click below the Content Area text (added in step 3 above)
    a. Enter one or more paragraphs of descriptive text 
    b. Highlight the text breaking your selections into logical paragraphs by higlighting text and selecting Paragrpah from the
        Format 1 toolbar (by default it says Body)
    c. Click Ok

  2. Repeat Steps 8 - 8d until your done.

  3. Save your work
(Attempting to) Apply Styles using CaScadeS
  1. Click on CaScadeS (A window with sheets and rules to the left and seven tab choices to the right with General Tab opened will appear)
            First Question: What do I choose for internal stylesheet?
  1. Took a swag at style applied to all elements of class (even though I don't have a class defined) by doing the following
    a. Click on the painters palette to get the drop down menu.
    b. Click on > Style Rule
    c. Check "Style applied to all elements of class"
    d. Enter "simpless" as the style name in the box provided above the "Create Style rule" button
    e. Click on the     "Create Style rule" button (I have now created a style called "simpless")

    Editor's Note:  In order to access the tabs in the right side of the CaScadeS panel you must first click on an element style (such as "simpless" that we created above) to apply CSS styles, once you have highlighted an element on the right side of the CaScadeS panel all styles will be available for application to the selected element.

  2. But I don't know what to do from here, so I tried the following because it seems to make sense:
    a. Highlight first header and click on CaScadeS
    b. Given option to export style sheet, so have done as ss1
    c. Arbitrarily named the class .simpless (Realize I don't understand what a class is and why I even need one *shrugs*)
    d. Discovered that in order to do anything have to highlight .simpless (created in step 12) and was then able to apply  text, background and other elements styles, etc.
    e. While defining a Box (because I hear people talking about boxes in CSS and it seems I need one) I chose:
    display: block
    float: none
    position: static (this is a guess, what's the difference between fixed, static, absolute and relative. And relative is relative to what?)
    what in the ever loving blue eyed world is z-index?
    visibility: chose visible (don't want it hidden, but what is collapse?)
    what are clear and overflow?
    What are the tab lists?

  3. After all of that I linked the H1 to the style sheet and didn't get the effect I wanted.

Editor's Note:  Steps 13 and 14 are not the proper steps to apply a style to an element using CSS, please see example submissions for valid uses of style.

Clearly, I don't understand the terminology or how things relate to each other or how to use Cascades to actually create a style sheet that even comes close to working, such as how to even get a style sheet saved with the css file type. (Currently it saves the file with no extension)

This has taken me about a half hour so far and that doesn't include any of the reading I've had to do to even make this pathetic attempt. 

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 validates via W3C but obviously does not work as intended.
CSS File: ss1 (No .css extension)

Browser Usage and Compatibility Notes:
1) This design will not work as desired in any Browser and is an example of how a user unfamiliar with CSS might attempt to use CaScadeS to create a common web page layout.

Editors Notes:
The above is an honest attempt by a user experienced with Kompozer who has no knowledge of CSS, in the example she is trying to duplicate the design shown in the table example using CSS. This example illustrates how a new user might perceive the use of CSS in Kompozer when designing a web page.

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:
View the CSS File from above and note the missing file extension, also note that she applied the style to the h1 tag and not a div. In this case she doesn't know what a div is, what it does or even how to apply a div to the page. And the use of the H1, H2 and H3 tags in the example is questionable as well, 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: Do NOT use this example as a template for your own site, please see the corrected examples for use as a good foundation to your web pages.

Note to Example Providers: This page has been left in it's natural (KompoZer) state intentionally, we know the page is not structured correctly and that much of the code is incorrect, so please don't write telling us all of the things that need changed, that is the whole point of this exercise, please show us how you would do it "step by step" and lead by example.

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

Back to KompoZer by Example