Adobe CS5 Dreamweaver Property Inspector Tool - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Many of the tools you use when working with images in Adobe Creative Suite 5 (Adobe CS5) Dreamweaver are located in the Property inspector. The Property inspector tool provides an easy and inclusive method of editing your images.

The Property inspector’s image-editing options.
The Property inspector’s image-editing options.

You can choose from these properties when an image is selected:

  • Editing the original: If you want to make a quick change, it shouldn’t have to involve a lot of directory navigation on your operating system. To edit your original image file, select it and click the Edit in Photoshop button on the Property inspector. The image is launched in Photoshop, where you can make changes and save the image again.

    You can select the default image editing application for different image file types by choosing Preferences→Files Types/Editors. Photoshop CS5 is the primary editor for almost every image type by default.

  • Optimizing an image: You can optimize images directly from the Dreamweaver page, but this method doesn’t provide quite the same abilities as when you place a native Photoshop or Fireworks file,. It may already be a GIF or JPEG file, and you can reduce the number of colors in the GIF or convert a JPEG to a GIF, but you can’t increase color levels or quality on these images.

  • Cropping an image: This feature is sure to become a favorite because you can make cropping decisions right on your Dreamweaver page. Simply click the Crop tool, acknowledge the warning message that you’re editing the image, and then click and drag the handles to the size you want. Press the Enter key and you’re done!

  • Resampling an image: You may have heard that you shouldn’t resize an image placed on a Dreamweaver page because if you were making the image larger, it would become pixilated, and if you were making the image smaller, you were wasting lots of bandwidth downloading the file. Fortunately, you can now use the Resample button on the Property inspector after you resize the image.

    Just keep in mind that making the image larger still causes some quality issues, so you should reduce the file size before clicking the Resample button. If you need to make an image considerably larger, find the original and optimize it to the proper size.

    To resize an image, you can either click and drag out the lower right handle of the image or type a pixel value in the W (Width) and H (Height) text fields in the Property inspector.

  • Brightness and contrast: If high quality is important to you, open your original image in Photoshop and make tonal corrections with professional digital imaging tools. If volume and quickly getting lots of images and pages posted are important, take advantage of the Brightness and Contrast controls built into Adobe Dreamweaver.

    Simply click the Brightness and Contrast button in the Property inspector, acknowledge the Dreamweaver dialog box, and adjust the sliders to create the best image.

  • Sharpen: Add crispness to images by applying the Sharpness controls available in Dreamweaver. As with some of the other image editing features in Dreamweaver, you’re better off using the Unsharp mask filter in Photoshop; in a pinch, this feature is a quick and useful tool to take advantage of.

    To use the Sharpening feature, click the Sharpen button, acknowledge the warning that you’re changing the image, and use the slider to sharpen the image.