Dreamweaver Article

Creating your first website – Part 3: Adding content to pages

Insert images

After you create your page layout, you are ready to add assets to the page. Start by adding images. You can use several methods to add images to a web page in Dreamweaver. In this section, you'll add four different images to the index page for Café Townsend using various methods.

Replace the image placeholder

1. In Dreamweaver, open the index.html file that you created in Part 2: Creating the page layout.

   Note: If you did not complete Part 2, see the previous section, Locate your files and review your task, for how to proceed.

2. Double-click the image placeholder, banner_graphic, at the top of the page (see Figure 2).

   

   Figure 2. Double-click the banner image placeholder.

1. In the Select Image Source dialog box, navigate to the images folder inside the cafe_townsend folder that you defined as your site root folder.

2. Select the banner_graphic.jpg file (see Figure 3) and click OK.

   

   Figure 3. Select the banner_graphic.jpg file.

   Dreamweaver replaces the image placeholder with the banner graphic for Café Townsend (see Figure 4).

   

   Figure 4. Banner graphic for Café Townsend

3. Click once outside the table to deselect the image.
4. Save the page (File > Save).

Insert an image by using the Insert menu

1. Click once inside the third row of the first table—two rows below the banner graphic you inserted, just above the colored table cells (see Figure 5).

   

   Figure 5. Click inside the third row of the first table.

2. Select Insert > Image.

3. In the Select Image Source dialog box, navigate to the images folder inside the cafe_townsend folder, select the body_main_header.gif file, and click OK.

   Note: If the Image Tag Accessibility Attributes dialog box appears, click OK.

A long, colored graphic appears in the table row (see Figure 6). This might look more like background color for the table cell than a graphic but if you look closely, you'll see that the graphic has rounded corners. The rounded-corner effect gives the lower portion of your page an interesting appearance after you've finished adding all of the assets.

Figure 6. Long, colored graphic in the table row

Insert an image by dragging

1. Click once inside the last row of the last table on the page (just below the colored table cells).

2. In the Files panel (Window > Files), locate the body_main_footer.gif file (it's inside the images folder) and drag it to the insertion point in the last table (see Figure 7). If you can’t see the full names of the files because of the width of the Files panel, you can hover the mouse pointer over files to display their names.

   Note: If the Image Tag Accessibility Attributes dialog box appears, click OK.

   

   Figure 7. Drag the body_main_footer.gif to the insertion point in the last table.

3. Click once outside the table to deselect the image.

4. Save the page by selecting File > Save.

Insert an image from the Assets panel

1. Click once inside the center column of the three-columned table (the first table cell that is colored light tan).
2. In the Property inspector (Window > Properties), select Center from the Horz pop-up menu and select Top from the Vert pop-up menu (see Figure 8). This aligns the contents of the table cell in the middle of the cell and pushes the cell's contents to the top of the cell.

   

   Figure 8. Select Center from the Horz pop-up menu and Top from the Vert pop-up menu.

   Note: If you cannot see the Vert or Horz pop-up menus, click the expander arrow in the lower right corner of the Property inspector.

3. Press Enter (Windows) or Return (Macintosh) once to create more space (see Figure 9).

   

   Figure 9. Create more space

4. Click the Assets tab in the Files panel, or select Window > Assets to make your site assets appear.

5. Click the Images button to view your image assets (see Figure 10).

   

   Figure 10. Your image assets in the Assets tab

   Note: At this point you'll notice that your Assets panel contains many more assets than what is pictured in Figure 10. That's because the Assets panel is displaying all of the assets for your site, including the assets in the completed_files folder, which contains duplicates of all the site assets you're using right now. (Sorry, but there was no way to avoid this if I wanted to give you all of the completed versions of the files along with the starter files.)

   It is not necessary to do so, but if you want to get your Assets panel to match the screen shot, navigate to where you created the cafe_townsend site root folder on your hard drive, and drag the completed_files folder to another location on your computer. (You must drag it out of the site root folder so that it is no longer part of the site.) Then return to the Assets panel and click the Refresh button (the purple circular arrow at the bottom of the panel). When you refresh the panel, any assets that you removed from the site disappear from the list.

6. In the Assets panel, select the street_sign.jpg file.

7. Do one of the following to insert the street_sign.jpg file on the page (see Figure 11):

   • Drag street_sign.jpg to the insertion point in the center table cell.
   • Click Insert at the bottom of the Assets panel.

   Note: If the Image Tag Accessibility Attributes dialog box appears, click OK.

   

   Figure 11. Insert the street_sign.jpg image.

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

About the Assets panel

You can use the Assets panel to view and manage assets in your current site. The Assets panel displays assets for the site associated with the active document in the Document window.

You must define a local site before you can view assets in the Assets panel. For more information, see Part 1: Setting up your site and project files.

The Assets panel provides two views:

• The Site list shows all of the assets in your site, including colors and URLs that are used in any document in your site.
• The Favorites list shows only the assets you've explicitly chosen. To add an asset to the Favorites list, select the asset in the Site list and then select Add to Favorites from the Options menu in the upper right corner of the Files panel.

When you click an asset in the Assets panel, the preview area displays the asset you selected. To change the size of the preview area, drag the line that separates the preview area from the asset column headings.

For more information, see Working with assets in Dreamweaver Help.

Page 3 of 8

Previous Page

Next Page