Working with Colors

This tutorials will teach you about working with colors in Dreamweaver CS5.

Another aspect of designing and building web pages that we need to look at early on is color.

The most striking web pages tend to be the ones that use color well, and it's important that you know how to incorporate color into your pages. Color is a very powerful way to personalize the look and feel of your sites and pages.

Dreamweaver Colors

To see how Dreamweaver lets us specify colors, let's look as the Preferences dialog again but his time choose the category Highlighting.

In this category we can see which color has been set to highlight various features on a page. For each feature there is a small sample of the color and to its right a hexadecimal code (one that uses number base 16 instead of 10) for the color. Now, you don't need to worry about using these hexadecimal codes because Dreamweaver pretty much sorts all of that out for you, but they can be important, so don't ignore them!

Here is the selection for Mouse-over.

If I want to change the color being used for this, I can just enter a new hexadecimal code, but you may well not be ready for that yet, so instead we use the Color Picker.

Click on the small wedge in the bottom right hand corner of the colored box next to the words Mouse-Over.

You can now select from one of the colors shown as the new highlight color for a mouse-over (i.e. moving the mouse over an object).

And, in fact, there is an even wider choice available. If you click on the circular icon in the top right of the Color Picker (it's called the Color Wheel) you'll see the System Color Picker, that contains not only a wide range of available colors but a few ways of selecting any color that can be produced by your PC.

In the bottom right of this dialog you can see numbers that correspond to the two main ways of specifying color using internal computer codes in the form of numbers. The HSL (Hue, Saturation, Luminosity) system is one option, and the RGB (Red, Green, Blue) system is the other.

The RGB codes for the color shown are 255, 112 and 112. These are decimal numbers, and in hexadecimal they would be FF, 70 and 70, and these are the codes that we saw originally. So, it's worth remembering that in the System Color Picker the RGB codes are shown in decimal, whereas in Dreamweaver we'll usually see the codes as hexadecimal numbers.

Note how my selected color is highlighted. If I choose a different color, note how the HSL and RGB codes change.

As we work on pages you'll see how we can use the color picker options to choose the colors we need quickly, and that in some situations the use of the codes can be very helpful.

Although the facilities in Dreamweaver let you choose from a vast range of available colors, you may want to restrict yourself to what are called web-safe colors, which are the ones that ensure that your pages appear the same in a wide range of browser and across both the PC and Mac platforms when running in 256-color mode. Don't forget, you need to try to cater for as many of your users (and their browsers) as possible.

Having said that, most newer monitors display thousands and some millions of colors so this is becoming less and less of an issue.