Slivers and Backgrounds

Remember the gradient background and sliver you created in previous tutorial? Let’s add these now to the San Simeon web page. Perform the following steps:

1. In Dreamweaver, click and delete the center contents area of your web page.
2. 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 grn-grad.png image you created in previous tutorial.
4. Press OK. You’re returned to the Designer Layout. Notice this image displays in your web page, as shown in figure below.
   
   

   

Drawing a Layout Table Cell

Notice that your background image tiles. Your image’s width blends seamlessly, but the height tiles over and over. Let’s correct that now with the sliver you created in previous tutorial.

1. In the Dreamweaver Insert bar, select the Layout mode. Then select the Layout view (next to the Standard and Expanded modes), as shown in figure below.
   
   
2. Select the Draw Layout Cell option in the Insert bar.
3. Click and drag your mouse to make a new table cell within the contents area. Cover up the bottom two background images that tile, as shown in figure below.
   
   
4. Click the [exit] hyperlink at the top of your web page (next to the Layout mode text) to exit the Layout mode. Notice your background images are gone, and the center contents area is now divided into two cells.
   

Merging Cells

Unfortunately, you may notice the right and left sides of the screen now tile. This is easy to correct. Let’s merge some table cells on your screen to get rid of some of this tiling.

1. Click and drag your mouse over the two cells on the right side of your web page. These are the cells that contain the colored menu selections.
2. Release your mouse. Then right-click within this selected area. A pop-up menu displays. Select Table ▶Merge Cells from this menu, as shown in figure below.
   
   
   

Once you release your mouse, these two cells on the right side merge. You should see only one instance of the color menu selections. These should not tile.

Do the same for the navigation menu on the left side of your web page (merge these two cells). Once you’ve done this, you’re ready to add your background and sliver images.

Adding a Background and Sliver Image

In the top cell, add the grn-grad.png file as a background image. In the bottom cell, add the grn-grad-sliver.png file as a background image. Your screen should look like figure below.

Adding Content

To finish up your web page, add some content and maybe a navigational footer at the bottom of your web page. Then preview your page in a web browser. Try to make your web page look like figure below.

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