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

Lesson 8. Creating Animations > Working with floating boxes

Working with floating boxes

In Lesson 3, "Laying Out Web Pages," you learned how to add floating boxes to a page. Now, you'll learn how to overlap two floating boxes, and how to control their stacking order. In this part of the lesson, you'll create two floating boxes and add them to the Forever page (the first link on the Poetry Sampler page). You'll fill one floating box with text and the other with an image.

Start Adobe GoLive.

Choose File > Open, and open the http://poetrypond.com Web site. The path to the file is Lesson08/08Start/Poetry Folder/Poetry.site.

Double-click the file Forever.html in the Pages folder in the site window to open the Web page.

Click the Basic tab ( ) of the Objects palette.

You'll place the anchor for the floating box between the banner graphic at the top of the page and the poem. To do so, you'll need to set the insertion point just past the banner graphic. The easiest way to do this is to move the pointer onto the right side of the banner graphic. Because Adobe GoLive can't place the anchor directly onto the banner graphic, the anchor will go to the next available place after the graphic.

Drag the Floating Box icon from the Objects palette to the right side of the banner graphic on the Web page.

Dragging Floating Box icon Result


The Inspector changes to the Floating Box Inspector.

You can place text, images, JavaScript applets, and QuickTime movies inside a floating box. Here, you'll place text inside the floating box.

Click inside the floating box and type Forever Four, the title of the poem.

Drag to select the type.

In the toolbar, click the Bold button ( ) and choose 6 from the Font Size menu ( ).

Choose Type > Font > Arial for the typeface.

Move the pointer over the floating box until the pointer changes to a hand pointing left. Then click to select the floating box.

In the Floating Box Inspector, enter Title for Name. This names the floating box so it's easier to work with when you have multiple boxes.

You can resize the floating box so that the title fits on one line.

Move the mouse pointer to the bottom right corner of the floating box.

When the pointer changes to an arrow, drag the corner of the floating box so that both words in the title fit on the same line. Drag again to fit the floating box closely around the title.

In the Floating Box Inspector, enter 185 for Left, and press Enter or Return. Then enter 125 for Top, and press Enter or Return to specify an exact location for the floating box.

You've finished making your first floating box.

Choose File > Save.



Not a subscriber?

Start A Free Trial

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