Add images

In this lesson, you can add images to the page you're working on. If you have your own images, you can use them instead, but the first time you try adding an image, Macromedia recommends using one supplied with the Dreamweaver sample site.

To add an image to your page:

  1. Save your page if you haven't already done so.

    You can insert an image into an unsaved document, but if you do, a dialog box appears, informing you that the URL used for the image will be the full local path to the image. Dreamweaver fixes the URL later, when you do save the document, but it's easiest to save the document before adding images.

  2. To insert an image in place of an existing image placeholder, double-click the placeholder. For example, to insert a banner graphic at the top of the Trio Motors page, double-click the placeholder that's labeled "Banner (600 x 41)."

    The Select Image Source dialog box appears.

  3. Near the bottom of the dialog box, make sure that the Relative To pop-up menu is set to Document.

    For information on document-relative and root-relative URLs, see Using Dreamweaver Help.

  4. Browse to an image in your assets folder (such as images/trio_logo.jpg).
  5. Click OK or Select (Windows) or Choose (Macintosh) to insert the image.

    In the Document window, the image appears where the placeholder was.

  6. Click the image placeholder in the main column, the SplashImage placeholder that you created in Add an image placeholder, to select it. (Don't double-click it.)

    You can use the same approach that you used for the other placeholder to replace this placeholder with an image, but the following instructions provide an alternate approach.

  7. Make sure the Files panel and the Property inspector are showing (select Window > Files and Window > Properties if they aren't visible), and make sure the placeholder is still selected in the Document window.
  8. In the Property inspector, drag from the Src text box's Point-to-File icon to the Files panel. (Make sure to drag from the Point-to-File icon next to the Src text box, not the one next to the Link text box.) Continue to hold the mouse button as you point to the Assets folder (if the folder is collapsed); the folder expands. Continue to hold the button down as you point to the images folder, until the pointer is over the homeMain.jpg file. Release the mouse button to select homeMain.jpg.

    In the Document window, an image of a car appears where the placeholder was. If the wrong image appears, look at the filename in the Src text box; if you selected the wrong file, drag the Point-to-File icon again.

  9. If you want to insert images in places where you don't already have placeholders, click in the Design view to place the insertion point where you want the image, then select Insert > Image.

    If you insert an image for which the image file isn't inside your site's local root folder, Dreamweaver provides the option to automatically copy the image into the site.

  10. Save your page.

To make text flow around your image:

  1. Select the car image in the main column.
  2. In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button.
  3. In the New CSS Style dialog box, select Advanced from the Selector Type options, and type #SplashImage (including the number sign at the beginning) in the Name text box. In the Define In option, select This Document Only.
  4. Click OK.
  5. In the CSS Style Definition dialog box, select the Box category, then select Left from the Float pop-up menu.
  6. Click OK to define the style and dismiss the dialog box.
  7. The style is applied to the image (which has SplashImage as the value of its ID attribute), making the text wrap around it.

 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/mx2004/getting_started_en/gs_04_p9.htm