Starting Off Creating A Page

The 7 steps to a highly effective website

Pepperio is a tool designed to enable web developers to convert a static xhtml site into a dynamic, content managed site. We recommend that initial development of your html layouts be undertaken in a tool more suitable for the task, i.e. Dreamweaver, or even notepad.

The key is to prepare valid xhtml (XHTML 1.0 Strict) and css code which you can then bring into Pepperio and convert. These are the seven steps to create a dynamic web page in Pepperio...

1. Import your css

Create a new style within 'Templates - Template Developer', and add your css code to the main text area, also upload any images to the style that are referenced in your css, i.e. page furniture.

2. Paste in your html

Create a new layout, again from within 'Templates - Template Developer', and copy all of your html from WITHIN the body tags of your original Dreamweaver/Notepad/etc document and paste this between the comments of the Layout.

3. Assemble a Template

Now switch to 'Template Assembler' mode and create a new 'Template' by associating a Layout and Style to the Template. It is worthwhile at this stage to test the template, as it should look like the external page did. Do this by creating a new page, and assigning it this template.

4. Define Components

Components are areas of the page that are intended to be either dynamically generated (e.g. Navigation, crumbtrails, etc), editable (by the site editor/administrator) content areas or often repeated areas across a site (e.g. Headers and footers). There is no fixed amount of components on a page - the quantity depends on the design and method of build. Define which parts of the html represent these regions and denote these (with comments in the code) for later use.

Components are scripts that represent a region on a page, and also reference an external (to the page) library item - a Snippet.

See how html pages are built from Pepperio objects.

5. Build Snippets

Snippets are built from the html defined by Components. For each component defined on a page, copy the html and create a new Snippet (in 'Templates- Template Developer') and paste in the html. Label each snippet with logical names, i.e. primary navigation, main_content, etc.

6. Write Component scripts

Where html has been copied from the layout for use in a Snippet, replace that code with a component script that is a reference to the Snippet that now holds the code.

7. Convert static html to Pepperio tags.

Within each snippet there will be some html that needs to be converted to Pepperio tags. Which tags depends on the html and the desired function, but for example, a static list (ul, ol, dl) would be replaced with a Pepperio LIST tag. Content areas where text and images are displayed can be reproduced as editable areas by using the Pepperio TEXT tag. Here is the full list of Pepperio tags available.