Section 5.1. Adding Images

5.1. Adding Images

If you were writing out the HTML instructions for your Web page by hand, you'd insert an image into a Web page using the image tag: <img>. The primary property of an image is called the source (Src) property, which is the URL or path to the graphics file.

Dreamweaver does all of this coding for you automatically when you insert a picture into your fledgling Web page:

1. Save the Web page that will contain the image .

   To insert an image, Dreamweaver must determine the path from your Web page to that image, which could be anywhere on your hard drive. As with links (see Section 4.4), saving the page before you proceed allows Dreamweaver to correctly determine the path from the page you just saved to the image.

2. In the document window, click where you want to insert the image .

   You can choose the beginning or end of a paragraph, or within a cell in a table (see Chapter 7). To set a graphic apart from other text, press Enter (Return), creating a blank line, before inserting it.

3. Choose Insert Image .

   Alternatively, from the Insert bar, you can select Image (see Figure 5-2). Or, if you're a keyboard nut, press Ctrl+Alt+I ( -Option-I).

   In any case, the Select Image Source dialog box opens. This box is identical to the Select File window that appears when adding a link to a page (see Figure 4-3). The only difference is a Preview Images checkboxturning it on shows a thumbnail of any selected image in the Preview window.

   Figure 5-2. The Image menu on the Common tab of the Insert bar provides tools for adding graphics to your pages.

   

4. Browse to and select the graphics file you wish to add to the page .

   The file must be in one of the formats that work on the Web: GIF, JPEG, or PNG.

   The file should be stored somewhere in the local root folder of your site (see Section 1.3.1) or in one of its subfolders . If it isn't, Dreamweaver can't add the correct path to your Web page.

   That's why, if you select a graphic for insertion that's not already in your site folder, Dreamweaver offers to add a copy of it there. If you choose Yes, a Copy File As dialog box opens, so that you can save the file in your local root folder, renaming it if you wish. If you choose No, Dreamweaver uses a file-relative path (beginning with file:/// ) for the image's Src property (see Section 5.1). But clicking No is usually a bad idea: while it allows the graphic to be displayed while you work with Dreamweaver on your computer, the graphic won't appear once you move the document to the Web (see the box on Section 4.4).

   UP TO SPEED
   GIFs, JPEGs, and PNGs: The Graphics of the Web

   Computer graphics come in hundreds of different file formats. The assorted acronyms can be mind-numbing: TIFF, PICT, BMP, EPS, Amiga IFF, and so on.

   Fortunately, graphics on the Web are a bit simpler. There are only three graphics formats: two established formats and one exciting newcomer. All three provide good compression ; through clever computer manipulation, they reduce the graphic's file size so it can travel more rapidly across the Internet. They differ only in the details.

   GIF (Graphics Interchange Format) files provide good compression for images that have areas of solid color: logos, text, simple banners. GIFs also offer single-color transparency, meaning that one color in the graphic can be made to disappear, permitting the background of a Web page to show through part of the image.

   A GIF image can only contain a maximum of 256 shades, however, generally making photos look blotchy. That radiant sunset photo you took with your digital camera won't look so good as a GIF.

   JPEG (Joint Photographic Experts Group) graphics, on the other hand, pick up where GIFs leave off. JPEG graphics can contain millions of different colors, making them ideal for photographic images. Not only do JPEGs do a better job on photos, they also compress multicolored images much better than GIFs, because the JPEG compression algorithm considers how the human eye perceives different adjacent color values. When your graphics software saves a JPEG file, it runs a complex color analysis to lower the amount of data required to accurately represent the image. On the downside, JPEG compression makes text and large areas of solid color look blotchy.

   Finally, the PNG (Portable Network Graphics) format holds great promise for the future. PNG files can be compressed even smaller than those in GIF format, can contain millions of colors, and offer 256 levels of transparency, which means that you could actually see the background of a Web age through a drop shadow on a graphic. Most current Web browsers recognize this format, but Internet Explorer 5 and 6 for Windows don't support PNG's 256 levels of transparency (though IE 5 for Mac does!). (To see this transparency effect in action, visit www.w3.org/Graphics/PNG/inline-alpha.html with a browser like Firefox or Safari; to see it NOT work, go to the same page with Windows Internet Explorer 5 or 6.)

   
   

5. Confirm the type of path to create: Document or Site Root .

   When you insert an image into a Web page, you don't actually add the graphics file to the HTML file. Instead, you create a path to the image, a coded description of where to find the relevant graphics file, so that a Web browser knows where to look for and download the graphic.

   In general, Document is the best choice. Site Rootrelative paths don't always work when previewing a page. (See Section 4.1.2 for details on the difference between document- and root-relative links.)

6. Click OK (Windows) or Choose (Mac) .

   Depending on the accessibility preference settings you've chosen , either the image appears on your Web page, or an "Image Tag Accessibility Attributes" window appears (see the box on Section 5.2.3).

---

Tip: Dreamweaver also permits several drag-and-drop techniques for quickly adding images to your pages.Make sure you've defined a site as described on Section 1.3.2. Then open the Files window (press F8). You can drag any graphics file from that window right into an open Dreamweaver document. You can also drag graphics in from the Assets panel, as described on Section 13.3.Dreamweaver even lets you drag a graphic from your desktop onto a page. If you do this, Dreamweaver dutifully informs you that you must copy the file into your site folder (and provides a dialog box that lets you specify which folder), so that the image will show up properly on the Web page. (You can even define a default images folder for a site, so that when you drag an image onto a page, Dreamweaver automatically copies it into the correct folder; see Section 13.1.1.3.)

---

5.1.1. Adding an Image Placeholder

It's not uncommon to find yourself working on a Web site without all the pieces of the puzzle. You may start building a page, even when your client has yet to give you all the text she wants on the page. Or you may find that a photograph hasn't been shot, but you want to get the page ready for it. Other times, you may be responsible for building the Web pages, for example, while another designer is creating the banners and navigation buttons .

To help out in these kinds of situations, Dreamweaver includes the Image Placeholder button. It lets you insert a placeholdercalled an FPO (For Placement Only) image in publishingso that you can stake out space on the page for a graphic that isn't ready yet. This way, you can lay out the basic structure of the page without having to wait for all the graphics to arrive in their final form.

To insert a placeholder, do one of the following:

• Choose Insert Image Placeholder.

• On the Common tab of the Insert bar, select the Image Placeholder icon from the Image menu (see Figure 5-2).

In the window that appears (see Figure 5-3), type a width and height for the image, which determines how much space the placeholder will take up on the page. The Name and "Alternate text" fields are optional. (If you fill them out, they'll appear in the Name and Alt boxes of the image's Property inspector, as discussed next .)

Figure 5-3. The values you type for Name, Width, Height, and "Alternate text" appear in the Property inspector after you insert an image placeholder. The Color option just lets you choose a color for the placeholder.

The Color box lets you specify a color for the placeholderpresumably to make the placeholder more colorful than the default gray color. The color disappears (as does the code that created it) once you replace the placeholder with a real graphic.

---

Warning: The name you provide for a placeholder image is also added as an ID attribute to the <img> tag. IDs are used for both JavaScript and Cascading Style Sheets, as described on Section 6.6.2. If the name you provide for the image placeholder is the same as an ID name for a CSS style you created, you can run into some weird display problems.

---

Of course, using a placeholder doesn't do you any good if you don't eventually replace it with a real image. Once you've got the image that should finally appear on the page, just double-click the placeholder on the Web page. The Select Image Source window appears. Follow steps 4 through 6 on Section 5.1 to insert the new image.

If you also own Fireworks, Dreamweaver's Web graphics companion program, there's an added benefit to the image placeholder. When an image placeholder is selected in the document window, the Property inspector includes a button called Create. Clicking this button launches Fireworks and opens a new, blank graphics document set to the exact dimensions you specified earlier. You can then create your graphic in Fireworks. After you save the file, Fireworks exports it to whatever folder you specify and automatically inserts it into your documentreplacing the placeholder.