• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Editing HTML > Using the Quick Tag Editor

Using the Quick Tag Editor

Describing how to use the Quick Tag editor is much harder than actually using it. The QT editor, as I'll call it, allows you to insert or edit HTML code one chunk at a time in the Document window, without even having to open the Code inspector or Code View.

It's true that there are instances when you may find it easier to simply type the code you want in the Code inspector. But if you're learning HTML as you go, the QT editor offers shortcuts and safeguards that virtually guarantee clean code, even if you've never written a line of HTML.

The QT editor (Figure 4.25) offers several different modes in which you can fine-tune your HTML. Which mode you work in depends on what item(s) you select (text, tag, object, and so on) before you open the editor.

Figure 4.25. The Quick Tag editor. Pretty unassuming looking, yes?


No matter what selection you make, though, you open the QT editor in one of two ways.

To open the QT editor:

  • Click on the QT editor button on the Property inspector (Figure 4.26).

    Figure 4.26. Click on the Quick Tag editor button on the Property inspector to pop open the editor.

    or

    Press Ctrl+T (Command+T).

You'll see a typing area, and the words Edit Tag, Insert HTML, or Wrap Tag. Those are the names of the edit modes.

To close the QT editor:

  • Simply press Enter (Return).

To move the QT editor:

1.
Click on its selection handle; that's the gray part of the editor (Figure 4.27).

Figure 4.27. Click on the gray selection handle to drag the editor away from the Property inspector.


2.
Drag it wherever you like (Figure 4.28).

Figure 4.28. You can drag the editor wherever you like.


Working in Wrap Tag mode

Wrap Tag mode (Figure 4.29) allows you to select an object or some text and then wrap a tag around it. For instance, if you select some unformatted text and then enter the <center> tag in the QT editor, the tag will open at the beginning of your selection and close at the end of it, and your text will be centered.

Figure 4.29. The Quick Tag editor in Wrap Tag mode. Use this mode to insert a tag around some text or another object.


Tip

In Wrap Tag mode, you can enter only one tag at a time.


Tip

The editor opens in Wrap Tag mode if you select text or an object rather than an HTML tag.


Working in Insert HTML mode

Insert HTML mode allows you to insert as much HTML as you want at the insertion point. You can insert multiple tags if you like.

Tip

Insert HTML mode is the default Quick Tag editor mode if you haven't selected a specific object or tag (Figure 4.30).

Figure 4.30. The Quick Tag editor in Insert HTML mode. Use this mode to insert more than one tag, or some code that doesn't directly modify text or an object on your page.



Tip

If you insert only an opening tag with Insert HTML mode, the closing tags will be inserted for you if they're required. You can move them afterward, if you like.


Working in Edit Tag mode

To edit an existing tag, you'll use Edit Tag mode (Figure 4.31). You can change the tag itself; or add, delete, or change its attributes.

Figure 4.31. The Quick Tag editor in Edit Tag mode. Use this mode to edit existing code.


Tip

If you select the contents of a tag, but not an entire tag, the QT editor will second-guess you and select the whole thing.


Tip

The best way to select an entire tag is by clicking on it in the tag selector in the lower-left corner of the Document window (Figure 4.32). You can also right-click (Control+click) on a tag there for more options (Figure 4.33).

Figure 4.32. Click on a tag in the tag selector to highlight the entire tag and its contents. Right-click (Control+click) on a tag in the tag selector to pop up a menu of editing options.


Figure 4.33. Right-click (Control+click) on a tag in the tag selector for more options.



To insert a tag using the QT editor:

1.
In the Document window, select the text or object to which you want to apply a tag in Wrap Tag mode (Figure 4.34).

Figure 4.34. Select the text or object you want to wrap a tag around using Wrap Tag mode, or just click in the Document window to use Insert HTML mode.


or

To work in Insert HTML mode, click where you want to insert the code.

2.
Open the Quick Tag editor by clicking on the Quick Tag editor button, or by pressing Ctrl+T (Command+T).

If the QT editor does not open in your preferred mode, press Ctrl+T (Command+T) again, until the QT editor shows the mode you desire.

3.
After a second or two, the Tag Hints menu will appear (Figure 4.35).

Figure 4.35. If you pause while typing, the Tag Hints menu will appear.


Select a tag from the menu by double-clicking it or pressing Enter (Return).

or

Type a few characters of your tag, and the menu will scroll to the closest tag alphabetically, so you can select it.

or

If you wish to type code directly, instead of choosing it from the menu, click within the brackets to dismiss the Tag Hints menu.

4.
Either way, when the tag you like appears in the brackets in the QT editor, you can do one of two things.

To insert the tag as is, press Enter (Return).

To add attributes to the tag, type a space. After the space, the Tag Hints menu will appear again (Figure 4.36).

Figure 4.36. Type a space after the tag name to add an attribute, and the Tag Hints menu, which lists the available attributes for that tag, will appear.


5.
Follow steps 3–4 for each attribute you wish to put in the tag (Figure 4.37).

Figure 4.37. You can continue to add attributes by typing a space after each one.


6.
When you're finished, press Enter (Return) to close the QT editor and apply the code to the selection. Dreamweaver will close any tags you opened (Figure 4.38).

Figure 4.38. I did not add the closing </font> tag, but Dreamweaver did it for me. Dreamweaver watches your syntax in both Wrap Tag and Insert HTML mode.


To edit a tag using the QT editor:

1.
In the Document window, select the tag you wish to edit. (Click the text or object, and then click the appropriate tag in the tag selector). If you don't select an entire tag (Figure 4.39), Dreamweaver will select the whole tag, and possibly its parent tag.

Figure 4.39. I selected just part of the text that's surrounded by a <font> tag.


2.
Open the Quick Tag editor (Figure 4.40) by clicking on the QT editor button, or by pressing Ctrl+T (Command+T).

Figure 4.40. When I open the QT editor, it will appear in Wrap Tag mode, because I didn't select an entire tag.


3.
If the QT editor does not open in Edit Tag mode, press Ctrl+T (Command+T) once or twice more (Figure 4.41).

Figure 4.41. When I switch to Edit Tag mode by pressing Ctrl+T (Command+T), the Editor will select the entire tag's worth of text.


4.
You can edit the tag itself, or any attribute of the tag. To scroll through the attributes of the tag, press Tab (Figure 4.42); to move backward, press Shift+Tab.

Figure 4.42. Press Tab to hop from one attribute to the next within the tag and the editor.


5.
With the tag name or an attribute name selected, you can type over it to change it. If you pause while typing, the Tag Hints menu will appear (Figure 4.43).

Figure 4.43. After you press Tab, your edits, if any, will be applied to the tag. If you pause while editing, the Tag Hints menu may reappear.


6.
Select a tag from the menu by double-clicking it or pressing Enter (Return).

or

If you wish to type code directly instead of choosing it from the menu, click within the brackets or press Esc to dismiss the Tag Hints menu.

7.
To add attributes to the tag, type a space. After the space, the Hints menu will appear again, listing available attributes for the tag, or available values for the attribute.

8.
When you're finished, press Enter (Return) to close the QT editor and apply the code to the selection (Figure 4.44).

Figure 4.44. Now I'm all done. In Split view, you can see that I changed two of three <font> tag attributes.


Tip

If you Tab or Shift+Tab after you've edited an attribute, your changes will be applied to the tag immediately. You can pause changes until you close the QT editor.To set this and other preferences, see Appendix D on the Web site for this book.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint