[Home]

Topics

Tutorial

HTML

Dreamweaver

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

s


Tutorial Dreamweaver - Working with Images


To insert an image

  1. Do one of the following:
    • Place the insertion point where you want the image to appear in the Document window, 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 in the Document window.
    • Drag an image from the desktop to the desired location in the Document window; then skip to step 3.
  2. In the dialog box that appears, click Browse to choose a file, or type the path for the image file.
  3. Set image properties in the Property inspector.

To resize an image

  1. Select the image in the Document Window. Resize handles appear at the bottom and right sides of the image and in the bottom right corner. If resize handles don't appear, either click away from the image you want to resize, and then re-select it or click <img> in the tag selector to select the image.
  2. Resize the image, by doing one of the following:
    • To adjust the width of the image, drag the selection handle on the right side.
    • To adjust the height of the image, drag the bottom selection handle.
    • To adjust the width and the height of the image at the same time, drag the corner selection handle.
    • To preserve the image's aspect ratio (its width-to-height ratio) as you adjust its dimensions, Shift-drag the corner selection handle.

To create a rollover

  1. In the Document window, place the insertion point where you want the rollover to appear.
  2. Insert the rollover by using one of these methods:
    • Choose Window > Objects to open the Object Palette, and click the Rollover button.
    • Choose Insert > Rollover Image.
  3. In the dialog box that appears, enter the following information:
    • Browse and select an image, or type the path and file name of the Original Image field.
    • Browse and select a rollover image, or type the path and file name of the rollover image in the Rollover Image field.
    • To create a link, browse and select a file, or replace the # in the Link field with a path and file name.
    • To have Dreamweaver preloaded the images in the browser's cache, select the Preload Images option.
    • Click OK.

Creating Image Maps

To create a client-side image map

  1. Select the image.
  2. Click the expander arrow in the lower right corner of the Property inspector to see all properties.
  3. Type the name for the map in the Map Name field.
  4. To define the image map areas, do one of the following:
    • Select the circle tool and drag the pointer over the image to create a circular hotspot.
    • Select the rectangle tool and drag the pointer over the image to create a circular hotspot.
    • Select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point. Click on the arrow tool to close the shape.
  5. In the Hotspot inspector, click the folder icon to browse to file to open when the hotspot is clicked, or type the file name in the Link field.
  6. To make the linked document appear somewhere other than the current window or frame, enter a window name in the Target box or choose a frame name from the pop-up menu.
  7. In the Alt box, type alternative text that is displayed for the hotspot in text-only browsers.
  8. Repeat steps 4 through 7 to define additional hotspots in the image map.

up


back Working with Links | Working with Tablesnext


 

 

 

 

 

 

 

Copyrights Reserved © Web Publishing 2003

Assessment

  • Assignment 1
  • Assignment 2
  • Quiz 1
  • Quiz 2
  • Project

 

Announcement

To all my students!

Please visit this web site regularly.