Image Creation:

• Create your own images or use free images intended for web use.
• Create images with digital cameras, scanning items you own copyright to or by creating graphics in a web imaging or graphics package and converting them to required web formats. Such programs include Fireworks, ImageStyler, Photoshop, paint programs and graphic utilities. Do all image cropping and editing in the imaging program not in Dreamweaver.

Image Size/Resolution and Optimization:

• Image resolution of 72 dpi is adequate for most computer monitors and will reduce the file size and download time.
• Choosing compression on jpeg files and reducing quality to medium will also reduce size and speed download times.

Image Formats Used on the Web:

Images in a web page are separate files! : All image files should be named and organized in your web site folders before you insert them into your page. If you move image files around into a new folder after inserting them or change the file name, you will have a broken image link on your web page and you will need to re-link the file.

Images files ONLY APPEAR to be part of the web page, but they are really a link to an image file. Do NOT move, rename, or throw image files away, because you think they are "in the page".

Inserting Images in Dreamweaver:

1. In Dreamweaver, click in the Document Page where you would like to place an image.
2. Select Insert > Image or click the image icon on the Object Palette.
3. Locate the image file in your www site directory or images sub-directory and click the Select button.
4. Click on the image in the page and the following Properties inspector window appears.
5. Fill in other options as you like. (See description below.)

Image Blank: (below Image, 5K) is for naming the image to refer to later from scripts

W and H options: the pixel value of the width and height of the image are set when the image is inserted. It speeds the download of the page by setting the exact space for the image needed.

Note on image resizing/cropping: Making the image bigger or smaller should be done by cropping or enlarging the image file in an image program like Photoshop, not using the W and H attribute. Adjusting W and H in Dreamweaver only makes the image look smaller, it will not reduce the download time, thus slowing down your page load time.

Src: the name and location of the gif or jpg image file (i.e. smiley.gif or fred.jpg). If the original location of the image is changed the image location needs to be changed. Failing to do so will result in a broken link to the image file.

Alt: Fill in short descriptive text of what the image is illustrating. This assists users who use voice readers on their computers or who have slow connections and choose to turn images off.

Link: Use to make the image button a clickable hyperlink. Fill in a URL (http://www.rit.edu) to another web site or click the folder next to the link fill-in to link to a local html document. If you wish to link a thumbnail image to a larger version of the image you can do that here, by linking to the image file or to another html document with the larger image inserted into it.

Border: 0 for 0 pixels or no border, unless you want a border around the image.

V Space: Fill in a pixel number to make space above and below the image

H Space: Fill in a pixel number to make space to the left and right of an image.

Alignment options: Refers to how the text will align near an image.

Alignment Examples:

Browser Default, Baseline and Bottom Example: Text base is aligned with image bottom line

Top and Texttop Example: Tallest letter is aligned to the top of the image.

Middle Example: Base of text is aligned to the middle

Absolute Middle Example: Middle of text is aligned to middle of image.

Absolute Bottom

i.e. The smiley (aligns the bottom of the letter "y" with bottom of image)

Left align means that the image is left and the type aligns next to it and eventually wraps around it and aligns with the left margin of the image.

Right align means the image is right of the text that you type. ----------------------------->-

Image Maps: define clickable hotspots on an image which link to web pages or other images when clicked. Dreamweaver can create these for you. What kind of images are good for image mapping? Choose images which look clickable such as button bars, navigational images, maps, etc. that clearly inform the user that the image is clickable.

EXAMPLE: Click the icons in the example image below to see how an image map works.

Making the Image Map:

1. Insert > Image. Click once to highlight the inserted image to show the image properties.
For our example we will use an image of the head options in the object toolbar of Dreamweaver (shown below).

2. In the lower left corner of the Image Properties fill in a single word for the Map name.

3. Click a shape that will best create a hotspot on the image (rectangle, circle or polygon). When you begin making the first shape on the image the hotspot properties pictured below will show up on the Properties Toolbar.

4. For the circle or rectangle drag across the part of the image where you want the first hotspot. Fill in a web address or file name where you want the the user to go when they click the hotspot. Fill in an ALT tag to explain the image hotspot. Continue the procedure with the each hotspot.

5. For a polygon, click each corner of the polygon to connect up a final shape.