USING e-PICTURE PRO TO CREATE A CUSTOM BUTTON IN FRONTPAGE
By Aurélie Riverieulx

This easy to follow tutorial walks you through how to create a button in e-Picture Pro and have it automatically appear in FrontPage. With e-Picture Pro’s advanced integration with FrontPage, you can subsequently edit this button directly from within FrontPage. e-Picture Pro does all of the file management and image tracking for you so you can focus on your design.


If you have not already done so, you can download the trialware version of e-Picture Pro:
 

I. Create a New Web with FrontPage

1. Launch FrontPage 2000, 2002 or 2003
2. Using the menus, select File > New > Web or Page
3. In the New Web or Page panel, click on Empty Web
4. In the Web Site Templates dialog, select One Page Web and click OK
5. Click on index.htm to open it in FrontPage or default.html if you are using FP 2003
6. Save it
7. Minimize FrontPage (don’t Quit!) so that e-Picture Pro can see where to place the graphics later!

II. Getting started with e-Picture

1. Launch e-Picture Pro 4.0
2. In the Document Creator dialog, do the following:
   Set the name of the document to “button 1”.
   Specify the dimensions of your document by selecting Small Button from the Canvas. Size drop down menu or set your own size (width and height).
   Set the Background to White
3. Click Create to proceed

III. Create the button

1. In the Toolbox, click the Rectangle tool (just below the Text tool)
2. Click and drag on the Canvas and draw your button shape inside the Canvas area
3. Select the Arrow tool when you are done to indicate the button object is finished.

IV. Adding text

1. In the Toolbox, select the standard Text tool (A)
2. Click on the Canvas and type” Home”
3. In the Toolbox, click the Arrow tool. This will select the text. You will see a red “bounding box”. to indicate your text is the current selection
4. Drag the text to center it inside the button object

V. Adding color

1. In the Toolbox, click the Arrow tool then click on your text to select it (it may already be selected as indicated by the bounding box)
2. In the Toolbox click on the color sample for the Text Fill Color (the very bottom color sample in the Toolbox) to open the Color Picker
   Note that you can also specify a Text Stroke color and Stroke and Fill colors for shapes. Rest your mouse pointer over each color sample and a tool tip will appear to tell you which color picker you are currently over
3. In the Color Picker click on the Color icon in the left hand column to specify that you want a solid color fill, then choose a color
4. Press Esc

VI. Export to FrontPage

1. From the menus, choose File > Export > GIF
2. In the Export dialog, check the Export to FrontPage box under GIF Options
3. Click the OK button
4. In the Save As dialog save your document to the Desktop under “button1”
5. Assuming FrontPage is still active, a dialog will appear stating “Do you want to save the e-Picture document and upload it into FrontPage too”. Click Yes. If FrontPage is not currently open, you will be prompted to select a FrontPage Web to export to
6. Lastly, you will be notified that you do not have any Customization Rules defined.
   Click No here since these are not important for the purposes of this demo
7. Save the .ep document
8. Close e-Picture Pro

VII.Viewing your button in FrontPage

1. Make FrontPage visible once more. The button you created in e-Picture Pro has been inserted into the page at the current insertion point.
2. Save your FrontPage Web.

VIII. Editing a button with the integration Front Page/e-Picture

1. Open index.htm (default.html) into your FrontPage web (if it is not already open)
2. Right Click on your image “button1” and select “Edit Picture”. e-Picture Pro will identify the original e-Picture Pro file on the server and open it.
3. Modify your button in e-Picture Pro and save it
4. A dialog box appears stating, “The doc “button1.ep” has been opened to edit the image “button1.gif”. Do you wish to export changes to image “button1.gif” before continuing.” Click Yes.
5. Export to Gif (Do not check the export to FrontPage box this time). Click OK
6. The revised button now appears in your FrontPage document. (Refresh your document if the button hasn’t been updated automatically).

That’s all there is to it! The tutorials in Chapter 2 of the e-Picture Pro documentation explain in much greater detail how to use e-Picture Pro. They are a great place to learn more.

Have fun!

If you have any question, please contact us at mailto:aurelie@beatware.com