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

Lesson 12. Editing the Code > Editing Code with Quick Tags

Editing Code with Quick Tags

Quick Tags give you the ability to rapidly insert HTML tags. This is especially important when you are writing code by hand, as 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.
In the lighthouse_history.html document, place the insertion point between the image of the lighthouse and the text beginning with “Point Reyes” in the Design View. Click the Quick Tag Editor icon on 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. In order 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 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 tag 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 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 lighthouse and click the Quick Tag Editor icon on the Property inspector.

The Quick Tag Editor opens in the Edit Tag mode because you had an object in the document selected. The path 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 numeric width attribute. Change the width to 143. Keep pressing Tab until the number 3, which defines the border, is highlighted. Change the border of the image from 3 to 1. Press Return (Macintosh) or Enter (Windows).

The border of the image has now changed from 3 pixels to 1 pixel. Each time you press Tab, the Quick Tag Editor applies the change you just made (if any) and jumps you to the next attribute.

5.
Select the image of the lighthouse again and click the Quick Tag Editor icon on the Property inspector. Press Command+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 Command+T (Macintosh) or Ctrl+T (Windows) the Quick Tag Editor switches to a different mode.

TIP

Depending on what you have selected in the document, the Quick Tag Editor may 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 Command+T (Macintosh) or Ctrl+T (Windows) to select a different option.

6.
Choose center from the Quick Tag Editor menu. Press Return (Macintosh) or Enter (Windows).

The lighthouse image is now centered. The tags <center> and </center> have been placed around the image.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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