Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

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:

Save the Web page that will contain the image.

In order 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.2), saving the page before you proceed enables Dreamweaver to correctly determine the path from the image to the page you just saved.

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

This might be at 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, creating a blank
line, before inserting it.

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

Choose InsertImage.

Alternatively, you can select Image from the Insert bar (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 the Preview Images checkboxturning it on shows a thumbnail
of any selected image in the Preview window.

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) 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 in Section 4.3).

Choose 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 a computer can 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 Root-relative paths don't always
work when previewing a page. (See Section 4.1 for detail on the difference between
document- and root-relative links.)

Click OK (Windows) or Choose (Mac OS X).

The image appears on your Web page.

Dreamweaver also permits several drag-and-drop techniques for quickly adding images to your pages. Make sure you've defined a site as described in Section 1.3.1. 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 in Section 14.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 14.1.1.2).

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 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 be arrive in their final form.

To insert a placeholder, do one of the following:

Choose InsertImage 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.)

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

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.

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-6 in 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 (MX or MX 2004) 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 will export it to
whatever folder you specify and automatically insert it into your documentreplacing
the placeholder.