Introduction to EZRound
Top Next

EZRound is the answer to that age-old question:

New in Version 3.0:
· EZRound can now create PNG graphics for designs that need transparent backgrounds.
· New Export Manager makes it easy to use the HTML containers created by EZRound.
Click here to read the version 3.0 release notes

New in Version 2.0:
· EZSingle, the ability to export a one slice image of your design that is perfect for use with small FORMS, DIVS, and TABLES.

For larger areas (or ones with the need to expand for dynamic content), use the regular EZRound sliced image solution.

Click here for more information.


What is EZRound?
Previous Top Next

About EZRound...

EZRound makes creating special effects like rounded corners for your HTML tables and forms as easy as:

· Design
· Slice
· Preview
· Export

Best of all - EZRound will take care of the slicing for you and previewing is optional, so it is as simple as:

· Design
· Export

Combine that with the fact that EZRound ships with over 100 ready to use designs and all you have to do is pick the one you like and Export!

As of Version 2.1 you can also export single (unsliced) versions of your design as images to use for Banners, Buttons or as the background image for FORMS, etc.

Nothing could be easier!


What will it do for me?

EZRound makes it simple to create stunning HTML tables and forms with special effects like:

· Rounded Corners

· Hanging Tab Effects

· Tombstone Tab Effects

· Full and Drop Shadows

· Accent Bands

You have precision control over the size and shape of all objects, plus the EZRound color match system allows you to perfectly blend your design creations with the rest of your website.

With just a few mouse clicks, EZRound will create and slice your design graphics, export them as named sets and even write an HTML container that you can use for your content.

Note: For information on EZSingle - the single slice graphics - click here.

If you prefer to simply use the graphics in your own HTML tables, you can select the option to just have the design slices exported for you.

You can also create your graphics in the program of your choice (such as PhotoShop or PaintShop) and EZRound will import them and use them just as easily. EZRound supports over 40 of the top graphic file formats and will simply load and use just about any graphic of your choice.


Help: The short story

Help: The short story on how to use this technology...
Previous Top Next

Many people want to get started as quickly as possible - and read the documentation later. For those of you, here is the short version of the story...

(for information on the single sliced images feature called EZSingle - click here)

Using the basic EZRound design

The special effect HTML tables are created by taking a graphic image, slicing it into 9 slices and placing those slices into an HTML table that is 3 rows tall and 3 columns wide. Smart Slice technology will make these as small as possible while still retaining all the design qualities (such as rounded corners or drop shadows).

The corner slices are simply inserted into the corner table cells as content, the other slices are inserted as the background image for the respective cells. The table properties are set to have zero padding, spacing and to resize to fit the content (the design slices).

Any content that you want to have framed by the graphic effect is generally placed in the center cell. This can be text, photos, menu bars - even other tables. Even other EZRound tables! The outer graphic frame will resize around your content.

Two quick things to remember about EZRound are:

F11 is a hot key that will instantly take you to the Live Preview with the integrated web browser (F11 will also exit the previewer for fast In/Out previewing)

F10 is a hot key that will instantly take you to the Export screen.

So the shortest version of how to create an effect and use this technology is:

1. Start the EZRound program
2. Use File --> Load Project to load one of the 70 pre configured projects
3. Press F10 to export (note that the Export feature is only available in the registered version of the program!)
4. Click the Export Files button
5. Check the box to Export Image Slices Only
6. Copy the slices to your HTML designer program assets folder and insert them into a table (as shown above)

If you want to design your own effect the steps are almost the same:

1. Start the EZRound program
2. Set the shape, color, shadow and accent band of your design (EZRound will automatically calculate the slices for you!)
3. Press F10 to export (note that the Export feature is only available in the registered version of the program!)
4. Click the Export Files button
5. Check the box to Export Image Slices Only
6. Copy the slices to your HTML designer program assets folder and insert them into a table (as shown above)

For more details, see the long version in the next section


EZSingle - single slice images of your design

EZSingle is a radical new feature added in EZRound version 2.0

When you want a rounded corner, drop shadow or other special effect in a small area (such as a FORM, DIV or TABLE), EZSingle offers you the alternative of using a single slice image as the background for that area.

The result is easier to implement and faster to load.

Consider this simple design exported as an EZSingle image:

The size for this 250x132 file is less than 3K.

The regular EZRound sliced design for the "parts" needed to make up the same image are 10.3K:

It does not sound like a big difference, but on a page with a lot of content - every little bit helps!

Plus keep in mind that the single slice image will display instantly - where the sliced image may appear first as the corners, then the rest of it fills in as the other page elements are loaded.

If you want to use it for a simple item such as a SEARCH form, the EZSingle image is the way to go.

If you have larger elements such as a full page, or elements that need to be dynamic in size and expand with content, then the regular EZRound design makes that simple as well.

Best of all since the EZSingle image is created from the same design data, it will match your regular EZRound containers created with the same design.

For instructions on how to export your EZSingle image, click here.


EZSingle - What Size to create?

For best results you will normally create the EZSingle image to be the exact size of the FORM, DIV or TABLE where you want it displayed. This means that the image will fill the FORM, DIV or TABLE and not be repeated.

Note: The smallest recommended size that EZRound suggests you to export a EZSingle design in is calculated this way:

Minimum size = ( Round Corner Size + Shadow Width + Background Padding ) x 2

This is because a smaller value would produce unusable results in the creation process.

You can create smaller images (and they work fine in some circumstances such as for small buttons), but be aware that if you have rounded corners and select a size that is too small - you may get undesirable results and need to increase the height or width of your EZSingle export.


EZSingle - a note on HTML for best results

Most people will use the single image slices created by EZSingle by applying them to their web development software.
In these cases the web designer has little or no control over how the image is HTML coded as the background image.

However if you are a hand-coder, there are some other considerations to be aware of.

The following is a "Best Practice" method for using EZSingle images as background objects when you are hand coding. The goal here is to ensure maximum cross browser compatibility and consistent results.

Using the CSS STYLE attribute is the best option(see sample code below on this page).

When adding an image as the background for a <TABLE> you may be tempted to simply use code like this:

<TABLE BORDER="0" CELLSPACING="0" WIDTH="50%" BACKGROUND="your_image.gif">

You should avoid this practice and use the CSS STYLE attribute instead.

Internet Explorer would render the image above like you expect it to - one image as the background for the entire table.

However Netscape will NOT render the image as you expect.

Netscape displays the image inside each separate field of the table. If your table definition includes 4 columns and 5 rows, then the same image will repeat 20 times (once in each field).

NOTE: The obvious solution at first seems to be nested tables: nest a multi-cell table inside a single-cell table that has a background image attached. Unfortunately, in Netscape, the nested table inherits the background image from the single-cell table and displays the image in each individual cell.

Using the CSS STYLE attribute

If you use the STYLE attribute to include your table background image the image will display perfectly in Explorer and Netscape 6.0 - without confusing Netscape versions 4.x and below.

In this case, STYLE is an inline style attribute that is tied to this specific TABLE element only. Any Browsers that don't recognize CSS commands will ignore it in the table and still display the rest of the page as you expect.

<TABLE BORDER="2" CELLSPACING="0" WIDTH="50%"
STYLE="background-image: url('your_image.gif'); ">

Using STYLE will ensure that:

· Internet Explorer displays the image and tiles it if the table is larger than the image.
· Netscape 4.x and below ignores the image completely, but still displays the table contents as you have them defined.
· Netscape 6.0 displays the image and tiles it if the table is larger than the image.


EZSingle - Exporting your image

Creating an EZSingle image from your EZRound design is simple.

1. Click the EXPORT button (or press F10) to go to the export screen.

2. Be sure that you have entered a short filename on the export screen.

3. Click the EZSingle button in the menu to open the EZSingle export form.

4. Enter the WIDTH and HEIGHT (in px) of the EZSingle image you want to create. The minimum suggested size is shown.

NOTE: EZRound will calculate the minimum usable size for you based on the regular design criteria. If you try to enter a number that is too small you will be prompted with the minimum allowable value.

About Filenames...
As usual, EZRound takes care of all of the complicated things such as file names for you.

What ever name you selected for the "Short" file name will be combined with the "Width" and the "Height" to create the filename for you. This makes it easy for you to tell what size a image is just by looking at the name. It also makes it easy for multiple sizes of the design to be exported and used on the same website. The naming convention keeps all your project export files grouped together,

5. If you want EZRound to open Windows Explorer on the project export folder, select that option.

6. If you want EZRound to copy the exported image to a "working folder" of another software program, check the Enable Folder Echo box and enter or browse for the folder where you want the image copied.

About Folder Echo: This is a new feature available in version 2.0 and it can be a real time saver since you can bypass the step of copying file assets to another folder so your web design program can find them.

7. To complete the export process click the EXPORT button (or CANCEL to stop the process).

Your exported file will be in the project export folder and (optionally) in the Folder Echo location.


I. Creating your table design

1. Start EZRound. When the program opens you will be at the Design menu and the Shapes option.

2. Select the shape of the table. Your choices are:
· Round corner rectangle
· Square on all sides
· Square on top (round on other sides)
· Square on bottom (round on other sides)
· Square on left (round on other sides)
· Square on right (round on other sides)

Round Corner Size: You can set the size of the round corner using this option. Big corners are very pronounced and make a dramatic statement, smaller ones are more subtle and classic in design.

There is a button on the bottom of the page that will save these values as the default settings to be used when creating a new table design.

3. Click the Shadows button

4. Select the type of shadow for the table you are creating. Your choices are:
· No shadow - use this option to create a "flat" table
· Full shadow - there is a shadow all around the table
· Northwest - the shadow is on the upper left of the table
· Northeast - the shadow is on the upper right of the table
· Southwest - the shadow is on the lower left of the table
· Southeast - the shadow is on the lower right of the table

Shadow Width: This setting controls how far the shadow extends away from the table edge.
Shadow Density: This setting controls the amount of blur in the shadow color.
Shadow Padding: This setting controls the spacing between the outer edge of the shadow and the outer boundary of the graphics image. Use this setting to "push" the shadow inward (increase shadow width if necessary). This setting makes sure that the blurred edge of your shadow is not cut off from the edge of the table.
Background Padding: This setting is used to add spacing between your table and other elements on your web page.

There is a button on the bottom of the page that will save these values as the default settings to be used when creating a new table design.

5. Select the Colors button

6. Set the colors for the design. You can set these colors:
· Table Color - this is the foreground color of your table design
· Background Color - this is the color of the web page where your table will reside.
· Background Color is Transparent - this option should only be used if you are using a wallpaper on your web page. The shadow (and other) effects will render better if you supply the actual color used for your web page and let EZRound blend the colors for you.
· Save Image Slices As - EZRound can save the image slices as PNG, GIF or JPG files. Note that ONLY PNG or GIF can be selected if the background color is marked as transparent.
· Shadow Color - this is the color of the shadow (if any)
· Accent Color - this is the color of the accent band (if any) for the design.

All colors can be selected with a drop down color picker control, or you can type in the actual HTML web color (such as #FFFFFF for White). This makes it easy for you to do perfect color matching.

There is a button on the bottom of the page that will save these values as the default settings to be used when creating a new table design.

7. Select the Accent button

8. Check the "Add Accent Color Band" box if you want to add a band of color around your design. This can create a really nice effect and do a lot to dress up your table design. It can be as simple as using the background color again with a thin accent band to dress up a table, or as bold as a wide contrasting color. You are in total control.

Accent Width: This setting controls the width of the color band.
Accent Padding: This setting controls how far in the band is from the edge of the table design.

There is a button on the bottom of the page that will save these values as the default settings to be used when creating a new table design.


II. Slicing your table design

New in Version 2.0 - Smart Slicing

In normal operation, EZRound does all the calculations and slicing for you. This is a fully automatic process that is designed to produce the smallest image slices possible and still be easy to use. In previous versions of EZRound all slices were the same size so that padding and spacing in your HTML tables is not an issue.

In Version 2.0 of EZRound we introduce "Smart Slicing". Our new slice engine will analyze each corner of the design and select the smallest possible slice that will still allow the design to work as planned. Every element of the EZRound design (shape, corners, shadows, padding and even the direction of the shadow) is taken into consideration.

On some designs you would not see a big difference, but on others the different would be striking.

A note about the minimum slice size setting.
In Version 2.0 we added a new setting on the Smart Slice screen that allows you to set the minimum slice size. The program default is 5px. You could reduce this all the way down to 1px, but in some graphic mode web design programs you might have trouble selecting that cell to stretch your design. You can change the setting to suit your needs and save it as the default value to be used for future designs. You can also reset it to the program defaults.

Smart Slicing means that for designs created in EZRound, there is really no reason to custom slice.

Custom Slicing

If you are using design graphics created in another program, or if there is some reason that you need to be able to manually control your slices, then EZRound allows you to do this. To use manual control of the slicing, select the Custom icon.

From this point forward, there are two ways to do manual slicing - the easy way or the hard way.

The easy way to custom slice is to make sure the box is checked that says: "Make all slices this size" and enter a size in the box (or use the spin controls). As the size changes, EZRound will redraw the slice lines for you. To slice the image for best optimization, you want to look at the largest corner of the image and adjust the size out until it is all enclosed in a corner slice box. All other slices will be the same size and your image will be easy to use.

The hard way to custom slice is to uncheck that box and use the individual line control boxes to position the slice lines. Just keep in mind that EZRound is going to slice nine sections of the image.

You can check the "Show slices only" box and you will see the results as you change the settings.

When you are satisfied with your slice design, check the box marked: "Use custom slicing for this design" and EZRound will use the slice configuration that you have configured. All slices will be created and the HTML written according to your settings.

If you are custom slicing a EZRound design image, there is a button to reset the settings to those calculated by the designer.


III. Viewing your table design

As you design your table, you may want to preview your work to see how it will look or to make sure that your slicing will work (if your using custom slices). EZRound makes this simple.

HINT: You can press the F11 key at any time to jump to the preview window with the current settings (as shown on the View menu) and with the current design. Pressing F11 again while in the preview window will exit the preview

To access the preview from the menu system, click the View option.

To help you simulate how your design will look in real life, EZRound lets you control how it will be used in the preview. You can make the following changes:

Table Width: This setting will force your design to be a certain width. Note that in normal HTML table behavior inserting a larger object (such as a photo) will force the table to expand in size. You can enter the table width in pixels, or add a % (percent) sign to have the table occupy a percentage of the screen width.

Table Height: This setting is optional. If you don't specify it, then the table generated will be the minimum height required to hold your slices and the sample text content. If you switch modes in the Previewer to add more text or a photo, the table will grow in size.

Table Align: This setting will justify the table (left, center, right) in the browser.

Wallpaper: If you use wallpaper on your website, you can specify it here and EZRound will generate the preview page with it. This is useful to test how your design will look against it.

Note: If you are using wallpaper, then you will usually want to enable the "Background Color is Transparent" option on the color menu. This will produce a better effect in most cases.

To select wallpaper, just click the "..." button.

To clear the selection, click the eraser button.

There is a button on the bottom of the page that will save these values as the default settings to be used when creating a new table design.

When you are satisfied with your settings, click one of the preview buttons:

Internal - this will open your design in the EZRound built-in HTML browser.

External - this will open your design in the browser that is configured to be your default Windows browser.

HTML - this will open the internal browser in Source View mode so you can see the HTML used for the design.


IV. Live Preview - the EZRound Internal Web Browser

When you press F11 from anywhere in the main EZRound program, you will open your design in the internal web browser (in the sample view).

HINT: Pressing F11 again while in the preview window will exit the preview - allowing you a fast In/Out of preview mode.

Views available in Live Preview

Sample View: This is the view that you see when you first go into the Live Preview. Simply put it is your table design set to the width and height specified and displayed on the wallpaper (if any). You can return to this view from the second icon from the left on the Live Preview toolbar.

Book View: This is your table design with a larger amount of text. Depending on your table width settings, it may all fit, or (if you specified a narrow number) the table may grow in height. You can return to this view from the third icon from the left on the Live Preview toolbar.

Image View: This is your table design displayed with an image and some text. This gives you a chance to see the container effect (where the table design expands to hold the content). You can return to this view from the fourth icon from the left on the Live Preview toolbar.

External Browser View: This takes whatever was the last view on the internal browser and loads it into the default Windows browser. You can return to this view from the fifth icon from the left on the Live Preview toolbar.

HTML View: This view displays the raw HTML source code for the page you are viewing. You can return to this view from the sixth icon from the left on the Live Preview toolbar.

Clipboard: This copies the raw HTML to the Windows clipboard.

You can maximize the screen if need be.

When you have completed you testing, you can use the first icon on the left of the toolbar to exit.


V. Exporting your design in standard EZRound format

When you have completed your design and are satisfied with the results you are ready to export your design. EZRound will slice your design and use nine sections of it for creating the HTML table. Depending on the options you choose, it will also create HTML files to test your design from your computer and a HTML container file that you can use from the Internet. It also creates a text file which tells you what each file is and what it does.

To start the export process, you click the Export menu option.

TIP: You can press F10 at any time to jump to the export screen from anywhere in the main EZRound program.

On the export page, you will be asked to provide a 3 or 4 character name that will become part of the filename. The point of keeping this short (and only one word) is to keep down the amount of HTML needed to access the image slices.

The first name (in example) defaults to EZ1.

When the export is complete, you would have these files (as itemized in a text file called _EZ1FILES.TXT):

Files created by EZRound for this project [ EZ1]

_EZ1FILES.TXT.....................................This file list
_EZ1Preview.gif...................................Design Preview Image
_EZ1LOCAL.HTM.....................................Local Test file
_EZ1LOCAL.TXT.....................................Local Source file
_EZ1LOCAL_TABLEONLY.TXT...........................Local Source file - Table Only
_EZ1INTERNET.HTM..................................Internet Test file
_EZ1INTERNET.TXT..................................Internet Source file
_EZ1INTERNET_TABLEONLY.TXT........................Internet Source file - Table Only
EZ1UL.jpg.........................................Upper Left Corner Image
EZ1Top.jpg........................................Top Center Image
EZ1UR.jpg.........................................Upper Right Corner Image
EZ1Left.jpg.......................................Left Side Image
EZ1Center.jpg.....................................Center Image
EZ1Right.jpg......................................Right Side Image
EZ1LL.jpg.........................................Lower Left Corner Image
EZ1Bot.jpg........................................Bottom Center Image
EZ1LR.jpg.........................................Lower Right Corner Image

Each file is identified with a description.

If you look close, you can see the significance of the short filename you provided. All of the "EZ1" files are grouped together (easy to find and reuse).

EZRound will save the last short filename that you provided each time so you can increment the number for the next design that you export (EZ2, EZ3, etc.).

The unique naming also allows you to have more than one EZRound design on the same website or on the same web page.

Starting the export...

After you enter your short filename, click the Export Files button to open the export screen.

If you want EZRound to write a HTML container file for you (either as an example of how to use your slices - or as something you can re-use on your website) you must enter the URL to where your design slices will be uploaded.

NOTE: If you are going to be using the design slices in a HTML table created by another program (such as NetObjects Fusion) you can skip entering the URL and select the checkbox that says: "Export Image Slices Only". You may also want to check the box that says: "Export Design Preview GIF". This is a convenient way to be able to preview your design at a later date.

Depending on how you want to use the HTML created by EZRound, you would either enter this as a Direct URL or as a Relative URL. Here is the difference:

A Direct URL would be used if the design slices will be located on a different server than the HTML file that is used to access it. A good example of this would be using the container file with a eBay auction listing. Your design slices will be uploaded to your picture hosting service (note that this would not work if you are using eBay picture services), and then the HTML used to access them would be uploaded (as a part of your listing) to the eBay server.

Since a person viewing your auction listing would be accessing the web page they are looking at from the eBay server, the link between the eBay server and the location of your design slices would be a Direct URL.

An example of a Direct URL would be:

http://www.myphotohosting.com/myfolder/EZ1Top.jpg

A Relative URL would typically be used when you are using your design on your own website. Both the design slices and the HTML container are on the SAME server. So the link between your HTML and your design slices is a Relative URL.

An example of a Relative URL would be:

../assets/images/EZ1Top.jpg

Your hosting center or ISP can provide details of exactly how you need to access your files.

If you want EZRound to generate the container HTML for you, then you can also specify the following information:

Table Width: This setting will force your design to be a certain width. Note that in normal HTML table behavior inserting a larger object (such as a photo) will force the table to expand in size. You can enter the table width in pixels, or add a % (percent) sign to have the table occupy a percentage of the screen width.

Table Height: This setting is optional. If you don't specify it, then the table generated will be the minimum height required to hold your slices and the sample text content. If you switch modes in the Previewer to add more text or a photo, the table will grow in size.

Table Align: This setting will justify the table (left, center, right) in the browser.

Special options:

Export Image Slices Only: If this option is selected, no HTML will be generated - just the design slices.

Export Design Preview GIF: If this option is selected, then a preview image of the design will be generated.

Save as Default Settings: If this option is selected, EZRound will remember the other settings for your next export session.

Open Windows Explorer Folder: If this option is checked, EZRound will open Windows Explorer to the project export folder to give you convenient access to the exported files.

Folder Echo: If this option is enabled a copy of the exported files can be automatically copied to another folder on your computer so the files are ready to use from another software program.

When you are satisfied with your settings, click the Export button to complete the process. EZRound will export the design slices, write the HTML and open a Windows Explorer session in your export folder.

The the EZRound Export Manager (new in Version 3.0) will open:

The EZRound Export manager makes it easy for you to access the files and HTML created by EZRound for your project.

These functions are available:

Open Export Folder: This button opens Windows Explorer to the folder where the project was exported.

Clipboard Manager: The Clipboard Manager makes it easy to copy all (or portions) of the HTML containers to the Windows Clipboard.

Note: There are two sets of copy options. One is for the HTML written to access images in the LOCAL path (on your computer). The other is for HTML written to access images on your Internet Web Server. Be sure that you use the HTML that is correct for your needs (for most users, this will be the "Internet Path" set).

Clipboard Functions:

Copy HTML for Sample Page to Clipboard: This option copies the HTML for the sample page (including the background wallpaper settings if any) to the Windows clipboard. The page starts with the <html> tag and ends with the </html> tag.

Copy HTML for Entire Container to Clipboard: This option copies the HTML for the entire HTML container to the Windows clipboard. The container starts with the <table> tag and ends with the </table> tag.

An example of the entire HTML container is shown here:

<table border="0" width="50%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="67"><img src="../assets/images/ez1ul.png" alt="" /></td>
<td width="67" style="background-image:url('../assets/images/ez1top.png')"></td>
<td width="67"><img src="../assets/images/ez1ur.png" alt="" /></td>
</tr>
<tr>
<td width="67" style="background-image:url('../assets/images/ez1left.png')"></td>
<td width="100%" height="" style="background-image:url('../assets/images/ez1center.png')" >
<center>
Your text or photo would insert here
</center>
</td>
<td width="67" style="background-image:url('../assets/images/ez1right.png')"></td>
</tr>
<tr>
<td width="67"><img src="../assets/images/ez1ll.png" alt="" /></td>
<td width="67" style="background-image:url('../assets/images/ez1bot.png')"></td>
<td width="67"><img src="../assets/images/ez1lr.png" alt="" /></td>
</tr>
</table>

HTML Container Splitter

The Export Manager includes an HTML container splitter. This feature makes it simple to separate the first part of the HTML container (which has go in your web page BEFORE the content that you want to appear in the EZRound design) and the SECOND part of the HTML (that has to go in your web page AFTER your content).

Copy First Half of Container to Clipboard: This option copies ONLY the first half of the container to the Windows Clipboard.

An example of the first half of the HTML container is shown here:

<table border="0" width="50%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="67"><img src="../assets/images/ez1ul.png" alt="" /></td>
<td width="67" style="background-image:url('../assets/images/ez1top.png')"></td>
<td width="67"><img src="../assets/images/ez1ur.png" alt="" /></td>
</tr>
<tr>
<td width="67" style="background-image:url('../assets/images/ez1left.png')"></td>
<td width="100%" height="" style="background-image:url('../assets/images/ez1center.png')" >
<center>

Copy Second Half of Container to Clipboard: This option copies ONLY the second half of the container to the Windows Clipboard.

An example of the second half of the HTML container is shown here:

</center>
</td>
<td width="67" style="background-image:url('../assets/images/ez1right.png')"></td>
</tr>
<tr>
<td width="67"><img src="../assets/images/ez1ll.png" alt="" /></td>
<td width="67" style="background-image:url('../assets/images/ez1bot.png')"></td>
<td width="67"><img src="../assets/images/ez1lr.png" alt="" /></td>
</tr>
</table>

Modify HTML Container for NetObjects Fusion: This feature was added to make it easy for users of NetObjects Fusion (and similar operational software) to use the HTML container code generated by EZRound for centering web pages.

By default, NetObjects Fusion uses a "publish by asset" folder structure on the webserver that places files and folders like this:

<ROOT> - the "HOME" page ( index.html, etc. ) goes in the "root" public directory of the webserver.
<ASSETS> - this is a directory below the root level of the webserver.
<IMAGES> - this is a directory below the assets level of the webserver.
<HTML> - this is a directory below the root level of the webserver where OTHER HTML files are placed.

As a result of having HTML files in two locations, the HTML needed to reference the EZRound image files (which get uploaded into the IMAGES folder) has to be different for the HOME page than it is for OTHER pages.

The relative path to the images from the HOME page is ./assets/images

The relative path to the images from OTHER pages is ../assets/images

(note the ./ vs the ../ in the path)

By default this feature is "Disabled", meaning that the relative path to the images is exactly as specified on the Export Form.

Selecting the "Home Page" option modifies the relative path generated into the HTML container halves to have ./ in them.

Selecting the "Other Pages" option modifies the relative path generated into the HTML container halves to have ../ in them.

Using the feature: To use the feature all you need to do is select which type of page they want to generate HTML for (Home or Other) and then use the copy to clipboard buttons to place the HTML on the Windows clipboard. Then you paste the HTML into place in the NetObjects Fusion program. See the "centered" tutorial for details at: http://www.ezround.com/centered.

A note on file locations:

By default, EZRound creates a folder called EXPORTS under your My Documents folder. When you enter a short filename, then another folder for that particular export will be created below the EXPORTS folder. In our example (EZ1) the folder setup would bee:

C:\Documents and Settings\CJE\My Documents\EZRound\Export\EZ1

The design slices and HTML would be in this folder.

To use the slices in another program, you would typically copy them to the other programs preferred location. In example: with NetObjects Fusion you would copy the slices to the Assets folder of your NOF project.

If you decide to stop the export process, just click the Cancel button,

Clipboard:

EZRound can also export your unsliced design to the Windows clipboard. This can be useful when you want to paste a copy of it into another program for enhancement (or into an email for a client).

Explorer:

The Explorer icon opens a copy of Windows Explorer at the EXPORTS level of your folders. This is useful when you want easy access to exported designs at a later date.


VI. Importing a design table

Some people may prefer to use a graphics program other than EZRound to create their HTML table graphics. EZRound makes it simple to take an image created in another program and use it here.

Just create your image in the other program (for best results it should not be more than 300x300), then save it in almost any image file format you desire. EZRound recognizes over 40 of the most popular image formats (including PhotoShop and PaintShop) and will automatically import and use them.

Just use the File button on the import menu to locate and open your file.

EZRound can also import a file from the Windows clipboard. Just copy the file to the clipboard in the other program, then click the Clipboard icon on the import menu to complete the process.

If your import is successful, you will get a message and be taken to the Custom Slice menu.

See the section on Custom Slicing for details on how to slice your imported image. This is important since EZRound is not aware of the design specifics (like it is for designs created inside EZRound).

There are two sample images in the Import folder under the EZRound program directory.

NOTE: When you import a design, the Design menu and the Automatic slice menu are hidden since they have no bearing on imported designs. Once you load a saved design, or create a new design, the menu options are restored.


VII. Using EZRound projects

EZRound makes it easy to save your designs as projects so you can re-use them later or use them as the basis for a new design. In fact EZRound ships with over 100 different design projects just to get you started and to show you some ideas!

Opening a project: You can open a project in three different ways. The first is to use the pull down menu (File, Open Project). The second is to click the Open icon under the Project menu. The third is to use the keyboard shortcut CTRL+O. After you open the picture dialog box, you can click on a project name to see a preview image of it. If you click the file type selector you can also see any project files that may have been created before the preview option was added.

Creating a new project: You can create a new project in three ways. The first is to use the pull down menu (File, New Project). The second is to click the New icon under the Project menu. The third is to use the keyboard shortcut CTRL+N. After you use one of these options, a New Project will be created using the default settings for each of the design sections.

Saving a project: You can save a project in three ways. The first is to use the pull down menu (File, Save Project). The second is to click the Save icon under the Project menu. The third is to use the keyboard shortcut CTRL+S. If this is a new project, you will be prompted for a project name. If you are saving a previously named project, it will just be saved.

Saving as a new project (cloning): You can "Save As" a new project in two ways. The first is to use the pull down menu (File, Save As Project). The second is to click the Save As icon under the Project menu. After you get the file dialog, just change the project name to the new project name. Afterwards you can just use the Save option.


Program Help

EZRound has this help document, a Tip of the Day function, two forms of in program help and movies.

In-Program Help
The first of these are the tooltips (where you hold the mouse over a control and a bubble appears to tell you about it). You can enable/disable this option from the pulldown Options menu.

The second form of in program help is EZHelp. Just right-click a control and you will see the question "what's this?". Select that option for detailed help about that option.

The Tip of the Day
EZRound will display a "Tip of the day" on the program startup. You can use NEXT to move between the tips. You can also select not to have this displayed on startup. To access the tips again, just use the Help menu.

Movies
EZRound has movies that show you the features and how EZRound works. These are accessible from the HELP menu under the Movies option.

Be sure to check the website often as new movies and tutorials are posted there as they are released.


Getting Program Updates

EZRound has a built-in mechanism for getting program updates.

From the HELP menu, select "Check for Updates"

IMPORTANT

If you are running an Internet firewall (as you should be), make sure that the firewall is set to ALWAYS ALLOW these files to access the Internet:

SetupEZRound.exe
wupdate.exe
EZRound.exe

One or more of these programs will need to access the Internet to obtain your program updates. No personal information is ever sent to the Internet server.

As an alternative (if you are paranoid), you may download full versions of the program from the download area at http://www.ezround.com


Making Suggestions

If you have ideas on how to improve our product, we'd love to hear them.

Please use the contact form on our website to be sure that we get your message.

We do our very best to find and fix any bugs or problems BEFORE you ever see them.

Our BETA test teams are very good at testing our products and we appreciate their efforts.

However if you do manage to find a problem, please report it to us so we can fix it - and please be patient while we try to serve you.


Limits of the Trial Edition of EZRound

The trial edition of EZRound has one limitation. The exported images of the design (as viewed in preview mode) carry a watermark of the EZRound logo. This will NOT be present in the registered copy.

However you CAN save your project, preview it and see everything that you can do with the program. Then when you buy the software you simply enter your registration data, then load your project file and export your work. Then the watermark will not be there.


How to get a registration code

To obtain a registration code, you must purchase EZRound software.

Visit the EZRound website and purchase the software.

After your purchase you will receive an email with your registration data. Normally this happens in just a few minutes, however in a worst case scenario it may take 24-48 hours.

VERY IMPORTANT!!!!

Use a "real" E-Mail address that you plan on maintaining after you buy EZRound! This is our only means of contacting you to send you registration codes, or updates.

Make sure your E-Mail address was correct at PayPal or SWREG. When we occasionally have people who do not get their registration codes, a misspelled E-Mail address is often the cause.

Add us to your "Friends" list. Since so many people (and their Internet Service Providers) are using SPAM filters you need to make sure that you can receive emails from these addresses:

sales@ezround.com
support@ezround.com

Either configure your email and SPAM filter to allow emails from these addresses, or contact your Internet Service Provided and ask them to "white list" these addresses.

What if I don't receive my registration code?

If you do not receive your registration code in 24-48 hours, check your SPAM filter (or the one at your ISP) to make sure that our mails are getting through to you.

If all else fails, contact us via the form on our website, provide your order number and the Name/E-Mail address you used for your purchase (as well as what provider - PayPal or SWREG) and an alternate email address where we can contact you. Make sure that the same considerations as mentioned above are set for the new email address.

Privacy
Your email address and privacy is safe with us. We do not sell or otherwise provide your contact data to 3rd parties (unless mandated by an official and direct court order).

If you do not receive your key after 48 hours, use the contact forms on our website to send a message to us with your purchase details. These forms are a direct message system and are SPAM proof so we WILL get your message.

When you have received your registration data, click here to see how to enter it into EZRound.


How to enter your registration data

When you receive your registration email you will see two lines of information in the email that look similar to this:

===============================================
<BEGIN KEY
Your Name Here
2222-3333-44444-5555-66666-77777-8888-9999
END KEY>
===============================================

Copy the key information (including the BEGIN and END tags) to the Windows clipboard.

To do this, double-click to open the email. Then click before the < to insert your mouse at the beginning of the key.

Then hold down the SHIFT button and press the DOWN ARROW KEY three times.

Your screen should look like this:

Then hold CTRL and press C to copy this highlighted data to the Windows clipboard.

Next, start EZRound and click HELP, then Enter Registration Data.

When the registration screen appears, you can either hold CTRL and press V (to paste), or click the "Paste Key From Clipboard" button.

If the registration is successful, you will be informed that it will take effect when you restart the program.

Exit and restart the program and you should see your name as the registered user.


If your code has expired

If your EZRound demo has expired, then you will have to copy/paste the registration name and code into the fields one at a time.

So if your registration data looks like this:

===============================================
<BEGIN KEY
Your Name Here
2222-3333-44444-5555-66666-77777-8888-9999
END KEY>
===============================================

Then you first highlight and press CTRL+C to copy Your Name Here then paste it in the field for the name.

Next you first highlight and press CTRL+C to copy 2222-3333-44444-5555-66666-77777-8888-9999 then paste it in the field for the code.


Use our contact forms

It is important that you be able to contact us if need be.

Since so many people have problems with SPAM these days we have added contact forms to our website that send messages directly to us.

To contact us click here to visit the EZRound Website and use the contact forms to send a message to us.

As mentioned in the section on registration data section,

After your purchase you will receive an email with your registration data. Normally this happens in just a few minutes, however in a worst case scenario it may take 24-48 hours.

VERY IMPORTANT!!!!

Use a "real" E-Mail address that you plan on maintaining after you buy EZRound! This is our only means of contacting you to send you registration codes, or updates.

Make sure your E-Mail address was correct at PayPal or SWREG. When we occasionally have people who do not get their registration codes, a misspelled E-Mail address is often the cause.

Add us to your "Friends" list. Since so many people (and their Internet Service Providers) are using SPAM filters you need to make sure that you can receive emails from these addresses:

sales@ezround.com
support@ezround.com

Either configure your email and SPAM filter to allow emails from these addresses, or contact your Internet Service Provided and ask them to "white list" these addresses.

What if I don't receive my registration code?

If you do not receive your registration code in 24-48 hours, check your SPAM filter (or the one at your ISP) to make sure that our mails are getting through to you.

If all else fails, contact us via the form on our website, provide your order number and the Name/E-Mail address you used for your purchase (as well as what provider - PayPal or SWREG) and an alternate email address where we can contact you. Make sure that the same considerations as mentioned above are set for the new email address.

Privacy
Your email address and privacy is safe with us. We do not sell or otherwise provide your contact data to 3rd parties (unless mandated by an official and direct court order).

If you do not receive your key after 48 hours, use the contact forms on our website to send a message to us with your purchase details. These forms are a direct message system and are SPAM proof so we WILL get your message.


Send us mail

You can also send mail to us at:

LANSRAD
P.O. Box 74
Fayetteville, Tennessee 37334

All technical support is handled via email and should be initiated through the contact form on our website so we can track it.


EZRound Tutorials

The tutorials in this section are general EZRound tutorials. They will show you how to use EZRound and help you understand how the technology works.

The following tutorials are available:

Table Basics

Using EZRound's HTML Container in an HTML Editor

Custom Slicing

Other tutorials deal with specific tasks such as using EZRound with other programs or with online auctions like eBay.

The following tutorials are available:

NetObjects Fusion Tutorials

eBay and Online Auction Tutorials

Be sure to visit our website often for new additions to our tutorial section.


Table Basics

The most important thing to know is how the image slices produced by EZRound are placed and used in an HTML TABLE. If you understand this basic concept, then you will be able to create these effects in any HTML editor or web page design program.

For purposes of this tutorial (and because this website was created with it) we will be using NetObjects Fusion. The steps may be slightly different for other programs, but the placement of the image slices is identical.

The first step is to use the table tool to create an HTML TABLE.

We will be creating a three row by three column table. This is because there are nine image slices created by EZRound. You can create more complex tables as long as you follow the rules for corners and content cells as laid out below.

Don't worry that the nine slices make a table that may be smaller than the size you want. You will be able to resize it to fit your needs.

Let's look at the table created using the table tool. After using your table tool to create it, your table should look like this:

For illustration purposes, we are going to add color and numbers to the cells so you can clearly identify what we are talking about. Now our table looks like this:

VERY IMPORTANT FACT

The green cells ( 1, 3, 7 and 9 ) have the EZRound image slices placed in them using the picture tool. In this case, these slices are dropped into cells as "content" and you can not have anything in there with them.

The yellow cells ( 2, 4, 5, 6 and 8 ) have the EZRound image slices placed as the "background" of the cell. This means that you can place "other" content "in" the cell (on top of the background image). This is how you get your content to appear to be "framed" by the table and its image slices. This is also what makes it possible for your table to expand in size (since the background images are stretched to fit the cell).

Here is a link to an excellent tutorial on the FuseDocs website that shows step-by-step instructions for completing our table assembly in NetObjects Fusion.

Click HERE to visit the FuseDocs website and view this tutorial
(a new browser window should open)

When we have finished the assembly for our table, it should look like this:
(of course if you used a different EZRound design - it would be different)

This table will now act as an HTML "container" and is ready to hold any sort of content that you want to place inside it.

Just remember that you can only place content inside the yellow cells. In most cases, you'll simply use the center cell. Remember that it can be a container for anything - even other tables.

You should also note that the thickness of the shadow you use in EZRound (if any) along with the padding will affect how "close" your content can come to the edge of the outer cells. By default, EZRound uses the widest area required as the height and width of all slices, but you can adjust this using the custom slicing menu. Just be sure to preview your work and pay attention to round corners. However in most cases you can simply use the default slices that EZRound calculates.

EZRound helps you manage filenames

A big consideration for web designers is that they may have more than one EZRound table on a website, so duplicate filenames can become a problem. EZRound takes care of this by asking you for a 3 or 4 character "short name" for your design export. This short name is then combined with standard EZRound "slice names" to produce the actual filename used. This causes the names to be very visual in two ways: 1) you can tell at a glance what slices belong to which design and 2) you can tell what slice goes into what position in your table.

Here is an example of a design after export. If you look closely you can see that the short name ( EZ21 ) is easy to see in all the filenames and also the position it is placed in the table is a part of the name.

This makes it very fast to place your image slices in a table and makes your files easy to manage because all of the design files will group together when sorted by name.

Of course we could display that information like this!

So how did we get the simple table above to appear "inside" our EZRound frame? Simple. We used the COPY function to copy the table to the Windows clipboard and then we PASTED it into the center cell of our EZRound table! This great effect just took a few seconds to create.

A "container" is just that - a container...

Your new frame can be used to hold any content that you might have on your web page. The navigation menu on the left of this page is held in an EZRound container. The table above is. You can even have a photo...

One more tip...

Once you have your HTML TABLE container assembled, you can just use the COPY and PASTE function (in most programs anyway) to make a copy of it and use it in another place. You can also just edit the properties of the cells to change file names on the copy to save time switching designs.

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


Using EZRound's HTML Container in an HTML Editor

SoThink HTML Editor Version (Direct Edit Method)

This tutorial is very similar to the other tutorials we have for using the EZRound HTML container, but it contains specific details needed for users of the SoThink HTML Editor (or any other editor where you can simply copy/paste HTML code into your web page)..

There are two basic ways you can use the designs created by EZRound.

The first is to simply take the design slices and insert them in your own HTML table. This has the advantage in some web design programs of making the container created by that table and its contents visible at design time.

The second way to use your EZRound design is to take the HTML written by EZRound, insert your content into the center cell, then insert the entire design and content into your web page.

This second method is what we refer to as using the "HTML container" created by EZRound.

Don't get too worried about the terms - just think of it as a cardboard box. EZRound creates the box, you put your content into it, then place it on the web page. That is all there is to it!

How do I use it?

When you export your design, EZRound will create an XHTML compatible "container" for your design slices and save it as a file along with sample files to show you how to use it. These files will be placed in a folder named with the "short name" you provided with your export and located in a folder called Export (which is by default in your My Documents folder).

You will also be able to use the EZRound Export Manager to copy the HTML generated by EZRound to the Windows clipboard:

You can also simply double-click the design files in Windows Explorer to open them:

The files that have the words TABLEONLY in their names are the HTML containers. The LOCAL one references the design slices on your computer, the INTERNET one references your files in their Internet location.

To copy/paste it, just double-click one of the .TXT versions and then select all the text and copy it to the Windows clipboard. Then you can paste it into your other program.

Once you have the container object copied to the Windows clipboard, you are ready to use it.

In any HTML editor, that allows you to insert code directly (such as the SoThink HTML Editor shown here), you just click to select the insertion point - then paste the code into place. In some programs (such as NetObjects Fusion) you will need to put a text box on screen, then click CTRL+T to insert HTML. Click here to see how this is accomplished in NetObjects Fusion.

Inserting the HTML container code via direct paste into the SoThink HTML Editor:

This tutorial assumes we have the EZRound container copied to the Windows clipboard. When we start a new document in the SoThink HTML editor, we then click into the BODY section where we want to insert our "container".

After you press CTRL+V (Windows shortcut) to paste your container code into place you should see this:

In this example we have highlighted all the container code that was inserted so you can see how it changed the page. Using the container code was just the same as creating a table and linking the design slices yourself - but MUCH faster and far more accurate since EZRound has made all the size calculations for you!

Next we are going to highlight ONLY the insertion point for your content so you can see it:

You can change the text to whatever you want it to be, add photos, change fonts or do any normal thing you would do with any other table.

In the SoThink editor, when we click the preview tab, we see:

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 an HTML document. If your editor supports it, this is a fast way to get EZRound effects onto your web pages.

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


Custom Slicing

This tutorial will provide you with detailed information about how automatic slice sizes are calculated in EZRound and what factors you need to consider for custom slicing.

Factors that affect how close your content can come to the sides are:

Corner size. It is critical in a round corner design that you allow 100% of the number you allocated for the corner size (on the image sides where the corners are round) - otherwise you will get a "flat" spot when it assembles.
Shadow width. Since we are dealing with an image - the shadow (even though "outside" the cell of your HTML table) is a part of it. Depending on what type of shadow is selected, it may need an allowance all around (as in "full" shadow), or just on two sides (as in one of the drop or hanging shadows).
Background padding. This is the distance between the outside of the image and the other items on the web page. It also plays a crucial factor when dealing with the shadows as it allows the "smudge" or "blur" room to take effect. This number affects the entire image since it is added equally all around it.
The accent band width and padding both push "inwards" and affect the thickness of the slice.

Smart Slicing

The default automatic slice size is calculated as:

Background Padding + Shadow Width + Corner Size + Accent Padding + Accent Width

In Version 2.0 we added a new "Smart Slice" engine that will create the smallest possible slices on all sides of the design. Some slices are larger than others (to make sure that the design is not clipped on an opposite side), but for some shapes (such as those with a flat side) this will really reduce the slice size.

This automatic formula works well in most cases. The fact that some slices are slightly larger than they could be does not matter because the file sizes are so small. However if you really want to use custom slicing to your advantage you need to have a table shape that involves square corners (at least some).

Here is a round rectangle shape sliced normally with the corner size set to 20. Note the drop shadow around the red of the image and also the white background padding outside the red area.

Here is the same shape, set to a square design (Note that EZRound automatically resets the corner size to zero as of version 1.6.1). You can see that the automatically calculated design slices are much smaller. This is because there are no round corners to allow for (other factors - the shadow and background padding are the same).

If you look at these slices, you see that we are as small as we can go because any less would cut into the shadow area (bottom left or top right). Also keep in mind that we are allowing for the background padding all around the design.

A note about the minimum slice size setting.
In Version 2.0 we added a new setting on the Smart Slice screen that allows you to set the minimum slice size. The program default is 5px. You could reduce this all the way down to 1px, but in some graphic mode web design programs you might have trouble selecting that cell to stretch your design.

You can change the setting to suit your needs and save it as the default value to be used for future designs. You can also reset it to the program defaults.

Custom Slicing

Now let's look at a design with a flat side on the left. Here is the automatic slice pattern (all slices are equal).

If you look at this design closely, you will see that the only place we can reduce the slice size is on the LEFT side. This is because if we try to reduce the slice on any other side, we will cut into the area needed for the drop shadow.

Let's go to the custom slices menu and check "Use custom slicing" but don't check "Show slices only". Also uncheck the "Make all slices same size". This lets you can move the slice lines and still "see" them.

Now you can set Vertical Line 1 down about as far as 20 (otherwise we start to clip our shadow on the bottom.

The result is:

Now when we check the "Show slices only" the result is:

If you look closely at the corners you will see that we have sliced as close as we can without cutting away at the rounded corners.

The only other possible place we could make the slices smaller would be to reduce the distance between lines H2 and H3. If we set H2 to 155 and H3 to 165 (the positions could be anywhere in this design as long as they don't get into the corner space), we get this:

You can see that this is about as tight as you can (or would want) to slice the design.

Generally we recommend that unless you are putting very small content (text) in the HTML container, that you use a taller (or default) slice for the area between H2 and H3 just to make it easier to see in your design environment.

Summary

We hope that this tutorial has given you an insight as to how slicing is done and why. If you are slicing custom imported images from another program, you will need to follow the same basic guidelines.

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


NetObjects Fusion Tutorials

The tutorials in this section are specific to NetObjects Fusion.

The following tutorials are available:

FuseDocs ( Web Tutorial ): Creating a box with round corners


Universal Import Tutorial for NetObjects Fusion 7.5 - 11

NOTE: Since HTML import in NOF10 and NOF11 do not work as expected, the old "Fast Import" tutorial has been replaced by a new method that works with NOF 7.5 through NOF 11.

The tutorial steps are almost identical between NOF versions, but the interfaces may differ slightly. We will try to note obvious differences where they occur.

IMPORTANT: This tutorial does NOT replace the steps needed to import the images slices and mark them for publishing as outlined in the EZRound "Centered" website tutorial as shown here.

Getting started

This tutorial assumes that you have created your EZRound design, exported it properly and that the Windows Explorer folder is still open to the project export directory.

For simplicity, this tutorial uses a new blank NOF website but the principals will be the same if you are adding EZRound to an existing NOF project.

Note: This tutorial is quite detailed and because of that it may seem long or difficult. It is not! After you follow the tutorial and do the import this way one time, you should be able to import other designs in just a few minutes.

Creating a new EZRound "Library" page in NOF

The first step is to add a new page in the NOF site view. Click the Add Page button on the toolbar and name the page EZRound as shown here:

Next click on the Page Properties tab and check the Don't Publish box.

This will prevent the EZRound page from being included in your navigation or published to your website, but it is important that you do NOT delete this page as it is going to serve as a "library" for your EZRound designs.

The next step is to switch to the Page View in NOF for the new page.

Leave your NOF window where it is and use the Windows Taskbar (or ALT+Tab) to switch to the Windows Explorer view of the export folder for your EZRound design.

Note: if you are importing a design that you created earlier, you will need to open a copy of Windows Explorer to the export folder of your EZRound project before you proceed.

Selecting the files created by EZRound

In the Windows Explorer view of your files, select all nine of the .jpg or .gif files (which one you see will depend on the settings used when you created your design in EZRound) as shown here:

Hint: Hold the CTRL key and use your mouse to click and select multiple files.

Bringing the files into NetObjects Fusion

Once you have your nine files selected, position the mouse over them, left click ON any of the selected files and HOLD your mouse button down. Then drag mouse down to the Windows Taskbar and over the NetObjects Fusion button there. Pause for a second (do NOT release the mouse!) and Windows will bring NOF to the top automatically for you.

Move your mouse to an area in the layout region (upper left works good) and ONLY THEN then release your mouse.

The files will stack on top of each other. Just leave them there (and ignore the red exclamation marks that NOF gives as a warning that the images are overlapped).

Note: In reality all nine of the image slices have been automatically added to NOF as assets. This saves you the tedious task of adding them one at a time. If you were to spread them out, you'd see all nine slices as shown here:

Creating the table to hold the design.

The next step is to create a table in NOF to hold our EZRound design. This table will serve as a "container" for whatever you want to put inside it.

Click the table button on the NOF toolbar:

In the dialog that appears, set your table to be 3 rows by 3 columns and a height and width of 100 px each as shown here:

Why 100x100?

The 100px wide by 100px tall is just a recommendation based on our testing of average exported EZRound designs. In reality the trick is that you don't want the table to be any wider or taller than the combined width/height of the slices in your design.

In this example, our slices (stacked in order) look like this:

If we took the slices needed to make up the center row we'd see this:

The two side slices are 45px wide each and the center one is 36px wide (these sizes can be found by clicking the image in Windows Explorer or in NOF if you unstacked them).

45 + 36 + 45 = 126 (so our table width of 100 is less than the total)

If we took the slices needed to make up the center column we'd see this:

The top and bottom slices are 45px tall each and the center one is 36px tall.

45 + 36 + 45 = 126 (so our table height of 100 is less than the total)

Keep in mind that the goal is simply that the height/width of your table when you create it is less than the total height/width of the slices that make up the image.

This is important because it is going to force NOF to do the hard work of resizing the table for you (more on that later).

Hint: if your design has small corners or no padding, then your table size may need to be smaller than 100px x 100px. Adjust the logic as needed.

--------------------------------------------------------------------------------

NOF Version Specific Notes:

Hint: Some earlier versions of NOF will not have the option to set the height and width of the table as it is created. Instead you will see a dialog like this:

Just specify the 3 rows by 3 columns and click OK.

Then use your mouse to resize the table so that it is no wider or taller than 100px (see the size indicator at the bottom of the screen as shown in the next screen shot). Note that NOF may prevent you from getting a perfect 100x100. Don't worry as long as you don't go over 100 on the longest side.

--------------------------------------------------------------------------------

Adding the EZRound images to the table

The next step is to add the EZRound images that will be used as the Background Image to five of the nine cells on your new table.

Hint: Be careful that you do NOT mix up which cells get the EZRound slice set as a background image and which ones get added with the Picture tool in NOF.

Add the background images first

To add the first background image, click the left center cell of your table to select it as shown here:

Next click the Cell Background button and then the background image selector button:

When the NOF Picture File Open window opens, click the Image Assets tab and select the EZRound image for the LEFT side (note that the word LEFT is part of the name and the image can be viewed in the preview when you click it). Click OPEN to continue.

When the Picture dialog closes you should see the image you selected in the LEFT cell of the table.

Repeat this process with the TOP, RIGHT, BOTTOM and CENTER cells.

When you are finished your table should look like this:

Hint: Don't worry if some of the images seem distorted or are not fully displaying. Whatever you do - DO NOT manually resize the table at this stage of the import!

Adding the corner images

The next step is to add the four corner images as PICTURES so that they can hold the table design open and keep it from collapsing.

Click the Picture tool on the NOF toolbar:

Next click in the upper left corner cell of your table as shown here:

When the NOF Picture File Open dialog window opens, it should still be on the Assets tab. If it is not, then select it and then choose the slice of your EZRound design that has the ul (upper left) as a part of the name. Note that the image preview will also help you get the correct slice. Click OPEN to continue.

Repeat this process for the Upper Right, Lower Left and Lower Right images.

When all four corner images have been added your table will look something like this:

HINT: Don't worry about the way things look and again - don't try to manually resize the table yet.

Adding a Layout Region to the center cell

The next step is to add a NOF Layout Region to the center cell of the table. The Layout Region is the "canvas" or "workspace" where you will add any content that you want to be displayed in the EZRound container. It is also an important step of your import because it makes it easy to resize the design in NOF as needed.

Before you start - click the center cell of the table to select it as shown here:

Then click the Layout Region button on the NOF toolbar:

Next click the mouse in the center cell of the table and HOLD THE MOUSE BUTTON DOWN and drag outward as shown here:

When you release the mouse, NOF will automatically resize the center cell of the table to hold the content (your layout region) as shown here:

Collapsing the table

Now that you have all your images and a layout region in place it is time to "collapse" the NOF table so that it does not interfere with the design.

Click the Table Properties button and set the settings there as shown here:

Note that the Border, Cell Padding and Cell Spacing are set to zero and the Generate non-breaking spaces option is unchecked.

After you make these changes, the table looks like this:

Hint: Unlike previous tutorials where you had to work hard in NOF to push the sides of the table cells inward to tighten up around the region, our use of a table that was SMALLER than the size needed forced NOF to do the work of resizing the cells outward to hold the full image sizes. This method is MUCH easier!

Your import of the design is complete!

You could stop here, but the rest of this tutorial will show you how to add content to the design and resize it.

Copying the design to other pages

You can click the outer wall of the table to select the entire design, then use CTRL+C to copy it to the Windows Clipboard. Then you can change to a different page in your website, click the layout region and use CTRL+V to paste a copy onto that page.

You should keep the original design (remember that you are NOT to delete this page anyway) and use it as a "library" in case you want to use it in more than one page.

Hint: You can also export the EZRound page (as a one page template) and import it into another website and your "library" is ready to use again!

Resizing the design

IMPORTANT: The only thing you really need to remember when resizing the design (up or down) is that you NEVER resize the table until you have resized the layout region first.

Enlarging the design

To resize the design, first click the layout region to select it (note where the "handles" are) as shown here:

Then to make the design wider hold the mouse down at the edge of the region and drag it outwards as shown here:

When you release the mouse, NOF will resize the design to the new (larger) region size automatically:

To make the design taller, first click the layout region (make sure the "handles" show you have it selected - not the table) and drag the edge downward as shown here:

When you release your mouse NOF will resize the design to the new (larger) region size automatically.

Adding Content to the layout region

After the design is approximately the size you want it, you can move it around (remember to click the "edge" of the table to select it) or add any sort of content to it as needed.

Hint: For precision movement or positioning, click the edge of the table to select all of it, then use your arrow keys on the keyboard to move it one pixel at a time.

Hint: Do NOT add content to any cell other than the center (on the layout region) as this could have mixed results and break your EZRound container.

In our example, we will add some text with the text tool.

Making the design smaller

After positioning and sizing the text block as needed, the next step is to click the layout region to select it, then drag the lower edge of the layout region upwards to where we want it as shown here:

Usually as you reduce the height of the layout region, the table will collapse around it automatically. If it does not, then you can use the same technique as will be shown below to tighten up the right side.

To tighten up the right side we click the layout region to select it, then drag the edge inwards as shown here:

Hint: on both of these resize screen shots, note the starburst that shows where the mouse was when we RELEASED the mouse button after the drag to resize the layout region.

After we resize the layout region on the right side, there will be a gap between the edge of the layout region and the edge of the table as shown here:

To tighten up the design on the right side, click the edge of the table to select it (note the "handles") and then drag inwards to the left and PAST the edge of the layout region. Drag it like you are trying to fold the table back on top of the layout region as shown here by the starburst at the mouse position:

When you release the mouse, NOF will "snap back" and correctly resize the table so that it just fits the layout region as shown here:

That is all there is to it!

Thanks for taking the time to view this tutorial. We hope that it provides you with an easy way to import your designs into NetObjects Fusion.

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


Matching EZRound Colors with NOF Site Styles

This tutorial will show you how to get exact color matches for your EZRound designs with the Site Style elements in NetObjects Fusion.

NOTE: In this tutorial we are using a color match system called ColorImpact from Tiger Software. A free trial edition of this excellent software is available for download from http://www.tigercolor.com.

We like this software not only for its high quality color picker (used to get the exact color values needed to match the NOF site styles), but also for its ability to show us matching colors that would work well in the web design.

How to match EZRound Colors with NOF Site Styles

1. Start NetObjects Fusion and go to the page view with the site style you want to match loaded.

(in this tutorial we want to match our EZRound design with the orangish color used in the NOF "Black Book" style)

2. Start the ColorImpact software

3. Click the eye dropper tool on the toolbar

4. Click the OK button to start your session. This will hide the ColorImpact screen and return (in capture mode) to the NOF screen.

HINT: If you move between programs with the taskbar, be sure that you go into NOF - then back directly into ColorImpact before you start your capture session. ColorImpact will return to the program that had focus before the session starts.

5. When ColorImpact minimizes you will see a magnifier screen in the upper left corner. As you move your mouse around the screen, the exact pixel you are over will be shown (along with a close view) and its color values displayed.

6. Move the mouse over the color you want to identify (in our tutorial the Orangish color) and left-click to capture the color.

HINT: In this tutorial we will only select the one color we need, but you can select multiple colors in one session by holding the <Ctrl> key while you click on the color to capture. In the multiple capture mode, the colors are added to the color pallet automatically.

7. Since we are only capturing one color here, it will appear in the center of the color wheel.

8. Double-click the center of the color wheel to add the color to the pallet bar (above).

9. To transfer the color value to EZRound via the Windows clipboard, place your mouse over the color on the toolbar. Then right-click and select Copy Color Value, then left click on the HEX entry that has the # at the beginning of the value.

HINT: You can enter color values into EZRound manually or paste ones that do not have the # (pound sign) at their beginning, but you would not get the correct color value until you put the # at the beginning of the color code.

10. To paste the color value from the Windows clipboard into EZRound, just click the PASTE button next to the Color control where you want it applied.

11. EZRound will validate that it understands the color value and then change the color picker and update the sample automatically.

HINT: Set the background color in EZRound to whatever color you are using as the background in NOF. If your Site Style has a wallpaper background then you may want to check the Background color is transparent option. This will cause the EZRound components to be generated as GIF files with a transparent edge.

That is all there is to it!

When you export your EZRound design it will match your NOF site style nicely.


Using EZRound's HTML Container in NetObjects Fusion

NetObjects Fusion Version

This tutorial is very similar to the other tutorials we have for using the EZRound HTML container, but it contains specific details needed for users of NetObjects Fusion.

As of Version 3.0 of EZRound, there are four basic ways you can use the designs created by EZRound.

The first is to simply take the design slices and insert them in your own HTML table. This has the advantage in some web design programs of making the container created by that table and its contents visible at design time.

The second is to import the design using our new Universal Import Tutorial and copy/paste it to where you want it in NOF. This is the fastest, easiest and recommended method.

The third way to use your EZRound design is to take the HTML written by EZRound, insert your content into the center cell, then insert the entire design and content into your web page.

This fourth method is what we refer to as using the "HTML container" created by EZRound.

Don't get too worried about the terms - just think of it as a cardboard box. EZRound creates the box, you put your content into it, then place it on the web page. That is all there is to it!

How do I use it?

When you export your design, EZRound will create an XHTML compatible "container" for your design slices and save it as a file along with sample files to show you how to use it. These files will be placed in a folder named with the "short name" you provided with your export and located in a folder called Export (by default located in your My Documents folder).

You will also be able to use the EZRound Export Manager to copy the HTML generated by EZRound to the Windows clipboard:

You can also simply double-click the design files in Windows Explorer to open them:

The files that have the words TABLEONLY in their names are the HTML containers. The LOCAL one references the design slices on your computer, the INTERNET one references your files in their Internet location.

To copy/paste it, just double-click one of the .TXT versions and then select all the text and copy it to the Windows clipboard. Then you can paste it into your other program.

Once you have the container object copied to the Windows clipboard, you are ready to use it.

In any HTML editor, that allows you to insert code directly (such as the SoThink HTML Editor), you just click to select the insertion point - then paste the code into place. Click here for a tutorial on using EZRound HTML containers with this type of HTML editor.

Inserting the HTML container code into an HTML embed point in NetObjects Fusion:

Inserting the container code into your NetObjects Fusion ( NOF) web page is easy if we use the standard NOF method for inserting HTML code

.
The first step is to use the NOF Text Tool to add a text box to your web page.

Select the text tool and draw out an area that is about the size and location where you want the EZRound HTML container. You don't have to be precise as you can adjust it later. After you draw it out, make sure that you do not click out of it and that the cursor is flashing inside it.

Next use the keyboard and enter CTRL+T to open the NOF HTML insertion point.

Now that your insertion point is anchored inside the text box, use the keyboard and enter CTRL+V (Windows shortcut) to paste the EZRound HTML container code from the Windows clipboard into the NOF insertion point.

If it is successful, your screen should look something like this:

The next thing we want to do is to enlarge the NOF insert HTML box and add our content. Move the Insert HTML window if needed (by left-clicking and dragging the blue title bar), then use the grab handle in the lower right side of the window to drag it out to a larger size. When you are finished it should look something like this:

In this screen shot we have highlighted the point in the EZRound generated HTML container code where you would add your content. You can use any form of content here that you would normally use in one of the NOF HTML inserts. Text, links to photos, even FORM code (in fact the "Contact Us" form on this website is the Free DB Masters form that has been dropped inside the EZRound HTML container). You can even "nest" multiple EZRound HTML containers.

Click OK when you are finished. If you need to edit the container or contents, just double-click into the text box and press CTRL+T again to open the NOF HTML insert point.

TIP:

You can also use PHP to include an external file and its contents will "flow" into the container. This is an easy way to include content on your website that can be maintained without requiring the user to have NetObjects Fusion.

That's it! Resize and position the NOF text box on your page and your done!

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.

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


Web Tutorials for NetObjects Fusion

The tutorials listed here are available from websites on the Internet.

( Web Tutorial ) FuseDocs: Creating a box with rounded corners

You can also find more tutorials at the EZRound website


eBay and Online Auction Tutorials

The tutorials in this section are specific to using EZRound with auction listings.

The following tutorials are available:

Using eBay's Turbo Lister Software with EZRound

Using eBay's "Sell Your Item Form" with EZRound


Using eBay's Turbo Lister Software with EZRound

About this illustrated tutorial

This non technical tutorial is part of a series we call "Show Me". It is written for people who want to know how to use EZRound in just as few steps and with as little technical explanation as is possible.

Show Me: What are we about to do?

This tutorial will show you how to take the design created by EZRound and insert it into your Turbo Lister auction listing. Then it will show you how to put text or photos in the container created by the EZRound design.

Show Me: The Sequence

Use EZRound software to load or create your design then export it so that it is ready to use in Turbo Lister. Then use your FTP software to upload the design slices to your photo hosting center.
1. Start Turbo Lister software and follow the basic steps to create a new listing.
2. Copy the HTML container created by EZRound to the Windows clipboard and paste it into Turbo Lister.
3. Add content (a caption, photo and text) to the EZRound container.
4. This tutorial starts when you get to step 2 of 3 in the Turbo Lister software entitled "Enter Your Description" as shown here:

Show Me: About the Turbo Lister Software

The screen you are looking at in the Turbo Lister software has three tabs on it. They are labeled:

Design View
This tab is an interactive area that uses a "WYSIWYG" (What You See Is What You Get) interface. When you add a picture or text or change font settings, you "see" your changes and how they affect the listing.

HTML View
This tab presents you an opportunity to "see" the HTML code that operates "behind the scenes" to produce the effects that you see in the Design or Preview modes. This is the tab where you add your EZRound HTML container to your listing.

Preview
This screen shows you a final preview of what your listing should look like when you upload it to eBay. If you have external linked files (such as photos or the slices of your EZRound design), they will be displayed from their locations on the Internet. This gives you an opportunity to make sure that your photos and slices are linked correctly and that they will display correctly after you upload your listing to eBay.

Show Me: A simple example

In this simple example, we will start with an empty listing and add an EZRound HTML container. Then we will insert a caption for a photo, a photo (prepared by FotoKISS, the Auction Photo Editor ) and some text about that photo.

You can have multiple EZRound HTML Containers in your auction listings. They can be all the same style or they can be different styles. You are in complete control.

Show Me: How to do the work

First we need to copy the HTML container code that was created by EZRound onto the Windows clipboard. If you have just exported your design, then a Windows Explorer window will be open and you will be looking at the files created by EZRound.

The files you see in the list will all be a combination of the short filename (in this case "eBay1" and some other word that describes what the file is, where goes and what it does.

Since we want the HTML container code (which is a HTML TABLE) that will access our image slices from the Internet, we need to locate and double-click the file that is named with the design name and the words INTERNET_TABLEONLY.TXT.

When that file opens in Notepad, you should click Edit and then Select All from the pulldown menu or use CTRL+A (a Windows shortcut) to select all of it. When you have all of the code selected, it should look like this:

Note: If you just completed the export in EZRound, the program will offer to copy the TABLE to the clipboard as a shortcut for this step.

Click Edit, then Copy from the pulldown menu or use CTRL+C (another Windows shortcut) to copy it to the Windows clipboard.

Click the Turbo Lister entry on the Windows task bar to return to Turbo Lister.

In the Turbo Lister program, click the HTML View tab, then click into the text area (as shown above).

Press CTRL+V (a Windows shortcut) to paste the HTML copied into the text area. When you have finished, it should resemble this:

Now that we have copied and pasted our EZRound HTML container into the Turbo Lister software, it is ready for us to use.

Note: Be sure to use your FTP software to copy the image slices from the EZRound export directory to the picture hosting service where you have your listing photos. After copying the image slices to the Internet you should double-click the HTM test file ( in this example: _EBAYINTERNET.HTM ) and make sure that the design displays correctly.

When you are certain that your image slices will display correctly with the test file, click the Design View tab of the Turbo Lister software.

If you are online on the Internet, then the Turbo Lister Software should load and display your design from the Internet. If you are working Offline, then you will see small squares at the four corners of your design with red X's in them. These are just broken image link representations that Windows is displaying because it can not "see" your design slices. You can still work on the design - just be sure that the actual image slices display BEFORE you upload your listing to eBay.

When the images display, you should see your design (as we do in our example):

A note about the hairline crack in the display.

The HTML Edit control in Turbo Lister has a flaw when it is displaying a sliced HTML table. You will notice a white vertical hairline crack to the left of the cursor in the photo above. This is just a cosmetic flaw that you see in the Design View of Turbo Lister. Other HTML edit controls (such as the SoThink HTML editor by Sourcetek) display the design perfectly. The good news is that this flaw is only visible in Turbo Lister and will NOT appear when your design is viewed on the Internet. You may prove this to your own satisfaction by double-clicking the HTM files in your EZRound export folder to view the design in your browser.

Adding content to the HTML container.

Keep in mind that the design you are looking at has been sliced into 9 pieces. It is now represented in an HTML table that is 3 columns wide by 3 rows tall. If we were to look at a representation of the table without our design in it, it would look something like this (color and numbers have been added to make sure you know exactly what we are talking about):

The green areas have a slice of the image in them as content (sort of like dropping a picture in the cell), so you can not put anything in them.

The yellow areas have a slice of the image set as the BACKGROUND for them. As such you can put content in those cells and it will appear on top of the background image.

You should note that some designs (especially those with wide accent bands) would be blocked by your putting anything in cells 2,4,6 or 8. For this reason, most of the time you will limit your content to cell #5 (the CENTER).

A note about the WIDTH of the container.

The easiest way to set the WIDTH of your container (and indeed the alignment such as LEFT, CENTER or RIGHT) is inside EZRound when you do the design export. If you do it there, then EZRound will do the hard work and calculations for you.

Most people just set the container width to the same width as their photos (eBay recommends photos to be 400 pixels wide and 300 pixels tall). If you set it this way, then the photo will set nicely within the width of the table and you can put text above and/or below it.

You should also be aware that your container will expand to the size of the widest object (in the case of a photo), but that text will simply wrap and the container will get taller if needed.

In this example we are going to add a caption above our photo, then a photo and some text below it.

The easy way to get started is to click in the center cell (this is where the message about "Your text or photo would insert here"), then delete that text and type in our caption for the photo. Afterwards press ENTER two times (to put in two blank lines) Your screen should look like this:

Use your mouse to drop your cursor to the line just below the caption. It should look like this:

Next we are going to add a photo below the caption. To start this process, click the camera icon (as show above).

A note about photo hosting.

Just to be sure that you understand, EZRound is only going to work for you if you are NOT using eBay's picture services (in other words you are doing what eBay calls "self-hosting". To make sure that you are hosting your own photos, you can click the menu option on the left side of this screen titled: "Change photo hosting" under "Other Tasks"

When you click that item, you should see this screen:

If you are configured for your own hosting, your screen should look like the one above.

Now back to our tutorial...

After you click the camera icon, you should see this screen:

Type in the URL to your photo. (If you are using FotoKISS Auction Photo Editor software, you can use the HTML button to paste the Direct URL onto the Windows clipboard, then click here and press CTRL+V to paste it in place).

After the photo loads, your screen should look like this:

Click your mouse on the empty line that we put into place (which is now below your photo as show above). Next type in your description for the photo.

After you have finished you can use the normal Turbo Lister HTML Editing tools to change the fonts, alignment or text color. When you have finished making changes, click the Preview tab.

The Turbo Lister software HTML Viewer control will show you how your listing will look in a normal web browser as shown:

Note that the white hairline crack that was visible in the Design View has disappeared when we switch to the HTML Viewer for the preview mode!

One other limitation of the Turbo Lister software is not being able to maximize it to full screen (like you can in the EZRound Live Preview), so you may have to scroll the image to see that everything looks OK. Hopefully eBay will fix this small annoyance at some point in the future.

That is all there is to it!

Even though this tutorial seemed to have a lot of steps, all we really had to do was copy the HTML container code created by EZRound to the clipboard and paste it into the HTML tab of Turbo Lister. Then we uploaded our design slices to our photo hosting company and used the regular HTML editor of Turbo Lister to add our content.

If you wanted more than one HTML container in your listing, you would just switch to the HTML View mode and insert the next container above or below the current one. Just be sure that you do not paste one container inside another unless you were pasting into the center cell of the design (and meant to do it of course!).

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


Using eBay’s "Sell Your Item" Web Interface with EZRound

Using eBay's "Sell Your Item" Web Interface with EZRound

About this illustrated tutorial

This non technical tutorial is part of a series we call "Show Me". It is written for people who want to know how to use EZRound in just as few steps and with as little technical explanation as is possible.

Show Me: What are we about to do?

This tutorial will show you how to take the design created by EZRound and insert it into your auction listing. Then it will show you how to put text or photos in the container created by the EZRound design.

Show Me: The Sequence

1. Use EZRound software to load or create your design then export it so that it is ready to use in your auction. Then use your FTP software to upload the design slices to your photo hosting center.
2. Login to www.ebay.com and follow the "Sell your item" links, then complete the basic steps to create a new listing.
3. Copy the HTML container created by EZRound to the Windows clipboard and paste it into "Enter Your HTML". text area
4. Add content (a caption, photo and text) to the EZRound container using the eBay online interface and the Enter Your Own HTML..

This tutorial starts when you get to the point in creating a new listing where you see this screen:

Show Me: About the Sell Your Item Web Interface

The screen you are looking at in the Sell Your Item section has two tabs on it. They are labeled:

Standard
This tab is an interactive area that uses a "WYSIWYG" (What You See Is What You Get) interface. When you add text or change font settings, you "see" your changes and how they affect the listing.

Enter Your Own HTML
This tab presents you an opportunity to "see" the HTML code that operates "behind the scenes" and to add your own HTML code. This is the tab where you add your EZRound HTML container to your listing and also where you add your photo links.

Show Me: A simple example

In this simple example, we will start with an empty listing and add an EZRound HTML container. Then we will insert a caption for a photo, a photo (prepared by FotoKISS, the Auction Photo Editor ) and some text about that photo.

You can have multiple EZRound HTML Containers in your auction listings. They can be all the same style or they can be different styles. You are in complete control.

Show Me: How to do the work

First we need to copy the HTML container code that was created by EZRound onto the Windows clipboard. If you have just exported your design, then a Windows Explorer window will be open and you will be looking at the files created by EZRound.

Note: Be sure to use your FTP software to copy the image slices from the EZRound export directory to the picture hosting service where you have your listing photos. After copying the image slices to the Internet you should double-click the HTM test file ( in this example: _EBAYINTERNET.HTM ) and make sure that the design displays correctly.

The files you see in the list will all be a combination of the short filename (in this case "eBay1" and some other word that describes what the file is, where goes and what it does.

Since we want the HTML container code (which is a HTML TABLE) that will access our image slices from the Internet, we need to locate and double-click the file that is named with the design name and the words INTERNET_TABLEONLY.TXT.

When that file opens in Notepad, you should click Edit and then Select All from the pulldown menu or use CTRL+A (a Windows shortcut) to select all of it. (if you have just exported your design in EZRound, then you will be given an option to copy the HTML to the Windows clipboard to make this process easier). When you have all of the code selected, it should look like this:

Click Edit, then Copy from the pulldown menu or use CTRL+C (another Windows shortcut) to copy it to the Windows clipboard.

Click the web browser on the Windows task bar to return to the Sell Your Item Form.

In the Sell Your Item Form, click the Enter Your Own HTML tab, then click into the text area (as shown below).

Click Edit, then Copy from the pulldown menu or use CTRL+C (another Windows shortcut) to copy it to the Windows clipboard.
Click the web browser on the Windows task bar to return to the Sell Your Item Form.
In the Sell Your Item Form, click the Enter Your Own HTML tab, then click into the text area (as shown below).

Press CTRL+V (a Windows shortcut) to paste the HTML copied into the text area. When you have finished, it should resemble this:

Now that we have copied and pasted our EZRound HTML container into the Sell Your Item Form, it is ready for us to use.

When you are certain that your image slices will display correctly with the test file, click the Standard View tab of the Sell Your Item form.

The Sell Your Item Form should load and display your design from the Internet. If you see small squares at the four corners of your design with red X's in them, then there is a problem linking to your images. These are just broken image link representations that Windows is displaying because it can not "see" your design slices. If you see those, be sure that you have uploaded your image slices to your hosting center.

Broken image links look like this:

When the images display, you should see your design (as we do in our example):

A note about the hairline crack in the display.

The HTML Edit control in HTML Editor control that eBay is using has a flaw when it is displaying a sliced HTML table. You will notice a white vertical hairline crack to the left of the cursor in the photo above. This is just a cosmetic flaw that you see in the Standard View. Other HTML edit controls (such as the SoThink HTML editor by Sourcetek) display the design perfectly. The good news is that this flaw is only visible in this control and it will NOT appear when your design is viewed on the Internet. You may prove this to your own satisfaction by double-clicking the HTM files in your EZRound export folder to view the design in your browser.

Adding content to the HTML container.

Keep in mind that the design you are looking at has been sliced into 9 pieces. It is now represented in an HTML table that is 3 columns wide by 3 rows tall. If we were to look at a representation of the table without our design in it, it would look something like this (color and numbers have been added to make sure you know exactly what we are talking about):

The green areas have a slice of the image in them as content (sort of like dropping a picture in the cell), so you can not put anything in them.

The yellow areas have a slice of the image set as the BACKGROUND for them. As such you can put content in those cells and it will appear on top of the background image.

You should note that some designs (especially those with wide accent bands) would be blocked by your putting anything in cells 2,4,6 or 8. For this reason, most of the time you will limit your content to cell #5 (the CENTER).

A note about the WIDTH of the container.

The easiest way to set the WIDTH of your container (and indeed the alignment such as LEFT, CENTER or RIGHT) is inside EZRound when you do the design export. If you do it there, then EZRound will do the hard work and calculations for you.

Most people just set the container width to the same width as their photos (eBay recommends photos to be 400 pixels wide and 300 pixels tall). If you set it this way, then the photo will set nicely within the width of the table and you can put text above and/or below it.

You should also be aware that your container will expand to the size of the widest object (in the case of a photo), but that text will simply wrap and the container will get taller if needed.

In this example we are going to add a caption above our photo, then a photo and some text below it.

The easy way to get started is to click in the center cell (this is where the message about "Your text or photo would insert here"), then delete that text and type in our caption for the photo. Afterwards press ENTER two times (to put in two blank lines) Then type in your text that goes below the photo. Your screen should look like this:

Next you would click the Enter Your Own HTML tab again so we can insert our photo link.

You would insert your photo link between the photo caption and the description (that was one reason we put them in first and left a space between them)

Type in the URL to your photo as an IMG link with a Direct URL. (If you are using FotoKISS Auction Photo Editor software, you can use the HTML button to paste the Direct URL onto the Windows clipboard, then click here and press CTRL+V to paste it in place).

A note about photo hosting.

Just to be sure that you understand, EZRound is only going to work for you as a container if you are NOT using eBay's picture services (in other words you are doing what eBay calls "Your Own Web Hosting". To make sure that you are hosting your own photos, you can login to your eBay account and check your account preferences.

When you get to that page, you should see this setting:

Now - back to our tutorial...

After you enter your URL, click the Standard tab to return to the interactive preview.

You can also click the Preview Description link and the Sell Your Item page will open a pop-up window with your HTML container (and its contents) in it. It should look like this in our example:

Note that the white hairline crack that was visible in the Design View has disappeared when we preview the listing!

That is all there is to it!

Even though this tutorial seemed to have a lot of steps, all we really had to do was copy the HTML container code created by EZRound to the clipboard and paste it into the Enter Your Own HTML tab of the Sell Your Item Form. Then we uploaded our design slices to our photo hosting company and used both the Standard tab and the Enter Your Own HTML tab of the Sell Your Item Form to add our content.

If you wanted more than one HTML container in your listing, you would just switch to the Enter Your Own HTML tab and insert the next container above or below the current one. Just be sure that you do not paste one container inside another unless you were pasting into the center cell of the design (and meant to do it of course!).

Hint: Many people use an external HTML editor to prepare all of the HTML offline, then they can just paste it into the Sell Your Item Form when placing the listing. You can download a free copy of the SoThink HTML editor at the SoThink website. It works well, has both a design and a preview mode as well as a mode where you can edit the HTML directly.

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


Microsoft FrontPage Tutorial

The tutorials in this section are specific to using EZRound with Microsoft FrontPage

The following tutorials are available:

Using EZRound with Microsoft FrontPage


Microsoft FrontPage Tutorial

Using EZRound with Microsoft FrontPage

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 the "My Documents" folder on your PC. This location will vary based on the actual OS version.

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 &nbsp; 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 &nbsp;)

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.

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!


Program Revision Notes
Previous Top

Version 3.0 Changes
December 21, 2010

1. The EZRound installer is now a Windows 7 aware installer.
2. EZRound is now fully compliant with the UAC in Windows 7 and Windows Vista. It can be installed on either the 64 bit or the 32 bit versions of the operating system.
3. The images created by EZRound can now be exported in the PNG image format (in addition to GIF and JPG files).
4. EZRound has a new Export Manager that makes it even easier to use the HTML created by the program. The Export Manager can split the HTML container and copy the parts to the Windows clipboard. It also includes a feature for NetObjects Fusion users that can rewrite the relative paths to the images automatically so that the HTML can be used on both the HOME page and on other pages in the HTML folder.
5. Users can now change the location for files created by EZRound.
6. Fixed entry fields by adding support for Cleartype fonts.
7. Fixed bug that would cause EZRound shape to be distorted at times during design preview.
8. Updated EZRound template file for better support with IE8.
9. Added option to Explore the EZRound data and settings folders with Windows Explorer.

Version 2.1 Changes
5-12-07

1. The EZRound installer is now a Windows Vista aware installer.
2. Updated the EZRound templates so that the code generated passes W3C XHTML validation ( http://validator.w3.org )
3. Fixed small bug where Shadow Width and Shadow Padding were not being zeroed out when "No Shadow" was selected.
4. Other minor cosmetic and functional improvements

Version 2.0 Changes
11-17-05

1. Added new EZSingle feature (the ability to produce a single slice image from the design to use in small FORM, DIV or TABLES).
2. Added new Smart Slice engine to produce the smallest possible slices for each individual design.
3. Added new Folder Echo option (copies exported files to a second "work folder" for easy import into other software).
4. Added new option on export to bypass opening the Windows Explorer folder
5. Updated tutorials for new features and added new NOF tutorials (including a new Fast Import for NOF users).
6. Added more stock designs (all start with the word "Soft"). This brings the number of designs that ship with EZRound to over 100.
7. Added a new minimum slice size setting (default 5px) that controls the smallest size slice EZRound will create.
8. Fixed a few minor cosmetic details.
9. Fixed minor bug where default setting for background transparency was not saved with project file.

Version 1.6.2 Changes
7-16-05

1. Fixed a few very minor bugs and cosmetic details
2. Added Microsoft FrontPage Tutorial
3. Upgraded Program Update Engine
4. Added Flash Movies on EZRound features, loading and exporting designs

Version 1.6.1 Changes
2-26-05

1. Redesigned the program output and template files for XHTML compatibility
2. Added paste from clipboard buttons to HTML color controls. These buttons look for a valid HTML color and paste it into the control
3. Fixed small bug where wallpaper change would not clear "No Wallpaper" message
4. Fixed problem where "Click Here to Visit the EZRound Website" was trying to go to and invalid URL since the page had been renamed to a PHP page
5. Fixed bug where a user could not select a file from the import menu and the design menu would be turned off
6. Removed redraw and slice of default image if user started to open a file then canceled the process
7. Improved the registration screen paste feature to automatically detect the name or key (in addition to when both parts are on the clipboard) and place them in the correct field
8. Changed table shape selector so that when you select a square shape that the corner size is automatically set to zero
9. Added context sensitive help to the general sections of EZRound
10. Added tutorials from the EZRound website to the distributed help files
11. Added a link to the help menu for the online tutorials at the EZRound website