Workspace

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

The Workspace contains three tabs. To switch between the tabs, click on the tab at the bottom or select View > Design View, Preview View or Source View on the menu.

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 when clicking on the opening <table> element, this bar marks 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. The drop-down lists 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. The drop-down lists 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. Not available in Print contexts.

Preview Tab

The preview tab shows the template as it will output with the current record (see Loading data), with the personalized content (see Personalizing content). Although it is possible to edit the template in Preview mode to a certain extent, it is recommended to do all editing in the Design mode.

Live Tab (HTML context only)

The Live 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).

  
  • Last Topic Update: 24/01/2017 09:32
  • Last Published: 7/6/2017 : 9:49 AM