Add an image with code hints

To add code to the page manually, simply click in Code view and start typing. You can use the code hints feature to speed up your work.

In this lesson, you'll use code hints to add an image to the Trio Motors page.

To write code with the help of code hints:

1. Open index.html in Code view, if it's not already open.
2. Find the code for the heading that contains the text Previews & More. Drag to select the non-breaking space entity ( ) in the code in the blank paragraph that follows that text. If there is no blank paragraph following that heading text, then after the closing h2 tag, type the following code:

   <p></p>
   

   Then place the insertion point between the opening <p> tag and the closing <p> tag.

3. Type an opening angle bracket (<).

   A list of tags appears at the insertion point.

   Note: You can set the length of the delay before the list appears by selecting Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and then selecting Code Hints from the category list on the left. In Code view, you can display a code hints menu at any time by pressing Control+Spacebar, and you can close a code hints menu at any time by pressing Escape.

4. Select the img tag from the list, then press Enter (Windows) or Return (Macintosh) to insert the tag.

   Tip: To quickly scroll to a tag, start to type the tag name.

5. Press Spacebar to display a list of attributes for the tag.
6. Begin to type src, and press Enter (Windows) or Return (Macintosh) when the src attribute is selected in the hints menu.

   The word Browse appears, selected, below the code you just typed.

7. Press Enter (Windows) or Return (Macintosh) to browse to a file.

   The Select File dialog box appears.

8. Navigate in your site folder to the image file Assets/images/preview.jpg and click OK (Windows) or Choose (Macintosh).

   The URL of the image file is inserted as the value of the src attribute, and the insertion point appears after the closing quotation mark.

9. Press Spacebar, select the alt attribute from the hints menu, and press Enter (Windows) or Return (Macintosh).
10. Leave the quotation marks empty, because this image is only an illustration. Use the Right Arrow key to move the insertion point to the right of the quotation marks.
11. Type a space, a slash, and a closing angle bracket ( />) to complete the tag.

    Note: This page is an XHTML document, and empty XHTML tags (tags that have no closing tags) must end with a slash before the closing angle bracket.

12. Save your page.

To add an attribute to an existing tag:

1. Place the insertion point just after the tag's final attribute value and press Spacebar.

   A list of attributes appears.

2. Add the attribute and specify its value, if any.