seaBreezeThe Preview Area

The preview shows the current state of your web page. It allows you to select and move elements in the layout.

Moving the mouse pointer over the page elements will draw a red border with the label of the element (see 'Text9' in the example below). When pressing the mouse button, the highlighted element gets selected in both the tree and the preview area. A selected element is surrounded by a red-dotted rectangle (see element 'Text1' in the example picture).

The contents of a simple text element in the preview area can be edited in-place. To start the in-place editor, double-click into the target text area. The text will look like the example below, the 'ChapterText' element is selected in the tree, while the preview area shows the in-place editor. The blue color in the background of the text indicates that the whole contents of the field is selected, and that a single character input from the keyboard will replace the contents. To end using the in-place editor, press the CR key.

Use the cursor keys to move around in the text of the in-place editor, this is the only way to move the cursor, which is a tiny blue vertical line. Look at the example screen shot to the right: You find the cursor in the word 'shows' between character 'o' and character 'w'.
You may find it usefull to be able to select multiple characters by holding down the shift-key and use the cursor keys to expand the selection.
To accept any work and leave the in-place editor, press the CR key. Do not use the mouse while the in-place editor is active!