NOTE:  Since HTML import in NOF10 and NOF11 do not work as expected, this tutorial has been replaced by a new method that works across NOF 7.5 to NOF 11.

Click here to view the “Universal NOF Import Tutorial”

The following is an improved method of bringing your EZRound design into NetObjects Fusion and using it on one or more web pages.

It is no secret that it can be difficult to bring external products into NOF when no component is available.

This technique was inspired by one of our customers ( "Thanks Ralph!" ) who had worked with using the NOF "Import HTML" feature to bring his EZRound designs.

We continued to experiment with the technique and created the tutorial presented here.

This is the fastest method that we have found to bring your EZRound design into NOF so that these conditions are met:

1.Getting the EZRound design into NOF is fast and has a minimum of steps
2.You can visually "see" the design after importing it (making it easier to use)
3.NOF automatically manages the file assets and HTML after the import
4.The design is reusable throughout the website


Importing your EZRound design into NOF

1.  Change to the SITE VIEW in NetObjects Fusion

2.  Add a new page anywhere in the site.  Don't worry about naming it or setting properties as we will not be saving it after the import is finished.

3.  Press F10 to bring up the Master Border properties screen and set the Master Border to "Zero Margins".  This will get everything out of the way and leave us with a blank canvas Layout for our import.

4.  Select FILE -->  IMPORT --> HTML PAGE

5.  Browse to the location where the LOCAL version of the HTM file created by EZRound for your design exists.  It will have the word local as a part of the filename (after the short name you entered for the export).  This file will allow NOF to determine the location of the image slices that will be imported on your local drive.

6. After the import is complete, you will see the new EZRound design on the empty page.  All the HTML is in place and the image slices are now assets that are managed in your website by NOF.

7.  The next step is to prepare the design for use on some other page of your website.

NOTE: You could simply select the table that surrounds the design and COPY the design to the Windows clipboard and PASTE it onto another page, but this tutorial will show you another technique that makes the design easier to resize in NOF.

If you were going to select and copy the table, be sure that ONLY the EZRound design table is selected.

Adding a LAYOUT REGION to the content area of the EZRound design.

8. To make the EZRound design easier to resize in NOF and allow for easier placement of content, we will add a NOF Layout Region to the center cell of the EZRound design.

Double-click in the center cell to enter the text edit mode, then select EVERYTHING BUT THE LAST CHARACTER in the text area (the letter "e" in the word "here").

9.  Press the DELETE key to remove the highlighted text (leaving only the letter "e" with the cursor in front of it).

NOTE:  The cursor does not show up in front of the "e" in this screen capture, but that is where it should end up.

9.  Press the DELETE key to remove the highlighted text (leaving only the letter "e" with the cursor in front of it).

NOTE:  The cursor does not show up in front of the "e" in this screen capture, but that is where it should end up.

10.  Select the Layout Region tool from the NOF toolbar

11.  Position the cursor in front of the letter "e" and drag out a small layout region. 

12. Don't worry if it is not the size you want to have.  It will be easy to resize later.

13. After you have the region drawn out it will look like this:

14.  Double-click next to the letter "e" and delete the letter and any extra spaces you may have missed.

HINT:  If you accidentally delete the Layout Region don't panic.  Just press CTRL+Z to "Undo" the delete and try again.  Also depending on where you inserted your cursor you may have to use either the DELETE key or the BACKSPACE key to clear the extra spaces and the "e".


15.  To resize the EZRound design, click to select the Layout Region then drag it out to the size needed.

16. After you have resized the Layout Region to fill the center area of your EZRound design it should look like the screen capture below.  Click the outer edge of the EZRound design table to select it for copying.

HINT: Don't worry if the region caused the EZRound design to expand or does not completely fill the center cell.  We can adjust that after we copy it to our destination page.


17.  With only the outer edge of the EZRound design selected, use CTRL+C (keyboard shortcut) or select EDIT --> COPY from the pulldown menu to copy the selected design to the Windows clipboard in NOF.

18. Use the F2 key to open the navigation window, or return to site view to navigate to the page where you want to use the EZRound design.

19.  On the target page, click on the region where you want to paste the design, then use the CTRL+V (keyboard shortcut) or the EDIT -->  PASTE option from the pulldown menu to paste the design into place.

20.  Your screen should look like this:

21.  You can now resize the Layout Region in the center cell to the size you want.  Just click the Layout Region to select it and drag the corner (or edge) as needed.  If you drag out beyond the design size, the EZRound container will expand and the Layout region will hold the cell open. 

HINT:  This is the beauty of using a Layout Region in the center of the EZRound container!  If your design size (when you exported it in EZRound is smaller than the NOF Layout Region, then the EZRound design will automatically collapse onto the region.

22.  The results look like this:

23.  If you drag the Layout region out too far, just click to select only the Layout Region and drag the corner (or edge) inward.  The EZRound design will not collapse, but this is easy to fix.

24.  Just click the outer edge of the EZRound design table and "Push" in towards the layout region to force NOF to resize the EZRound container inward.

HINT:   You can actually push inward to overlap the Layout Region.  NOF will resize to the boundary of the region and stop.

25.  If the EZRound design does not go all the way in to conform to the Layout Region you may need to push again from the side or bottom.

26.  When your resize is complete, the container and Layout Region are ready to use.

27.  In site view, select and delete the page we added to import the design as it is no longer needed.

COMMENTS:  This technique is a quite useful one and very fast once you do it a time or two.  By importing the page, then copying just the EZRound design to a different page, we avoid any issues of using an imported page with our other content.  By copy/pasting the design we hand off the management of the HTML and image slices to NOF.



BONUS:  Creating a library of EZRound designs.

You can save time and reuse your designs by pasting a copy of them into a page marked as Do Not Publish in your design.

Just create a new page (we call ours EZRound) and mark it as Do Not Publish.

Then click the edge of the EZRound table to select ONLY the resized design and use CTRL+C to copy it to the clipboard.

Use the F2 navigation pane (or site view) to open the EZRound library page.

Then paste the saved design onto the page.

Use the F2 navigation pane (or site view) to open the EZRound library page.

Then paste the saved design onto the page.

You can now select this design and copy/paste it again as needed within the NOF site.

HINT:   You can also export your EZRound library page as its own template and then use the FILE --> INSERT TEMPLATE from the site view to insert it into a different website.

Summary

We hope that this tutorial has given you an insight on how to insert the HTML container code generated by EZRound into the body of a page in NetObjects Fusion.  If you don't mind working with the HTML source, this is a fast way to add EZRound to your web pages.

... The End ...

This tutorial is copyrighted and may not be reproduced or linked without permission.  If you are interested in this material, please contact us.

Copyright © 2003 - 2008  :: LANSRAD :: All Rights Reserved