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

Lesson 8. Creating Rollovers > Opening the home page

Opening the home page

You'll begin this lesson by opening the home page for the Trilo-Appraiser.com Web site in Adobe GoLive. To make this lesson manageable, we have already created two of the navigation bar elements—Trilobites and History—for you, together with their drop-down menus. As you work through this lesson, note the naming convention used for the image files. Using a consistent naming and numbering style makes it easier to manage the large number of images used in a project like this one.

Start Adobe GoLive.

By default, an introductory screen appears prompting you to create a new page, create a new site, or open an existing file.


You can set preferences for the introductory screen to not appear when you start GoLive. If the introductory screen doesn't appear, choose File > Open and go to step 3.

Click Open to open an existing file.

Open the trilobite.site file in Lessons/Lesson08/08Start/trilobite/.

The site window for the Trilobite Web site appears with the Files tab selected.

Now you'll open the home page for the Trilobite Web site.

Double-click the index.html file in the Files tab of the site window.

The home page appears with the Layout tab selected. The page contains a single, large image and several layers. One layer contains an animated GIF image. Two additional layers contain rollovers and images—Trilobites and History. Two hidden layers contain drop-down menus that were created in advance for you. These are the rollovers and drop-down menus that you previewed in “Getting started” on page 294.

Choose Window > Inspector to display the Inspector, or click the tab if the Inspector is collapsed.

Click anywhere on the home page except on the layer that contains the trilobite image. Notice how most of the content of the page is selected. This is because this page consists of one large image on which are placed a number of layers. The Inspector changes to the Image Inspector, confirming that you have selected an image. (As a reminder, the word “Image” appears at the bottom of the Inspector to indicate that it has changed to the Image Inspector.)

Now click on the border of the monochrome trilobite image on the right of the page. The layer is selected when the hand points to the left. Notice that the Inspector becomes the Layer Inspector. If you click on the image placeholder inside the layer, the Inspector becomes the Image Inspector.

Scroll down to the bottom of the page, where you'll see a stack of yellow layer markers in the left corner.

Notice that the first or top marker is selected. Notice that the name in the Layer Inspector is animation. This is the layer that contains the trilobite animation.

Select the second layer marker. The name in the Layer Inspector is Button01. This is the layer that contains the green star and the text Trilobites.

Select the fourth layer marker. The name in the Layer Inspector is Navigation01. Note also that the Visible option is deselected.

If possible, enlarge the document window so you can see both the layer icon and the top of the document. You can reduce the size of the document window when you finish this section.

If necessary, scroll to the top of the page so you can see the layer containing the Trilobites text. In the Layer Inspector, select the Visible option. A layer that contains the drop-down menu appears.

Selecting the Visible option reveals the drop-down menu.

You'll leave this drop-down menu visible as you continue with the lesson. There is a similar hidden layer for the History drop-down menu. You'll leave it hidden.


You can use the Layers palette to temporarily lock, hide or show a layer as you work. Choose Windows > Layers and click on the eye icon in the first column to set the visible attribute to hide. If the eye icon is not visible, click in the empty icon location to set the visible attribute to show.



Not a subscriber?

Start A Free Trial

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