Creating the Header Background Image

Launch Dreamweaver 8 and, in Design view, open the health.html file that accompanies this tutorial (see Figure 1).

Figure 1. Starting point of Part 2: health.html

Your first task is to create the website name and tagline sections that are displayed to the right of the main header image in Figure 1. You will achieve this by utilizing CSS and then establishing this section as a background image in the #header div. First, however, you need to open Fireworks 8 to create the image.

The image needs to be the same height as the mm_health_photo.jpg file, which is 101 pixels. Feel free to use whatever fonts you think will look nice in the design. Get a little creative with the image if you want. There are no hard and fast rules here.

I've included the PNG file I made for this section (see Figure 2) in the sample files that accompany this tutorial. I'm sure you can do much better than this!

Figure 2. Tagline image

These are the key points to remember:

• Ensure that your canvas color is the same as the background color of your header.
• When you export the image, export it as a GIF file.
• Make sure that your canvas color is transparent when you export the file. You can do this by selecting Index Transparency from the Transparency pop-up menu in the Optimize panel in Fireworks.

Although you are going to make the canvas color transparent, it is still important to use the same color that the image will sit on. This prevents ragged-looking edges and gives your image a nice clean finish. Figure 3 shows a preview of the image in Fireworks.

Figure 3. Tagline image preview with an index transparency

• View the movie: Adding the Tagline

To complete the CSS for adding the tagline image as a background image, switch back to Dreamweaver and follow these steps:

1. With health.html open, press Shift+F11 to open the CSS panel.
2. Select the #header selector.
3. Select Add Property.
4. Select background-image.
5. Click the folder icon.
6. Navigate to your tagline image and select it.
7. Select Add Property.
8. Select background-repeat.
9. Select no-repeat from the options list.
10. Select Add Property.
11. Select the background-position option.
12. Type right into the Values text box.
13. Save your work.

You should now be able to see your background image tagline in Design view (see Figure 4).

Figure 4. Tagline as a background image

The next section in the default page is the section that contains the JavaScript time and date functions. I have to be honest; I'm not a fan of these functions unless they fulfill a purpose, as on booking forms. I'll skip that section of the design, but you still need a separator between the header and the content.

To achieve this, implement a bottom border on the header:

1. Select the #header selector in the CSS panel.
2. Select Add Property.
3. Select border-bottom from the list.
4. Type 15 px solid #283F13 in the Values text box.
5. Save your work.

Figure 5 shows a bottom border on the header. The color #283F13 is a dark green that I have picked from the right-hand image in the header. It is a good practice to select colors that already exist in your design; this keeps the design in focus and prevents a mismatch of colors that may look odd as your design progresses.

Figure 5. Bottom-border in place

Your next job is to begin laying out the content area.

Page 2 of 4

Previous Page

Next Page