Structure Editing of HTML

  

Figure 13: WWWeasel, displaying HTML Markup Structure View. Note the selected GIF thumbnail, which corresponds to the selected ``in line'' image icon in the GIF Media Browser Panel.

HTML is a structured markup language, directly represented as a hierarchy of markups and the media objects to which the markups apply. In figure 13 WWWeasel's structure editor presents HTML in a hierarchical view, in a manner similar to PC/Mac outline editors such as ThinkTank, Powerpoint, etc. This outline view is especially useful for visualizing the overall ``macroscopic'' structure of a document. Using direct manipulation techniques, portions of the document hierarchy can easily be selected, moved, edited or deleted. By clarifying the distinction between markup and media content, the outline view also simplifies large-scale changes to the presentation of a document. This clarification of markup versus media also makes hypermedia links, and media usage within a document more perspicuous, and easier to edit, browse, and validate in conjunction with the Media Browser.

  

Figure 14: WWWeasel, displaying a mixed Structure/WYSIWYG View. Note the selected list item element, which corresponds to the selected icon in the ``List Markup'' panel of the Media Browser.

Whereas the structure view simplifies viewing and editing the document at the ``macroscopic'' level, it is not necessarily the easiest way to write or edit text at the paragraph or ``microscopic'' level. To simplify the generation and editing of the ``microscopic'' view of a document, figure 14 shows the same document as in figure 13 using WWWeasel's unique mixed Structure/WYSIWYG view. This allows any portion of the document structure to be collapsed into a WYSIWYG view (see the next section below) for simplified editing. This view is particularly useful for editing text within paragraphs and lists because the text is represented as it would appear to the viewer of the hypertext document. This is a ``best-of-both worlds'' approach, providing the advantages of outline editing and WYSIWYG editing simultaneously. The combination of structure/WYSIWYG editing is similar to ``two-view'' editing in Lilac.