| Quick Tags give you the ability to rapidly insert HTML tags. This is especially important when you are writing code by hand because it will help to speed up the process. There are three ways to edit HTML with the Quick Tag Editor. You can insert new HTML code, edit an existing tag, or wrap a new tag around the current selection. 1. | Open the asana.html page in the Lesson_16_Code/Training directory. Place the insertion point between the image of the class under the "In-Depth Asana Training and Practice" header and the text beginning with "We will" in the Design view. Click the Quick Tag Editor button near the upper-right corner of the Property inspector.
 The Quick Tag Editor opens in the Insert HTML mode because the insertion point was in the Document window, and there was nothing selected. For the Quick Tag Editor to appear in the Insert HTML mode, the cursor must be in the Design view of the Document window as if you were going to insert an object.
The Insert HTML Quick Tag Editor opens as a box with a text field and a hints menu that you can scroll through to choose a tag. You will need to pause and wait for the Code Hints menu to appear.
| | | 2. | Scroll through the list of tags in the hints menu; find and double-click br. Press Return (Macintosh) or Enter (Windows).
 The selection br is the break tag, and it will appear between the < and > characters in the Quick Tag text field when you double-click it. After pressing Return (Macintosh) or Enter (Windows), the break will be inserted into the Document window at the place where the insertion point was located.
The text is now on a line directly below the image.
Note You can also perform more extensive code edits by typing directly into the text field; as you do so, Dreamweaver will automatically make corrections to the code for you. | 3. | In the Design view of the Document window, select the image of the class and click the Quick Tag Editor button on the Property inspector.
The Quick Tag Editor opens in Edit Tag mode because you had an object in the document selected. Edit Tag mode allows you to edit the values of the tag attributes. The path (also known as the source) to the image is initially selected in the Quick Tag text field.
| 4. | Press the Tab key to move from the path of the image to the next attribute. Keep pressing the Tab key until you reach the value of the Alt text, which is Training Class. Change the Alt text to read Asana Training Class. Press Return (Macintosh) or Enter (Windows) to apply the changes.
Each time you press Tab, the Quick Tag Editor applies the change you just made (if any) and jumps you to the next attribute.
Tip You can move the Quick Tag Editor to a different position by clicking and dragging the left corner.  The alt text of the image has changed.
| | | 5. | With the image of the training class still selected, click the Quick Tag Editor button on the Property inspector. Press Cmd+T (Macintosh) or Ctrl+T (Windows) to cycle through the three different Quick Tag options until you get the Wrap Tag mode.
Each time you Press Cmd+T (Macintosh) or Ctrl+T (Windows), the Quick Tag Editor switches to a different mode.
 Note Depending on what you have selected in the document, the Quick Tag Editor might open in either Edit Tag mode or in Wrap Tag mode. For example, if you select text, the Quick Tag Editor will open in Wrap Tag mode. If you want a different mode, use Cmd+T (Macintosh) or Ctrl+T (Windows) to select a different option. | 6. | Choose div from the Quick Tag Editor menu. Press the Spacebar and type a. Wait for the Code Hints menu to appear and then double-click align. When the Code Hints menu appears after align="" is inserted into the text field, double-click center. Press Return (Macintosh) or Enter (Windows) to apply the changes to the code.
|
 The training class image is now centered. The tags <div align="center"> and </div> have been placed around the image. Note If you were to select a tag in the Tag selector and press Delete (Macintosh) or Backspace (Windows), the tag and everything it contains would be deleted. However, if you want to remove just the tag while leaving the contents intact, you can right-click or Ctrl-click (Macintosh single-button mice) and choose Remove Tag.
|
