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

Chapter 4. Editing Code > 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.

✓ Tip

  • For information on using the Tag Hints menu with the QT Editor or when hand coding, see About the Hints Menus, later in this chapter.

The QT editor (Figure 4.28) 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.28. 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.29).

    Figure 4.29. Click on the Quick Tag Editor button on the Property inspector to pop open the editor. You may not see this button if your insertion point is in Code view rather than Design view—make your selection in Design view.


    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

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

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

Drag it wherever you like (Figure 4.31).

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

Working in Wrap Tag mode

Wrap Tag mode (Figure 4.32) allows you to select an object or some text and then insert opening and closing tags around it (Figure 4.33). For instance, if you select some unformatted text and then wrap the <h3> tag in the QT editor, the <h3> tag will open at the beginning of your selection and close at the end of it, and your text will be in Heading 3 format.

Figure 4.32. The Quick Tag editor in Wrap Tag mode. Use this mode to insert a tag around some text or another object. Here, I'm going to wrap the <h3> tag around my selection.

Figure 4.33. Now the <h3> tag is wrapped around the text I selected in Figure 4.31.

✓ Tips

  • You need type only the opening tag, not the closing. Dreamweaver will add the closing tag for you.

  • After you type your tag, press Enter (Return) to wrap it around your selection.

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

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

Working in Insert HTML mode

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

Figure 4.34. 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. Be careful if you paste code into this editor—the default <> that the editor starts out with can accidentally get wrapped around your code. And finally, you don't need to close all your tags—Dream weaver will close the ones that need closing. I did close the TD and TR.

✓ Tips

  • Insert HTML mode is the default Quick Tag editor mode if you haven't selected a specific object or tag. Your code will be popped in at the insertion point (Figure 4.35).

    Figure 4.35. The code I wrote in Figure 4.34 is on my page. Note in the Code view area that I have autoindent turned on and that Dreamweaver nicely closed my tags and indented my table code.

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

  • If you insert invalid HTML, Dreamweaver will do one of the following: close your tags; mark improperly wrapped tags; change incorrect closing tags into the correct tag; omit extra closing tags; or display a dialog box letting you know you inserted invalid code (Figure 4.36). Dreamweaver will not change non-standard tags; you can insert <lunch> with impunity if you're using it for XML.

    Figure 4.36. If you write invalid code in the Tag Editor and Dreamweaver can't figure out how to fix it, it will be highlighted in yellow in the Document window, and the Property inspector will display information about the selected error.

Working in Edit Tag mode

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

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

✓ Tips

  • The best way to select an entire tag, or one of several tags that wrap around the same text, is by clicking on it in the Tag selector in the lower-left corner of the Document window (Figure 4.38). You can also right-click (Ctrl+click) on a tag there for more options (Figure 4.39)—if you select Edit Tag from this menu while you're in Design view, the Quick Tag editor will open in Edit Tag mode, as in Figure 4.37.

    Figure 4.38. Click on a tag in the Tag selector to highlight the entire tag and its contents. This is the best way to select a tag when several tags are wrapped around the same text.

    Figure 4.39. Right-click (Ctrl+click) on a tag in the Tag selector to pop up a menu of editing options.

  • 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 (Figures 4.40 and 4.41).

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

    Figure 4.41. When I open the QT editor, it will appear in Wrap Tag mode, because I didn't select an entire tag. When I switch to Edit Tag mode (pictured) by pressing Ctrl+T (Command+T), the editor will select the entire tag's worth of text.

  • 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 to the next attribute or values. (Changes are also applied when you press Tab.) If you pause while editing, the tag hints menu will appear.

✓ More QT Editor Tips

  • When you open the QT Editor, a tag hints menu will appear. You can use this menu or ignore it. Additionally, the menu will reappear if you pause while typing or selecting an attribute (Figure 4.42) or if you type a space after a tag name or attribute. See About the Hints Menu, later in this chapter.

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

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

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