Images

HOME | CSS | TABLES| IMAGES | TYPOGRAPHY| LAYOUT| DEVICES|

FORMS| COLOR THEORY | DREAMWEAVER FEATURES | RESOURCES| ACCESSIBILITY

To add my caricature to this page I followed these steps:

1. Right-click on the site folder and create a new folder
2. Name the new folder "Assets"
3. Click back in the document where I want the caricature to go
4. In the "Insert" menu, select "image"
5. Browse to the location of the caricature in the portfolio folder we created
6. Select it, and click "yes" when Dreamweaver offers to copy it to the site
7. Select Assets folder as the location to copy it to
8. Type in the alternate text when the dialogue box comes up
9. Click okay

Rollover Images

A rollover image is displayed when the visitor moves the cursor over the original image.

Simple Rollover - a simple rollover involves two pieces of artwork: the first graphic, usually bearing the ending "out" attached to the file name; and the second graphic, which ends with the word "over" in the file name. The first one is what the viewer sees when the page first loads; the second is what appears when they mouse-over the link.

Disjointed Rollovers - this sounds way above my head! But designers can code an image on the page to change when the viewer moves their cursor over another image on the page. The one they roll over doesn't change, but another image on the page does!

Navigation Bars with Multiple Rollover States

Click to view larger image

Flash Buttons

Editing Images

Understanding image editing is a requirement for any web designer. Content may be "King," according to the design textbook, but everyone knows that a picture is worth 1,000 words! Clear, relevant images convey quality; degraded, confusing images indicate a poorly constructed site.

To keep images clear and still have them load quickly, it is important to edit them for the web. File size needs to be small, less than 100 kilobites is usually best. The dimensional size of the image, or how large it appears on your screen or even when you print it out, is not the same as file size. File size refers to the number of pixels per inch, or the density of the information contained in the photo. For print, you want at least 300 ppi (pixels per inch) but for the Web, 72 is fine. However, when you change the file size from 300 to 72 ppi, and don't change the dimensional size, the quality of the image will be reduced.

Websites with tips for improving images, including using appropriate file size:

Jacob Neilsen's Top Ten Mistakes of 2003

Web Graphics Tips from About.com

The Site Wizard

CNN.com is an example of great content working hand in hand with wonderful photos.

Sample image editing feature of Dreamweaver - brightness and contrast: