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).
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.)
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).
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."
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/. |
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).
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.
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.)
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.
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.
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.