• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 3. Designing Web Pages > Creating a custom color palette and adding colo...

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.

Colors 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.

Dragging color from preview pane to Colors tab in site window

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.”

5.
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.

6.
In the document window, drag to select the text “Check Out This Week's Hottest Buy!”

7.
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.

Dragging 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.

8.
Drag 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.

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

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

10.
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.

Extracting 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.

11.
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.

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

13.
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.

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

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

Specifying keywords

You specify keywords for a page so that Internet search engines and browsers can identify content in the page. To specify keywords, you add a Keywords element to the head section pane of the document window, and then use the Keywords Inspector to add a list of keywords for the element.

Now you'll specify keywords for the home page.

1.
To display the head section pane, click the triangle next to the Page icon () in the upper left corner of the document window.

2.
Drag the Keywords icon from the Head set () in the Objects palette to the head section pane.

Adding Keywords element to head section

A Keywords element is added to the head section of the page, and the Inspector changes to the Keywords Inspector.

To add an element to the head section pane, you can also drag it to the body of the page to have GoLive automatically open the head section pane and add the element to it.



3.
In the Keywords Inspector, click the New Item or New Keyword button () to add a new keyword to the list. Then enter a word or phrase that you want to use as a keyword in the text box at the bottom of the Inspector. (We used the phrase “Gage Vintage Guitars.”) Press Enter or Return. The new keyword is listed in the Inspector pane and added to the document head pane.

Adding keywords using Keywords Inspector

4.
Click the Source tab in the document window to check that the keyword is added correctly. Click the Layout tab to return to the Layout Editor.

5.
Click the triangle next to the Page icon to close the head section pane.

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

Adding comments

As you lay out content on a page, you may want to add hidden comments about its design for future reference. Comments appear in GoLive in the Comment Inspector and the source code and other HTML editors, but they don't appear in browsers. You can add comments to the head section or the body of a page.

Now you'll add comments to the body of the home page.

1.
Drag the Comment icon from the Basic set () in the Objects palette to an area nearby the “Check Out This Week's Hottest Buy!” text.

A symbol appears on the page to indicate the comment's location, and the Inspector changes to the Comment Inspector. You enter comments in the Comment Inspector.

2.
In the Comment Inspector, delete the text “your comment here,” enter the following text: Remember to add navigation links to this page.

Now you'll view the comment.

3.
Click elsewhere in the work area to have the Inspector change from the Comment Inspector. For example, we clicked on the text block, “Check Out This Week's Hottest Buy.”

4.
Click the Comment icon on the page to select it, and then view your comments in the Comment Inspector.

5.
Click the Source tab in the document window to view your comment in the source code. Click the Layout tab to return to the Layout Editor.

6.
Choose File > Save to save your work.

Adding a date and time stamp

You can add a date or time stamp to a page, so that viewers can tell when you last updated the page. GoLive reads the current date or time from your computer's built-in clock and writes the result in a custom tag. It then updates the information dynamically whenever you save the page.

Now you'll add a date and time stamp to the home page. First you'll add descriptive text before the date and time stamp.

1.
In the table that contains the descriptive paragraph about Gage Vintage Guitars, click after the last character (!) to insert a cursor, and press Enter or Return to begin a new line of text. Then type Last revised: with a space after it.

Now you'll add a date stamp to the page.

2.
Drag the Modified Date icon from the Smart set () in the Objects palette to the cursor on the page, or double-click the icon.

Adding date stamp

A date in a default format is added to the page, and the Inspector changes to the Modified Date Inspector.

Now you'll specify a format for the date.

3.
In the Modified Date Inspector, choose a country from the Format menu, and select a date format from the list of options for the specific country. We chose U.S. (United States) and the long date form (day, date, year).

Now you'll add a time stamp with the text “at” preceding it.

4.
In the document window, after the date stamp, type at with a space before and after it.

5.
Drag another Modified Date icon from the Smart set in the Objects palette to the cursor on the page, or double-click the icon.

6.
In the Modified Date Inspector, choose a country from the Format menu, and select a time format from the list. We chose U.S. (United States) and the hours:minutes form.

Adding time stamp

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

8.
Click the Preview tab to preview the page. Notice that the comment does not appear in the preview. Click the Layout tab to return to the Layout Editor.

9.
Then choose File > Close to close the page.

Now you're ready to design two other pages for the site.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint