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.
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.
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. |