In This Chapter
Creating and optimizing images for the Web
Inserting and aligning images
Editing images
Including a background image
Using image maps
No matter how great the writing may be on your Web site, the graphics always get people's attention first. The key to making a good first impression is to use images that look great, download quickly, and are a good fit with the design of your Web site.
If you're familiar with using a graphics-editing program, such as Adobe Photoshop or Fireworks, to create graphics for the Web, you're a step ahead. If not, you find pointers throughout this chapter on how to convert images for the Web, what image formats to use, and how to optimize images for faster download times.
If your images are already in GIF, JPEG, or PNG format and ready for the Web, you can jump ahead to the "Inserting Images in Dreamweaver" section, where you find out how to place and align images, create image maps, and use an image as a background. You also discover some of Dreamweaver's built-in image-editing features, which enable you to crop images and even adjust contrast and brightness without ever launching an external image-editing program.
The most important thing to keep in mind when creating images for the Web is that you want to optimize your images to make your file sizes as small as possible so that they download as quickly as possible.
How you optimize an image depends on how the image was created and whether you want to save it as a JPEG, PNG or GIF. You find instructions for optimizing images with Photoshop in the sections that follow, but the bottom line is this: No matter what program, format, or optimization technique you choose, your biggest challenge is finding the best balance between small file size and good image quality. Essentially, the more you optimize, the faster the image will download, but the compression and color reduction techniques used to optimize images can make them look terrible.
You can optimize images using compression techniques or color reduction and you can further reduce file size by reducing the physical size of an image. As a general rule, do any editing, such as adjusting contrast, retouching, or combining images before you reduce their size or optimize them because you want to work with the highest resolution possible when you're editing. Also, resize an image before you optimize it. You find instructions for resizing an image in the next exercise and instructions for optimizing in the sections that follow.
Resizing images is important for two reasons: Your photos and graphics must be small enough to display well on a computer monitor. The smaller you make them, the more you reduce the file size and the faster your images will download to a user's computer.
Tip
Although you can change the display size of an image by altering the height and width settings in the Property inspector in Dreamweaver, you get much better results if you change the physical size of the image in an image editor instead. That's because when you alter the height and width in the HTML code, you simply instruct a Web browser to display the image in a different size. If you set the image larger, the image is likely to look fuzzy or distorted because not enough pixels are in the image for all the details to look good when the image is displayed larger than its actual size. If you set the code to display the image smaller than it is, you're requiring that your users download an image that's larger than necessary.
To enlarge or reduce the dimensions of an image, change the image size. Follow these steps:
With an image open in Photoshop, choose Image
Resize.
If you don't want your original image to lose quality, make a copy of it and resize the copy for your Web site.
In the Image Size dialog box, specify a height and width for the image.
As shown in Figure 3-1, I'm reducing the size of this image to 200 pixels wide.
The Image Size dialog box can be confusing at first because it has multiple options for changing image size and resolution. A simple strategy is to use the fields in the Pixel Dimensions area, at the top of the dialog box. With these options, you can alter the height and width of an image to a specified size in pixels or enlarge or reduce the image by any percentage, as shown in the drop-down list in Figure 3-1. (Note: Make sure Scale Styles, Constrain Proportions, and Resample Image are all selected at the bottom of the dialog box.)
If you've checked the Constrain Proportions check box at the bottom of the dialog box in Elements, any changes you make to the height automatically affect the width (and vice versa) to ensure that the image proportions remain constant even if the height or width is altered.
Click OK to resize the image.
If you want to return the image to its previous size, choose Edit
Tip
Most Web designers limit the resolution of an image to 72 pixels per inch (ppi) because that's all that displays on a computer monitor, and anything higher than that means the image is a larger size than necessary for the Web. If the image resolution is higher than 72 ppi, Photoshop automatically reduces the resolution when you use the Save for Web features, covered in the sections that follow.
One of the most common questions about images for the Web concerns when to use GIF or PNG and when to use JPEG. Table 3-1 provides the simple answer.
Table 3-1. Image Formats for the Web
Format | Best Use |
|---|---|
GIF | For line art (such as one- or two-color logos), simple drawings, animations, and basically any image that has no gradients or blends. GIF is also the best format for images that you want displayed with a transparent background. |
PNG | PNG generally produces better-looking images with smaller file sizes than GIF for the same kinds of limited-color images. Just beware that really old browsers, such as IE 3, don't support the PNG format and that even newer browsers, such as IE 4, 5, and 6, have problems with full PNG alpha channel support. |
JPEG | For colorful, complex images (such as photographs), images containing gradients or color blends, and any other images with millions of colors. |
If you're new to saving images for the Web, the following basics can help you get the best results from your files, your image-editing program, and ultimately, your Web pages. You can
Convert images from any format into the GIF, PNG, and JPEG formats. For example, your TIF, BMP, and PSD image files can all be turned into a Web-friendly file format.
Optimize images that are already in GIF, PNG, or JPEG format. This further reduces their file sizes for faster download over the Internet.
Use many programs to create Web graphics, but Photoshop is one of the best and easiest to use. Under the File menu in Photoshop (and Photoshop Elements), you'll find the Save for Web option. (In Photoshop CS4, the option is Save for Web & Devices.) Fireworks provides a similar feature and although the dialog boxes are slightly different in each program, the basic options for compressing and reducing colors are the same.
Note
When you use the Save for Web feature, Photoshop creates a new copy of your image with the settings you specified and leaves the original unchanged in the main Photoshop workspace.
See the upcoming sections "Optimizing JPEG images in Photoshop" and "Optimizing GIF and PNG images in Photoshop" for details about using the Save for Web feature.
Tip
Make image edits before you optimize. It's always best to use the highest quality image possible when you're editing, so make sure to do all your editing, sharpening, and resizing before you use the Save for Web option. Similarly, if you want to make further changes to an image after you've optimized it, you'll achieve the best results if you go back a higher resolution version of the image rather than editing the version that's been optimized for the Web.
The JPEG format is the best choice for optimizing continuous-tone images, such as photographs and images with many colors or gradients. When you optimize a JPEG, you specify how much compression should be applied, a process that makes the file size of the image smaller.
If you have a digital photograph or another image that you want to prepare for the Web, follow these steps to optimize and save it in Photoshop. If you're using Photoshop Elements or Fireworks, the process is similar although the specific steps may vary:
With the image open in Photoshop, choose File
Save for Web & Devices (or FileSave for Web).In the top-left corner of the dialog box, choose either 2-Up or 4-Up to display multiple versions of the same image for easy side-by-side comparison.
In the example shown in Figure 3-2, I chose 2-Up, which makes it possible to view the original image on the left and a preview of the same image as it will appear with the specified settings on the right.
On the right side of the dialog window, just under Preset, click the small arrow to open the Optimized File Format drop-down list and choose JPEG (this dialog window is open in Figure 3-2).
Set the compression quality.
Use the preset options Low, Medium, High, Very High, or Maximum from the drop-down list. Or use the slider just under the Quality field to make more precise adjustments. Lowering the quality reduces the file size and makes the image download more quickly, but if you lower this number too much, the image will look blurry and blotchy.
Photoshop uses a compression scale of 0 to 100 for JPEGs in this dialog window, with 0 the lowest possible quality (the highest amount of compression and the smallest file size) and 100 the highest possible quality (the least amount of compression and the biggest file size). Low, Medium, and High represent compression values of 10, 30, and 60, respectively.
Specify other settings as desired (the compression quality and file format are the most important settings).
Click Save.
The Save Optimized As dialog box opens.
Enter a name for the image and save it into the images folder in your Web site folder.
Photoshop saves the optimized image as a copy of the original and leaves the original open in the main Photoshop work area.
Repeat these steps for each image you want to optimize as a JPEG.
If you're working with a graphic, such as a logo, cartoon character, or drawing that can be displayed in 256 colors or less, use the GIF or PNG formats and reduce the total number of colors used in the image as much as possible to reduce the file size. To help make up for the degradation in image quality that can happen when colors are removed, GIF and PNG use a dithering trick. Dithering involves alternating pixels in a checkerboard-like pattern to create subtle color variations, even with a limited color palette. The effect can smooth the edges in an image and make it appear that the image uses more colors than it does.
To convert an image to a GIF or PNG in Photoshop, follow these steps:
With the image open in Photoshop, choose File
The Save for Web & Devices dialog box appears.
In the top-left corner of the dialog box, choose either 2-Up or 4-Up to display multiple versions of the same image for easy side-by-side comparison.
In the example shown in Figure 3-3, I chose 4-Up, which makes it possible to view the original image, as well as three different previews of the same image as it would appear with the settings specified for each preview. In Figure 3-3, you see the same image with four different settings.
On the right side of the dialog window, just under Preset, click the small arrow to open the Optimized File Format drop-down list and choose either GIF or PNG.
In the Colors box, select the number of colors, as shown in Figure 3-3.
The fewer colors you use, the smaller the file size and the faster the image will download. But be careful, if you reduce the colors too much (as I have in the bottom-right preview shown in Figure 3-3), you lose details. The ideal number of colors depends on your image; if you go too far, your image will look terrible.
If you want to maintain a transparent area in your image, select the Transparency option.
Any area of the image that was transparent when you created the image in the editor appears transparent in the preview window. If you don't have a transparent area in your image, this setting has no effect.
Figure 3-3. The GIF and PNG formats are best for images with limited colors, such as cartoons and line art.
Note
Transparency is a good trick for making text or another part of an image appear to float on a Web page. That's because a transparent background doesn't appear on the Web page. You can select transparency as a background option in the New File dialog box when you create a new image.
If you choose Transparency, also specify a Matte color.
Specify a matte color that matches the background your transparent image will be set against to ensure that the dithering along the transparent edge will blend in with the background. If you don't specify a matte color, the transparency is set for a white background, which can cause a halo effect if the image is displayed on a colored background.
Specify other settings as desired.
The remainder of the settings in this dialog box can be left at their defaults in Photoshop.
Click Save.
The Save Optimized As dialog box opens.
Enter a name for the image and save it into the images folder (or any other folder) in your local root folder.
Repeat these steps for each image you want to optimize as a GIF or PNG for your site.
Tip
Trial and error is a great technique in the Save for Web & Devices dialog box. In each of the three preview windows displaying optimized versions of the cool sun cartoon image in Figure 3-3, I used fewer and fewer colors, which reduced the file size. The version in the top left is the original, which has a file size of 257K. Reducing the image to 256 colors dramatically reduced the file size to 35K, but made little noticeable change to the image, as you see in the top right. In the bottom left, the image is reduced to 32 colors, which brought the size down to 14.5K, but still made little change to the image. In the bottom right, I reduced it to 2 colors, and although it's harder to tell in the black-and-white reproduction in this book, the image quality suffered dramatically and the mouth and sunglasses all but disappeared. In this last case, the small savings in file size are clearly not worth the loss of image quality.
After you know how to optimize GIFs and JPEGs and appreciate the goal of making them as small as possible, you may ask, "How small is small enough?" The answer is mostly subjective, but the following points are good to remember:
The larger your graphics files, the longer people have to wait for them to download before they can see them. You may have the most beautiful picture of Mount Fuji on the front page of your Web site, but if it takes forever to download, most people aren't patient enough to wait to see it.
When you build pages with multiple graphics, you have to consider the cumulative download time of all the graphics on the page. Even if each individual image is a small file size, they can add up. Unlike most things in life, smaller is definitely better on the Web.
Most Web pros consider anything from about 75K to 150K a good maximum cumulative size for all the elements on a given page. With the increasing popularity of DSL and cable modems, many Web sites are starting to become a bit more graphics heavy and go beyond that size limit. However, anything over 150K is pushing the limit, especially if you expect people with dialup modems (56K and under) to stick around long enough to view your pages.
Tip
To make determining the total file size of the images on your page easy, Dreamweaver includes this information in the status bar of the current Document window, as shown in Figure 3-4. This number indicates the total file size of all the images and HTML on your page as well as the expected download time at a given connection speed. (You can set your own connection speed by choosing Edit
Dreamweaver makes placing images on your Web pages easy and provides a variety of ways to do so, including choosing Insert
To place an image on a Web page, follow these step-by-step instructions:
Open an existing page or choose File
New to create a new page.Make sure you save your page before inserting an image by choosing File
Save and saving it to your main site folder.Place your cursor where you want to insert the image on the page.
Browse to locate the image you want to insert.
Depending on the computer system you use, there are different ways to preview images as you insert them. Here are three common options:
On a PC with Windows XP, choose Thumbnails from the View drop-down list (as shown in Figure 3-5) just to the right of the Look In field to display thumbnail versions of all the images in any open folder. You can also view a single preview of any selected image in the far right of the dialog box.
On a PC with Windows Vista, choose one of the icon options (small, medium, large, or extra large) from the View drop-down list just to the right of the Look In field to display thumbnail versions of all the images in any open folder. You can also view a single preview of any selected image in the far right of the dialog box.
On a Mac, choose the View as Columns option from the top left of the dialog, and you can view a single preview of any selected image in the far right of the dialog.
To insert the image, double-click it or click once and then click OK.
The image automatically appears on the page.
Warning
When you insert an image file onto a page, you create a reference to the image from the page. The underlying code looks much like it does when you create a link from one page to another and then include the path from the image to the page. As a result, if your images and the pages they're linked to aren't in the same relative location on your hard drive as they are on your server, you break the reference to your images and they won't appear on your pages. (Instead, you get that ugly broken Images icon.) The best way to make sure that your images and files stay where they're supposed to in relation to one another is to save all your images in your images folder (or any other folder) in your local root folder and make sure they're located in the same folder or subfolder on your Web server. You find more information about creating and identifying a local root folder at the beginning of Chapter 2.
After you place an image on your Web page, you may want to align it so that text can wrap around it. In this section, you find the steps to do so with basic HTML. This option is useful if you want to use the simplest option for aligning an image in Dreamweaver and you're not familiar with using CSS. Before you get started, here are a few limitations of the HTML alignment option:
The HTML alignment options enable you to align your images vertically or horizontally, but you can't do both at once to position images on either side of a page.
The HTML alignment options don't really enable you to position images in relation to one another or in relation to text with much precision.
The best way to get around this limitation is to use Cascading Style Sheets (CSS) to create layout and alignment styles to control the positioning of all elements on a page. In Chapters 5 and 6, you find instructions for aligning and positioning images with CSS, which provides more precise, standards-based design options.
To align an image to the right of a page and wrap text around it on the left, follow these steps:
Insert the image immediately to the left of the first line of the text.
If you want the text to wrap, don't put spaces or line breaks between the image and the text.
Select the image.
The Property inspector changes to display the image attribute options.
In the Property inspector, choose Right from the Align drop-down list.
The image aligns to the right, and the text automatically wraps around it, as shown in Figure 3-6.
To align the image to the left of the page with text wrapping around on the right, follow Steps 1 and 2, but choose Left from the Align drop-down list instead of Right in Step 3.
Tip
To prevent text from running against an image, click the image, find V and H spacing in the Property inspector, and enter the amount of space you want (the space is measured in pixels). Five to ten pixels is usually enough to prevent the text from bumping up against its edge. If you want to add space to only one side of an image, it's a bit more complicated, but you can more precisely control spacing with CSS using the instructions for aligning images and other elements, included in Chapter 5.
The image-editing features in Dreamweaver enable you to make minor changes to images inside Dreamweaver without opening Fireworks, Photoshop, or any other graphics-editing program. These tools, as shown in Figure 3-7, are available from the Property inspector when an image is selected.
Before you get carried away editing your images, remember that Dreamweaver is primarily a Web page-creation application and isn't really designed to edit graphics. Although these tools can be useful, they shouldn't take the place of doing serious work on your graphics in a graphics application, such as Fireworks or Photoshop.
Warning
When you do use the tools for cropping, adjusting brightness and contrast, and sharpening an image, beware that you're changing the actual image (not just a copy of it). Make sure you're happy with these changes before you save the page you're working on. You can use the Undo feature in Dreamweaver to revert back several steps, but after you save the page, you can't undo changes to an image. To protect your original image, save a copy before editing it.
Essentially, cropping an image is trimming it. To crop a graphic or photo, follow these steps:
In the Document window, select the image you want to crop by clicking it.
The Property inspector changes to display the image's properties.
Click the Crop icon (see Figure 3-8).
A dialog box appears, warning you that cropping changes the original image.
Note
Don't make the change if you're concerned about keeping the entire image available. If you're concerned, the best thing to do is to make a copy of the image and apply your cropping to the copy.
Click OK.
A solid crop line with handles at the sides and corners appears over the image, as shown in Figure 3-8.
Click and drag the handles to outline the area of the image you want to keep.
Any part of the image outside the crop line (and shaded) is deleted when the crop is completed.
Double-click inside the box or press Enter (Return on a Mac).
The image is cropped.
Note
You can undo cropping by choosing Edit
Adjusting an image's brightness allows you to change the overall amount of light in an image. Contrast controls the difference between the light and dark areas of an image.
Note
Using Dreamweaver's editing tools permanently alters the image when the page is saved. If you're concerned, the best thing to do is to make a copy of the image and make your adjustments to the copy.
To adjust brightness and contrast, follow these steps:
In the Document window, select the image you want to alter.
The Property inspector shows the image properties.
Click the Brightness and Contrast icon (labeled in Figure 3-7).
A dialog box appears, indicating that the changes you make are made to the original file.
Click OK.
Use the sliders to adjust the brightness and contrast settings of the image.
Make sure to select the Preview check box if you want to see how the changes affect the image as you move the sliders around.
Click OK.
The settings take effect permanently when you save the page.
When you apply sharpening to an image, you increase the distinction between areas of color. The effect can be one of increased definition to the shapes and lines in an image.
Note
Using Dreamweaver's editing tools permanently alters the image when the page is saved. If you're concerned, the best thing to do is to make a copy of the image and make your adjustments to the copy.
To sharpen an image, follow these steps:
In the Document window, select the image you want to sharpen.
The Property inspector shows the image properties.
Click the Sharpen icon (labeled in Figure 3-7).
A dialog box appears, indicating that your change is made to the original file.
Click OK.
The Sharpen dialog box appears.
Use the slider to adjust the sharpness of the image.
Make sure you select the Preview check box if you want to see how the changes affect the image as you move the slider.
Click OK.
The image is sharpened, and changes are made permanently when you save changes to the page.
Dreamweaver CS4 includes an Edit Image Settings icon that you can use to convert an image to the GIF, PNG, or JPEG format as well as optimize it by reducing the colors or increasing the compression, much as you can do in Photoshop or Fireworks. To use this feature, simply select any image in the Dreamweaver workspace and then click the Edit Image Settings icon in the Property inspector. (Hint: It looks like a two small gears.)
Warning
Dreamweaver's editing tools permanently alter the image when the page is saved. If you're concerned, copy the image and make changes to the copy.
To optimize an image in Dreamweaver, follow these steps:
In the Document window, select the image you want to optimize.
The Property inspector shows the image properties.
Click the Edit Image Setting icon (see Figure 3-7).
A dialog box appears, indicating that your change is made to the original file.
The Image Preview dialog box appears, as shown in Figure 3-9.
In the Format drop-down list, select the image format you want.
You can select from GIF, JPEG, or PNG format.
If you choose JPEG, use the slider that appears when you click the arrow next to Quality to select the level of compression. If you choose GIF or PNG, choose the number of colors desired.
The image is altered based on the settings you specify.
Note
You can also change other settings in the Image Preview dialog box, such as transparency settings for the GIF format, much as you would in Photoshop or Fireworks.
The Property inspector also includes an icon that makes it easy to open an image in Photoshop or Fireworks from within Dreamweaver. The Edit icon changes to the icon of the program specified in Dreamweaver's preferences. To open an image in your preferred program, simply select the image in Dreamweaver, click the icon in the Property inspector, and watch your image appear as you've commanded.
Adobe has done some great work integrating the Photoshop and Fireworks programs into Dreamweaver. When you save changes to the image in Fireworks or Photoshop, they're automatically reflected in the version you've already inserted into a page in Dreamweaver.
To specify the image editor you want to associate with a file type in Dreamweaver's preferences, follow these instructions:
Choose Edit
The Preferences dialog box opens.
On the left, select the File Types / Editors Category, as shown in Figure 3-10.
In the left pane under Extensions, click to select .gif.
Dreamweaver lists a wide variety of file types here, and you can associate any or all of them with your favorite editors. To associate image editors with these graphic formats, select the GIF, PNG, and JPEG options one at a time and then continue with these steps.
In the right pane, under Editors, click to select the editor you want associated with the .gif format.
In the example shown in Figure 3-10, Photoshop is listed already, so you can simply click Photoshop to select it. If you want to associate an editor that isn't on this list, such as Fireworks, click the plus (+) sign just above the Editors pane, browse to find the program on your hard drive, and select it to make it appear on the list.
With the file type and program name selected, click the Make Primary button to associate the editor.
The editor specified as Primary is launched automatically when you select an image in Dreamweaver and click the Edit button in the Property inspector.
Click to select .jpeg from the Extensions pane and repeat Steps 4 and 5.
You can continue with this process for any or all the other formats listed.
To add additional file formats to Dreamweaver, click the plus (+) sign over the Extensions pane and type the extension beginning with a dot (.).
Background images can add depth and richness to a page design by adding color and fullness. Used cleverly, a background image helps create the illusion that the entire page is one large image while still downloading quickly and efficiently. The trick is to use an image with a small file size that creates the impression of a large image. One way this works on the Web is to use the default settings for a background image, which cause the image to tile (repeat) across and down the page (see Figure 3-11).
Note
Beware that certain backgrounds (such as the one shown in Figure 3-11) can make it difficult to read text placed on top. Choose your background images carefully and make sure your background and your text have plenty of contrast — reading on a computer screen is hard enough.
Note
With CSS, you can have far greater control over the display of a background image. When you create a CSS background style, you can insert a background image that doesn't repeat or that repeats only across the Y axis or down the X axis of the page. When you insert an image using Dreamweaver's Page Properties feature, as shown in Figure 3-12, you can use the Repeat drop-down list to specify how the image repeats on the page, and Dreamweaver automatically creates a style for the page with these background settings. If you use the CSS Definition dialog box to further edit the background options in the body style, you can also specify where the background image is displayed on a page. (Find more on CSS background options in Chapter 5.)
Image maps enable you to create hot spots (clickable areas) in an image and link each area to a different Web page. A common use of an image map is with a geographic map, such as a map of the United States, that links to different locations, depending on the section of the map a visitor clicks. For example, if you have a national bank and want customers to find a local branch or ATM machine easily, you can create hot spots on an image map of the United States and then link each hot spot to a page listing banks in that geographic location.
Dreamweaver makes creating image maps easy by providing a set of simple drawing tools that enable you to create hot spots and set their corresponding links. To create an image map, follow these steps:
Place the image you want to use as an image map on your page.
Select the image.
The image properties are displayed in the Property inspector.
To draw your hot spot, choose a shape tool from the image map tools in the lower left of the Property inspector (labeled in Figure 3-13).
The shape tools (a rectangle, a circle, and an irregular polygon) allow you to draw regions on your images, called hot spots, each with a specific link. In the example shown in Figure 3-13, I'm creating hot spots on each creature in the aquarium touch pool so that I can link each one to a different page with additional information about the animal.
With a shape tool selected, click and drag over an area of the image that you want to make hot (link to another page).
Here's how the different hot spot tools work:
Rectangle: When you click and drag, a light blue highlight appears around the region that you're making hot; this highlighted area indicates the active region. If you need to reposition the hot area, select the Pointer hotspot tool (labeled in Figure 3-13) and then select and move the region to the location you want. You can also resize the hot spot by clicking and dragging any of the corners.
Circle: The Circle tool works much like the Rectangle tool — just click and drag. To resize a circle hot spot, select the Pointer hotspot tool, and click and drag one of the small square boxes on its edges.
Polygon: The Polygon tool functions a little bit differently than the other two tools. To make a polygon selection, click the tool once for each point of the polygon shape you want to draw. The shape automatically connects the points while you click. When you're finished, switch to another map tool or click outside the image. You can change the size of the polygon or move any of its points by using the Pointer hotspot tool.
Figure 3-13. Use the image map tools in the Property inspector to create hot spots on an image that can be linked to different pages.
Note
When prompted to describe the image map in the Alt field on the Property inspector, click OK to close the dialog box and then add a text description of the link in the Alt field in Hotspot properties of the Property inspector. The Alt field is for alternative text that doesn't appear on the page itself. This text is used by screen readers and other devices that read the code behind a page and need these descriptions of the hot spots in an image to better understand the image map.
To link a selected hot area:
The Select File dialog box opens.
Browse to find the HTML file that you want to link to the hot spot on your image.
Double-click the file to which you want to link.
The hot spot links to the selected page, and the Select File dialog box automatically closes.
You can also type the path directly in the Link text box.
To add more hot spots, choose an image and a shape tool, and repeat Steps 4 and 5.
To give your image map a name, type a name in the Map text field, just above the shape tools.
Giving your map (and all the hot spots it includes) a name helps to distinguish it in the event that you have multiple image maps on the same page. You can call the map anything you want, as long as you don't include spaces or special punctuation.
When you finish, all your image map hot spots are indicated by a light blue highlight.
Tip
At any time, you can go back and edit the image map. Simply click and highlight the blue region on your image and drag the edges to resize the hot spot or enter a new URL to change the link.