Section 5.2. Modifying an Image

5.2. Modifying an Image

After inserting a graphic, you can work on it in several ways: attaching a link to the image, aligning it on the page, or adding a border and margin to it, for example. Dreamweaver also includes some basic tools that let you crop, resize, optimize, sharpen, and adjust contrast and brightness (see "Editing Graphics" on Section 5.2.5).

As with most objects on a Web page, you set image properties using the Property inspector (see Figure 5-4).

Figure 5-4. The Property inspector shows the selected graphic's dimensions, source, alignment, border, and margins. A thumbnail version appears in the upper-left cornerin this case, bearing the logo of Fireworks, which created it.

5.2.1. Naming an Image

Just to the right of an image's thumbnail on the Property inspector is a small field where you can type a name for that image. Most of the time, you'll leave this field blank.

However, if you plan to add interactive effects to itlike the rollover effect discussed on Section 5.4.1using Dreamweaver behaviors (see Chapter 11) or your own JavaScript programming, you must name your picture. Whatever name you choose should use only letters and numbersno spaces or other punctuation. Furthermore, every graphic's name must be unique on the page. This rule is what allows JavaScript to "talk" to a specific image.

When you add a name, Dreamweaver adds both a Name property and an ID property to the image tag. The name tag is still used by most browsers, but the more recent ID tag is fast becoming the standard way that JavaScript identifies an object on a page. (IDs are also used by Cascading Style Sheets, as described on Section 6.6.2.)


Note: JavaScript uses the image name or ID that you type in the Image Placeholder box for its own reference; no one actually sees this name in a Web browser. In other words, this box isn't the place to give your graphic a text label that shows up when your reader has graphics turned off. For that purpose, read on.

5.2.2. Adding a Text Description to an Image

Not everyone who visits your Web site gets to see those stunning photos of your last summer vacation. Some people deliberately turn off graphics when they surf, enjoying the Web without the wait, since graphics-free Web pages appear almost instantly. Other people have vision impairments that prevent them from enjoying the visual aspects of the Web. They rely on special software that reads Web page text aloud , including any labels you've given your graphics.

To assist Web surfers in both situations, make a habit of setting the Alt property of the image. Short for alternative text , the Alt property is a text description that Web browsers use as a stand-in for the image (see Figure 5-5).


Tip: To have Dreamweaver automatically remind you to add an Alt property each time you add an image to a page, see the box on Section 5.2.3.
Figure 5-5. The Alt property is an important aid for people who are surfing but can't see the graphics on your Web page.
Top: Graphics denote the different sections of this site, such as Features, Site of the Week, and Insights.
Bottom: With graphics turned off, that information is still available, thanks to the alt text. In contrast, graphics that don't use the Alt property simply disappear or display the generic label IMAGE. In the case of an important identifying graphic like the site logo (the "design interact" banner in the top figure), a missing Alt property leaves visitors wondering where they are.

To add a text description to an image, type it in the Alt field in the Property inspector. If you're naming graphics that will be navigation buttons , you could just use the same text that appears on the button, such as Home or Products . For images that carry greater meaningsuch as a photo of the product itselfyou might use a more detailed description: "Photo of Sasquatch relaxing at his lodge in the Adirondacks."


Tip: In some cases, however, a description is more of a distraction than a help. For example, a common technique in laying out a Web page involves using invisible 1-pixel images, often called spacer images (see Section 7.3.6.2). Because these images serve as a layout aid and don't convey any meaningful information, a description isn't necessary.In this instance, you can use the pop-up menu that appears to the right of the Alt field. This menu lets you choose one option: <empty>. Use the <empty> Alt property for any images that don't add meaning to the page, like spacer GIFs. This trick will help your pages meet accessibility requirements without adding distracting and unnecessary descriptions.
POWER USERS' CLINIC
Making Accessible Web Sites

Many people using the Web have disabilities that make reading, seeing, hearing, or using a mouse difficult. Visually impaired people, for example, may be unable to benefit from images on the screen, even though they have software that can read aloud a Web page's text.

Dreamweaver includes a number of features for making your Web sites more accessible. That's good news if you're building a Web site for the federal government or one of the many states that support Section 508 of the Workforce Investment Act. This law requires Web sites built for or funded by the government to offer equal or equivalent access to everyone. Throughout this book, you'll find tips for using Dreamweaver's accessibility features, and on Section 14.7, you'll learn how to use a tool to find out if your site is compliant with Section 508.

The Alt property described on Section 5.2.1 is an important first step for assisting visually impaired Web surfers. For complex images, such as a graph that plots changes in utility rates over time, you can also supply a more detailed description on a separate Web page. The Longdesc (long description) property of an image lets you specify a link to a page containing a text description of the image. Some Web browsers understand this property, allowing visually impaired visitors to jump to a page with a text description that screen-reading software can read aloud.

While you can't find the Longdesc property in the Property inspector, you can turn on an accessibility option in Dreamweaver that lets you add it every time you insert a graphic. Choose Edit Preferences (Dreamweaver Preferences on the Mac) to open the Preferences window, and select the Accessibility category. Turn on the Images checkbox.

Now whenever you insert a graphic, the window shown below appears, so that you can quickly set the Alt text and select an HTML page containing a long description.

Note that you're not required by Section 508 to use the long description property when inserting images. It's merely recommended if the image is particularly complex or includes information that can't be explained in the Alt propertyfor example, graphs or images that include a lot of text information. For an overview of Web accessibility and helpful tips on making accessible sites, visit www.w3.org/WAI/gettingstarted/.


5.2.3. Changing the Size of an Image

The Width and Height properties of a graphic do more than determine its screen size; they also help Web browsers load the graphic quickly and efficiently . Since the HTML of a Web page downloads before any graphics do, a Web browser displays the text on the page first, and then adds the images as they arrive . If width and height attributes are missing, the browser doesn't know how much space on the page to give each image, so it has to redraw the page after each image is downloaded. The stuttering appearance of this redrawing is disconcerting, makes Web pages appear slowly, and shatters your reputation as a cool, competent Web designer.

Fortunately, you don't have to worry about specifying the picture's dimensions yourself: whenever Dreamweaver inserts an image into a Web page, it automatically calculates its width and height and enters those values into the W and H fields in the Property inspector (see Figure 5-4).


Note: This cool feature works only in Design view. If you use the Insert Image command to add an image while working in Code view, Dreamweaver adds only the <img> tag with the proper reference to the graphic file; it leaves out the Width and Height properties.
WORKAROUND WORKSHOP
Watch Those Resize Handles!

After you insert an image in the document window, a thin black border appears around it, indicating that it's selected. Three small black squaresthe resize handlesappear on the right edge, bottom edge, and lower-right corner, as circled in the illustration.

Dragging these handles changes the width and height of the graphicor, rather, the Width and Height properties in the Property inspector. Pressing Shift while dragging the corner handle keeps the proportions of the image the same. The graphic file itself remains unchanged.

However, dragging one of these handles to make the picture appear bigger is almost always unsuccessful , resulting in distortion and ugly pixellation.

But those pesky resize handles are far too easy to accidentally grab and drag. In fact, sometimes you may resize a graphic and not even know it. Perhaps you accidentally dragged the left resize handle a few pixels, making the graphic wider, but not enough to notice.

Fortunately, the Property inspector does provides some subtle feedback to let you know if your graphic is distorted .

A boldfaced number in the W or H field tells you that the Width or Height property now differs from the actual dimensions of the graphic.

Clicking the letter W or H in the Property inspector resets the Width or Height property back to that of the original graphic file, undoing your little slip of the mouse. Clicking the recycling-symbol icon (also circled) resets both properties.


You can, if you like, shrink a graphic by typing smaller values into the W and H fields, but doing so won't do anything to speed up the download time. You'll make the picture appear smaller, but the Web browser will still have to download the entire graphics file. To make your graphic smaller both in appearance and file size, shrink it in an image-editing program like Fireworks, Photoshop, or ImageReady, or use the Resample Image tool described on Section 5.3.1.1. Not only will you get an image that's exactly the size you want, but you'll also trim a few bytes off its file size, and maybe even save a second or two in download time.

On the other hand, setting width and height values that are larger than the actual dimensions of the graphic merely distorts the image by stretching it, creating an undesirable pixellated effect. If you want a larger image without distortion or pixellation, start with a larger original image. To do so, return to your digital camera or stock photo CD, or recreate the graphic at a larger size in Photoshop or Fireworks.

5.2.4. Aligning an Image

Images, like text, appear in the normal flow of HTML in a page. In other words, a picture can appear in a paragraph by itself, or within a sentence or paragraph of text.

The Property inspector has two sets of alignment controls that affect images (Figure 5-6). Only the Align menu, however, controls alignment specific to an image. (The second set of alignment options applies to the entire paragraph; see Section 3.1.4.)

Figure 5-6. Only the Align menu provides options specific to the image. The Paragraph alignment icons affect the entire paragraphnot just the image. If you just want to center-align a graphic, however, without affecting any text around it, put the image in its own paragraph and click the center paragraph alignment button. Or use the Cascading Style Sheet Text Align property (see Section 6.7.3).

If you've inserted a graphic into a text paragraph, you can specify exactly how the image relates to the words around it. The Align menu in the Property inspector lets you select 10 different options (see Figure 5-6). However, only six of them work in all browsers. Avoid the other four, as explained in the Note on Section 5.2.5, which work only in certain browsers.

To set a graphic's vertical alignment, click the image to select it. Then choose one of the options from the Align menu at the right side of the Property inspector. You can see each illustrated in Figure 5-7:

  • Default means that the graphic sits on the baseline (the bottom of the line of text on which the graphic appears). The effect is identical to choosing Bottom .

  • Middle aligns the text on the current line with the middle of the graphic, but may add an awkward -looking complication. Subsequent lines of text move below the graphica problem you can solve by using either of the two wrap alignment options (Left or Right), as described below.

    Figure 5-7. You can control the alignment of an image next to a paragraph of text or alongside another image using the Align menu in the Property inspector. In this Web page, images are placed at the beginning of six different text paragraphs. Each image has a different alignment option, which controls how the image appears in relation to the text. The bottom figures show the effect of the default alignment setting on side-by-side graphics (left), and the top alignment setting applied to the shorter image (right).
  • Top aligns the image with the top of the line of text in the paragraph. Again, because top alignment can create a gap between the first line and the rest of the text, consider using the Left or Right wrapping options. The Top option is good, however, if you have two graphics of different heights side by side on the same line (see Figure 5-7, bottom). Normally, a browser aligns graphics by their bottom edges, making a kind of city skyscraper skyline (left). The top option aligns the graphics along their top edges, forming a cave-ceiling, stalactite-like effect (right).

  • Left places an image to the left of any text, which then wraps down the right side of the image.

  • Right moves the image to the right and wraps text along its left edge.

  • Baseline, TextTop, Absolute Middle , and Absolute Bottom aren't part of the official HTML standard and only work in a few browsers, so avoid them.


Note: Only Top, Bottom, Middle, Left, and Right are considered valid transitional XHTML code. In other words, future Web browsers probably won't understand options like Absolute Middle or TextTop. Furthermore, strict XHTML doesn't offer any alignment options for the image tag.You can, however, use Cascading Style Sheets to provide alignment for images. The CSS left and right Float properties discussed on Section 6.7.4 work the same as the Left and Right options. You can apply top, middle, or bottom alignment by setting the Vertical Alignment property found in the CSS Block category (see Section 6.7.3).

5.2.5. Some Properties to Avoid

You'll notice that the Property inspector includes a few other properties (see Figure 5-4) that seem intriguing and possibly usefulV Space, H Space, and Border. These properties affect the margins and borders around an image. However, they should be avoided. Not only are these properties so Web-Design-Circa-1999, but they're on the way out and unsupported in some versions of XHTML. In addition, they offer very anemic design control. For example, you can't easily control the color of the border around the image, nor can you specify different margins for both the right and left or bottom and top edges of an image.

Fortunately, you'll find that Cascading Style Sheets once again come to the rescue. The CSS Margin property lets you provide pixel-level control over each edge of an image (see Section 6.7.4.1), while the CSS Border property (Section 6.7.5) not only lets you control the color of an image's four borders, but even lets you specify different colors, styles, and widths for each individual border.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net