TIP 34: Navigating the Markup Tree

A great feature that was introduced in GoLive 6 is the Markup Tree in the bottom of the document window for documents that use structured markup, such as HTML, XHTML, and PHP pages. There are many timesaving ways to use the Markup Tree, but we focus on two particular benefits: selecting child and parents elements of the current selection.

Removing Elements and Content

If you Control-click (Mac) or right-click (Windows) on an element in the Markup Tree, you'll see two very powerful options: Replace Element by Its Content and Remove Element's Content. These options come in very handy when you want to do some fancy maneuvering of the HTML syntax without actually touching the code. For example, if you have a piece of text enclosing in a <font> tag and want to remove the font tag, simply select the <font> tag in the Markup Tree and then choose Replace Element by Its Content from the contextual menu.

The Markup Tree can be used to select child elements of the currently selected object. For example, select a table in the Layout Editor and then click and hold on the table tag in the Markup Tree to select a <tr> (table row) tag (Figure 34).

Figure 34. Drill down to child elements of a selected tag using the Markup Tree.

You can also use the Markup Tree bar to select parent elements. For example, to make sure you've selected an entire text hyperlink, select the linked text in Layout mode and then click the <a>tag in the Markup Tree bar. This Markup Tree feature is also available in the Visual Tag Editor dialog box (see Tip 63).