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 or, when a Web is open, four 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.
For an overview of keyboard shortcuts, see Keyboard shortcuts.
Design tab
The Design tab shows 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 and buttons:
- : 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.
When an element is selected
in the breadcrumbs and the Backspace or Delete key is pressed, that element
is deleted.
If the deleted element was targeted by a script, you will be asked if you want to delete the script as well.
- : 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 (age 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.
- Buttons
- 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.
- Refresh: Reloads the view, including static external images and remote stylesheets, and re-runs the scripts (the latter in Preview Mode only).
- 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.
When a template is open, the workspace also shows a ruler and guides (see Guides).
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.
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. For shortcuts that can be used in this editor, see Text editors: Source tab, JavaScript, CSS, Script Editor and Emmet.
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.
Pretty print options
In the Source view the HTML source of the template is "pretty printed" (that is: formatted, adding new lines and indentation) to make it more readable.
When this is undesirable, the Source view formatting can be turned off for (parts of) a section by adding <!-- format:off --> in Source view, at the beginning of the text or in between two HTML elements. From that point on, pretty printing will be disabled for that section. Use <!-- format:smart --> or <!-- format:auto --> to turn the formatting back on.
These are all format options:
<!-- format:off --> turns the formatting off.<!-- format:smart --> or <!-- format:auto --> turns the formatting back on.<!-- format:collapse --> forces the following HTML elements to be collapsed.<!-- format:expand --> forces the following HTML elements to be expanded.
Example
This example shows how to turn pretty printing off for one specific HTML element: a Div element. <p>In a "pretty printed" paragraph
<br>text is indented automatically on the Source tab.
</p>
<!-- format:off --><div anchor="page_media_0" style="font-family: Lucida Console,monospace; line-height: 1.2; white-space: pre-wrap; position: absolute; overflow: hidden; -moz-box-sizing: border-box; width: 675px; height: 68px; top: 209.967px; left: 65.4px;" offset-x="103.19999694824219" offset-y="247.76666259765625">@Header1@ </div><!-- format:auto-->
Live tab
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).
|