Dreamweaver ResourcesSkip Navigation Links
|| Multimedia || Dreamweaver Home > How-To Home > Color ||                          

Color

Color on the Web

Color on the Web is different than the color you see in books, magazines, and other printed materials.  Colors on the Web are created using a combination of tred, green, and blue, because monitors (and tv's) only display colors in terms of red, green, and blue.  The colors are named using a six-digit code, or hexadecimal code.  The first two digits are reserved for red, the second two digits are reserved for green, and the last two digits are reserved for blue.  For example, the hex code for the color orange is #FF6600.

The numbers for the hex code go from 0 to 9, then A to F.  Zero is the lowest shade of the color, and F is the brightest shade of the color.  Think in terms of a monitor, or tv.  The zero value woud be the absence of light in the monitor for that color, and F would be the brightest light shining through the monitor.  For example, the hex code for Black is #000000, and the hex code for White is #FFFFFF.

Dreamweaver makes the choosing colors as simple and clicking on the color of your choice.  Anywhere that you can change the color of something, Dreamweaver provides a color box that you can click on.  A palette pops up with a variety of colors to choose from, and the mouse cursor has changed into an eyedropper.  This eyedropper is called the color picker.  Move the color picker over the palette to find a color you would like to use.  Click once on the color, and that will change the color.

Back to Top

Default Text

  1. Go to the Modify menu, and choose Page Properties.
  2. A dialog box will open.
  3. Click on the color box by the Text field. (Figure 1)
  4. Choose a color from the color palette. The default color is black. (Figure 2)
  5. Click Apply to see the text color change.
  6. Once you have found the color for the text, click OK.
Changing the Default Text Color
Figure 1 Figure 2
The Color Box in the Page Properties Dialog Box
The Color Box

 

Back to Top

Hypertext Links

  1. Go to the Modify menu, and choose Page Properties.
  2. A dialog box will open.
  3. Click on color boxes by the Link, Active Link, and Visited Link fields. (Figure 1)
    • Link - The color the link will be the first time someone visits the page.  The default color is blue.
    • Active Link - The color the link will change to while the person is clicking on the link.  The default color is red.
    • Visited Link - The color the link will change to when the person visits the page a second time.  The default color is purple.
  4. Choose a color from the color palette for each of the link fields. (Figure 2 )
  5. Click Apply to see the links change color.
  6. Once you have found the colors for the links, click OK.
Changing the Link Colors
Figure 1
Link Color Fields in the Page Property Dialog Box
Figure 2
The Color Box

Back to Top

Selected Text

  1. Highlight the text you want to color. (Figure 1)
  2. Click on the color box on the Property Inspector Palette.
  3. Choose a color form the color palette. (Figure 3 )
  4. Deselect the text.
Changing the Color of Selected Text
Figure 1
Selected Text on a Web Page
Figure 2
Text Color Box on the Property Inspector Palette
Figure 3
The Color Box

 

Back to Top

Table Background

  1. Select the table. (Figure 1)
  2. Click on the color swatch on the Property Inspector Palette. (Figure 2)
  3. Choose a color from the palette. (Figure 3)

Please note:

  • In Netscape Navigator, borderless tables will show each cell in the table with a colored background.
  • In Internet Explorer, borderless tables with a colored background will look like a solid block of color.
Changing the Background Color of a Table
Figure 1
Selected Table in Dreamweaver
Figure 2
Table Background Color Swatch
Figure 3
The Color Box

Back to Top

Table Border

  1. Select the table. (Figure 1)
  2. Click on the Brdr color swatch on the Property Inspector Palette.(Figure 2)
  3. Choose a color from the palette. (Figure 3)

Please note:

  • In Netscape Navigator, the border will be colored and look 3-D.
  • In Internet Explorer, the border will be colored, but it will look flat.
  • Ignore the Light Brdr and Dark Brdr, because they only work in Internet Explorer.
Changing the Border Color of a Table
Figure 1
Selected Table in Dreamweaver
Figure 2
Table Border Color Swatch
Figure 3
The Color Box

Back to Top

Table Cell Background

  1. Select the cell(s). (Figure 1)
  2. Click on the Bg color swatch on the Property Inspector Palette. (Figure 2)
  3. Choose a color from the palette. (Figure 3)

Please note:

  • This looks the same in Internet Explorer and Netscape Navigator.
  • If the table is borderless, each cell in the table will look separate from the others.
Changing the Cell Color of a Table
Figure 1
Selected Cells in a Table
Figure 2
Figure 3
The Color Box

 

Back to Top

Web Page Background

  1. Go to the Modify menu, and choose Page Properties.
  2. A dialog box will open. (Figure 1)
  3. Click on the color box by the Background field.
  4. Choose a color from the color palette. The default color is white. (Figure 3)
  5. Click Apply to see the color appear in the background of the Web page.
  6. Once you have found the color for the background, click OK.
Changing the Web Page Background Color
Figure 1
Page Property Dialog Box
Figure 2
The Color Box

 

Back to Top

Updated 6/16/05
The Citadel | Hotline | Computing | WebCT Login