BackFirst PageNext

Adding Color to Web Pages

In HomeSite, you can add color to your Web pages using color attributes in a range of tags, including the BODY, FONT, HR, and the TABLE tags. For example, to set a document's background color to aqua and the text color to purple you can use the following attributes in the BODY tag:

<BODY BGCOLOR="Aqua" TEXT="Purple">

When adding color to your Web site, you need to balance design concerns with the vagaries of users' browsers and display systems.

Using named colors or hexadecimal values

In HTML, you can specify Web colors either by name or by hexadecimal values. For the BODY tag shown above, you can also use the hexadecimal equivalents for the color names aqua and purple:

<BODY BGCOLOR="#00FFFF" TEXT="#800080">

Some named colors are not read by all browsers. To make HomeSite always use hexadecimal values for all colors, use the Tags settings in the General pane of the Settings dialog box (F8).

Color-coding tags in HomeSite

This section explains how to add color to your Web pages. To set colors for tag coding, open Options > Settings > Color Coding tab.

Setting Color Values in HomeSite

For the set of HTML tags that support color, you can add colors using tag tools, the Tag Insight popup menus, tag editors, and the color palettes. This section shows you how to set color values for new documents using dialog boxes as well as for existing tags or tags you edit with popup menus.

To set background, text, and link colors:

  1. Open an HTML document and click the BODY tool on the HTML Standard toolbar to open BODY dialog box. Or click inside a BODY tag, right click, and choose Edit Tag.
  2. In the Background Color menu, choose a named color. The preview window shows your selection.

    Or, choose Custom in the Background Color menu to open the Color dialog box. See the procedure, To use the Color dialog box to define a custom color, for information on custom colors.

  3. Choose color values for the text and link attributes if you want to override the default colors. Click OK.

To add colors to existing tags:

  1. Click inside the BODY tag, before the closing bracket (>) and press the space bar. The Tag Insight menu appears.

    If the Tag Insight menu doesn't appear, open the Options > Settings dialog box, and in the Tag Help pane, make sure the Tag Insight box is checked. Click OK and repeat step 1.

  2. Choose an attribute that supports color, such as BGCOLOR, in the Tag Insight popup menu.
  3. In the BGCOLOR drop-down menu, choose a named color, such as Aqua. Or, choose Custom Color to launch the Color menu.
  4. To specify text and link colors for the BODY tag, repeat these steps for the TEXT, ALINK (active link), LINK, and VLINK (visited link) attributes.

    For tags that support background and border colors, such the TABLE tags and the FRAMESET tag, you can use the Tag Inspector to add color to the BGCOLOR and BORDERCOLOR attributes.

Note

You can also use the Tag Inspector to set named and custom colors for these tags. See Editing Web Pages for instructions on using the Tag Inspector to edit HTML tags.

Using Custom Colors

You can refine your color selections by using the Custom Color palette. This offers a broader choice of colors, but you can't be sure that all users will be able to see custom colors in their browsers.

To use the Color dialog box to define a custom color:

  1. In the Tag Inspector, individual tag editors, and the Tag Insight pop-up menus that support color, if you choose Custom Color, the Color dialog appears, showing 48 basic colors. You can choose a color from this set or define a new color.
  2. To create a custom color, press the Define Custom Colors bar to open the full color matrix.
  3. Click in one of the empty Custom colors boxes.
  4. Choose a color in the color matrix and use the slider on the right to adjust the color's attributes. You can also adjust the hue, saturation, and luminosity manually. The Color|Solid box shows your selection.
  5. Press Add to Custom Colors and click OK to insert the color value into the current tag.

Browser-safe colors

While some monitors can display millions of colors, for most Web pages it's best to stick to the palette of browser-safe colors that are interpreted correctly in most browsers and platforms. HomeSite uses a browser-safe color palette (the Safety Palette) as the default palette for all HomeSite documents.

For more information on identifying and using Web-safe colors see Lynda Weinman's site on Web colors, http://www.lynda.com/hex.html.

Using Color Palettes

HomeSite provides six color palettes, which offer collections of named colors, browser safe colors, and several sets of standard Windows colors. You show and hide palettes using the Palette tool on the Tools toolbar.

To use colors from a color palette:

  1. Click inside a tag attribute that takes color values.
  2. Click the Palette tool on the Tools toolbar to open the default color palette.
  3. Choose colors from this palette to insert a color value at the insertion point in the current document.
  4. To open a different color palette, click the Options button on the bottom left-hand side of the current color palette.
  5. Use the Options menu to open other palettes. You also can create, edit, and delete custom palettes from this menu.

Custom color palettes

You can create and edit your own custom color palettes, using a color picker to choose colors visually, or by entering RGB or hexadecimal color values.

To create a new color palette:

  1. Click the Palette tool on the Tools toolbar to open the default color palette.
  2. Click the Options button on the bottom left-hand side of the color palette.
  3. Select RGB values or press and drag the color picker button to the color spectrum to choose a color. The Current Color display shows your selection.
  4. Release the mouse and choose Add to include the current color in the new palette.
  5. Click Save and enter a name for the palette. The new file is saved with the file extension PAL in the Palettes subdirectory under your HomeSite installation.

Tip

You can use the color picker in the Color dialog box to add colors from other applications. Arrange your desktop to display the application windows, then open the Palette dialog and drag the color picker to the color you want. Release the mouse button and click Add.

To add a palette from Paint Shop Pro:

  1. In PaintShop Pro, choose Colors > Save Palette to open the Save Palette As dialog.
  2. Enter a name for the palette.
  3. Set the Save as type to PAL - JASC Palette.
  4. Save the palette file to your HomeSite\UserData\Palettes directory.

Now the palette you imported from PaintShop Pro displays in the Options menu on HomeSite's Color Palette.


BackFirst PageNext

allaire

AllaireDoc@allaire.com
Copyright © 1998, Allaire Corporation. All rights reserved.