MYONLINEPROOFING.COM

proof reader marks - www.myonlineproofing.com

Menu


Inspector. As an example, drag and drop a new image (intranetsymbolism.gif) from the File list directly into the The Company Intranet section


of text so that it resembles Figure 3.35. Figure 3.35. Drag the intranetsymbolism.gif image onto the page. [View full size image]   Immediately you'll notice that the text doesn't wrap nicely around the image. Setting the text alignment is just one of the many features you can do from the Properties Inspector. The callouts in Figure 3.36 highlight the complete feature set. Figure 3.36. Dreamweaver's image-based Properties Inspector includes numerous property modifications for an image. [View full size image]   A detailed list of each feature, moving from left to right and basic to advanced is outlined here: Image Thumbnail: Shows a small thumbnail of the selected image. Image Size: Displays the selected image's size in kilobytes. Image Name: Provides a method for uniquely identifying the selected image. W and H: The width and height of the image are shown here. Dreamweaver allows you to stretch an image, in which case the values in these boxes will be bolded. Bolded values mean that the width and height of the stretched image do not correspond to the embedded values of the image. In fact, it is recommended that an image editor such as Fireworks be used to properly resize images. Src: Short for source, this is the file path to the image on your computer. This value can also be an external web address, in which case the image shows broken but will display within the browser. Link: Add a hyperlink to your image here. Hyperlinks are outlined with more detail later in this chapter. Alt: For accessibility reasons, you'll want to enter alternate text here. Entering alternate text is beneficial for a variety of reasons. First, it allows text-to-speech readers to present the alternate text to the disabled user since the reader can't make out the image. Second, in Internet Explorer, a yellow tooltip appears with the alternate text when a user hovers over the image. Finally, on slower connections, the alternate text appears first while the image is loading. See Appendix A, "Accessibility," for more about alternate text. Edit: Dreamweaver incorporates minimal editing functionality in this group of icons. For instance, you can open the selected image directly in Fireworks for editing or optimizing. You can also crop, sharpen, or change the brightness or contrast of the image directly in Dreamweaver. This integration is covered with more detail in Chapter 19, "Integrating with Fireworks." It's important to point out that changing image properties through these options is permanent. I highly recommend that you have a backup of your image before using these features. Class: Allows you to apply a CSS class to your image. Image Map: Discussed with more detail later in this chapter, an imagemap is a method for creating multiple hyperlinked hotspots within a selected image. V Space and H Space: Enter values here to create vertical and horizontal spacing in pixels around your image. Target: When a value is added to the link text box, this menu becomes enabled. Targets, as you will see, provide a method for targeting browser windows when a user is linked from one web page to the next. Low Src: Although you're certainly free to generate high-quality images with large sizes (not recommended), always create a low-resolution image that you can reference here. This way, the browser loads the low-resolution image