Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

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

Inserting Images

In this lesson’s final task, you’ll add some images to the page template.

1.
Position the insertion point after the placeholder text, “Special content area,” and press Enter/Return to create a new line. Choose Insert > Image from the main menu.

The Select Image Source dialog appears.

2.
In the Select Image Source dialog, browse to the images folder within the jade_valley site folder. Select label_products.gif and click OK (Windows) or Choose (Macintosh).

This graphic was exported from the original (simplified) Fireworks design, and was placed inside the images folder for you. Now it appears at the top of the left column.

3.
In the Image Tag Accessibility Attributes dialog that appears, enter Jade Valley Products. as the Alternate text. Click OK.

This dialog appears by default to help ensure that you don’t forget to add the alt attribute to any images.

4.
Delete the “Special content goes here” text. Click the yellow PRODUCTS graphic. Press the right arrow key once and then the Enter/Return key to move the insertion point below the label image you just inserted. Repeat Steps 1 and 2 in this task to insert banana.jpg just below the Products label image.

You’re almost finished reconstructing the original design.

5.
In the accessibility dialog, enter Ad for organically grown fruits and vegetables. as the Alternate text. Click OK.

Once again, you’re providing a meaningful summary of the graphic for those visitors who can’t see the graphic.

The graphics may appear misaligned; you’ll fix that problem using CSS in the next lesson.

6.
Save and close the file.

In the next lesson, you’ll develop a style sheet and create a template for the Jade Valley Web site based on this page.

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint