Allaire Cold Fusion Template Header Size: New VersionõO2¸~õìêÚ[�²zhqؤä8X°É¿Ìò©‰P^qv ßNÊÒ‡ùFÍû'ÉÊE´Žå¿ˆpc –¨u÷TéÒ•5˜¥ãxV’ôû”\v‰ù>eÐ×åRVŸ,ÛÚ÷î,™î(àñvЈN¯õáÜøç,Zê¤/„(|0}ã#ãJéî¥�UøÛ[Ô¢„+Ùyœ(·85ìhÿ—D¾!Èž›|S™ï¸]J € U[]†VŸ,ÛÚ÷– Fixed Layouts: gotFusion
gotFusion.com....... Where your adventure begins
Antons Video ProductionsNetObjects Fusion 7 Websites Portal

 


 

This exercise uses graphics to "fool the eye" into thinking that a table does not have square corners. Use tables designed like this for a whole page, or just to accent an area of a page.

This exercise requires

  • The graphics in this Zip File titled TableProjectFiles.zip (click link to download file)
  • Your copy of NetObjects Fusion up and running your Learning Tables.NOD file from the previous exercise.

Producing the rounded table

Create a new page in Site View. Name your new page Rounded Table.

 Figure 10 — Set ZeroMargins MasterBorder

Figure 10 — Set ZeroMargins MasterBorder
 

Figure 11 — Border, padding, and spacing set = 0.

Figure 11 — Border, padding, and spacing set = 0.

Setting up the rounded table page

  1. Switch to Page View.
  2. Press F10 to open MasterBorder Properties.
  3. Select ZeroMargins (Figure 10).
  4. Press F9 to open Layout Properties.
  5. Click the Text Tool.
  6. Click and drag to draw a box about 500 px by 300 px on the layout.
  7. Release the mouse button.
  8. Click the Table Tool.
  9. Draw a table inside the text box a bit narrower than the text box.
  10. Set 3 columns, 3 rows.
  11. Click OK.
  12. Set Border, Padding and Spacing to 0 (Figure 11).

If your table "disappears," click its icon in the Object Tree (F4).

Now we are ready to add the "fool the eye" graphics that will make this table look like it has rounded corners.

Adding the graphics

Note: All graphics in this section are in C:\TableProject\Graphics\RedRoundedRectangle.

  1. Click the Picture tool.
  2. Click the first row, first cell.
  3. Locate RTopLeft.gif, using the Picture File Open dialog and the path above.
  4. Repeat steps 1-3 with the following differences:
    1. Place RTopRight.gif in row 1, column 3.
    2. Place RBottomLeft.gif in row 3, column 1, and
    3. Place RBottomRight.gif in row 3, column 1.
  5. Click the cell at row 2, column 1.
  6. On Cell Properties, Cell Tab, Background Image, click Browse to select RLeftBG.gif.
  7. Click OK.
  8. Repeat steps 5-7 with the following differences:
    1. Set row 1, cell 1 background to RTopBG.gif.
    2. Set row 1, cell 2 background to RTopBG.gif.
    3. Set row 2, cell 3 background to RRightBG.gif.
    4. Set row 3, cell 1 background to RBottomBG.gif.
    5. Set row 3, cell 2 background to RBottomBG.gif.

That wasn't so bad, was it? Don't worry if the table looks a little strange - we'll tighten it up.

  1. Select column 1.
  2. Click Fit to Content on Cell Properties, Column Width.
  3. Select column 2.
  4. Set 200 in Cell Properties, Column Width.
  5. Select column 3.
  6. Click Fit to Content.

Our table is all set. Let's add some text in the cell at row 2, column 2.

  1. Double-click the cell.
  2. Type whatever content you want.

Notice that as you add more content, the table stretches vertically. Now try this:

  1. Delete the text from the center cell.
  2. Use the Picture Tool to put the chart graphic from the last exercise into the center cell.

Notice how the red rectangle becomes a frame around the chart?

Design Variations to Try

Do you want two columns of text? How about a more complex layout with text and graphics?

Adding more cells to the table

  • Delete the graphic.
  • Split the center cell.
  • Merge some of those new cells.
  • Press CTRL+Z (undo) if you wreck something.

Experiment!

  • Use your imagination!
  • Have fun!

 

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