Creating tables with round corners and other special effects
in Microsoft FrontPage is easy with EZRound.

This tutorial is divided into 5 parts:

1. How to load and export the EZRound sample designs for FrontPage
2. How to bring the exported EZRound design into FrontPage
3. How to add content to the EZRound design in FrontPage
4. How to import the EZRound image slices into your FrontPage web
5. How to publish your design to the Internet

You can see an actual web page created with FrontPage (using this tutorial)
at:  www.fp.ezround.com

Part 1 - How to load and export the EZRound sample designs for FrontPage

Just follow these simple steps:

1. Start EZRound with the desktop shortcut or from the LANSRAD\EZRound program group
    
2. Click FILE, then OPEN PROJECT (or use CTRL+O)
    
3. Open any of the project files (if you click on them one-by-one you will see a preview)
    
4. Click the EXPORT button on the lower left toolbar
    
5. In the "Short Name" field, type FP1 (this could be any name, but do not use spaces)
    
6. Click the EXPORT FILES button
    
7. On the Export Manager Screen, set these options:
   
   Internet URL:  fp1 (Note: we will import these images to a FrontPage folder called fp1 )
   Table Width:   100%
    
8. You do not need to set the table height (it will increase automatically as you add content) unless you want it at a fixed height. 
    
9. Leave the Table Position set to CENTER.

Note: You may also want to check these boxes to enable settings that make it easier for the next time you use EZRound:

• Export Design Preview
• Use Lower Case Filenames
• Save as Default Settings

10. When you have made the changes shown here, click the EXPORT button.
     
11. When EZRound asks if you want to copy the container to the clipboard, select No.
     
12. After the export is complete, EZRound will open a Windows Explorer window for you in the export folder. 
    Leave it open as we will use it in a minute.
    

Note: the default location where your files are exported is
C:\Program Files\LANSRAD\EZRound\Export\xxx -

where xxx is the "short name" you gave the design during export.

Also note that all of the filenames use the “short name” that you provided for the export. This makes the files group together in a folder for easy file management.  As long as you use a different short name with each design you export, EZRound takes care of the unique naming issues for you.

Congratulations!

You have now created and exported an EZRound design.
Now we need to bring your EZRound design into FrontPage!

Part 2 - How to bring the exported EZRound design into FrontPage

For this part of the tutorial, we will create a new web page and use the EZRound design on it.

Just follow these simple steps:

1. Start FrontPage
    
2. In the PAGE view, start a new blank web page.
    
3. Type My First EZRound Project and press ENTER.
   
   
4. Click the TABLE button to create a new table.
    
5. Select a 1x1 table from the grid and left-click on the square to create it.
   
   Note:  This 1x1 table will serve as a “container” in FrontPage for the EZRound design
   (more on that later)
   
6. After you add the table, you may want to grab the right side of it and resize it inwards until is the width that you want. Hint:  When you paste the EZRound design into FrontPage it will expand to the width of your FrontPage table. 
   
   
   
   About resizing the FrontPage table and why the EZRound design is set to 100% width...
   
   The reason we set the EZRound table to 100% is to make it easy for you to control the width of the EZRound design with your one-cell FrontPage table. Note: If you resize the table later in FrontPage be sure to resize the FrontPage table - not the EZRound design.
   
   Look at these examples:
   
   Here is an EZRound design that was placed into a FrontPage table that had not been resized.
   (Note that it fills the width of the page - our photo was right-clipped here to fit our design)
   
   
   If you accidentally import a design like this, the first thing that you may want to do is make the FrontPage table narrower.  To do this, use the mouse to grab near the upper right corner of the FrontPage table on the solid border - not on the dashed border that shows the “inner” EZRound table. (NOTE: be careful NOT to grab the EZRound table and resize it by mistake!), then drag the right side of the FrontPage table in until it is the size you want it.
   
   Hint: If you accidentally stretch or deform your EZRound container, you can use CTRL-Z to undo.
   
   
   Here is an example of the one-cell FrontPage table after it was resized
   (before we import the EZRound design):
   
   Here you can see that the EZRound design has expanded 100% to “fill” the FrontPage table:
   
   
   You should now understand why the EZRound design should be "inside" the single cell table that you created with the FrontPage table tool. This FrontPage table (as a "container") will make it easy to position your EZRound design on your web page.
   
   Another thing worth noting is that you can see that the FrontPage table still has a border. It is often easier to leave these borders visible until you complete you page layout.
   
   
   Now - back to our tutorial...
   
   
7. Without clicking anywhere else on your page, use the next step of this tutorial to change to HTML view (if you have already clicked out of the table, click INSIDE the new table to select it again before you continue).
    
8. Click the HTML tab at the bottom left of your FrontPage screen to change to HTML view.
   
   
   Note:  In the HTML view - once again - do NOT click anywhere else on the page. This will leave your cursor set at the correct place to insert the HTML container code generated by EZRound (if you have already clicked elsewhere by the time you read this, click your mouse after the   as shown in this screenshot BEFORE you paste in the EZRound code.
   
   
9. Leave FrontPage where it is and switch back to the Windows Explorer screen
   (this should still be open to your EZRound FP1 export folder).
    
10. Double-click the "_fp1local_tableonly.txt" file to open it in Notepad.
    
    Note: Do not worry that the HTML in this file has links to the images on your local computer.  After we import them into FrontPage and publish them to the Internet, FrontPage will correctly rewrite the links for you.
     
11. Click EDIT, then SELECT ALL (or use CTRL+A) to select all of the contents of the file.
     
12. Switch back to FrontPage (you should still be in the HTML view and your cursor should still be sitting after the  )
     
13. Click EDIT, then PASTE (or use CTRL+V) to paste the HTML container from EZRound into the source view of your FrontPage design.  Your screen should now look like this:
    
    (Note: we have highlighted the EZRound code in this tutorial so you can see where it will be)
    
14. Click the PREVIEW tab at the bottom left of your FrontPage screen to see the EZRound table in your web page.
15. 

Congratulations!

Your EZRound HTML container should now be visible inside your FrontPage table.

Part 3 - How to add content to the EZRound design in FrontPage

To add content to your EZRound container, just click in the CENTER cell (in the NORMAL view of FrontPage). Then you can replace the "Your text or photo would insert here" with your own content. This can be text, photos or anything else. You can also change the font or of the font settings such as the color.

When you add content to the center cell of the EZRound container it will expand to fit.  If you add text, it will automatically resize vertically. If you add a photo that is wider than your FrontPage table, then it may stretch to fit.  If it does, reduce your photo width if needed (or change your FrontPage settings as you see fit).

To add more than one EZRound container to your page, just repeat the process.

Hint: After you finish your web page design, simply select the FrontPage table and set the border width to zero to hide the "FrontPage container".

Part 4 - How to import the EZRound image slices into your FrontPage web

Before you can publish your web page, you must import the EZRound image slices into your FrontPage web.  This will make them assets that belong to FrontPage and allow FrontPage to correct the image paths when you publish to the Internet.

To get FrontPage to import the image slices, all you have to do is SAVE the web page you are designing.

When you click the save button in FrontPage, you will see this dialog box:

Feel free to manage your files any way that you are comfortable. It does not matter where you save the embedded image slices as long as FrontPage imports them into your web. Once imported, FrontPage will manage them.

In this tutorial we exported the design as FP1 and set the Internet URL of the export screen to fp1. Now we are going to tell FrontPage to save them in a folder we will call fp1 under our webs folder. This makes it easy for us to manage our images.

To do this, first click the Change Folder button:
 

Then click the folder icon to create a new folder under your FrontPage web:

Next name the new folder fp1 (following our example)

Now double-click the fp1 folder to change down to that level:

Finally click OK to select this new folder as the destination where FrontPage will import the embedded images.

Note: You should check to be sure that FrontPage is importing the images where you want them to be.
(in our case the new fp1 folder).  If the import path is correct, click OK to complete the import.

Part 5 - How to publish your design to the Internet

The last step is to publish your work. You do this just as you would any other FrontPage web.

When you publish your design to the Internet, FrontPage will change the paths of your image slices to their proper location on your server and it will upload the image slices for you.  If your images are in a folder (such as our fp1 example), then FrontPage will create a folder on your web server and store the images there. 

Hint: Using some planning when you decide where to store your assets will make it easier for you to manage your website.

Remember, as long as you use unique “short names” in EZRound when you export and save your designs, then many different designs can reside in the same folder on your webserver. EZRound takes care of the naming for you.

As a reminder, you can see an actual web page created with FrontPage (using this tutorial)
at:  fp.ezround.com

That is all there is to it!

Summary

We hope that this tutorial has given you an insight on how easy it is to insert the HTML container code generated by EZRound into the body of a Microsoft FrontPage document.

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

[Top]

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