### <Live Markup> WYSIWYG HTML Editor -- Test Document 1...

Drag and Drop of Files is supported in this version.

> To see how elements work -- click HERE. The raised 3D element you see, is the one you can edit. We suggest to often save the document, then RELOAD it from the FILE|RELOAD especially if you run in to rendering problems of any kind. Please report *bugs* to: support@mediatec.com

# Headline type size: H1

(1) click on the HEADER button in the toolbar to insert a header element, then start typing. The default size is H1. There are two ways to change any Headline size : First -- click anywhere within the headline, to bring the element in FOCUS (3D raised look), then click with your RIGHT mouse button within the headline -- from the pop-up menu select the size: H1 - H6, or from the same menu -- CENTER the headline, delete the whole element, or change the headline to plain text.

## Headline type size: H2

The second way to change the Headline size is to: click on the headline to bring it in FOCUS, then key ALT|ENTER together -- this opens the Property Sheet for selecting the different sizes or to CENTER the headline with a single click.

### Headline type size: H3

All Headlines have white space above and below other elements. If you want to make a headline from a regular text element: click with your RIGHT mouse button on the element, then select HEADER. Click again to select a different size.

#### Headline type size: H4

##### Headline type size: H5

###### Headline type size: H6

<&This is a RAW text element for all unrecognized tags or body comments. Select the Raw text element input from the toolbar. All Raw elements will always be displayed in a white background. &>

Text Input, elements-- (1) click on the TEXTBLOCK button in the toolbar (color cube) to insert a text element -- for text input.. All text elements will flow together, whenever you save the document and reload it. Unless you place a the text element in a PARAGRAPH.

Text input element -- PARAGRAPH. You can add to any existing or new text element the PARAGRAPH attribute. Click directly on the element -- whenever the element is in FOCUS click with your RIGHT mouse button on the element, from the pop-up menu -- select PARAGRAPH. The element moves slightly down and the paragraph attribute is inserted.

To break
a line of text -- press the ENTER key. A visible ARROW is inserted only to show wherever the <BR> attribute will be inserted. Double click directly on the arrow -- in the Property Sheet you may select further Netscape attributes.

Text may be changed, by selecting it, then click with your RIGHT mouse button within the highlighted text, from the pop-up menu make your choice. Go ahead, do it now. Make some of the text bold, italic or `typwriter`.If you don't like your choice, highlight the text again -- click with your right mouse button anywhere within the highlighted text, then select PLAIN.

Highlighting Text -- hold the SHIFT key down and use the right, left down arrow keys to highlight text. Or, double click on any word -- it highlights. Or, key INSERT the cursor fattens for deleting single letters. Key INSERT again for a normal cursor. Highlight text, then type over it, or press the Delete or Backspace key.

Inserting hyperlinks. Highlight the text you want to make a hyperlink, then click with your right mouse button in the highlighted text -- from the pop-up menu select create hyperlink -- the text changes to the link color. Double click on the just created link, in the hyperlink Property Sheet add all the needed information -- print the Help file.

##### Double click (left) directly on the Horizontal rule, The Property Sheet opens to change attributes. To DELETE the horizontal rule -- click with your RIGHT mouse button on it once -- then select DELETE THIS ELEMENT.

Select the OPTIONS pulldown menu and check out all the different features in it. In the OPTIONS|SET PREFERENCES menu, user preferences should be set. We have a default value in there which may not be right for you.

Any time you want to see the actual HTML tags: SAVE the file first, then select OPTIONS|TEXT EDITOR, (the default is Notepad) it opens with the document inserted. You may change, delete or add tags or text -- save it in Notepad. Then in <Live Markup> go to FILE|RELOAD -- the change is inserted and visible in the document.

## List types

Next we will look over a few list types. This is HOW to make lists with <Live Markup>PRO, the easy way.

### Unordered lists -- learning Lists

- element one. (1) Click on the LIST button in the toolbar -- inserts first list element, default unordered list. (2) Click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
- element two. (1) Click on list ITEM button -- inserts second element. (2) Click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
- element three. (1) Same as in element two...Double click directly on the large black dot (list item) on the left, to open the "List Item" Property Sheet. Clicking only once shows the whole element you are working in. DO IT. If you click left (not on) of the black dot the whole list element is shown.

  second text paragraph in element three. (1) Click on the TEXTBLOCK button inserting a text element, then click with your right mouse button on this element, then select PARAGRAPH from the pop-up menu, and type.... To remove the paragraph, select PLAIN TEXT from the popup menu.

- element four. (1) Same as in element two...
  The ARROW on the above line indicates a line break <BR> created by pressing the "enter" key. Double click directly on the arrow to open the "End of Line" Property Sheet, for different attribute input.
- element five. (1) Same as in element two, three and four... However, we added empty space between element four and element five. Here is how: After the text input in element four, click on the TEXTBLOCK button inserting a text element (do not enter any text) -- click with your right mouse button on the "empty element" and select PARAGRAPH -- then continue with your list -- (1) Same as in element two...

To EXIT (close) a list. Select the whole list by clicking left of any of the solid black dots (list item), then click on the TEXTBLOCK button. The list is closed and a new text element is inserted below the list. Remember: if you click all the way to the left, you select the whole document.

### Ordered lists

1. element one. (1) Click on the LIST button in the toolbar -- inserts first list element, default is unordered list. (2) Double click directly on the solid black dot. In the Property Sheet under LIST DATA change to ORDERED, then select any of the ordered markers. Remember: most browsers display only numbers, like 1, 2, 3... regardless of what you select. (3) Now Click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
2. element two (1) Click on list ITEM button -- inserts second element. (2) Click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
3. element three Same input as element two..
4. element four etc...

### Glossaries or Definition list...

> (1) Click on the LIST button in the toolbar -- inserts first list element, default is unordered list. (2) Double click directly on the solid black dot. In the Property Sheet under LIST DATA change to DEFINITION, this removes the black dot and changes the list element. (3) Now Click on the TEXTBLOCK button -- inserts text element with blinking cursor for text input.

Term one -- double click about 1/4 inch (6 mm) left of the *T* on this line -- to open the Property Sheet. Under "Definition List Options" you see TERM and DEFINITION selections.
  This is the definition of term one. (1) Click on list ITEM button -- inserts second element. (2) key ALT and ENTER together, this opens the Property Sheet -- select DEFINITION. (3) click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
Term two -- (1) Click on list ITEM button -- inserts second element. (2) key ALT and ENTER together, this opens the Property Sheet -- select TERM. (3) click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
  This is the definition of term two.
Term three
  This is the definition of term three. This is quite a bit longer than the definition of term one, and in fact even longer than term two.
  This is a second paragraph within the definition of term three.

### Now lets make a Nested List

- (1) Click on the LIST button in the toolbar -- inserts first list element, default unordered list. (2) Click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
- This is the second element. (1) Click on list ITEM button -- inserts second element. (2) Click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
  - Second level, first element of a nested list. (1) Click on the LIST button in the toolbar. (2) Click on TEXTBLOCK button -- inserts text element with blinking cursor for text input.
  - Second element. (1) Click on list ITEM button -- (2) Click on TEXTBLOCK...
    - Third level, first element. (1) Click on the LIST button -- (2) Click on TEXTBLOCK button..
    - Second element. (1) Click on list ITEM button -- (2) Click on TEXTBLOCK...etc.
      1. Fourth level. To change this to a ordered list, double click directly on the list item (bullet etc.), select LIST DATA and click on "ordered". From the "ordered markers" select your choice...
      2. This is the second element.
      3. Third element.
    - To go back to the third level -- click directly on the "Second element" marker <LI> (black square above), then click on (1) Click on list ITEM button -- (2) Click on TEXTBLOCK...etc.

To exit the list -- click left of the very first list element, then select TEXTBLOCK from the toolbar.

### Form building

(1) click on the FORM button in the toolbar, or INSERT|FORM from the pulldown menu.
(2) click on the TEXTBLOCK button in the toolbar. Now type text or leave blank...
(3) select INSERT|FORM WIDGET|INPUT from the pulldown menu.

Name Field....
Double click directly inside the white INPUT field, to open the Property Sheet for your attribute selection.

Forms may also be placed in a definition list for a better look.

Form in a <PRE> element....

    Name....
     Address
        City State Zip
       Other
      Select
    Checkbox
       Radio
    Password
      Hidden

this is new

Double click inside any INPUT box to change all the Property Sheet attributes. Read the HELP file, or print it.

Take a look of how neet the tags are displayed now. Select OPTIONS|TEXT EDITOR. Or, change the tags in Notepad, save -- then FILE|RELOAD the changed tags in <Live Markup>.

To ckeck how everything looks in Netscape. Select OPTIONS|BROWSER. The Search FIND and REPLACE works also. Clicking on the green return arrow -- reverses the last operation.

.DRAG and DROP works for files in this version.You can drop files directly on the minimized icon in Windows 3.1 and Windows NT. In Windows'95, the file has to be dragged in the open <Live Markup> window --