Images

Images are similar to line breaks in that they do not surround any content therefore they only have an opening tag. They also have similar structure to a link in that the tag has an attribute that informs the web page where to find the image to display.

Web page are different from other applications by the fact that an image cannot be displayed unless it has been saved into the web area.

At the beginning of this tutorial, we created an image folder. This is where all images should be saved in order to keep them separated from your web pages.

Try this:

  1. Go to Google images
  2. Find an image for your first interest.
  3. With Fireworks open and with your browser restored down, drag the image into Fireworks.
  4. Save the image into your images folder within the site.
  5. If you forgot to create and image folder
    1. Click on in the Site panel.
    2. Choose File >> New folder.
    3. Name it images
  6. Repeat the steps for your other interest.

In your site panel, you should be expand the image folder to see your 2 images.

To place an image,

  1. Click on the interests.html tab
  2. After the paragraph about your first interest, press Enter.
  3. Click and drag your first image into the space below the paragraph.
  4. Repeat the steps for your second image.

Depending on the size of the image from the internet, the image may not fit the space appropriately. What you can do is resize the image in Fireworks by choosing:

... and resizing and resaving. If you choose to do this Dreamweaver does not automatically resample your image, so you should delete your image and simply drag it in again until you are happy with the sizing.

NEXT LESSON