Creating Background Images

Like you did in previous tutorial, let’s first define our background images before going any further. Dreamweaver’s Properties inspector is where you’ll perform the following:

1. Select each of the images within the Dreamweaver tables and hit your Delete key. This removes them from the Designer Layout. Don’t worry, though; you’ll add them back in a moment.
2. Select the first cell in your table (the one that held your title bar). Now, press the folder next to the Bg field in the Properties inspector. The Select Image Source dialog box displays.
   The Bg field is where you define background images.
3. In the Select Image Source dialog box, go to the folder that contains the images for your web page. (Photoshop saved this folder in the same location you saved your web page.)
4. Select the title bar image (it may be Simeon_home_01.gif). If you’re not sure, press the View Menu icon. This is the icon next to the Look in drop-down field. From the View menu, select Thumbnails.
5. Press OK. You’re returned to the Designer Layout. Notice this image displays in your web page. If you look at the Properties inspector, the Bg field displays the Simeon_home_01.gif image. That means this image now is a background image.

Continue working your way around the table cells. Add the appropriate images again as background images using the Properties inspector.

Tip

You may need to adjust the tables as you add these background images. Sometimes too much of the background image displays and you see tiling. Other times you’ll find that too little of your background image displays, thus cutting off half of your image. You can adjust tables by placing your cursor over a table border. Your cursor will change into a double parallel line with two arrows pointing in opposite directions. Click and drag your mouse over a table border, and you’ll find yourself adjusting the size of a table cell.

In this tutorial:

1. Designing a Modern Web Page Style
2. The Simeon Software Group
3. Creating the Navigation Bar Layer
4. Creating a Watermark Layer
5. Adding Menus to the Navigational Bar
6. Creating Colored Menu Selections
7. Adding Photos to Your Web Page
8. Editing your Web Page in Dreamweaver 
9. Creating Background Images
10. Silver and Backgrounds