• 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 Trilobite.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 folder/.

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 floating boxes. One floating box contains an animated GIF image. Two additional floating boxes contain rollovers and images—Trilobites and History. Two hidden floating boxes 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 288.

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 floating box 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 floating boxes. 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 floating box is selected when the hand points to the left. Notice that the Inspector becomes the Floating Box Inspector. If you click on the image placeholder inside the floating box, the Inspector becomes the Image Inspector.

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

Notice that the first or top marker is selected. Notice that the name in the Floating Box Inspector is animation. This is the floating box that contains the trilobite animation.

Select the second floating box marker. The name in the Floating Box Inspector is Button01. This is the floating box that contains the green star and the text, Trilobites.

Select the fourth floating box marker. The name in the Floating Box Inspector is Navigation01. Note also that the Visible option is deselected.

If possible, enlarge the document window so you can see both the floating box 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 floating box containing the Trilobites text. In the Floating Box Inspector, select the Visible option. A floating box 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 floating box for the History drop-down menu. You'll leave it hidden.



Not a subscriber?

Start A Free Trial

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