How to Change the Background of Your Website in Dreamweaver CS4

Dreamweaver CS 4 Tutorial Chapter 4


How to Change the Background of Your Website in Dreamweaver CS4 (Chapter 4)

by Christopher Heng, thesitewizard.com

As part of a website's design, many webmasters want to change the default white background of their website. They may want to change its colour (or "color" if you use US English) or place a background 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.

Goals of this Chapter

By the end of this chapter, you will be able to:

  1. Change the background colour of your whole web page using Dreamweaver CS4.

  2. Change the background colour of selected portions of your web page, like the side bar, the main content section, the header and the footer.

  3. 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.

Basic Things to Note About Changing Colours or Adding Background Images

Before we change the background colours or add background images to your web page, it is important to note the following.

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.

How to Change the Background Colour or Add a Background Image in Dreamweaver CS4

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.

Changing the Page Background

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).

Introducing the Dreamweaver CS4 Status Bar and a Smattering of HTML

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.

Dreamweaver CS3's status bar

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.)

Changing the Background of the Header, Footer, Side Bar and the Right Column (Main Content)

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.

Saving and Publishing Your Web Page

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-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://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 »

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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 http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Change the Background of Your Website in Dreamweaver CS4 (Chapter 4)





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.