Dreamweaver Getting started: Inserting images into a page

dreamweaver| Insert | page

After you create a page layout, you can add resources to the page. You will start by adding an image. You can use several methods in Dreamweaver to add images to a Web page. This article describes using different methods to add four different images to the index page of Cafe Townsend.

　　Replace image placeholder

The index.html file created in Dreamweaver.

Double-click the image placeholder banner_graphic at the top of the page.

In the Select Image Source file dialog box, browse to the images folder in the Cafe_townsend folder that you defined as the site root folder.

Select the Banner_graphic.jpg file and click OK.

Dreamweaver replaces the image placeholder with a Cafe Townsend banner graphic.

Click outside the table once to deselect the image.

Save the page ("File" > "Save").

　　Insert an image by using the Insert menu

Click once in the third row of the first table (above the two rows of the banner graphic you just inserted, above the color table cell).

Select ' Insert ' > ' image '.

In the Select Image Source file dialog box, browse to the images folder in the Cafe_townsend folder, select the Body_main_header.gif file, and then click OK. Note If the Image Label Accessibility Properties dialog box appears, click OK.

A long, colored graphic appears in the table row. It looks more like a table cell background color than a graphic, but if you look closely, you'll see that the shape has rounded corners. After all the resources have been added, this rounded effect renders the bottom half of the page an interesting look.

　　To insert an image by dragging

Click once in the last row (below the color table cell) of the last table on the page.

In the Files Panel (window > files), locate the Body_main_footer.gif file (which is in the Images folder) and drag the file to the insertion point in the last table. Note If the Image Label Accessibility Properties dialog box appears, click OK.

Click outside the table once, and save the page (File > Save).

Insert an image from the resources panel

Click once in the middle column of a three-column table (the first light-brown table cell).

In the Property Inspector (Window > properties), choose Center alignment from the horizontal pop-up menu, and then choose Top from the vertical pop-up menu. "" This aligns the contents of the table cell to the middle of the cell and causes the contents of the cell to start at the top of the cell.

Note If you do not see the vertical or Horizontal pop-up menu, click the expand arrow in the lower-right corner of the property inspector.

Press the Enter key (Windows) or the return key (Macintosh) to create more space.

Click the Resources tab in the Files Panel, or select Window > Resources.

Your site resources are displayed.

If the image view is not selected, click image to view your image resources.

In the Resources panel, select the Street_sign.jpg file. About the resources panel you can use the resources panel to view and manage resources in the current web. The Resources panel displays the site resources associated with the active document in the document window.

Before you can view resources in the assets panel, you must first define a local site.

The resources panel provides two different views:

The site list displays all of your site's resources, including the colors and URLs that are used in all documents in that site.

The Favorites list displays only those resources that you have explicitly selected. To add a resource to the Favorites list, select the resource in the Sites list, and choose Add to Favorites from the Options menu in the upper-right corner of the files panel.

When you click a resource in the resources panel, the preview area displays the resource that you selected. To change the size of the preview area, drag the separator line between the preview area and the Resource column heading.

Do one of the following:

Drag the street_sign.jpg file to the insertion point in the table cell at the center location. Click Insert at the bottom of the resources panel. Note If the Image Label Accessibility Properties dialog box appears, click OK. The street_sign.jpg graphic is displayed on the page.

Click outside the table once to deselect the image. Save the page.