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:
- : 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 and the Backspace key is pressed, that element
is deleted.
- : Displays
the current . The drop-down lists available . Clicking
on a context switches to that context.
- Selector: Displays
the currently active . 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.
- Selector (Master
Page editor only): Displays a list of Media resources. Clicking on
a 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.
|