TIP 63: Visual Tag Editor


If you've ever wanted to edit an HTML element but didn't want to switch out of Layout mode or give up part of the window to the split view, then the Visual Tag Editor is the solution for you. Using the Visual Tag Editor, you can edit a piece of code or insert a new tag.

To open the Visual Tag Editor, choose Special > Visual Tag Editor from the menu. If you select text in the page and invoke the Visual Tag Editor, the Wrap option will be enabled, meaning that the tag you add will be wrapped around your selection. If you select a tag in the Markup Tree of the document (see Tip 34) and then invoke the Visual Tag Editor, the selected tag will appear in the window, and the Edit option will be enabled so that you can edit the current tag. If you position your cursor in the Layout Editor where you'd like a new tag to be added and then invoke the Visual Tag Editor, the Insert option will be enabled.

Syntax Tool Tip

Hold down Option-Shift (Mac) or Alt-Shift (Windows) and hover your mouse pointer over any object in the Layout Editor. After you pause for a second, you'll see a helpful Tool Tip showing you the source code for the closest object under the cursor.


To add a tag or attribute, either type into the field at the top of the window or double-click in the list on the left. Once a tag has been added, press the spacebar to continue. Notice that as soon as you type a space character, appropriate attributes for the tag you are editing appear in the list. You can also use the built-in Markup Tree to navigate through the code and find a particular tag to edit (Figure 63).

Figure 63. The Visual Tag Editor.


Finding Attributes

If the tag or attribute you want is not visible in the list, scroll down to find itor press its first letter on your keyboard, and GoLive will jump to the entries that begin with that letter. Descriptive information is shown in the Info field when a tag or attribute is selected in the list.


There are many ways that the Visual Tag Editor can come in handy, but here's an example that's pretty basic: Open the Visual Tag Editor, use its Markup Tree to select a <div> tag, and add an ID.



    Adobe GoLive CS2 Tips and Tricks The 250 Best
    Adobe GoLive CS2 Tips and Tricks The 250 Best
    ISBN: B008CMGJS0
    EAN: N/A
    Year: 2005
    Pages: 301

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net