How to Change the Color of Headers, Sidebars, and Footers in Dreamweaver CS4

There are several ways to change the background color of the header, sidebar, footer, and main content. The following is the easiest way for beginners. I learned these techniques through books like Dreamweaver CS4 for Windows and Macintosh: Visual QuickStart Guide (Amazon affiliate link)  and Lynda.com. View some of their free sample tutorials.

To change the color of the header, Click on the CSS Styles tab on the far right hand side of your Dreamweaver screen. Double click on the words two.ColElst.tHdr #header.

This will open up the rule definitions for the header.

 

Select Background.

If you are changing the gray background to white, replace #DDDDDD with #FFFFFF (I've memorized this one). If you are using a different color, hit the color square for more options. If you are using an image, hit Browse and locate the image file you have saved on your computer.

Hit Apply to see what the header will look like. If you don’t like the way it looks, change the color again or hit cancel.

Hit OK.

And your Header changes to white.

You can repeat this for the Sidebar1 or main content. To see how to change the background of a Dreamweaver CS4  page (the dark gray on the left and right), click here.

(Lynda.com Affiliate link)
 

Categorized: Web Design Tips

---

Related Articles:

• How to Change Page Properties in Dreamweaver CS4
• How to Define a Website in Dreamweaver CS4
• Lynda.com for All Online Learning Needs
• How to Adjust Canvas Size in Fireworks CS4
• How To Make a Border in Fireworks CS4
• Customer Tips to Save Money While Building a Website