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

Lesson 9. Creating Animations > Working with floating boxes

Working with floating boxes

In Lesson 3, “Designing 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.

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 poetry.site file in Lessons/Lesson09/09Start/poetry folder/.

Double-click the file forever.html in the pages folder in the site window to open the Forever Four poem.

Choose Window > Objects, or click the Objects tab if the palette is collapsed.

Click the Basic button () at the top of the Objects palette.

You'll place the anchor for the floating box after the floating box that holds the text of the poem. To do so, you'll need to set the insertion point just past the yellow floating box anchor.

Drag the Floating Box icon from the Basic set of the Objects palette to the right side of the yellow floating box anchor on the Web page. (You can also double-click the Floating Box icon in the Objects palette to add a floating box at the cursor location.)

Dragging Floating Box icon


You can place any valid HTML element inside a floating box. You'll place text inside the floating box.

Click inside the floating box to create an insertion point, 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, towards the left edge of the box, until the pointer changes to a hand pointing left. Then click to select the floating box.

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

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

Dragging the corner to expand the floating box, and dragging the bottom edge up to resize the floating box.

Now you'll use the Floating Box Inspector to position the floating box.

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

Click outside the floating box to deselect it.

Choose File > Save.



Not a subscriber?

Start A Free Trial

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