Colors in FrontPage 2003

FrontPage doesn't have a single control for managing color, but rather, several entry points to the color controls. Whether it's text color, a background, or a complete color theme, the controls always seem to be there when you need them.

Selecting Colors

If you look at the Web, you see a lot of color. It seems to fill every corner of every page, and it isn't just found in graphics. Most of the color selection tools are part of the various format dialog boxes. Table 43.1 contains a list of which elements can be colored and where the color selector is found.

Table 43.1. Color Selector Locations in FrontPage

Element	Location
Text	Font dialog box or Formatting toolbar
Borders and Shading	Borders and Shading dialog box
Normal Hyperlinks	Page Properties dialog box, Formatting tab
Active Hyperlinks	Page Properties dialog box, Formatting tab
Visited Hyperlinks	Page Properties dialog box, Formatting tab
Page Text	Page Properties dialog box, Formatting tab
Page Background	Page Properties dialog box, Formatting tab
Table Background	Table Properties dialog box
Table Borders	Table Properties dialog box
Cell Background	Cell Properties dialog box
Cell Borders	Cell Properties dialog box
Horizontal Lines	Horizontal Line Properties dialog box

All the color selection dropdown menus are initially set to Automatic. This setting enables FrontPage to manage the color by using themes or predefined style sheets. Selecting a color overrides this automatic setting, but the first option in the color popup menu will allow you to re-enable the automatic setting.

Standard and Document Colors

The next section in the color popup menu contains the Standard Colors. These 16 colors are standard across a broad range of operating systems and browsers. They also make choosing and applying a basic color to an element quick.

Any new colors selected and applied to your current Web page are added to the Document Color section. This provides a quick look at the range of colors your page is using. This is a good reference for piecing together a pleasing color scheme. If the Document Color section shows a mess of disharmonious colors, you should rethink your color selections.

Browser-Safe Color Palette

The More Colors option opens a dialog box with the browser-safe colors presented in a pleasant hexagon shape. You can safely select any of these colors and rest assured that the same peacock blue you designed your site with will show up the same no matter the system or browser.

NOTE

Obviously this isn't the case for browsers that don't show color.

If the safe colors still don't have what you need, you can select a color by using the Eye Dropper tool or selecting a custom color.

Using the Eye Dropper

Have you ever painted a room? Choosing the perfect color can be the trickiest part of the process. To find the matching color requires several trips to the paint store. Each time you return with several small strips of colors. When you finally find the right one, you are usually holding it in your hot little hand. If you lose the color strip, it's back to the drawing board to start the process over again.

Sometimes this happens when designing a site. If you have an image that holds the exact tones you need, you might struggle to match the same tones from a palette. The Eye Dropper tool, found in the More Colors dialog box, lets you grab any color you can see, including colors in other applications. After you click the Select button to enable the Eye Dropper tool, the tool stays active until you click again. You can make the tool disappear by pressing the Esc key on the keyboard.

Suppose that you want to grab a color for your page background; this is how it works:

1. Open the Page Properties dialog box's Formatting tab by selecting Format, Background.

2. Click the Background dropdown list for the background color.

3. Select More Colors.

4. Select the Eye Dropper tool by clicking the Select button shown in Figure 43.6. The cursor will change to an eye dropper tool.

   Figure 43.6. Selecting existing colors with the Eye Dropper tool.

   

5. Click the color you want to select. This color becomes the new color.

TIP

The power of the Eye dropper tool can not be overstated. You can use it to pull colors from any graphic on any program on your desktop pull color from a Web page, desktop image or anything else you can imagine.

Because the eye dropper can only capture color that can be seen on the screen, you will need to resize FrontPage to take up less than the entire screen if you want to pull from another program.

If you are having a hard time choosing the "right" color for a Web page with all the technologies we've detailed, see "Choosing Proper Colors" in the "Troubleshooting" section at the end of this chapter.

Custom Colors

The Custom button takes you to the final option for colors. This opens the Color dialog box, which is the default Windows color selector (see Figure 43.7). By using the controls on the right, any color within the 16.7 million colors in the 24-bit spectrum are possible. This should be more than enough colors for even the most demanding designer.

Figure 43.7. The default Windows color picker is used for custom colors.

Any custom colors selected become instantly available in the color popup menu thereafter.

Theme Colors

A surefire way to make your colors match is to use themes. Chapter 7, "Using Themes," covers the details about themes, but theme colors are unique enough to be mentioned here.

For more information on FrontPage and themes, see "Using Themes," p. 133.

The Themes task pane has a toggle button for turning vivid colors on or off, but the really interesting color options show up when you click the Create New Theme link. This makes three buttons appear, as shown in Figure 43.8. One of these buttons is Colors.

Figure 43.8. Themes can be modified in three ways.

Clicking the Colors button opens the Customize Theme dialog box for colors. Three tabs are available in this dialog box: Color Schemes, Color Wheel, and Custom. The Color Schemes tab (see Figure 43.9) shows the color schemes for each of the loaded themes. You can choose any of these schemes for your current theme by clicking it. The Preview of New Theme pane shows the current theme with the new color scheme.

Figure 43.9. Choosing a theme's color scheme.

If none of the current color schemes fit the bill, click the Color Wheel tab. This opens a color wheel where you can select a new custom color scheme. The five colors that make up the color scheme are interrelated, so when a new default text color is selected in the color wheel, complementary colors are automatically updated. Figure 43.10 shows the color wheel at work.

Figure 43.10. Selecting a custom color scheme by using the color wheel.

The Custom tab enables you to handpick the colors for a variety of Web page elements, including hyperlinks, background, and all heading levels.

After you've applied a theme, the theme colors will show up in the color popup menu for easy selection.