1.4

Table Of Contents

Source Tab

The source tab displays the HTML source for the template, including HTML Headers, CSS and

HTML code. The source is displayed in a color-coded text editor, to quickly visualize the code.

In this tab changes and adjustments can be made to the code.

To the left of the Source tab, a bar helps visually identify the start and stop of an element. For

example if clicking on the opening <table> element, this bar highlights the whole <table> and

all its contents, until the ending </table> tag.

The top of the Design tab contains an area with the following options:

Breadcrumbs: Displays the element type where the cursor is located and any of its

parent elements. Elements with classes or IDs show these details next to them, for

instance div #contents > ol.salesitems > li. Click on an element in the

Breadcrumbs to select it. If an element is selected in the breadcrumbs and the Backspace

key is pressed, that element is deleted.

Context Selector: Displays the current context and drops down to list available contexts.

Clicking on a context switches to that context.

Section Selector: Displays the currently active section. Clicking on another section

switches to that section.

Design Tab

The design tab show the template including all styles, text and images as well as the

placeholders used for variable data. In this tab, the template's scripts are not executed and only

placeholders are shown.