Section 56. Using the Markup Tree Bar

#56. Using the Markup Tree Bar

Although GoLive offers an assortment of tools and palettes for selecting elements on a page and applying styles to them, none quite match the simple elegance and convenience of the Markup Tree bar. It's one of those tools that once you start using it, you'll wonder how you ever got along without it.

Removing a Tag While Keeping Its Contents

At times you might want to strip out a tag but keep its contents intact, say for example, to replace those outmoded font tags with some clean CSS. Here again, the Markup Tree bar comes to the rescue. Control-click (Mac) or right-click (Windows) a tag in the bar and choose Replace Element by Its Content. The tag disappears, but its content lives on.

The Markup Tree bar is at the bottom of a document window in the Layout, Frame, and Outline editors. As you select an object within a page, notice how the Markup Tree displays the path of HTML tags, starting from the document's root tag to the element you have selected. This is great way to get a sense of where the element lives within the document hierarchy. But that's not all. You can click any of the tags along the path to quickly and precisely select the start and end tags along with their contents. You can also click and hold a tag in the bar to display a menu of the next lower level elements in the HTML hierarchy to select from (Figure 56a).

Figure 56a. Click and hold a tag in the Markup Tree bar to display a menu of the next level of elements you can quickly select. Once selected, you can be confident that you're affecting the entire element when performing actions such as moving or deleting it.

You can use the Markup Tree bar for more than just selecting elements. If you Control-click (Mac) or right-click (Windows) a tag within the bar, a contextual menu pops up with a complete set of useful commands. From this menu, you can apply a CSS class or ID to a tag in one fell swoop (Figure 56b). This menu also offers handy commands for duplicating, deleting, and moving elements.

Figure 56b. You can quickly apply a style to an element via the Markup Tree bar's contextual menu.