CUSTOMIZING YOUR DREAMWEAVER TEMPLATE

Continuing from my earlier post, I am going to customize my index.html webpage for my texartisancakes.com website. (See earlier post for lessons 1, 2 & 3)

Overview: I have created a logo for my site and I want to insert it into my new webpage and add content.

(Double-click images to make them bigger.)

Lesson 4

1. There is a logo placeholder in the upper left hand corner. You can simply click on it and path to your image. In my case, I want my logo to be in the center of the header, so I will to delete the placeholder and insert my logo as a background image in the header.
2. From the CSS Styles navigation bar, double-click on .header to open the CSS Rule definition for .header.
3. Under Category, click on Background to edit the background properties. Using the color from weddingbliss.ase swatch, type in 595731 - or pick any background color you wish.
4. Path to your image. (Note: I saved my image as a .png file so that I could have a transparent background).
5. Select no repeat, fixed, center, and center in the following boxes. Click Apply to save the changes. (see figure 3.0)
6. Go back to Category and switch to Box. Adjust the height of the box as necessary to accommodate your image.  (see figure 3.1)

Figure 4.0

Figure 4.1