Overlaying Text and Graphics

These are some basic methods to Overlay Text and Graphics

Use an image editor to make a composite image from your text and graphics. The Microsoft Image Composer which comes with FrontPage is good for doing this. This is how I put the text on the buttons in the left margin of this page.

In a second web you have created on your hard drive, use Themes with FrontPage. A lot of the Buttons and Banners that are generated by FrontPage are composited images in the "_overlay" and "_derived" sub-directories.

Use the Image Toolbar to overlay text, and copy the generated image. I describe this in Using the Image Toolbar below.

Set the background image of a table or cell, I use this technique in some places on these pages. I describe how to do this technique below.

The file graph0.css (graph1.css for vivd colors) contains the font colors that FrontPage uses when creating text overlays for Themes.

Using the Image Toolbar

The FrontPage Editor, has a built-in image editor.

Open your page in the FrontPage Editor

If either the Image Toolbar (at the bottom of the FP Editor) or the Format Toolbar (at the top of the FP Editor) is not visable, turn it on using the menus View/ Image Toolbar or View/ Format Toolbar.

Using the menu Insert/ Image, insert the image you want to put text on.

Select the image, then click on the big letter A on the Image Toolbar (at the bottom of the FP Editor). A text rectangle will be created on the image.

Enter the text to be overlayed on the image.

Using the Format Toolbar (at the top of the FP Editor), select your desired font and font color for the text, and it should change on the image.

Save your page, this will generate the image in the _derived subdirectory.

Using Windows Explorer, look for a file in the _derived subdirectory of your web, named in the format: pagename.htm_txt_image.gif (example: _derived\rpover.htm_txt_exphbuda.gif). Copy this file to your main web directory, and rename it to a normal file name (example: mybutton.gif)

Back in the FrontPage Editor, select and delete the original composite text and image from your page. Save your page, this will cause FrontPage Editor to delete the image that was created in the _derived subdirectory.

Using the menu Insert/ Image, insert the new image (eg. mybutton.gif) on to your page. Note: The FrontPage Editor doesn't always see new files, so if you don't see your new image in the list, just type the name in the URL entry field (eg. mybutton.gif).

If you want to make your image into a button, select the image, click your right mouse button, and open the image properties dialog. Then in the Image Properties dialog, fill in:

The Alternative Text for the button

The Hyperlink Location for the button

Switch to the Appearance Tab, and set the Border Thickness to 0, for no border. And check the Size check box (the size of the image should be already filled in).

Then press OK.

Setting the Backgound Image of a Table or Cell

There are a few things you should know about this technique

A background image in a table or cell is only visable if you are using a 4.0 browser (MSIE 4.0 and Navigator 4.0), or MSIE 3.x

This only works for one table layer. For nested tables, you can use it for the innermost table. But if you use it on a table cell, that has other tables embedded in it,  you may get bizzar results.

Setting the background image of a cell works best on larger graphics, or tiled graphics.

First create a table with one row and one column.

Set the size of the table in pixels to match the image size

Optionally, set the background color of the table. If the color of the text you are overlaying, doen't contrast well with the page background. Set the background color of the table for browsers which display table background colors, but not images (eg. Netscape Navigator 3.0).

Set the background image of the table

Set the cell alignment properties for the single cell in the table to Center and Middle.

Enter text or another image into the cell

Optionally, you can make the text into a hyperlink, giving the appearance of a button. Just select the text, then use the menu Insert/Hyperlink.

To remove the underline from the hyperlink (works in version 4.0 browser only). In the Hyperlink Properties dialog, push the Style button. The Style Propeties notebook will open, switch to the Text Tab. Then set the Decoration dropdown to None.

Home

 [Home] [ScrapBook] [Chat] [Links] [Contact] [FrontPage]
This page hosted by Get your own Free Home Page
JES - 03/29/98