This chapter concentrates on how to change the default white background of your website. This includes changing the colour of selected areas of your website, and the option of adding a background image as the backdrop to your website. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
Basic Things to Note About Changing Colours or Adding Background Images
Before we can begin, there are a few important things to take into consideration:
1: Colour contrast: Make sure that when you change the background colour of your website it is best to choose highly contrasting colours. Try not to put red words on a blue background (or vice versa), grey words on a black background or yellow words on a white background as this will make it very hard to read.
2: Make Sure Background Images Do Not Interfere with Foreground Text: If you’re adding a background image, make sure the image does not make it difficult for visitors to read your page. Background colours and images are merely the backdrop to your main content, so be careful not to distract visitors to what your website is actually about.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 6th, 2009 | No Comments »
Part 4.1: Changing the Background Colour or adding a Background Image
Load Dreamweaver CS4 and double-click the “index.html” file in the FILES pane. You should see the two column layout that we created in Dreamweaver Training Part 1, a site logo and graphics that we added in Dreamweaver Training Part 2, and customised font settings made in Dreamweaver Training Part 3.
Take a look at the background colours of your web page as it currently stands. There are a few set colours already in place; the header, footer and side bar have different shades of light grey, the main content has a white background, and the background behind the two columns (page background) has a dark shade of grey.
Changing the Page Background
Click anywhere on your page.
In PROPERTIES at the bottom of the Dreamweaver window, click the button that says “Page Properties”.
A dialog box entitled “Page Properties” will appear. You can either:
- Change the Background Colour: Click the square box beside the word “Background color”. A colour picker window will appear, allowing you to change the colour. Click on the colour you desire. If you decide that you really don’t want to change the colour after all, hit the ESC key on your keyboard. When you’re satisfied, click the “OK”. Your web page background should automatically have changed colour.
- Use a Background Image: make sure an image has been saved into your “images” folder. Then, in the Page Properties dialog box, click the “Browse” button.
A dialog box with the title bar reading “Select Image Source” will appear. Double-click the “images” folder in the dialog box. Select the picture you require for your background. Once your image is selected, click the “OK” button.
The background image file and folder name should now appear in the “Background image” field.
Click the down arrow for the “Repeat” field (underneath the “Background image” field). If your image is small, and you want to duplicate copies of the image to fill the entire window, click “repeat” in the drop down box. If you are happy with the size of your image, and you do not need to duplicate it, click ‘’no-repeat’’. You can also make the image tile horizontally (“repeat-x”) or vertically (“repeat-y”).
Remember, you can view your web page with the changes you selected without leaving the dialog box. If you clicked “repeat” but are not sure whether it looks good for your site, click the “Apply” button at the bottom of “Page Properties”. 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 decided you no longer require a background image, and have clicked ‘’Apply’’, clicking ‘’cancel’’ will not undo your change. To do this you will need to click the “Background image” field and use the DEL or backspace key to remove the filename and folder.)
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
