PropagandaMedia > Dreamweaver tutorials > Intermediate > Images

1. Do the following:

   Place the cursor where you want the image to appear on the page and then choose Insert > Image or click the Insert Image button on the Common panel of the Object palette.

   Drag the Insert Image button from the Object palette to the desired location on the page.

   Drag an image from the desktop to the desired location on the page; then skip to step 3.

2. In the dialog that appears, type the path for the source file or click Browse and choose a file.

   To prevent this dialog box from appearing, turn off Show Dialog When Inserting Objects in General preferences.

3. Set the image properties in the Property inspector

JPG (Joint Photographic expert Group):

Best for most photographic images and continuous-tone art that contain subtle shifts in color (i.e. drop shadows)

GIF (Graphics Interchange Format):

Best for:

• Floating graphics from the page (i.e. transparency)
• Creating simple animations
• Browser safe colors

PNG (Portable Network Graphic format):

Best for:

• 24-bit color support and lossless compression
• The ability to create and use up to 8-bit masks--thereby creating variable transparency
• Gamma control, which give cross-platform consistency of image brightness
• A more sophisticated interlacing method that displays a preview of an image after only 1/64th of the image has loaded, compared with GIF's preview after 1/8th of an image has been loaded

Image

Lets you name the image so you can refer to it in a scripting language (i.e. javascript).

W (Width)/H (Height)

Reserves the space for the image on the page while the page is loading. DW will enter the image's original size automatically

Src (Source)

Specifies the source for the image

Link

Specifies the hyperlink for the image.

Align

Aligns the image and text on the same line.

Alt (Alternative text)

Specifies the alternative text that appears in place of the image for text only browsers or for browsers that have been set to download the images manually.

V Space(Vertical Space)/H Space (Horizontal Space)

Add space, in pixels, around the image.

Target

Specifies the frame or window in which the linked page should load.

_blank loads the linked file into a new, unnamed browser window.

_parent loads the linked file into the parent frameset or window of the frame that contains the link.

_self loads the linked file into the same frame or window as the link

_top loads the linked file into the full browser window, thereby removing all frames.

Low Src (Low Resolution Source)

Specifies the image that should load before the main image

Border

Sets the width of the link border around the image in pixels. Enter "0" for no border.

Map

Enable you to create client side image maps.

Refresh

Resets the W and H values to the original size of the image.

Edit

Launches the image editor you specified in External Editors preferences and opens the selected image.

To Choose an external image editor:

1. Choose Edit > Preferences
2. Select External Editors from the Category list on the left.
3. Click Browse next to the Images box and select the preferred image editor.

Examples of outside editors include Fireworks, Photoshop, and ImageReady.

An image map is a single image with different hyper links assigned to defined regions of the image.

A rollover is an image that changes when the cursor moves across the image. A rollover is actually two images: the primary image (the image that is displayed when the page first loads) and the rollover image (the image that appears when the cursor rolls over the primary image).

This is an example of a rollover

The Preload Images action loads images that do not appear on the page right away (such as those that will be swapped in with timelines, behaviors, or javascript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear.