gotFusion.com....... Where your adventure begins
Showcase your website at Fusion GalleriesNetObjects Fusion 7 Websites Portal

 


 

    In this section, we'll build a page with content inside the red rounded rectangle we created in the last chapter. Our page will wrap to the browser window, and have standard Fusion NavBars and a banner.

    This exercise requires:

    • Your copy of NetObjects Fusion up and running.
    • Table skills discussed earlier.
    • Your "Learning Tables.NOD" project file from the previous exercise.

    Setting up the wrapping page

    1. Go to Site View.
    2. Press CTRL+N to create a new page.
    3. Name the new page Rounded Table Wrapper.
    4. Double-click the page icon to open it in Page View.
    5. Place a Text Box on the Layout.
    6. Double-click the Text Box.
    7. Press Enter 3 times to place empty paragraphs in the text box.
    8. Set Size Layout to Text and Contents Wrap to Browser Width in Text Properties.

    Our new page has all the settings required to make it "wrap" to browser windows of different widths. We're ready to add the NavBar.

    Figure 12 - Nav Tool Flyout

    Figure 12 — Fly-out NavBar Menu

    Tip
    : To access the NavBar, Text NavBar and Banner tools, click and hold the toolbar icon to reveal "fly-out" tools (Figure 12). For details of all the toolbars in Fusion, see http://gotfusion.com/tutsAS/tools.cfm.

    Place a 100-pixel wide, 1-column, 2-row table on the page.

    1. Set the Table Properties:
      • Fixed Width.
      • 0 Border, 0 Cell Padding, 0 Cell Spacing.
      • Set the table's alignment Left Wrap.
    2. Figure 13 — Nav bar in second cell

      Figure 13 — Nav bar in second cell

      Click the top table cell.
    3. Set Row Height to Specified, 45.
    4. Click the NavBar Tool.
    5. Draw a narrow vertical box on the page.
    6. Click and drag the NavBar from the page into the 2nd table cell.

    Our page is now ready to add our red rounded rectangle table. To save time, use copy, paste instead of rebuilding the table from scratch.

    Pasting the rounded table

    1. Press F2 if the Site Navigation panel is not visible.
    2. Double-click the Round Table page icon in Site Navigation.
    3. Press F4 if the Object Tree is not visible.
    4. Select the Table icon in Object Tree.
    5. Press CTRL+C.
    6. Double-click the Round Table Wrapper icon in Site Navigation.
    7. Double-click next to the NavBar.
    8. Press CTRL+V.
    9. Set the pasted table to Left Wrap alignment.

    Now we're ready to modify the round rectangle table and add some content.

    Modifying the wrapping page and table

    In this section, we'll add the finishing touches to this page design. We need to

    • Add a Banner and a Text NavBar to the table, and
    • Set the page size to exactly fit the table.

    Let's get started.

    Adding the banner

    1. Open the Object Tree if it's not visible.
    2. Click all the + icons in the Object Tree to reveal all the objects.
    3. Select Row 1 of the rounded table in Object Tree.
    4. Right-click Row 1 in the table
    5. Choose Insert Row.
    6. Merge all the cells in the new row.
    7. Click the Banner tool.
    8. Click in the new row.

    Now we're ready to add a Text NavBar to the bottom of the page and test our layout.

    Adding the text NavBar

    1. Select Row 3 in the Object Tree.
    2. Right-click Row 3 in the table
    3. Choose Append Row.
    4. Merge cells 2 and 3 in the new row.
    5. Click the Text NavBar tool.
    6. Draw a box in Row 4, Cell 2 to place the Text NavBar.
    7. Double click in Row 2, Cell 2.
    8. Enter some sample page content.
    9. Click Publish Site, Local Publish, Selected Page Only.

    Compare your results with this page.  (Don't worry if your Banner and NavBar buttons look different.)

     

    View the PREVIOUS page in this tutorial

    Return to the TOP of this page

    View the NEXT page in this tutorial

     


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2002 GotFusion LLC.  The name GotFusion and the GotFusion ® logo are registered trademarks of GotFusion LLC
Copyright, legal notice & privacy statement