Working Smart with Images

[ LiB ]

As simple as the basic mechanics of images are, there are countless ways to work with them, to have trouble with them, and to be creative with them. And Dreamweaver has a host of image- related features to make your pictorial web work as fun and efficient as possible.

Making Your Images Accessible

Images are inherently inaccessible to people with visual disabilities . Your job as a web author is to make them accessible by providing alternate text descriptions, short and long. Images are included under Section 508, § 1194.22(a):

A text equivalent for every non-text element shall be provided (e.g., via alt tags, longdesc , or in element content).

The main mechanisms for accomplishing this in HTML are alt and longdesc , both attributes of the img tag.

alt This contains a short text equivalent for an image. It is used any time the image cannot be seen, which means that even graphical browsers will display it if the image can't be displayed. (Internet Explorer also displays alt text when the mouse hovers over an image, although it isn't what alt was intended for.) Every image in your document should include an alt attribute. Images that have no significance, such as spacer images, should include an empty alt attribute.
longdesc If your image's meaning can't be summed up in the brief alt text, you can optionally assign a longdesc attribute. This attribute should contain the URL of a page with a full-text description of the image. (So far, this attribute isn't very well-supported. But your job as web author is to provide the options, not to deal with failures of assistive technology.)

If you want an image to display a ToolTip without violating any W3C standards, add the title attribute to the image with a short text message. Some browsers display this in ToolTip form; others display it in the status bar.

Using these guidelines, various image tags in a document might look like this:

 <img src="fido.jpg" alt="Fido with his favorite toy"> <img src="spacer.gif" alt=""> <img src="statemap.gif" alt="State Map showing company district  divisions" longdesc="statemap_desc.htm">

The last of these examples requires that you also create an HTML document called usmap_desc.htm, which contains as much text as necessary to convey the information in the image.

Making Images Accessible in Dreamweaver

Images are prime culprits in inaccessible web pages because, by their very nature, they're not accessible to those with visual disabilities. The solution to this problem is to always provide text equivalents of some kind for all images on your pages.

Before the Fact: Set Accessibility Options

Before you start inserting images, make sure you have accessibility options for Images turned on (Edit > Preferences/Accessibility). When this is enabled, the next time you insert an Image object you'll be presented with a second dialog box, allowing you to set alt and longdesc (see Figure 5.4). If you don't enter values for either attribute, that attribute won't be added to your document.

Figure 5.4. The Image Tag Accessibility Attributes dialog box in action.

After the Fact: Property Inspector, Tag Inspector, Edit Tag Command

After you've inserted your image, you can set alt text at any time by selecting the image and using the Property Inspector. longdesc can be added or edited with the Tag Inspector or the Edit Tag command.

Empty alt text for spacer images According to the rules, non-significant images, such as those that contain purely decorative elements or spacers, should be given empty alt attributes. This stops screen readers from having to read the image information. To create an empty alt attribute in Dreamweaver, use the Alt drop-down menu in the Property Inspector to choose <empty> (see Figure 5.5).

Figure 5.5. Using the Property Inspector to add an empty alt attribute to a spacer image.
Searching for missing alt text Not sure whether you used alt text for every image in the site? You can search for images without alt attributes in the current document, folder, or site. Choose Site > Reports, and select the Missing Alt Text report (see Figure 5.6). Here's a warning, though: This report identifies any empty alt attributes (as described in the previous paragraph) as missing, which, of course, they're not.

Figure 5.6. Running a site report to look for missing alt text.

Integrated Image Editing

New to Dreamweaver MX 2004, certain basic image-editing activities, such as cropping, resampling, and handling image enhancement, can now be performed on images from within Dreamweaver. Of course, Dreamweaver isn't primarily an image editor, so leave the sophisticated image-editing tasks to Fireworks, Photoshop, or whatever your graphics editor of choice is. But for quick adjustments on-the-fly , they're a great innovation. The image-integration features are part of the Image Property Inspector (see Figure 5.7), ready for action whenever you select an image that has been placed in a Dreamweaver document. They're also available in the Modify > Image submenu. They can be used on any image that's placed in a Dreamweaver document, but they're most commonly useful for photographic images, in which subtle color differences are important and cropping is often required.

Figure 5.7. The Image Property Inspector, highlighting the image-editing tools.

It might take some getting used to, but remember that any change you make using these tools affects the image file itself, unlike other changes the Property Inspector lets you make. The width and height fields, for instance, just alter the dimensions the image displays at in the page, not the image file's actual dimensions.

In addition to adding image-integration features, the new Image Property Inspector includes an Optimize Image in Fireworks button. For more information on this and other Fireworks integration features, see the section "Dreamweaver/Fireworks Integration" later in this chapter.

Cropping Images

Cropping means cutting away part of the image so that some of it is lost. The resulting image is still rectangular (cropping isn't like masking or other sophisticated transparency effects). But parts of it have been chopped away.

To crop an image in Dreamweaver, select it and either click the Crop button in the Property Inspector or choose Modify > Image > Crop. Dreamweaver warns you that this will change the original image. Click OK to close the alert window. The image now displays with a cropping rectangle in front of it (see Figure 5.8).

Figure 5.8. Cropping an image in the Dreamweaver Document window.

The area inside the rectangle will be the area that remains after you've cropped the image. Drag the selection handles on the edges of the area and reposition them to determine where the image should crop. The parts of the image that fall outside this rectangle will display with a gray film over them, indicating that they'll be deleted if you crop the image.

When you've adjusted the cropping rectangle to your liking, either press Enter or double-click inside the image to confirm the change and crop the image.

How do you cancel once you've started cropping? Click in the Document window outside the image to deselect it. This closes the cropping window without changing the image.

Adjusting Brightness and Contrast

Brightness determines the overall lightness level of an image. If you increase the brightness of an image, all colors in the image get uniformly lighter. If you decrease brightness, they get uniformly darker. Contrast determines how light the light areas of the image get, how dark the dark areas get, and how many midtones the image contains. A high-contrast image has very light and very dark tones, but very few midtones. A low-contrast image has lots of midtones, but the light areas aren't much lighter than the midtones, and the dark areas aren't much darker .

To adjust the brightness or contrast of an image, select it and click the Brightness/Contrast button in the Property Inspector, or choose Modify > Image > Brightness/Contrast. A dialog box opens (see Figure 5.9) with slider controls for brightness and contrast. Move the sliders up and down to change the image, or enter numbers in the input fields. When you're done, click OK to close the dialog box and change the image.

Figure 5.9. Adjusting brightness and contrast of an image in Dreamweaver.

Adjusting Sharpness

Sharpening an image makes its details look sharper, more in focus. It might even give the illusion that it's adding detail to the image. What sharpening does is look for areas in the picture where dark pixels meet light pixels. Assuming that these meeting points represent details in the image, such as the edge of a face against a background or a nose against a cheek, the contrast between light and dark along the edge is exaggerated. This makes the edge stand out more. Because the very nature of the digitizing process can make images look slightly soft and fuzzy, sharpening is an important tool for digital editing.

To adjust sharpening for an image in Dreamweaver, select it and click the Sharpen button in the Property Inspector, or choose Modify > Image > Sharpen. The Sharpen dialog box appears, with a sharpness slider (see Figure 5.10). Move the slider from left to right to increase sharpness. When you're done, click OK to change the image.

Figure 5.10. Sharpening an image in Dreamweaver.

It's important to realize that although adjusting brightness and contrast or increasing sharpness can make the details of an image stand out more than they did before, none of these commands can create details where there were none before. Furthermore, every time you adjust the image, you're distorting it and losing data. It's a bad idea to adjust the same image more than once or twice.

Resampling Images

Each pixel-based image has a certain number of pixels in it. When you resize an image in Dreamweaver by selecting it and changing its width and height properties in the Property Inspector, you're not actually changing the number of pixels or anything else about the image file itself. You're just telling the browser to display the existing pixels of the image bigger or smaller. That's why images resized to be larger using this method look fuzzy and pixelated.

Actually changing the number of pixels in an image is called resampling . The computer either subdivides pixels, thus adding to the total number, or combines pixels, reducing the total. Resampling always introduces at least some distortion into the image because the computer doesn't always guess right about what color to make the subdivided or combined pixels. But an image that has been resampled to make it bigger generally looks better than an image that has just had its existing pixels enlarged.

Resampling in Dreamweaver isn't relevant unless you've already resized the image by changing its width and height properties (either through the Property Inspector or Tag Inspector, or by dragging its edges in the Document window). After you've done that, the Resample button in the Property Inspector becomes enabled. Select the image and click this button to subdivide or combine pixels so that the image's actual dimensions match the altered width and height properties in the HTML.

Images As Backgrounds

Ever since browsers started supporting images, web page creators have been usingand misusing!images as background elements. Image backgrounds are commonly assigned to pages, tables, and layers . A background image can be tiled horizontally and vertically to fill an assigned space. Text and other graphic elements can be placed in front of the background image without using CSS layering techniques. Background images can be as straightforward as a repeating wallpaper pattern behind the page (as in Figure 5.11) or can be more sneakily applied as nonrepeating watermarks, side banners, and so on (as in Figure 5.12).

Figure 5.11. A wallpaper-style background image applied to a page.

Figure 5.12. Background images used as side banner and watermark images.

Tiled Image Backgrounds the Old-Fashioned Way

Long before CSS came on the scene, images were being used as background elements, courtesy of the background attribute. Assigning a background attribute to the body tag gives a repeating image background for the entire page. Assigning a background attribute to a table, table row, or table cell , tiles a repeating image behind just those elements.

 <body background="flowers.jpg"> <table background="polkadots.gif">

In Dreamweaver, apply a background image to a page (i.e., to the body tag) by choosing Edit > Preferences, going to the General category, and deselecting the Use CSS instead of HTML Tags option. Then choose Modify > Page Properties and change the background color in the Appearance category of the dialog box. Assign backgrounds to tables and other page elements by using the Bg image field in the Property Inspector (see Figure 5.13).

Figure 5.13. Assigning (non-CSS) background images to page elements in Dreamweaver.

This method of assigning background images is still valid HTML and might be all you need, but it has its limitations compared to CSS:

There is no way of controlling image tiling. The browser automatically tiles the image as often as needed, horizontally and vertically, to fill available space. Although this isn't necessarily a bad thing, it might not always fit the bill.
There is no way of controlling image positioning. The tiling starts in the upper-left corner and repeats from there.

If your target audience might be using Netscape 4, be aware that when a background image is applied to a table without using CSS, it will be tiled incorrectly.

Image Backgrounds with CSS

Now in the days of CSS, the theory of background images hasn't changed, but we have a more efficient and powerful means of applying them. Redefined page elements and custom classes can all contain various background-image properties, like this:

 background-image: url(/books/1/74/1/html/2/myimage.gif); background-attachment: scroll; background-repeat: repeat-x; background-position: 0px 2px;

Table 5.2 lists these style properties and what they mean.

Table 5.2. CSS Style Properties for Background Images

Property Name	Values	Description
`background-image`	URL(URL string)	The image to use in the background
`background-repeat`	`repeat-x` , `repeat-y` , `no-repeat`	How to tile the image ( `x` is horizontal, `y` is vertical)
`background-position`	Two coordinates	Where to position the background in relation to its parent element (the page, table or table cell the background is attached to)
`background-attachment`	`scroll` , `fixed`	Whether the background should scroll or remain fixed when the page scrolls in the browser window

To assign a background image to any page element (including the body tag itself), use CSS by defining a style that includes background properties. Like this:

Open the CSS Styles panel (Window > CSS Styles) and click the New Style button at the bottom of the panel, or right-click in the CSS tab of the Tag Inspector and choose New Rule.
When the New CSS Style dialog box opens, choose whether to create your style in the current document or in a separate style sheet document, and whether to redefine an existing HTML tag or create a custom class. If you're assigning a page background, redefine the body tag. If you're assigning a background to a table, table row, or table cell, ask yourself whether every single table, row, or cell is going to have this same background (probably not). If not, create a custom class for your background image.
Click OK to close this dialog box and open the CSS Style Definition dialog box. In that dialog box, go to the Background category and assign your various image properties (see Figure 5.14). When you're done, click OK to close this dialog box.

Figure 5.14. Creating a CSS Style that adds a background image to a page or page element
If you redefined an HTML tag (such as body ), you're done. If you created your background in a custom class, you'll need to apply it to the table or other page element that needs a background. Do this by selecting that element so its tag appears in the Tag Selector, right-clicking the tag in the Tag Selector, and choosing from the Class submenu that appears.

To assign a background image to the page itself (i.e., to the body tag), you can either use the preceding steps to redefine the body tag; or you can choose Edit > Preferences and, in the Preferences dialog box, go to the General category and make sure the Use CSS instead of HTML tags option is selected. Then choose Modify > Page Properties and use the Background Image field in the Appearance category to assign an image (see Figure 5.15). Dreamweaver will automatically create a CSS style that redefines the body tag for you.

Figure 5.15. Using the Page Properties dialog box to create a CSS-based page background.

See Chapter 11, "Using Cascading Style Sheets," for a full discussion of CSS.

Creative Background Effects

Budding web designers always want to know how to create those cool integrated text-and-graphics effects they see in so many websites . Often the answer involves creative background effects.

Use Vertical Tiling to Create Sidebar Graphics

How many left-side navigation sidebars have you seen in your life?

They've been around forever (see Figure 5.16). With CSS, creating them and making them efficient is simple. Do this:

Figure 5.16. A typical web page with sidebar graphic for navigation controls.

In your graphics program, design the sidebar graphic the way you want.
Presumably, you want the sidebar to extend from top to bottom of every page, but only on one side. The idea is to tile the image vertically but not horizontally. Still in your graphics program, ask yourself how short the image can be to create the result you want when tiled vertically. The most efficient sidebar graphics are only a pixel or two high and are as wide as the sidebar (see Figure 5.17).

Figure 5.17. A sidebar graphic before and after cropping in Fireworks.

When you've determined the ideal dimensions, crop the image to that size (or create an image slice that size) and export it.
In Dreamweaver, create a CSS style following the instructions in the previous section, setting the Repeat option to repeat-y .

If you need to design your page backgrounds without CSS for some reason, you can still stop the image from tiling horizontally by making it wider than the browser window. Before CSS came along, it wasn't at all uncommon to see background images that were 1 pixel high and a few thousand pixels wide.

Put Colored Tables in Front of Wallpaper

As long as there have been background images on web pages, there have been a few designers who put text in front of wallpaper-type patterns. It's almost never readable unless the pattern is so subtle that it's hardly visible.

A creative solution to this problem is to put the text in a solid-colored object (such as a table cell or layer) that sits in front of the page background (see Figure 5.18).

Figure 5.18. The Crayola website gets to be colorful and readable by putting solid-colored table cells in front of a patterned page background.

Mix and Match to Create Efficient, Flexible Image Effects

The next time you're getting ready to drop an image in a navigation bar, title banner, or sidebar, ask yourself whether mixing and matching background and foreground images, or background colors and images, can help you.

Figure 5.19, for instance, shows a title banner that stretches and shrinks with the browser window. How was that built? With a 100% width table containing a foreground image aligned left and a 1-pixel wide background image tiled horizontally across the table.

Figure 5.19. A flexible title banner created from a mixture of background and foreground graphics.

Figure 5.20 shows a nonrectangular-looking layout box, created from a table that mixes background cells, colors, and foreground images. No magic HTML skills are involved herejust some sneaky application of basic tables and images. Not only are these designs graphically inventive , but because they rely on reused images and background colors, they're efficient for downloading as well.

Figure 5.20. A mixture of images and colored table cells creates a striking layout shape.

Images and Page Structure

No image is an island unto itself. In web design, images are key players in building web pages. Because web pages today are largely structured with tables, images work within tables to create page structure. They can work invisibly as spacers stabilizing table structure, or visibly as part of table-based layouts and sliced image tables. This section looks at both of those uses.

Single-Pixel GIFs

A single-pixel GIF is just what it sounds like: a GIF image consisting of only a single pixel, usually made transparent. These little units are popular with web designers because they easily solve some common layout problems and contribute to some interesting design possibilities. They're often referred to as spacer GIFs or shims .

Creating Single-Pixel GIFs

A single-pixel GIF can easily be created in any web graphics program. Just open a new document with the canvas size set to 1x1 and canvas (or background) color set to transparent. Then save or export as a GIF with transparency enabled. Figure 5.21 shows this happening.

Figure 5.21. Creating a transparent single-pixel GIF image in Fireworks.

Single-Pixel GIFs in HTML

The most common use for single-pixel GIFs in HTML design is to prop open table cells and stabilize table structure. Insert one of these transparent images into an otherwise empty table cell, and assign the image whatever width and height you want the table cell to have. A very solid table can be constructed by adding an extra row or extra column that consists of nothing but differently sized transparent GIFs. Designers call these control rows and control columns .

When Fireworks generates sliced image tables for you, or when Dreamweaver creates a table in Layout mode or uses the Convert Layers to Table command, the programs add control rows and columns filled with transparent GIFs. The programs even create the single-pixel GIF images for you! Fireworks calls its transparent GIFs spacer.gif. Dreamweaver calls its transparent GIFs either spacer.gif or transparent.gif. If you've used any of these table-generating features, you probably already have at least one transparent single-pixel GIF in your site folder. Feel free to use it.

Using Single-Pixel GIFs in Dreamweaver

You insert a single-pixel GIF the same way you would insert any image. The only problem is, these images are tiny, so they can be difficult to see in Design view. Insert the single-pixel GIF this way:

Nontransparent single-pixel GIFs have also been used on web pages as colored rules and square bullets. Because each GIF can be only one color, resizing won't distort it. Increasingly, however, CSS is being used to generate this kind of effect.

Insert the image as normal. It will automatically be selected when it appears in the document.
Don't deselect it or you'll have a hard time finding it again. Immediately use the Property Inspector to assign width and height. Also assign an empty alt label (by choosing <empty> from the Alt field drop-down menu).

If you lose a single-pixel GIF, select the items around it and go to Code view. Somewhere in the selected code, you'll find the <img> tag. Change the width and height there.
Even after it has been resized, the transparent image is impossible to see (it's transparent!). But if you know approximately where it is, you can click around in the general area until you find it.

Sliced Image Tables

What's a sliced image table? It's what you get when you create a layout (such as a navigation bar or title banner) in a web graphics program, divide it up with slice objects, and export the HTML and images. What's wrong with sliced image tables? Nothing, really. They're usually tightly structured and well-behaved in browsers, and our lives are a lot easier for having them around. But the page structure they create is not as simple or as flexible as it might be. The complex tables they build can take longer to display in the browser than simpler tables, and they sometimes generate more images than they need to.

What can you do to streamline your image-heavy layouts? Whether you decide to construct your own tables or to clean up tables exported from graphics programs, here are some things to watch out for.

One Cell, Multiple Images

When a graphics program generates a sliced image table, every image gets its own table cell. That's not always necessary. Figure 5.22 shows a horizontal navigation bar created from a row of images. Taken on their own, these images don't need to be in a table at all, and if they are in a table, they can occupy one big cell. Just be sure to set the cell to nowrap (enable the No Wrap option in the Table Cell Property Inspector) so the images all stay in one line.

Figure 5.22. A row of buttons created in separate table cells (top) and in one big table cell (bottom).

Vertical sets of images aren't quite as straightforward to handle without a multirow table, but it can be done. Separate the images with a line break (press Shift+Enter to insert a br tag), or place them in one table cell or layer that has a width assigned that matches the image width.

Image Padding vs. Spacers

Sliced image tables insert spacer images wherever items need to be separated, but that's not always necessary. Side-by-side (or top-to-bottom) images can also be separated by padding them with vspace and hspace (non-CSS) or padding (CSS), or by adding cellpadding to the table cells they're in. Figure 5.23 shows a row of three buttons separated simply by assigning hspace to the middle image; hspace assigns space on both sides of an image, so only the middle image needs it to separate all three images.

Figure 5.23. A row of buttons created in one table cell, separated by hspace.

Reuse, Resize, Replace

Sliced image tables also tend to generate a separate image for each cell in the table, even though it would sometimes be more efficient to reuse one image more than once. Images are also generated at full size, even though sometimes a smaller image could be resized to create the same effect. Examine your sliced images and determine whether this is happening. If it is, replace multiple images with instances of one. Replace larger images with smaller ones. Pay special attention to the spacers that get tucked in all the nooks and crannies. For efficiency, all invisible spacers should be created from one single-pixel GIF. (See the section "Single-Pixel GIFs," earlier in this chapter, for more on this use of graphics.)

Figure 5.24 shows a navigation bar with rollover effects that could easily be created by reusing one single triangle graphic.

Figure 5.24. A sliced image table that could be streamlined with resized graphics.

Streamlining Table Generation in Fireworks

If you use Fireworks to create your sliced image tables, follow these guidelines to help the program generate efficient HTML and images:

Carefully align all slice objects to create as few rows and columns as possible.
Draw slice objects wherever graphics need to be generated, leaving empty areas only where a page or table background should show through.
Choose File > HTML Setup and use the Table tab in the HTML Setup dialog box to fill empty cells with a spacer image.
When exporting, deselect the option Include Areas Without Slices. (Table cells generated from areas without slices will be filled with a resized single-pixel spacer GIF.)

Incorporate Background Elements

Web graphics programs generally don't generate background images or rely on background colors as part of their output. But you can be smarter than that! Analyze your table structure and see how many images you can replace with background elements. Figure 5.25 shows a typical image table that could use cell colors for its backgrounds.

Figure 5.25. A sliced image table that could use cell background colors instead of foreground images to create its effect.

Respect the Table Structure

If you're making your own tables to hold images, it's up to you to make the table solid and stable. But before you start altering a Fireworks- or Photoshop-generated table, make sure you understand its original structure so you don't break it. Sliced image tables are stable because of how they're structured. Fireworks tables, for instance, have the following structural characteristics:

Individual cells have no measurements, but the overall table has a pixel-based width.
A "control row" and "control column" of single-pixel GIFs have been placed at the top and right edges of the table to keep its internal elements from shifting. These items are there for good reason; if you disturb them, the table might not display properly in the browser.

For more on table stabilization, see the section "Making Tables Behave" in Chapter 8, "Building Tables."

Figure 5.26 shows the diagrammed structure of a typical Fireworks-generated table.

Figure 5.26. A Fireworks-generated table, expanded to show its structure.

Positioning Images with CSS-P

As long as your target audience doesn't include Netscape 4. x or any older browsers, you can create some wonderful layout effects with CSS-positioned images that seem to float above the rest of the page. Figures 5.27 and 5.28 show some examples of this in action. To create a CSS-positioned image in Dreamweaver, do this:

Figure 5.27. A CSS-positioned image hugging the right edge of a title banner layout.

Figure 5.28. A CSS-positioned image at the left edge of a banner, overlapping various elements beneath it.

Create the image as normal.
Insert the image in a document by placing the insertion point at the beginning of the body content and then using the Insert bar or Insert > Image command. Make sure the image isn't inside any other tags, such as tables, paragraphs, or headings.
Open the CSS Styles panel (Window > CSS Styles) and click the New Style icon (or right-click in the CSS tab of the Tag Inspector and choose New Rule). When the dialog box opens, choose to create a custom class called .image or .logo or some other descriptive name like that. Click OK to close the dialog box.
In the CSS Style Definition dialog box, go to the Positioning category. Choose Absolute Positioning, and assign any numeric value to either Left or Right, and either Top or Bottom. (The values don't matter because you can change them later.) Click OK to close this dialog box.
In the Document window, select the image. In the Tag Selector, right-click the img tag and choose your custom class from the Set Class submenu.
Your image is now positioned through CSS. You can adjust its position on the page by clicking its edge so that the Layer Property Inspector appears, and dragging or nudging it on the page. Your image will also float above all other nonCSS-positioned elements on the page.

One word of warning about floating images like this: If the image is a GIF with transparency effects, you might have to think carefully about how to antialias (or alias) the edges so that it blends in smoothly with whatever it's floating over.

Lowsrc: Your Low-Bandwidth Friend

Lowsrc is one of the unsung heroes of the HTML world. So many wonderful things on web pages work best only for high-bandwidth users, but lowsrc is at its best for low bandwidth. What is lowsrc ? It's an alternate image you can specify that will appear in the browser window as a place-holder until a larger, slower-to-download image is ready to appear. Let's say you have a really terrific photo of Niagara Falls or astronauts landing on Mars, and you really need it on your web page, but it's a whopping 30K or more. Create an alternate version of the image, with the same dimensions, but very simple, that weighs in at 1K, and specify it as a lowsrc for the main image. The user with a slow connection will see the lowsrc image on the page until the main image downloads and is ready to display.

To create and insert a lowsrc image, follow these steps:

In your web graphics program, open the large image. It's probably a full-color GIF or JPEG in glorious technicolor.
Change the export/optimization settings to create a two-color GIF (black-and-white is popular, but any two colors will do), tinkering until you get the file size down as low as possible, and export or save to create the GIF. (There's not much point in a lowsrc image that doesn't download almost instantly.)
In Dreamweaver, insert the main image in your page wherever you like.
With the image selected, look in the Property Inspector for the Low Src field. Browse or point and shoot to select the lowsrc version of the image.

That's it! You won't be able to preview your lowsrc version locally because the main image will appear too quickly. But on a slow connection, the effect looks almost like animation, taking advantage of the slow appearance of the main image.

Blocking Out Layouts with Image Placeholders

How many times have you had to design a page around text and graphics that don't yet exist? Have you ever been right in the swing of building a page when you realized you needed a graphic you hadn't created yet, so you had to stop and put something together before continuing? Graphic designers in the print world use greeked text and FPO (for placement only) image placeholders. In Dreamweaver, you can use one of the fake text generators to create some greeking for you in a hurry. And you can use the Image Placeholder object to create the code for a picture of any size, until the real thing comes along. Figure 5.29 shows what it looks like.

Figure 5.29. An image placeholder (along with some greeked text) in Dreamweaver Design view and in the browser.

For more on greeking, see the section "Lorem Ipsum and Other Bits of Greek" in Chapter 4, "Working with Text."

Inserting Image Placeholders

To create and insert an image placeholder in Dreamweaver, do this (as shown in Figure 5.30):

Figure 5.30. Inserting an image placeholder.

With your document open, place the insertion point wherever you want the temporary image inserted.
In the Common Insert bar, choose the Image Placeholder object from the Images objects, or choose Insert > Image Objects > Image Placeholder from the menu.
The Image Placeholder dialog box appears. Assign a width and height to determine how much space the image will occupy, a color for the placeholder (gray is a good choice if you don't want the placeholder to distract you from your main color scheme), alt text for accessibility and to display in the browser, and a name that will appear in the placeholder in Design view to remind you what's supposed to go there. (The name has to be valid for scripting purposes, so don't use any spaces or special characters .) When you've set these options, click OK to close the dialog box and insert the placeholder.

If you examine the code for your placeholder, you'll see that it's a regular img tag, with an empty src attribute and an inline CSS style attribute setting the background color. There's nothing nonstandard about this coding, so the browser has no trouble interpreting it. Because there's no source and the image can't actually be displayed, the browser uses the background color and alt text in its place.

Working with Image Placeholders

Use the image placeholder not just to block out where the final image will go, but also to help you determine its ideal dimensions. Resize it using the Property Inspector or resize handles. The current dimensions are displayed in the placeholder itself, as well as in the Property Inspector. When you're ready to generate your final image, use these dimensions as your guide. After the image has been created, return to Dreamweaver, select the placeholder, and use the Property Inspector to assign an src . After the src file has been set, the placeholder turns into a regular Dreamweaver image object.

If you're using Fireworks, creating the final image from the placeholder is even easier than that. When you're ready to create the image, select the placeholder and, in the Property Inspector, click the Create button. This launches Fireworks and opens a new document with the canvas size set to your placeholder's dimensions. Create the final image and click the Done button in the Fireworks window; Fireworks walks you through saving and exporting before returning you to Dreamweaver.

Dreamweaver/Fireworks Integration

If you use Dreamweaver for your web editing and Fireworks for graphics building, you can take advantage of some powerful features integrating the two programs.

For Dreamweaver/Fireworks integration to work, you must have assigned Fireworks to be your primary graphics editor in Dreamweaver Preferences. See the section "Editing Images," earlier in this chapter, for more details on doing this.

How Integration Works

How does integration across the Macromedia product line work? More important, how can you not get in its way as it's working? The various programs of Studio MX 2004 talk to each other by leaving each other HTML comments and Design Notes.

HTML comments show up in any Fireworks-generated HTML, telling Dreamweaver any important details about how the HTML was generated, what source file created it, and so forth:

 <!-- Fireworks MX Dreamweaver MX target. Created Wed May  21 11:48:11 GMT-0600 2003--> <!-- fwtable fwsrc="mydog.png" fwbase="mydog.jpg" fwstyle=  "Dreamweaver" fwdocid = "742308039" fwnested="0" -->

When you select a Fireworks-generated table in Dreamweaver, if it sees these comments, it shows the special Fireworks Table Property Inspector and enables launch-and-edit.

Design Notes are tiny XML files with the .mno filename extension, stored in folders named _notes. You've probably seen them on your hard drive and maybe wondered what they were. Whenever you export an image from Fireworks into a folder that is part of a Dreamweaver local site, Fireworks creates a Design Note named after the exported file, with the .mno extension added. So, mydog.jpg creates a Design Note file called mydog.jpg.mno. It puts this MNO file in a folder called _notes, located in the same folder where the image has been exported. If there isn't a _notes folder, it makes one. Inside the MNO file is this little bit of XML:

 <?xml version="1.0" encoding="iso-8859-1" ?> <info>    <infoitem key="fw_source" value="/images/mydog.png" />    <infoitem key="fw_slice_info" value="0 c8 64 0 0 71 64  0" /> </info>

Back in Dreamweaver, when you insert that image and then select it, the program looks for the MNO file. If it finds one, it knows that this is a Fireworks-generated image and you get the special Fireworks Image Property Inspector. It also knows the location of the PNG file that generated this image, which makes launch-and-edit possible. If the image was created from a slice in Fireworks, the MNO file also includes a line of code indicating which slice generated it.

How can you goof up this system? By deleting the HTML comments, _notes folders, or MNO files! Deleting the comments disables integration features for Fireworks-generated HTML items, such as sliced image tables. Deleting the _notes folder or MNO file disables integration features, such as launch-and-edit, for individual images.

Insert Fireworks HTML

The Fireworks HTML object provides an easy method of getting a sliced image table, along with any JavaScript it uses for rollovers and such, into an existing Dreamweaver document. Why is this important? Most people don't generally use Fireworks to generate entire web pages. Instead, they build only the navigation bar or only the title banner in Fireworks and create the rest of the page in Dreamweaver. Fireworks HTML is much too restrictive to work well for general-purpose, text-heavy page layouts. The Fireworks HTML object fits nicely into this workflow. Use it like this:

In Dreamweaver, build the layout for your page, including whatever layout tables and CSS layers are required for formatting. Leave space for the sliced image table.
In Fireworks, create a file just the size of the navigation bar, title banner, or other page element you want to build here. Create your graphics, draw slice objects, assign links and behaviors, and do whatever else you need to.
Before you export, choose File > HTML Setup. In the HTML Setup dialog box, make sure the HTML Style is set to Dreamweaver HTML. This causes Fireworks to add the comments Dreamweaver needs for integration to work properly.
When you export, be sure to select HTML and Images in the Export dialog box.
In Dreamweaver, open the document where the Fireworks elements should be inserted, and place the insertion point where the items should appear.
From the Insert bar, choose Fireworks HTML (see Figure 5.31). When the dialog box opens, browse to select the HTML file that Fireworks generated (don't worry about finding the imagesDreamweaver will find them). Unless you plan to reinsert this Fireworks HTML in another Dreamweaver document, select the option Delete File After Insertion. When you're done, click OK to close the dialog box and perform the insertion.

Figure 5.31. Inserting Fireworks HTML into a Dreamweaver document.

In your Dreamweaver document, you now have the Fireworks table and any related JavaScript code, along with HTML comments identifying them. From now on, when you select the table, Dreamweaver will display the special Fireworks Table Property Inspector. In addition to the regular table properties, this inspector lists information needed for launch-and-edit.

Launch-and-Edit

Launch-and-edit is the generic term Macromedia uses to describe a key feature in its cross-program integration: the capability to select an item generated in one program (such as Fireworks or Flash) from within another program (such as Dreamweaver) and automatically launch the parent program, open any required source file, make desired edits, and return to the launching program. For Dreamweaver/Fireworks integration, this means selecting a Fireworks-generated image or table, clicking the Edit button in the Property Inspector, and having Fireworks automatically launch and open the source PNG file, ready for editing. The basic process is simple:

In Dreamweaver, select the image or table and click the Edit button in the Property Inspector. Or, right-click the image and, from the contextual menu, choose Edit with Fireworks.
When Fireworks comes to the forefront, its document window will have a special launch-and-edit bar at the top (see Figure 5.32). Make whatever edits you like and, when you're done, click the Done button.

Figure 5.32. The Fireworks Document window in launch-and-edit mode.
Fireworks now saves the PNG file, re-exports as needed, generating new images or HTML, and closes the file.
Dreamweaver comes back to the forefront and reloads any changed images or HTML.

This sounds great! But what can go wrong? After you've imported Fireworks HTML into Dreamweaver, you have to be careful about what you do with it there if you ever want to use launch-and-edit to update it. Changing links, alt text, and other nonstructural information in the HTML generally isn't a problem. But if you make any structural changes to the table (such as the table simplifications discussed earlier in this chapter) and then try launch-and-edit, you'll be warned that Fireworks will overwrite those changes when it updates your HTML. Don't let that happen! The same thing will happen even if you select an individual image within the sliced image table and try to use launch-and-edit: Even though you might want to update only that one image, Fireworks will regenerate the entire table.

On-the-Fly Optimizing

One of the coolest integration tools is the capability to reoptimize images on the fly from within Dreamweaver. Let's say you've imported that animated dancing baloney for the "what's new" page, and when you get it into Dreamweaver you realize that you should have optimized it as a JPEG, or the GIF transparency isn't working, or the animation timing is off. Select the image and choose Commands > Optimize Image in Fireworks, or right-click the image and choose Optimize Image in Fireworks, or click the Optimize in Fireworks button in the Property Inspector. Fireworks launches and takes you directly to a special version of the Export Preview dialog box called Optimize Image. There you can update your optimization settings and click Update; Fireworks re-exports the image with the new settings and returns you to Dreamweaver. Figure 5.33 shows this happening.

Figure 5.33. The Optimize Image in Fireworks command at work.

On-the-fly optimizing is especially handy when it comes to resizing files. You might be working on a page with several images in place and realize that one of the images needs to be bigger or smallerbut you're not supposed to resize images in Dreamweaver, so what do you do? Resize the image, leave it selected, and choose Commands > Optimize Image in Fireworks (or right-click the image and choose the command from the contextual menu). When the Optimize Image dialog box opens, the file will be set to optimize at its new size. After you've clicked Update and returned to Dreamweaver, take a look at the width and height indicators in the Property Inspector. You'll see that they're no longer in bold, meaning that the image has now been properly resized.

Visit the Exchange: Fireworks Integration Extensions

If the built-in integration features between Dreamweaver and Fireworks aren't enough for you, the Dreamweaver Exchange has several extensions that do even more. These include two free extensions authored by Macromedia: InstaGraphics Extensions for Dreamweaver MX and Web Photo Album 2.1 for Dreamweaver MX.

InstaGraphics Extensions for Dreamweaver MX 2004

According to Macromedia, this extension enables you to instantly create Fireworks Web graphics directly from Dreamweaver without expert design skills and without even knowing Fireworks. It includes three items: the Convert Text to Image command, the Convert Bullets to Images command, and the Fireworks Button object.

Convert Text to Image command As its name suggests, this command creates an image of any Dreamweaver text, with the font and style of your choice (see Figure 5.34). You can tell it to change all selected text or all text in the document within certain tags (such as all h1 text). You can find this command in the Commands menu.

Figure 5.34. The Convert Text to Image command, part of the InstaGraphics suite of extensions.
Convert Bullets to Images command Convert any or all unordered lists in your document into lists built from graphic bullets and tables for good formatting (see Figure 5.35). You choose the size and style of bullet, and Fireworks even makes sure it blends with your document's background color. (Note that when you're done with the command, your list isn't technically a list anymore because it's not within ul tags.) You can find this command in the Commands menu.

Figure 5.35. The Convert Bullets to Images command, part of the InstaGraphics suite of extensions.
Fireworks Button object This object works much like the Flash Button object that's been in Dreamweaver for a few versions now. It lets you choose a button style, assign your own text and link information, and create a button with rollover code already applied (see Figure 5.36). It's like a shortcut for you creating the button and its rollover state, adding the Swap Image behavior, exporting the whole shebang from Fireworks, and bringing the HTML into Dreamweaver. It's quite a timesaver as long as you like the button styles that it gives you to choose from. You can find this object in the Insert bar's Media tab.

Figure 5.36. The Fireworks Button object, part of the InstaGraphics suite of extensions.

Web Photo Album 2.1 for Dreamweaver MX (Macromedia)

This popular extension lets you create your own HTML photo album from existing photos on your computer. You choose the graphic style and other details, and you choose which photos to include. It generates thumbnails, HTML pages for display, the whole works. The interface takes the form of a wizard walking you through easy steps, so it's very intuitive (see Figure 5.37). You can find this command under the Commands menu.

Figure 5.37. The wizard interface for the Web Photo Album 2.1 command.

You can use the Web Photo Album 2.1 command if you don't have Fireworks on your system, but you won't be able to generate thumbnails.

Exercise 5.1. Putting Images Together into a Complex Title Banner

In this exercise, you bring together various graphics to create a well-structured , efficient title banner that mixes sliced images and background images. Before you start, download the chapter_05 folder from the book's website at www.peachpit.com to your hard drive. Define a site called Chapter 5, with this folder as the local root folder.

Figure 5.38 shows the title banner you need to create. It should contain rollover buttons and should be flexible, stretching all the way across the browser window as it resizes.

Figure 5.38. Layout for a title banner and navigation bar, to be created in Dreamweaver and a web graphics program.

The first issue you need to deal with is how this layout is best created. What kind of sliced (or nonsliced) images will it need? How should it be constructed? For the exercise, the following strategy will be used:

The nonflexible title and navigation bar in the center can be created in Fireworks (or other graphics program). The stretchy bar will be created by a mixture of background and foreground images, placed in a flexible table.

As a bonus for you Fireworks users, the chapter_5 folder also contains the source PNGs that these graphics were built from. top_left.gif, top_right.gif, and top_shim.gif were all exported from beartop.png. The sliced image table was exported from beartop-nav.png.

In the chapter_5 folder, open main.html . This file is where you'll construct the finished layout. It currently contains a flexible table set to 100% wide, with placeholder text indicating what will go in each cell. Figure 5.39 shows this file.

Figure 5.39. The file where the title/navigation banner will be built.
Before starting work, choose Edit > Preferences. Go to the Accessibility category and enable accessibility options for images.
Start by defining the background image. Open the CSS Styles panel (Window > CSS Styles) and go to Edit Styles mode; you'll see that the body tag has been redefined for this document (setting page margins to 0). Select that style in the CSS Styles panel and click the Edit Style button at the bottom of the panel to open the CSS Styles Definition dialog box.

In this dialog box, go to the Background category. For Background image, click the Browse button and choose top_shim.gif (in the chapter_5/images folder) as the source. To see how the tiling options work, move the dialog box so you can see your Document window and click the Apply button. Try choosing different options in the Repeat drop-down menu and clicking Apply to see how these options work. Finish up by setting the Repeat option to repeat-x , which will repeat the image across the top of the page. Click OK to close the dialog box.
Now you'll add two foreground images to make the top banner look rounded at its ends. In the leftmost cell of the table, delete the word left and, in its place, insert the top_left.gif image. When the accessibility options dialog box comes up, leave the alt field blankthis is a purely decorative image and shouldn't have any text in its alt label. After the image has been inserted, use the Property Inspector to set its alt text to <empty> .
Repeat the previous step for the rightmost cell of the table, deleting the word right and inserting the top_right.gif image. Again, assign an empty alt label.
The rounded banner effect is almost ready to preview. In the middle cell of the table, delete the word navbar and, using the Property Inspector, set the width of the table cell to 100%. This forces the left and right images to the outer edges of the window so that they look like a natural end to the background banner. Figure 5.40 shows what your page should look like at this point.

Figure 5.40. A background/ foreground image combination creating a flexible bar across the top of the browser window.
Now for the sliced image table that forms the central portion of the title/navigation banner. Place the insertion point in the center table cell and, from the Insert bar, choose Fireworks HTML. When the dialog box opens, choose to insert the banner.htm file. For purposes of the exercise, it doesn't matter whether you delete the file after insertion. Click OK to close the dialog box. Figure 5.41 shows the results.

Figure 5.41. A sliced image table sitting on top of a flexible background graphic.
The sliced image table looks almost perfect in its place, but it needs a few refinements. First, align it in the center of its table cell by clicking in the cell area outside the banner (so your insertion point is in the center cell of the main table); in the Property Inspector, set the Horiz drop-down menu to Center.

Don't worry if you don't have Fireworks on your system. The Fireworks HTML will still work.

Next, the sliced image table has a white background color applied to it. Select the table and, in the Property Inspector, find and delete the #ffffff background color.

The table is also 1 pixel too low compared to the graphics around it. That's because of the control row across the top of the table. Although it can sometimes be dangerous to delete the control row, in this case it won't destabilize the table. Remove it by selecting the BEAR Essentials title image, which is in the second row of the table. Press the up arrow key once to move the insertion point to the cell that contains the title image. Then press the up arrow key once more to move the insertion point into a cell in the 1-pixel-high control row at the top of the table. Choose Modify > Table > Delete Row. Your sliced image table scoots up slightly and snuggles right into place.

At this point, check your page in a browser. The banner resizes with the browser window, but because of the interaction of background and foreground images, it still looks like a graphic unit.
For the finishing touch, you need to add the bear in the upper-left corner. It will be inserted as a CSS-positioned image that sits in front of the banner and hugs the upper-left corner of the browser window. Start by selecting the main table and pressing the left arrow key to move the insertion point to the very beginning of the body content. Then insert the bear_orange.gif image. When the accessibility options dialog box appears, enter an alt label of teddy bear . The new arrival pushes your existing tables out of alignment in Design view (see Figure 5.42). Don't panic!

Figure 5.42. Inserting the bear image temporarily messes up the layout.
At the bottom of the CSS Styles panel, click the New Style button. When the New CSS Style dialog box opens, choose to make a new custom class for the current document only. Call the class .bearlogo . Click OK to close this dialog box and open the CSS Style Definition dialog box.

In this next dialog box, go to the Positioning category. Set the Type drop-down menu to Absolute, and enter in the Left and in the Top input fields. Any page element to which this style is attached will now be positioned at the upper-left corner of the window. When you've done this, click OK to close the dialog box and create the style.
In the Document window, select the bear image. In the Tag Selector, find the img tag. Right-click on it and choose Set Class > bearlogo from the contextual menu. Your bear jumps into place, and the table adjusts itself.

If the layout still looks odd in Design view, that's probably because of the limitations of the Design view display. Preview the page in a browser to see the actual effect. The title/nav banner stretches and centers itself, and the bear sits atop everything else, even overlapping the navigation bar if the window gets small enough. The result should match the original sample picture you saw back in Figure 5.32.