Workspace

The Workspace pane is where everything comes together. It is the contents of the page, the WYSIWYG editor that shows how the output will look like.

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.

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.
  • Media Selector (Master Page editor only): Displays a list of Media resources. Clicking on a media will display its Virtual Stationery background while in Preview mode.
  • Zoom Level: Displays the current zoom level and drops-down to change the level.
  • Zoom in: Zooms in by 25%
  • Zoom out: Zooms out by 25%
  • Actual Size: Zooms to 100%.
  • Fit Width: Adjusts zoom to fit the exact width of the template to the available workspace.
  • Responsive Design View: Use the drop-down to select a specific screen width, to test the design for different devices. Easier than resizing the window, right? Not available in Print contexts.

Preview Tab

The preview tab shows the template as it will output with the current record, including all script executions, overflows, variable images, etc. It is still possible to edit the template while in Preview mode - however, editing around placeholders and within dynamic tables may be a little harder. It is recommended to do editing in the Design mode.

Web Tab (HTML context only)

The Web tab shows the result of the template as rendered by the Gecko rendering engine. It is a good indication of how an HTML template would display in a visitor's browser, especially if they are using FireFox (which uses the Gecko engine).

Table of Contents

Index

Glossary

-Search-

Back