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.

Requirements

A. Create a page that links 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:

• Create a background.html" page
• Create a "pattern-bg.html" page, and choose a gif-formated pattern as the page's background (750 x 550 for opening a new browser window in the "background.html" page)
• Create a "texture-bg.html" page, and choose a gif-formated texture as the page's background (750 x 550 for opening a new browser window in the "bg-pages.html" page)
• Create a "img-bg.html" page, and choose a single image as the page's background (for opening a new browser window in the "bg-pages.html" page)
• Create or choose a pattern tile (a vector based gif image, then repeat the value in Dreamweaver)
• Create or choose a texture tile (a vector based gif image or a raster based jpg image, then repeat the value)
• Create or choose an image which is bigger than (1600X1200) to avoid the pixel repeating, unless the small dimension image has a seamless edge

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.

• Show a gif image at the best quality for the web: Perceptive / No Dither / Color 256 (20 KB)
• Show a gif image at a good quality: Adaptive / Diffusion / Color 64 (12 KB)
• Show a gif image at a medium quality: Selective / Pattern / Color 16 (8 KB)
• Show a gif image at a low but acceptable quality with the smallest size: Restrictive / Noise / Color 128 (6 KB)

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.
• Show a jpg image at a maximum quality_100% (20 KB)
• Show a jpg image at a high quality_60-75% (12 KB)
• Show a jpg image at a medium quality_30-50% (8 KB)
• Show a jpg image at a low quality_10-25% (4 KB)
• Label all instances. Click the JPG page text link for reference.

E. SVG Page

• Create a small map (320X240) in Illustrator
• Save the vector based map as a svg (Scalable Vector Graphics) format in Illustrator
• Create a new "svg.html" page, and use the embed tag to embed the svg element
• Click the SVG page text link for reference.

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

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