As part of a website's design, many webmasters want to change the default white background of their website. This may take the form of a change of colour (or "color" if you use US English) or the placement of an image as a backdrop. This chapter of the Dreamweaver CS4 tutorial shows you how you can do this.
Those who have not read the previous chapters of this Dreamweaver CS4 tutorial series may want to start with the first chapter, How to Create a Website with Dreamweaver CS4. The article you're reading assumes that you have completed all the steps taught in the previous chapters and have the necessary theoretical and practical knowledge covered in those chapters. For this reason, if you're only just plunging into this chapter alone, some of the terms used and procedures described may be mystifying to you.
By the end of this chapter, you will be able to:
Change the background colour of your whole web page using Dreamweaver CS4.
Change the background colour of selected portions of your web page, like the side bar, the main content section, the header and the footer.
Add a background image as the backdrop to your web page, or selected section of your web page.
This chapter also introduces the Dreamweaver status bar, a useful tool that allows you to select different elements on your web page for customization.
Before we change the background colours or add background images to your web page, it is important to note the following.
When you change the background colour of your web page, make sure that you choose highly contrasting colours for the foreground text and its background. For example, don't put red words on a blue background (or vice versa), grey words on a black background or yellow words on a white background, to name a few combinations I've seen on websites created by beginning webmasters. Such combinations make your website very hard to read, even for people with normal eyesight. They create even worse accessibility problems for those who are colour-blind or have poor eyesight (including older people).
If you're adding a background image, make sure that the image is such that it does not make it difficult for visitors to read your page. This may seem obvious to you, but since I've encountered a few beginning websites with this problem, I thought I should at least mention it.
The basic principle is that background colours and images are merely the backdrop to your main content. Change them all you want to make your site pleasing to the eye, but don't let them detract from the content itself. Your site's visitors are not there to gawk at your background colours or image. They are there to buy your products or read your content.
If you've not already done so, start up Dreamweaver CS4 and doubleclick the "index.html" file in the FILES pane. Your web page at this point should have the two column layout that we created in chapter 1, a site logo and possibly other graphics that we added in chapter 2 and any customized font settings that you made in chapter 3.
If you were to look at the background colours of your web page as it currently stands, you will see that it basically has a few sets of colours.
The header, footer and side bar has different shades of light grey.
The main content section has a white background.
The background behind the two columns, header and footer has a dark shade of grey. I shall refer to this as the "page background", since this is actually just the default background colour of your entire page as set by Dreamweaver's two column template.
To either set the colour for the page background or to use a picture as its background image, click anywhere on your page. It doesn't matter if you click somewhere in the header, the side bar or the main content.
In the PROPERTIES panel at the bottom of the Dreamweaver window, you should be able to see a button that says "Page Properties". Click it.
A dialog box entitled "Page Properties" will appear. Do either one of the following (depending on whether you want to change the background colour or set a background image).
To change the background colour, click the square box beside the word "Background color". A colour picker window will appear, allowing to change the colour. Just click the colour you want and the colour picker window will disappear, leaving your colour change reflected in the square box. If, after you click the colour picker, and you decide that you really don't want to change the colour after all, hit the ESC key on your kebyoard to get out of the colour picker without making any changes. When you're satisfied with your change, click the "OK" button to dismiss the Page Properties window.
Your web page should immediately reflect the colour change.
If you want to use a background image, make sure that you have copied your image into your "images" folder as you did in chapter 2. Then, in the Page Properties dialog box, click the "Browse" button beside the "Background image" field.
A dialog box with the title bar reading "Select Image Source" will appear. Double-click the "images" folder in the dialog box. When the images in the folder appear, select the picture that you want to use as your background. Again, as before when you were adding pictures to your site, you can click each file to see the picture in the "Image preview" window if you cannot remember which filename goes with which picture. When you've selected your image, click the "OK" button.
The background image file and folder name should now appear in the "Background image" field.
Now click the down arrow for the "Repeat" field (just underneath the "Background image" field). If your image is small, and you want it repeated so that duplicate copies of the image fills the entire window (like tiles on a floor), click "repeat" in the drop down box. If the image is big, or if you simply don't want it repeated, click "no-repeat". It's also possible to make the image only tile horizontally ("repeat-x") or vertically ("repeat-y"). Choose whichever is appropriate for your particular image or your personal taste.
Note that it's possible to see your web page with the changes you select without leaving that dialog box. For example, if you clicked "repeat" but are not sure whether it looks good for your site, just click the "Apply" button at the bottom of the "Page Properties" dialog box. In the background, behind your dialog box, you should be able to see your page with the changes. If you're not satisfied with it, just change the repeat pattern and click "Apply" again. When you're satisfied with your choice, click the "OK" button.
(Note: if you change your mind about using a background image, and have clicked the "Apply" button earlier, clicking the "Cancel" button will not undo your change. To undo it, click the "Background image" field and use the DEL or backspace key to remove the filename and folder. That is, empty that field. You can leave the "Repeat" field as it is.)
Before we can configure the background of the rest of the page, namely the header, footer, side bar (left column) and the main content (right column), you will need to familiarize yourself with the Dreamweaver status bar.
To help you understand the status bar, first put the text cursor somewhere in one of your paragraphs in your side bar. That is, click somewhere in the left column, such as in the paragraph "The background color on this div will only show..." (etc).
Now look for the status bar, which is located near the bottom of the Dreamweaver window, just between your web page and the PROPERTIES panel. It looks something like the following picture, although the exact words displayed may differ depending on which portion of your page you clicked and how big your Dreamweaver window or monitor is.
In spite of its innocuous appearance, the status bar is important in Dreamweaver if you want to customize your website's appearance.
It allows you to select entire blocks in your web page so that you can change things like colours, fonts, etc, of whole sections of your
page in one go. Notice that the left side of the status bar contains apparently gibberish text, enclosed in angle brackets,
such as "<div#container> <div#sidebar1> <p>". Again, the exact
words appearing here may be different depending on where you clicked on your page and how big your Dreamweaver window is.
For ease of reference, I shall refer to these
words enclosed in angle brackets as "tags" from this point forward. For example, "<p>" is one tag,
"<div#sidebar1>" is another tag and "<div#container>" is yet another tag.
Contrary to what you may think, each of these tags in the status bar is actually a clickable button. Clicking each tag will select a different block enclosing the spot where your text cursor is in. Try it.
For example, if the left side of your status bar looks exactly like mine, click the "<p>" tag. Notice
how the entire paragraph is selected when you do this. This is because "<p>" refers to a
"paragraph" in the underlying code of your web page. (This underlying code, by the way, is called
"HTML" in webmaster jargon.) Observe also that the "<p>" tag on the status bar is now enclosed
in a white box to show that it's currently selected (because you clicked it).
Now click the "<div#sidebar1>" tag. This time, notice how the entire left column is selected.
Finally, click the "<div#container>" tag. Both the columns, the header and the footer should now be selected.
Each of these tags indicates a block of items on the screen. The "<p>" block is designed to hold
a single paragraph of text, hence its name. This paragraph block lives in a bigger block, the side bar block. The side bar block, however, does
not use a "<p>" tag, since a "<p>" tag is only used for a paragraph of text. Your side bar can
contain words, pictures, lists of items, and so on. As such, a different tag is needed, namely a "<div>" tag. The block
managed by a "<div>" tag is often called a DIV block (naturally).
And as you found out, this side bar DIV block is itself enclosed
in an even bigger DIV block that Dreamweaver uses to contain all the columns, header and footer on your page.
To reinforce what I've just said, put your text cursor in a different section of your page, such as the header (the top horizontal bar
where you placed the name of your website in chapter one). Once again click the different tags. Notice that your company name itself is
enclosed in a different type of tag, the "<h1>" tag. This is in turn enclosed inside a DIV block ("<div#header>"
this time). And as all things on your Dreamweaver web page is, this is enclosed in an even larger DIV block.
Feel free to put your cursor into different parts of your page, click the different tags on the status bar, and see which sections are selected. Don't worry. You don't have to memorize anything you see. The main point of this exercise is to provide you with some background so that you'll have a greater understanding of what you will be doing later in the practical "how-to" section.
(Okay, it's true. I'm also underhandedly sneaking in a bit of HTML knowledge, namely the tags and DIV blocks. Although Dreamweaver lets you design a website completely without knowing anything about things like HTML or CSS, a little knowledge tends to go a long way to help you understand why things work in a certain manner. Otherwise web design will end up being like voodoo.)
Now that you have figured out the status bar, and how to select an entire column or section, we will be able to configure the background of that section.
To start, put your cursor somewhere in the column or section that you want to customize. Look at your status bar, and click one of the following items on the bar (depending on which column or section you're in).
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.
Or, to put it another way, since you now know the technical lingo, select the DIV block that you want to customize.
The procedure for changing the background for the header, footer and side bar, but NOT the right column/main content section, is identical. Open the CSS STYLES pane on the right side of Dreamweaver. (See the previous chapter if you've forgotten how to do so.)
Double-click the "background" item in the CSS STYLES panel. (You may have to scroll down the box to find it.) The "CSS Rule Definition" dialog box that you met in the last chapter will appear.
You should now see the "Background-color", "Background-image" and "Background-repeat" lines that you met in the Page Properties dialog box in the section above. (The dialog box is not exactly the same, but those fields work the same way.) Configure them as you wish. If you have skipped that section previously because you didn't want to change the page background, go back and read just the parts "To Change the Background Colour" and "To Use a Background Image".
You cannot customize the right column the same way you did the other DIV blocks.
The reason is that the header, footer and side bars all have an existing background already set for their blocks, and you were
merely changing those. The main content DIV block however 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. As such, we will have to add the necessary
background properties (whether a colour or a background image) from scratch.
With the "<div#mainContent>" button on the status bar selected, expand the CSS STYLES panel on the right side of
Dreamweaver if you have not already expanded it.
Look for the line that says '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 the link. In its place, a drop down box should appear. (If it doesn't, just click it again.) Click the drop down arrow key beside it to open the entire drop down list box. If you want to set a background colour, select the item "background-color". If you want to set a image for the backdrop, select the "background-image" item.
If you selected the background colour item, a square box will appear beside the new property that you created. Click it and set the colour from the colour picker as usual.
If you selected the background image item, a blank box will appear. Beside the box, you will see two buttons. Click the button that looks like a folder. If you're not sure which button it is, move your mouse over each button (without clicking) and wait until a tooltip for that button appears. Click the button that has a tooltip of "Browse". The "Select Image Source" dialog box will appear, allowing you to choose the image for the background. To control whether that background image is repeated (as you did earlier), 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. (Note: if you don't know what this "repeat" thing means, it means you skipped the section above. Please revisit that section for more information.)
Once you've finished customizing the background of your web page, save everything by using "File | Save All" (that is, click the "File" menu followed by the "Save All" item in the menu that appears). Then publish the page as in the previous chapters, and check it in your browser.
Congratulations. You have now mastered most of the techniques commonly needed by web designers to customize the appearance of a web page -- namely, customizing the text, adding pictures, and designing the background.
In the next chapter, we will deal with one of the most important aspects of web page design: adding and customizing links. You will learn not only how to make text links, but also make your images into links that either point to other web pages or to larger version of those images (such as commonly found in photo gallery websites).
Copyright © 2008-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
The Beginner's A-Z Guide to Starting/Creating Your Own Website » List of All Dreamweaver Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Change the Background of Your Website in Dreamweaver CS4
