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