Applies to
Microsoft Office FrontPage® 2003

You don't need to be an imaging or coding expert to add functional buttons to your Web pages — with FrontPage 2003 you can use Interactive Buttons.

These buttons are colorful and professional-looking like those you could create with an advanced graphics-editing tool. Unlike standard buttons, they change appearance when you move the pointer over them or click them.

Add an Interactive Button to your Web page

To add an Interactive Button, click a location on a Web page where you want the button. On the Insert menu, click Interactive Button. When the Interactive Button dialog box appears, select a button style and choose how the button will look and behave.

How to get the look you want for your Interactive Button

When you add an Interactive Button, you can choose the shape, color, finish, border, and font style and size. Shapes include circles, rectangles, capsules, and tabs. They also can be shiny or dull, and have beveled edges.

Using the Button tab in the Interactive Buttons dialog box, you can select a button style, add button text, and add a link from the button to another page in the current Web site, a site on the World Wide Web, or an e-mail address.

Using the Font tab, besides choosing the font style and size, you can set alignment for the button text and select font colors for each button state: unpressed, hover (when you move the pointer over a button), and pressed.

Using the Image tab, you can resize the button image. This is important to note because you cannot resize these buttons in Design view as you can with other types of images. Additionally, it is here that you choose a button image file format.

Choose a button image file format

To determine whether to save the button images as a JPEG or a GIF file, note the following:

JPEG

• An advantage of the JPEG file format is that it enables FrontPage to provide gradual variations of color and effect for more complex button styles, such as beveled, embossed, and shiny.
• A disadvantage is that JPEGs have a solid background. If your page background is solid, you can make the button's background color match the page background. But if your page doesn't have a solid background, the JPEG-formatted button will not be displayed properly.

GIF

• An advantage of the GIF file format is that it can provide a transparent background. So if the button has rounded edges, the background of the page shows through.
• A disadvantage is that a GIF displays only 256 colors, which are sometimes not enough to display gradual variations of color and effect on more complex button styles. The button edges and some of the color gradients within the button may look choppy, compared to the JPEG file format.

States of an Interactive Button image

When you insert an Interactive Button, FrontPage automatically creates three separate images that represent the three ways Web site visitors interact with these buttons: an unpressed state, a hovered state, and a pressed state. When you save your Web pages, FrontPage prompts you to also save these button image files.

The first time you save, FrontPage will automatically provide three default button image file names for you. The file names begin with the word "button" and end with a unique value, like a number or a letter.

We recommend that you appropriately rename the default image file names to help you differentiate later among a list of button image file names — as we did in the following example, holiday1.jpg, holiday2.jpg, holiday3.jpg.

Note  When you delete an Interactive Button from your Web page, the three image files associated with the button are not deleted. To permanently delete those image files, you must delete each one manually.

Case scenario: Coho Winery

Eric, the co-owner of the Coho Winery, asks John, the IT director, to have his team of Web designers and developers create a Holiday Wine Specials page that includes button image links to the Wine Sales page. John's team is too busy revising the look of the Web site, so John decides to do it himself.

John knows that FrontPage 2003 includes predesigned buttons that he can use and set properties for. This makes the task much more straightforward.

To add the Interactive Button, John clicks a location on the Holiday Wine Specials Web page. On the Insert menu, he clicks Interactive Button. When the Interactive Buttons dialog box appears, he selects the Braided Row 3 button style, types the button text as "Pinot", and specifies a link on the Wine Sales Page that lists the Pinot selection of wine and pricing.

Next, John clicks the Font tab and sets the font properties. On the Image tab, John leaves the size and state settings and ensures that the button image is saved as a JPEG file. The background of this page is white and so this button looks great. When he clicks OK, John sees the button with the correct text.

On the File menu, John clicks Save. The Save Embedded Files dialog box appears. John renames the three default image files to HoverPinot.jpg, IdlePinot.jpg, and PressedPinothol.jpg.

Using the same process, John creates Interactive Buttons for all Coho wine specials.

Eric is delighted with the results, and John is pleased that the task took just a short time.

Like John, you can create professional or festive-looking buttons on your Web page by adding Interactive Buttons.

Working with Interactive Buttons

The procedures that follow enable you to add, set properties for, and delete an Interactive Button.

Add an Interactive Button

1. In Page view, at the bottom of the document window, click Design.
2. Place the insertion point where you want to add the button.
3. On the Insert menu, click Interactive Button.
4. On the Button tab, in the Buttons list, click a button style.
5. In the Text box, type the text that you want to appear on the button.
6. Next to the Link box, click Browse.
7. Locate and click the file, URL (Uniform Resource Locator (URL): An address that specifies a protocol (such as HTTP or FTP) and a location of an object, document, World Wide Web page, or other destination on the Internet or an intranet. For example: http://www.example.com/.), or e-mail address that you want the button to link to, and then click OK.

Note  When you save the Web page, Microsoft FrontPage will prompt you to save the images associated with the button.

Set the properties of an Interactive Button

1. Right-click the Interactive Button that you want to set the properties for, and then click Button Properties on the shortcut menu.
2. Do one or more of the following:

Delete an Interactive Button

1. In Page view, at the bottom of the document window, click Design.
2. Click the button, and then press DELETE.

Note  When you delete a button, the files associated with that button are not deleted. You must delete the button files from the Folder List.

Hover buttons

In earlier versions of FrontPage, you might have used hover buttons to add button links to your Web pages. Although the hover button functionality is still available in FrontPage 2003, Interactive Buttons now replace hover buttons.

Learn more about Interactive Buttons

To get hands-on training using Interactive Buttons, and for more information about the code used to produce these buttons, see Liven up Web pages with Interactive Buttons. Portions of this content was excerpted from that training course on the Microsoft Office Online Web site.