Snaplook Pages -- User Manual

This document will explain how to use the snaplook-enabled website and how to write pages for snaplook successfully.

Actually, there is very little to learn! Snaplook is designed to leave editing pages simple, while making sure that all of them still look and feel the same throughout the website.

Choose which section you would like to read about:

• How Snaplook Works
• Writing pages that work and look good
• Special Menu Files
• Advanced Features

---

How Snaplook Works

Snaplook works by looking at your HTML page and replacing certain small bits in it to make the output look uniform with the rest of the website. The process is very speedy, and only small parts of the document are modified, leaving the rest untouched.

In other terms, it wraps your html page in some consistent look-and-feel, adding navigational menus along the top and along the sides.

Writing documents that work with Snaplook

One of the best things about snaplook is that it allows you to use your favorite html editor to modify the contents of your web pages and to create new ones. No special coding skills are required, and any HTML editor will work just fine.

There are, however, several guidelines you will need to follow in order to make your pages look good after they get processed with snaplook. Here they are in no particular order:

Make your pages extremely simple

This is the mantra of making pages that work with snaplook. Do not use any additional fonts, colors, styles, or even change font sizes. In fact, when you create your webpages, they should look nothing less but DULL. That's how you want them -- all the pretty stuff will be taken care of by snaplook.

Don't forget to set the title

Go into the page properties and set the title of the page. Make it concise, but descriptive. Try to make it no longer than 5-7 words.

Use headline tags

Nearly every html editor out there should let you define special paragraph styles. These are called "headline 1" through "headline 5". Use these styles to create the headings on your pages. Do NOT make the font look bigger by changing the font size -- that is considered a very bad habit in web page design. In fact, don't change font sizes at all -- people with poor eyesight might have trouble reading the pages you make.

Start the page with "Headline 1"

The pages will look nice if you start them with "Headline 1". Put a very concise description of the page in the headline, using no more than 5-7 words.

Use "Headline 2" for subsections

Whenever you create subsections, use h2, or "headline 2" tags to name them. Again, do create sections by changing font sizes. That's icky.

For small subsections use "Headline 3"

Use h3, or "Headline 3" for small sub-sections. Webpages only win when they are organized in a hierarchical format.

Always use relative links

A relative link is a link that doesn't include a website name in it. You should be able to tell your html editor to create all links as relative links and never as fixed links. If your link contains the http:// part, it's a fixed link and it's best to change it to a relative one.

Do not use tables, unless necessary

Avoid using tables, unless you actually need to represent some data in a table. When you do create a table, make sure you do not set any fixed cell widths, as that might interfere with the final page layout. If you need to specify which cell should be wider and which should be narrower, use percent values, not pixels.

Put all images into an "images" subdirectory

If you add images to your page, it's best to put them all into a sub-directory called "images". This helps organize the website nicely. If link to other things, like pdf, postscript, doc, or other file formats, create a special sub-directory for them as well, called "objects", or "extras", whichever you prefer. Don't leave them hanging around the main directory, though, that adds clutter.

When you are done creating your webpage, save it as pagename.ptml (note that it's ptml, and not html. Then go to your browser and check out how it looks after being processed by snaplook. If you kept the design dull and simple, it would look very nice and consistent with the rest of the website.

Menu Files

Snaplook uses special files in each directory of the website to make the menu links at the top of the rendered pages, as well as on the side. These files are called "menu.inc" and they have to be in a certain simple format. Let's learn it from an example menu.inc file below:

Title: Catwash Pages
Shampoos %> shampoos.ptml
Soaps %> soaps.ptml
Protective Handwear %> clothing.ptml#handwear
Treating wounds %> lascerations.ptml
Other Sites %> http://www.catwashpages.com/links.html

The first line must be the Title: line

Every directory of the website has a title. Make the title very short, just one or two words, as it has to fit in a very small space on the side of the page and along the top. The line should start with the words "Title:" followed by your title. Do not omit the Title: part.

The following lines are links

Every line that follows is in the following format: a menu item title, followed by a special symbol "%>" followed by the address to which that menu item links. Most commonly these will be other files in the directory, but any kind of link is permitted, including relative, fixed, and external links. Every link should start on the new line. Blank lines will be ignored.

That's really all there is to it. Don't forget about menu.inc files if you create any directories with .ptml pages! They will help your visitors navigate around the site easily.

Advanced features

Snaplook-enabled .ptml pages are really just php pages -- if you want to use php on your website, you can just proceed as if you were writing a common .php page. The only thing to watch out for is that "output buffering" is turned on for snaplook, so nothing will go out to the client's browser until your script is done executing. Also make sure you don't forget to set the full html header and footer, including the <title> tag, since snaplook will use it to figure out what to put in the menus.