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:
- 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.
- 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.
- 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.)
- 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.
- 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.
In this tutorial:
- Designing a Modern Web Page Style
- The Simeon Software Group
- Creating the Navigation Bar Layer
- Creating a Watermark Layer
- Adding Menus to the Navigational Bar
- Creating Colored Menu Selections
- Adding Photos to Your Web Page
- Editing your Web Page in Dreamweaver
- Creating Background Images
- Silver and Backgrounds