- Getting started
- Creating a new Web site
- Adding files to the Web site
- Creating a component to be used as a navigation bar
- Adding a layout grid
- Aligning and distributing multiple objects
- Adding text using a table
- Creating a custom color palette and adding color to text
- Specifying keywords
- Adding a component to an existing Web page
- Updating the custom color palette
- Designing a Web page using floating boxes
- Editing a component
- Previewing in GoLive
- Review questions
- Review answers
This chapter is from the book
This chapter is from the book
This chapter is from the book
Designing a Web page using floating boxes
Floating boxes let you divide a Web page into rectangles that can be formatted and positioned individually. They represent DHTML layers, which means you can overlap, hide and show, and animate them on the page. They can contain any HTML element that a page can contain, such as text, an image, or another floating box. However, some Web browsers may have problems with floating boxes that contain tables or layout grids. If you embed a floating box within another floating box, the embedded box inherits any cascading style sheet information from the parent box.
NOTE
To display properly, floating boxes require Web browser version 4.0 or later. To see what a floating box would look like in a browser that doesn't support cascading style sheets (floating boxes are built with cascading style sheets), turn off CSS Support in the browser's settings, as described in "Exploring style sheets" on page 425. Be sure to turn CSS support back on when you are finished.
Now you'll design a new page for the site using floating boxes. This page will provide users with information on this week's hottest buy at Gage Vintage Guitars. First you'll create a new page.
In the site window, click the Files tab.
Drag the Generic Page icon from the Site set (
)in the Objects
palette to the pages folder in the Files tab of the site window. 
Adding new page to pages folderA new page is added to the pages folder and appears in the Files tab of the site window. Note the empty-page alert icon that indicates the status of the new page.
Enter hottest.html to rename the file, and then double-click the hottest.html file to open it.
The hottest.html file opens in the Layout Editor of the document window. First you'll change the title of the page.
Enter Hottest Buy as the new title. Select the default title next to the Page icon (
) in the upper left corner of the document window,
and enter the new title. Now you'll change the background color of the page. Using the custom color palette, you can easily match the background color of the Hottest Buy page with the background color of the Appraisal page. You've already learned how to add a site color using the Colors tab in the site window. Now you'll learn how to add a site color using the Site Color list in the Color palette.
In the Site Color list (
) in the Color palette, select the
color named "page" so that it appears in the preview pane. Drag the color from the preview pane to the Page icon in the upper left corner of the document window.
Changing page’s background colorThe background color of the page changes to khaki.
Now you'll add the navigation bar to the page, as you did with the other pages for the site.
In the Site Extras set (
) in the Objects palette, make sure
that Components is chosen from the menu in the lower right corner of the
palette. Drag the navbar.html icon from the Objects palette to the upper left corner of the page.
The navigation bar is added to the top of the page, and the Inspector changes to the Component Inspector.
Choose File > Save to save hottest.html.
)
)
Adding the first floating box
Now you'll add a floating box to the page. You'll use this floating box to add an image of a guitar to the page.
Drag the Floating Box icon from the Basic set (
) in the Objects
palette to the area below the component on the page. (You can also double-click
the Floating Box icon to place a floating box at the insertion point on the
page.) A floating box appears on the page in the upper left corner below the component, and the Inspector changes to the Floating Box Inspector. When you add a single floating box to a page, GoLive inserts a small yellow marker labeled SB, which stays at the original point of insertion even after you move the floating box.
Adding floating box to pageIt's important to name floating boxes, so that you can differentiate them from one another. GoLive displays their names in the Floating Boxes palette and in lists that you choose from when applying actions to them or animating them. Now you'll name the floating box according to the contents that you'll add to it.
In the Floating Box Inspector, enter Image in the Name text box.
Now you'll add the guitar image to the floating box.
Drag guitar.gif from the images folder in the Files tab of the site window to the floating box on the page.
The guitar image appears in the floating box.
Click in the blank space outside the image to deselect it.
You can convert non-overlapping floating boxes and their contents into objects on a layout grid in a new untitled page. This is useful if you need a table-based design for the page in addition to your DHTML layers-based design. If the floating box contains text, it converts into a layout text box on the grid. The position, size, and background color attributes of the floating box are retained. GoLive creates a new page to contain the converted objects, keeping the original page of floating boxes intact.
)
Adding the second floating box
Now you'll add a second floating box to the page that will contain a description of the guitar shown on the page.
Position the pointer immediately to the right or immediately below the yellow floating box marker.
Double-click the Floating Box icon in the Objects palette. The second floating box appears.
In the Floating Box Inspector, enter Description in the Name text box to name the second floating box.
For now you'll move the Description floating box to an empty area of the page.
Move the pointer over an edge of the Description floating box, so that the pointer turns into a hand pointing left. Then drag the Description floating box to the right of the Image floating box.
Dragging second floating box to right of first oneNow you'll add text to the Description floating box. You'll enter a description of the guitar shown on the page.
Click inside the Description floating box, and type 1981 Gibson ES-347. Then drag to select the text you've just typed, click the Bold button (
) on the toolbar, and choose 5 from the Font Size menu on the
toolbar. If you have difficulty selecting the text, enlarge the floating box
slightly. 
Now you'll add color to the selected text using the emphasis color stored in the custom color palette.
In the Site Color list (
) in the Color palette, select the
emphasis color, so that it appears in the preview pane. Drag the color from the preview pane to the selected text on the page.
The color of the text changes to red.
Click in the blank space outside the selected text to deselect it.
Now you'll precisely position the Description floating box using the Floating Box Inspector.
NOTE
If the values used in this section don't work for you, you can adjust them as necessary. Use the values given as a guide.
Move the pointer over an edge of the Description floating box, so that the pointer turns into a hand pointed to the left. Then click an edge of the floating box to select it.
In the Floating Box Inspector, enter 250 for Left, and enter 300 for Top. Press Enter or Return.
The floating box is repositioned 250 pixels from the left edge and 300 pixels from the top of the page.
Now you'll resize the floating box using the Floating Box Inspector.
In the Floating Box Inspector, enter 200 for Width, press Tab to jump to the next text box, and enter 100 for Height. Press Enter or Return.
The floating box is resized to 200 pixels in width and 100 pixels in height.
Repositioning and resizing floating boxYou can also resize a floating box by selecting it and dragging one of its handles.
Choose File > Save to save hottest.html.
Laying out pages with floating boxes
Floating Boxes can be positioned precisely, because they are implemented using the DIV element. The DIV element, formatted with a CSS ID style for the width, visibility, and absolute position of the floating box, instructs the browser to create a subdivision that is not part of the normal flow of HTML within the page.
Floating boxes can contain background images or color, and they can inherit properties from the page's cascading style sheet (see "Using Cascading Style Sheets" in the Adobe GoLive 6.0 online Help). For table-based designs, you can convert non-overlapping floating boxes and their contents to a new page with the contents duplicated on a layout grid (see "Converting floating boxes into layout grids" in the Adobe GoLive 6.0 online Help).
Resizing and positioning floating boxes
You can position floating boxes accurately using the Floating Box Inspector and a page grid that you define in the Grid Settings dialog box. By assigning a z-index to each floating box, you can control the order that the boxes are stacked on top of each other (for example, a floating box with a z-index of 2 appears in front of a box with a z-index of 1).
You can also use the Transform and Align palettes to position, resize, and align multiple floating boxes in the same way as other objects (see "Repositioning, aligning, or distributing objects" in the Adobe GoLive 6.0 online Help).
–-From the Adobe GoLive 6.0 online Help.
)
)
)
Visitors using older Web browsers may not see a Web page correctly if it contains features and technology such as JavaScript, frames, and floating boxes. Also, not all browsers and browser versions support these features equally. You can use a browser-switch script to direct visitors to separate pages if your page contains elements that are not supported equally by older browsers or all browser versions. For more information, see "Creating a browser switch action" on page 356.