Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

10.3 Quick Tag Editor

Code view is great when you really need (or want) to dig into the trenches and finetune
your HTML. But if a text editor is all you wanted, you wouldn't have bought
Dreamweaver in the first place. Most of the time, you'll be working in Dreamweaver's
Design view enjoying the pleasures of its visual authoring environment.

Occasionally, however, you'll want to dip momentarily into the HTML pond, especially
when you need to use some HTML that's difficult to add. You might wish you could
type out a quick HTML tag on the spot, right there in Design view, without having
to make the mental and visual shift required for a switch into Code view.

That's what the Quick Tag Editor is all about (see Figure 10-9).

To access the Quick Tag Editor, press Ctrl+T (-T)or, if you're feeling especially mouse-driven, click the Quick Tag editor button in the Property inspector (see Figure 10-10). Depending on what you've selected in the document window, the Quick Tag
Editor opens in one of the following three modes (see Figure 10-10):

Insert new tag. Inserts a new tag in the page. You get this mode if nothing is currently
selected in your document window.

Edit tag. Lets you edit the tag for whatever is selected in the document window (a
graphic, for example), and all its properties.

Wrap tag. If you've selected a swath of text or other objects (two images, for
example) the editor opens in this mode, which makes it easy to wrap a new tag
around the current selection.

You can cycle through the modes by repeatedly pressing Ctrl+T (-T).

10.3.1 Using the Quick Tag Editor

You can type tag names, properties, and property values directly into the Quick Tag
Editor window. If you're editing a selected tag, you can change any of the properties
listed and even add new ones. When you're done, press Enter. The Quick Tag Editor
closes and the changes take effect.

Top: When you align an
image with the right side
of a page, surrounding
material wraps around
itin this case, everything
else (second headline,
second blurb, second
graphic). Bottom: It's
the Quick Tag Editor to
the rescue; now you can
quickly insert the <br
clear="all"> tag to the end
of first blurb. This combination
of tag and property
means, "Turn off wrapping
at this point." (CSS has
a similar property called
"clear"; see Section 6.7.4.)


Left: You can open the Quick
Tag Editor by clicking the
corresponding button at the
upper-right corner of the
Property inspector (circled).
Right: The three modes of
the Quick Tag Editor let you
insert new tags, edit old tags,
or wrap a new tag around a
selection. The Quick Tag Editor
is mobile: Drag the window by
its handle (the mode name)
anywhere on the screenideal
when you want to see the part
of the page you're modifying.

To make all of this even easier, the Quick Tag Editor sports a helpful listcalled tag hintsof HTML tags and properties, for your selection pleasure. It's much like Code view's Code Hints feature (in fact the Code Hints category in the Preferences window
also controls Tag Hints.) When you insert a tag, for example, a menu of available tags
appears (top right in Figure 10-10). Use the up and down arrow keys or the scroll bar
to move through the list. And when you type the first few letters of a tag or property,
Dreamweaver jumps to the nearest match in the list.

To choose the highlighted name, press Enter or Return. Dreamweaver adds that tag
or property name to the Quick Tag Editor window. If you've selected a tag property,
Dreamweaver adds the proper punctuation (href=" ", for example). The insertion point
appears between the quotation marks, waiting for you to type the property's value.

When editing an existing tag in the Quick Tag Editor, press Tab to select the next property or property value. You can then type a new property or value. Shift-Tab selects the previous property or value.