Small Site Tutorial.

Starting a new site is easy. Follow these steps to build a simple site. (You can also download a simple demonstration site from the download page.)

Build the template.

Use your usual tools (Dreamweaver, BBEdit, Photoshop, Fireworks, etc.) to build a single page with all the elements of the site. Since you're using Elements, you don't need to try to anticipate every site element; the template can be updated at any time during development with generally less effort required than to plan out the entire structure beforehand.

Define the template.

Convert the html template to an element: create a directory, which will be the Elements site source. Place the template file and associated images inside this source directory ("siteSrc" (see Glossary) for short). Name the template "`template.txt". Be sure the template file name begins with the backtick character. It is the key to the left of the number 1 on most keyboards.

If you can't find the backtick key, or don't want to use it, edit the elementFilePrefix (see ElementsSettings) in the ElementsSettings.txt file so that elementFilePrefix uses the character of your choice to identify all element files. Use this new character everywhere instead of the backtick.

Define the content area in the template.

Type "{{fileName}}", without the quote marks, in the template where the contents of each page should be positioned in the template. Notice that there are two sets of curly braces (see markerStart (see ElementsSettings) for more info).

Prepare for the title element in the template.

Type "{title}", without the quotes, in the template where the title of each page should be positioned in the template. Also type "{title}<br>" above the "{{fileName}}" so that the title will appear in the body of every page.

Define a content page.

Create a new file called "index.html" and place it in the siteSrc. Enter #title Page One
on the first line. On subsequent lines, type a few lines of body text. Any type of regular html can appear here. The contents of this file will replace the {{fileName}} phrase in the template.

Actually, there will be two replacements to get the contents of the file to replace the {{fileName}} in the template. First, {fileName} is replaced with "index". Second, {index} is replaced with the contents of the index.html file.

Test the site.

Copy ElementsProcess.py from the Elements distribution to the parent directory of the siteSrc. Open it in the Python IDE. If necessary, edit the path to the siteSrc. Run the script. (See the Windows page for important issues using the ElementsProcess.py under Windows.)

If all went well,

you'll be looking at the text of index.html wrapped in the frame of the template file in a browser window!