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 Pages - examine possibilities in:
1. Pattern as the page's background with text
(750 x 550 for opening a new browser window in the "bg-pages.html" page)
2. Texture as the page's background with text
(750 x 550 for opening a new browser window in the "bg-pages.html" page)
3. Single image as the page's background for opening a new browser window in the "bg-pages.html" page

  • Pattern Tile (a vector style graphic/gif to repeat the value)
  • Texture Tile (a vector style graphic/gif or raster style graphic/jpg to repeat the value)
  • Image (1600X1200) to avoid the pixel repeating, unless the small dimension image has a “seamless edge”)

C. GIF Page - working from a single graphic (suited for the gif format) show four instances of the graphic.
All four graphics should be the same dimension size. Find the large size (dimension) and best quality at possible smallest file KB size.

  1. show the gif image at the best quality for the web: Perceptive or Adaptive/ No Dither / Color 256
  2. show the gif image at good modifications: Adaptive or Grayscale / Diffusion / Color 32 / Dither 60%.
  3. show the gif image at medium quality: Restrictive (Web) / Pattern / Color 64
  4. show the gif image at an acceptable quality with a smallest size: Custom / Color auto / No Dither.
  5. Label all instances. Click GIF Page text link for reference.

D. JPEG Page - Save for Web to find out best quality on a smallest size.

  1. JPG_ low quality_30%
  2. JPG_medium quality_50%
  3. JPG_high quality_75%
  4. JPG_maximum quality_100%
  5. Label all instances. Click the JPG page for reference.

D. SVG Page

  1. Create a small map (320X240) in Illustrator
  2. Save the vector based map as svg format in Illustrator
  3. Create a new "svg.html" page, and use the object tage to embed the svg (Scalable Vector Graphics) element
  4. Link the page to the parent page, "image.html", page
  5. Label the instance.

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 (Js)
  3. Add a CSS rule for certain text in Dreaweave: Text Rollover
  4. Label all instances.