General Principles

Icons and names

The TYPO3 user interface employs many icons. Often an icon is associated with a name, for example:

In general:

• Clicking on the icon produces a menu;
• Clicking on the name activates or opens the object.

Frontend and Backend

TYPO3 is divided into two areas – the frontend and the backend.

• The frontend is the part which displays the website to the world. Generally you can assume that the frontend will get on happily with its work without your intervention;
• You use the backend whenever you create or edit pages or content. You need a TYPO3 account in order to access the backend.

Pages, Page Content and Templates

When the frontend displays a page it constructs it from

• A template provided by the site administrator;
• Content elements provided by editors such as you.

The template provides a standard "look" to the page. It sets the general layout, provides headers, menus and so on. The templates that are used for the CS website are described below.

A page must include one or more content element otherwise it will be empty. Content elements generally include text, images, tables etc.

CS Templates

The page illustrated to the right uses the "Two Column" template. With this template there are two areas of editable content which are shown shaded in blue:

• The left-hand column area is mainly for menus and links to other pages. (Note that, above it, there is an automatically generated menu showing sub-pages.)
• The main area is for content such as you are reading now.

The other features on the page - the banner and menus at the top, the search boxes, the "bread-crumb" trail, the small print at the bottom and the "automatic" part of the left-hand menu are all added by TYPO3 when the page is viewed.

Four CS templates are available;

• A "Single Column" template which eliminates the left-hand menus;
• A "Two Column" template (as illustrated on the right);
• A "Two Column plus Image" template which adds a large image above the main content to the "Two Column" template;
• A "Two Column plus Navigation" template which adds "Prev" and "Next" links to the page. (This is the one used by the page you are reading).

The templates use different colours in the 8 "areas" of the CS website. You need do nothing to choose the colour of your page. If the page is in the "Students" area it will use the "Students" colours and so on.