labslab 4

during lab

new pages | colors | tables | typography | linking | images | navigation | image maps | publishing

Colors

Colors play an important part to any web site. They can excite, calm, or stimulate any other feeling or mood you wish when a visitor comes to your web site. You can change the colors of text, links, backgrounds, and more.

To start, it is important to choose a good color scheme. When you instruct Dreamweaver to show particular colors, you need to know the html color codes for each color. For example, the color code for black is #000000 and the color code for white is #FFFFFF.

You can find html color codes by visiting this site created by Photius Coutsoukis.

If you have trouble matching colors, or just want to look up some free advice on the subject, then take a look at the following web sites:

http://www.colorschemer.com/schemes/

http://wellstyled.com/tools/colorscheme/index-en.html

http://www.siteprocentral.com/html_color_code.html

Setting Color Scheme

Once you decide on a color scheme and have all of your html color codes written down, you can use Dreamweaver to set the color scheme.

1 - Open the html page that is in need of a color scheme

2 - Use the keyboard combination of CTRL-J to access the page properties or click modify...page properties

3 - In the page property dialog box you will find categories like appearance, links, and headings. Use the appearance category to set the font color and background color of the web page. Use the links category to set the links color and visited links color. You can even change the colors of the different headings in Dreamweaver by using the headings category. Once your choices are complete you must click OK.

It is "good design" to use the same color scheme on each page of your web site to keep the site a consistent look.

Note: Each time you edit your color settings, Dreamweaver adds CSS (cascading style sheets) to your source code. In lab 5 you will learn how to take this code out of your page and create an external style sheet that can be used for every page of your website. This will save you a lot of time and will make creating consistent sites a simple task.

 
 

 

home page prior to lab section home work section weekly lab main page