Part 4.3: Changing the Background of the Header, Footer, Side Bar and the Right Column (Main Content)
1: Put your cursor somewhere in the column or section that you want to customize. Look at your status bar. Depending on which column or section you are in, click one of the following items:
- To change the background of the header, click the <div#header> word in the status bar.
- To customize the background of the left column, or side bar, click the <div#sidebar1> word in the status bar.
- To configure the background of the right column, or main content section, click the <div#mainContent> word in the status bar.
2: To change the background for the header, footer and side bar, open the CSS STYLES pane on the right side of Dreamweaver.
Double-click the “background” item in the CSS STYLES panel.The “CSS Rule Definition” dialog box will appear.
You should now see the “Background-color”, “Background-image” and “Background-repeat” lines. Change them as you see fit.
3: The right column cannot be done the same way because the header, footer and side bars all have an existing background already set for their blocks. The right column DIV block does not have any customized colour settings. The colours you see (the black words on white background) were inherited from its outer “<div#container>” block. In this case, we will have to add the necessary background properties from scratch.
With the “<div#mainContent>” button on the status bar selected, expand the CSS STYLES panel on the right side of Dreamweaver.
Look for ‘Properties for “twoColLiqLtHdr #mainContent”. Move your mouse to the separator line immediately above those words and drag it upwards until you can see the “Add property” blue link below. Click on the link and a drop down box should appear. Click the drop down arrow key beside it to open the entire list box. Either Select “background-color” or “background-image” depending on what you want to do.
If you selected the background colour item, a square box will appear. Click it and set the colour from the colour picker as usual.
If you selected the background image item, a blank box will appear. There are two buttons display, click the button that looks like a folder. The “Select Image Source” dialog box will appear, allowing you to choose the image for the background. To determine whether that background image is repeated, click the “Add property” link again and select the “background-repeat” item from the drop down box. Then click the down arrow to open the list of your options and select the appropriate one.
Saving and Publishing Your Web Page
Once you’ve finished customizing the background of your web page, save everything by using “File > Save All”. Then publish the page as shown in Part one, and check it in your browser.
Congratulations. You have now mastered some techniques commonly needed by web designers to customize the appearance of a web page!
Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver training course in Brighton, Sussex.
