Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book

Creating a custom color palette and adding color to text

You can collect and organize colors for a site in the Colors tab of the site window. The colors appear in both the Colors tab and the Site Color List in the Color palette, either of which you can use as a custom color palette to color text and objects on a page. When you change a site color in the Colors tab, GoLive automatically updates every occurrence of the color in the site on pages that are closed.

As an alternative to applying color using the Colors tab or the Color palette, you can create a cascading style sheet to apply color to text and objects. Cascading style sheets simplify the maintenance of text and other attributes on a page and throughout a site.

Now you'll add color to emphasize text on the page.

  1. In the site window, click the Colors tab to bring it to the front. So that you can see all the information listed in the Colors tab, close the right pane of the site window by clicking the double-headed arrow () below the scroll bar for the left pane.

    Figure 32Colors tab in site window

    Notice that the Colors tab contains a New Colors folder that contains a site color named white, which is used as the default background color for the home page.

  2. Choose Window > Color, or click the Color tab to open the Color palette.

  3. In the Color palette, make sure that the Web Color List button () is selected. In the Value text box, enter 990000. Press Enter or Return.

    The selected color appears in the vertical preview pane on the left side of the Color palette.

  4. Drag the color from the preview pane, and drop it on the New Colors folder.

    Figure 33Dragging color from preview pane to Colors tab in site window

  5. An untitled color—the color you selected in the Color palette—is added to the Color tab. Now you'll rename the color according to how you'll use it in the site. Because you'll use the color to emphasize text, you'll name the color "emphasis."

  6. In the Colors tab of the site window, click the name of the untitled color to select it. Enter emphasis to rename the color.

    Now you'll color some of the text on the page using the emphasis color.

  7. In the document window, drag to select the text "Check Out This Week's Hottest Buy!"

  8. Drag the emphasis color from the Colors tab of the site window to the selected text on the page. Then click in the blank area outside the selected text to deselect it.

    The color of the selected text changes to red.

    Figure 34Dragging color from site window to selected text


    You can use the Color palette's eyedropper to extract a color from an image or other element on the screen. Then you can find the closest Web-safe approximation of the color in the Web Color List and add the color to the Colors tab. This feature is useful when you want to match the color of two objects on a page, such as an image and page background.

    Now you'll add another untitled color to the Colors tab, extract a color from the company logo in the component on the page, and add a Web-safe approximation of it to the Colors tab.

  9. iconDrag the Color icon from the Site set () in the Objects palette, and drop it on the New Colors folder in the Colors tab of the site window.

    Figure 35

    An untitled color is added to the New Colors folder. Now you'll extract a color from the company logo.

  10. Move the pointer to any color swatch in the Color palette, so that the pointer turns into an eyedropper.

  11. Drag the eyedropper from the Color palette to the shadow of the guitar pick on the page, and release the mouse. Notice that the color changes in the preview pane of the Color palette as you drag the eyedropper.

    Figure 36Extracting color from image on page

    When you release the mouse, the extracted color appears in the preview pane, and the Web-safe colors that most closely match it appear at the top of the list on the right side of the palette. Ours was 999966.

    Now you'll change the untitled color in the New Colors folder to the selected color.

  12. Drag the color from the preview pane to the untitled color in the New Colors folder.

    You'll rename the color "shadow" because that's how it's currently used in the site.

  13. In the Colors tab of the site window, click the name of the untitled color to select it. Enter shadow to rename the color.

  14. In the Web Safe column of the Colors tab in the site window, notice that the shadow color has a bullet, indicating that it's Web safe.

    If desired, you can now match the color of text or an object on the page with the shadow color.

  15. Choose File > Save to save index.html.

Now you'll add keywords, comments, and a date and time stamp to the home page.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus