Type Image Site Map
Home Navigation Layout
--- Welcome to Dreamweaver Workbook 2006 ---
Image Page Links:
Background Pages
GIF Page
JPEG Page
Rollover Page


Image Page:

An effective and impressive image is worth 1000 words.
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.

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

B. Background Pages - examine possibilities in:
1. pattern as page's background with text (800 x 500 as open browser window in bg-pages.html page)
2. texture as page's background with text (800 x 500 as open browser window in bg-pages.html page)
3. single image as page's background (800 x 500 as open browser window in bg-pages.html page)
option-1: full size abstract background image (800 x 600 or bigger)
option-2: full size objective background image (800 x 600 or bigger)
• 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 (a 800 X 600 or even bigger image to avoid the pixel repeating,
unless a 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.
Label all instances. Click GIF Page text link for reference.

D. JPEG Page - works from save for web to find out best quality on a smallest size.
1. JPG_ low quality_10%
2. JPG_medium quality_30%
3. JPG_high quality_75%
4. JPG_maximum quality_100%
_See JPG Image Page for reference.
- optional approach: scanned snapshot and an element (3D object) directly on the scanner.
Find the best quality not exceeding 200k.
1. optimize and insert the scan into the bottom row
2. optimize and rollover scan image with digital photo in the bottom row.
Label all instances.

E. Rollover Page - create four rollovers (maximum size 200 x 200) and display in this page.
1. from Photoshop_jpg image rollover
2. from Illustrator_icon, symbol, or pattern based gif graphics rollover.
3. graphic text rollover between grayscale and color.
4. dreaweaver text rollover (rollover link).
Page needs similar skeleton with above pages.
Label all instances.

> Please put all images into root folder, and edit your site frequently, or your pages will appear broken-image icon when you reopen pages.