Editing Faster with the Quick Tag Tools | Faster Smarter Microsoft Office FrontPage 2003

In Chapter 1, Introducing Microsoft Office FrontPage 2003, you got an overview of some of FrontPage s Quick Tag Tools (the Quick Tag Selector and Quick Tag Editor) that let you use Design View and Code View together to edit Web page content. Now you ll put these tools together in a way that streamlines your Web page code editing, while ensuring the accuracy that keeps everything on your page working right.

Speedier Editing with the Quick Tag Selector

First, display the Quick Tag Selector by choosing View, Quick Tag Selector. In Design View, position the cursor at the location on the current Web page where you want to edit text. Suppose you have a block of text that is flush-left, and you want it to be centered. The text, as shown in Figure 10-10, is formatted with the command:

When you pass your mouse pointer over this tag in the Quick Tag Selector, a drop-down arrow appears. Click this arrow and choose Tag Properties from the Quick Tag Editor list. When the Paragraph dialog box appears, choose Center from the Alignment drop-down list. The tag is automatically changed to the following:

That s only one way to edit the tag by starting with the Quick Tag Selector. You can also use the Quick Tag Editor, as described in the next section.

Aha!

Match the Content to the Code
When you pass your mouse pointer over the tags in the Quick Tag Selector, corresponding parts of the Web page displayed beneath it are highlighted. For example, if you re viewing a table and you pass your mouse over the <td> tag in the Quick Tag Selector, the corresponding table cell is highlighted, so you can be sure which part of the Web page you re editing.

Edit Code in Design View with the Quick Tag Editor

The Quick Tag Editor adds a new level of interactivity between the Design View for a Web page and its underlying code. Using the Quick Tag editor, you can insert or edit the tags in your document directly in the Design pane. You can select the text and edit the tags that surround it, wrap it in a new tag, insert new HTML, or remove a tag. As you learned in the preceding section, you can quickly edit tags by clicking the down arrow next to a tag displayed in the Quick Tag Selector, then choosing an option from the shortcut menu, as shown in Figure 10-11.

Figure 10-11: The Quick Tag Selector enables you to edit tags directly while still in Design View.

By selecting Edit Tag from the Quick Tag Selector s shortcut menu (as shown in Figure 10-11), you open the Quick Tag Editor, which enables you to edit tags quickly without having to open Code View. The drop-down menu on the left side of the Quick Tag Editor lets you perform three functions:

Edit Tag The tag appears in the box in the center of the Quick Tag Editor, where you can change it manually.
Wrap Tag Enter the tag within which you want to wrap the selected tag.
Insert New HTML Enter new HTML in the Quick Tag Editor box, without ever having to switch to Code or Split View.

When you re done making changes, click the green checkmark near the right-hand edge of the Quick Tag Editor (see Figure 10-12), to accept the changes and close the Quick Tag Editor.

Figure 10-12: The Quick Tag Editor lets you add or edit HTML, or wrap an HTML tag within another one.