- About this lesson
- Getting started
- Creating a new Web site
- Adding files to the Web site
- Creating a component to be used as a navigation bar
- Designing the home page
- Creating a custom color palette and adding color to text
- Adding a component to an existing Web page
- Updating the custom color palette
- Designing a Web page using layers
- Editing a component
- Previewing in GoLive
- Review questions
- Review answers
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 Colors in the Swatches palette, either of which you can use as a custom color palette to color text and objects on a page. (In the Swatches palette, click the triangle in the upper right side and choose Site Colors to display colors used in the site.) 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.
Now you'll add color to emphasize text on the page.
- 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 () next to the scroll bar for the right pane.
Notice that the Colors tab contains a Scanned Colors folder that contains a site color named white, which is used as the default background color for the home page. Select the Scanned Colors text and change the name to Gage Colors.
- With the Gage Colors folder selected, choose Site > New > Color. An untitled color 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.”
- In the Colors tab of the site window, click the untitled color text to select it. Enter emphasis to rename the color.
- Choose Window > Color, or click the Color tab to open the Color palette.
- In the Color palette, click the triangle in the upper right of the color palette and select Only Web Colors. Make sure the RGB sliders tab is selected and in the Hex Value text box, enter 990000. Press Enter or Return.
- In the document window, drag to select the text “Check Out This Week's Hottest Buy!”
- 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.
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 Only Web Colors 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.
With the Gage Colors folder selected, choose Site > New > Color. A new color named untitled color appears.
Now you'll extract a color from the company logo.
- Choose the untitled color and click the eyedropper in the Color palette, so that the pointer turns into an eyedropper.
- Move the eyedropper from the Color palette to the shadow of the guitar pick on the page. Notice that the color changes in
the preview pane of the Color palette as you drag the eyedropper.
When you click the mouse, the extracted color appears in the preview pane and in the untitled color preview pane. Ours was 999966.
- In the Colors tab of the site window, click the name of the untitled color in the Gage Colors folder to select it. Enter shadow to rename the color.
If desired, you can now match the color of text or an object on the page with the shadow color.
- Choose File > Save to save index.html.
Now you'll add keywords, comments, and a date and time stamp to the home page.
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.
- To display the head section pane, click the triangle next to the word Head in the upper left corner of the document window.
Drag the Keywords icon from the Head set () in the Objects palette to the head section pane.
A Keywords element is added to the Head section of the page, and the Inspector changes to the Keywords Inspector.
- Click in the Keywords text box at the bottom of the Keyword Inspector palette. 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.
- 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.
- Click the triangle next to the word Head to close the head section pane.
- Choose File > Save to save index.html.
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.
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.
- 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.
- 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.”
- Click the Comment icon on the page to select it, and then view your comments in the Comment Inspector.
- 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.
- 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.
- 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.
Drag the Modified Date icon from the Smart set () in the Objects palette to the cursor on the page, or double-click the icon.
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.
- 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.
- In the document window, after the date stamp, type at with a space before and after it.
- Drag another Modified Date icon from the Smart set in the Objects palette to the cursor on the page, or double-click the icon.
- 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.
- Choose File > Save to save index.html.
- 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.
- Then choose File > Close to close the page.
Now you're ready to design two other pages for the site.