Add an image with code hints

Add an image with code hints

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

In this section, you’ll use code hints to add the street sign image to the Cafe Townsend index page.

  1. Open the index.html page, if it’s not already open.
  2. In Design view, select the street_sign.jpg image (it’s below the Flash Video placeholder) and press Delete.

    Now you’ll use code hints to reinsert the image, instead of dragging it from the Assets panel as you did in Tutorial: Adding Content to Pages.

  3. Switch to Code view by clicking Code view in the Document toolbar, or by selecting View > Code View.

    In Code view, the insertion point should be between an open and a close paragraph tag, as follows:

    This is a picture of the feature being described.

    If you don’t see an open and a close paragraph tag before the closing table cell </td> tag, type them in as follows:

    This is a picture of the feature being described.

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

  4. Delete anything that might be between the opening <p> tag and the closing <p> tag, for example, a nonbreaking space (&nbsp;).
  5. With the insertion point between the opening <p> tag and the closing <p> tag, type an opening angle bracket (<).

    A list of tags appears at the insertion point.

    This is a picture of the feature being described.

  6. Select the img tag from the list, and then press Enter (Windows) or Return (Macintosh) to insert the first part of the tag.
  7. Press Spacebar to display a list of attributes for the tag.
  8. 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.

    This is a picture of the feature being described.

  9. Press Enter (Windows) or Return (Macintosh) to browse to a file.
  10. In the Select File dialog box, navigate to the street_sign.jpg file (it’s in the images folder in the cafe_townsend root folder), 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.

    This is a picture of the feature being described.

  11. Press the Spacebar, select the alt attribute from the hints menu, and press Enter (Windows) or Return (Macintosh).
  12. 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.

  13. Type a closing angle bracket (>) to complete the tag.

    This is a picture of the feature being described.

  14. Save your page.


Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly