How to Define Attributes in Dreamweaver - dummies

By David Karlins, Doug Sahlin

Dreamweaver’s Properties Inspector is context-sensitive, meaning that when you click an image, HTML attributes for that image are displayed and editable. Some of the editable image attributes are more “technical” than design factors.

For example, the image ID is used when images are connected to JavaScript programs or databases. Other image attributes in the Properties Inspector comprise a limited set of actual image editing tools. Those tools include cropping, editing contrast, and sharpening images. Take a look at the most important of these options:

  • Map area tools: The Map area tools create clickable hotspots on the selected image and define separate links for different hotspots. A hotspot is a section of an image that serves as a link. You can use the Rectangle, Circle, and Polygon hotspot tools to draw sections on a selected image, and then assign specific links to those hotpots in the Properties Inspector.

    The fourth tool in this set, the Pointer Hotspot tool, is used to select, move, or edit existing hotspots.

  • V Space and H Space: Define horizontal and vertical spacing around the selected image.

  • Align: Use this popup to choose between left or right alignment. (Other options are technically available, but they’re remnants from an era when text-sized graphic symbols were inserted directly into lines of text and aren’t used today in image alignment.)

  • Src: This field identifies the embedded linked image.

  • Alt: Change the text that displays, or is read out loud, when an image isn’t visible.

  • Border: Define border width (0 pixel, by default), or 1 pixel if the image serves as a link.

  • Link: Define a link that opens when the image is clicked. If a link is defined, you can set the link to open in a new browser window by choosing _blank from the Target popup.

  • Class: Use this popup to assign CSS class styles if any are defined in or linked to the page.

  • W (width) and H (height): Resize the image. Deselecting the Toggle Size Constraints icon unlocks the linkage between height and width, allowing you to stretch or squish the image rather than maintaining the original height-to-width aspect ratio as you resize. You can also resize interactively by clicking and dragging the lower-right corner handle of a selected image. Hold down the Shift key while you resize to maintain height-to-width ratio.

  • Resample: New tools in CS6 allow you to resample a resized (smaller) image. Resampling eliminates unneeded data and makes the image file smaller, and that means the image can download faster. Select the Commit Image Size check box to resample the image, or click the Reset to Original Size button next to it in the Properties Inspector to undo resizing.