Dreamweaver Workbook

Image

The image page section is to continue the process of preparing images for the web. It is necessary to begin thinking about the design and integration of images into the web and web page itself.

Requirement:

A. Create a page that link to the Image pages (B, C, D, E, and F) -The page should have links and descriptions for the pages that are being linked to.

B. Background Page(s) - examine possibilities in:

C. GIF Page - Working on a single image (suited for the gif format) show four instances of the graphic element.
All four images should be the same dimension size. Save for Web to find out the large size (dimension) and best quality with possible smallest file size.

  1. Show a gif image at the best quality for the web: Perceptive / No Dither / Color 256 (20 KB)
  2. Show a gif image at a good quality: Adaptive / Diffusion / Color 64 (12 KB)
  3. Show a gif image at a medium quality: Selective / Pattern / Color 16 (8 KB)
  4. Show a gif image at a low but acceptable quality with the smallest size: Restrictive / Noise / Color 128 (6 KB)
  5. Label all instances. Click GIF Page text link for reference.

D. JPEG Page - Working on a single image (suited for the jpg format) show four instances of the graphic element.
Save for Web to find out best quality with possible smallest size.

  1. Show a jpg image at a maximum quality_100% (20 KB)
  2. Show a jpg image at a high quality_60-75% (12 KB)
  3. Show a jpg image at a medium quality_30-50% (8 KB)
  4. Show a jpg image at a low quality_10-25% (4 KB)
  5. Label all instances. Click the JPG page text link for reference.

E. SVG Page

  1. Create a small map (320X240) in Illustrator
  2. Save the vector based map as a svg (Scalable Vector Graphics) format in Illustrator
  3. Create a new "svg.html" page, and use <embed> tag to embed the svg element:
    <embed src="map.svg"></embed>
  4. Click the SVG page text link for reference.

F. Rollover Page - create four rollovers (maximum size 200 x 200) and display in this page.

  1. Create a jpg image from photo in Photoshop: Jpg Image Rollover by Javascript
  2. Create a gif image from a vector element in Illustrator (icon, symbol, or pattern): Gif Image Rollover by Javascript
  3. Add a CSS rule for certain text and swap the text color: Text Rollover
  4. Label all instances.

G. Media Page