web


Introduction

Images can be edited within Dreamweaver. Just select the image and use the image editing tools in the Property Inspector to optimize, crop, resample, adjust brightness/contrast, and sharpen. You can resize an image by selecting it and dragging the box on the bottom right. Hold the shift key first to maintain the aspect ratio so the image doesn't become distorted. After you make an image smaller, click the resample icon to make the image look better and decrease file size.

See FAQ's for instructions and screencasts:

  1. Why don't my images show up?
  2. How can I resize my image?
  3. What's an alt label and how can I add it?
  4. How can I optimize images to make my page download faster?
  5. How can I get text to wrap around my image?

 

Instructions

Create a folder named imageLab in your local_root/212projects folder. In this folder, create a file images.html.

Resize

This page will display a resized and resampled image that links to the original image.

  1. Open images.html and type in "Resize" at the top of the page. Format this as Heading 1.
  2. Download this building.jpg image (right click on the image and "Save As"). Save the file into your imageLab folder. What is the file size?
  3. Duplicate the file (select the file in the files panel and ctrl+D or copy & paste) and name the copy buildingSmall.jpg.
  4. Insert buildingSmall.jpg onto the page and resize it so the width is less than 400 pixels. Make sure you hold the shift key as you resize to prevent distortion.
  5. With the resized image selected, click the resample icon. Hit the F5 key to refresh your files list. What is the new file size?
  6. With the resized image selected, create a link to the original building.jpg image. To remove the border around the image, enter "0" next to Border in the property inspector.


Crop

  1. Type "Crop" and format it as a Heading 1.
  2. Duplicate the building.jpg file again. This time, name the copy buildingCrop.jpg.
  3. Insert the buildingCrop.jpg image on the page.
  4. With the image selected, click the crop button and size the box around the windows or one of the rocks in the image. Double click the box to crop the image.
  5. Note the size difference between building.jpg and buildingCrop.jpg.

Optimize

  1. Type "Optimize" and format it as a Heading 1.
  2. Download this spooky.png image (right click on the image and "Save As"). Save the file into your imageLab folder. What is the file size?
  3. Insert the image on the page.
  4. With the image selected, click the Optimize icon in the Property Inspector.
  5. Compare the file size and appearance with the image optimized as a jpg and as a gif.
  6. Save the image using the settings that produce a small file size and good appearance.

 

Turning this is

Upload files and link to images.html from 212portfolio.htm. This will be graded at the end of the semester.