Inserting and Configuring an Interactive Button

There are 129 different Interactive Buttons to choose from in 31 different categories. However, because you can also configure the size of the button and the font used in the button, there are many more than 129 different combinations available to you.

To insert an Interactive Button, select Insert, Interactive Button. The Button tab of the Interactive Button dialog (shown in Figure 22.1) allows you to configure the button's appearance, the text that appears on the button, and the URL the button links to when clicked. Clicking the Browse button displays the standard Edit Hyperlink dialog. You can link an Interactive Button to a file in the Web site or to any other valid URL, including email links and links to newsgroups.

Figure 22.1. The Button tab of the Interactive Button dialog allows you configure an Interactive Button's appearance.

graphics/22fig01.gif

For more information on configuring hyperlinks in FrontPage 2003, see "Inserting and Formatting Hyperlinks," p. 92.


FrontPage uses three graphic files for each Interactive Button you insert. One graphic is used for the normal state of the button that is displayed when the mouse cursor is not hovering over or clicking on the button. Another graphic is used for the button when the mouse cursor is hovering over it. The third graphic is used for the button when it is being clicked. When you save a page after inserting an Interactive Button, you will be prompted to save these images into your Web site, as shown in Figure 22.2. FrontPage generates image file names for you.

Figure 22.2. FrontPage prompts you to save the images that are used for your Interactive Button.

graphics/22fig02.gif

If you are editing an existing Interactive Button, FrontPage will automatically check the Overwrite Original Images check box for you. When this check box is checked, FrontPage will still prompt you to save the images for the Interactive Button, but it will default to automatically overwriting the existing images for the Interactive Button. This is recommended because the original images will no longer be used and will just take up space in your Web site. However, if you do have a need to use the original images, clear the Overwrite Original Images check box and FrontPage will generate new images for the edited Interactive Button.

TIP

When you remove an Interactive Button, the image files are left in your Web site. To save space, make sure that you delete any image files for Interactive Buttons that you've deleted.


After selecting a button type from the Buttons list, you can preview the button and its behavior in the Preview window. The Preview window makes it very easy to pick a button that looks just the way you want it to. Any change to your button is instantly updated in the Preview window. The Preview window is available on all tabs of the Interactive Button dialog.

Editing the Font and Alignment

The Font tab (shown in Figure 22.3) is where you'll configure the font used for the button text. You can configure not only the font, but also the color of the font in three separate states.

Figure 22.3. The Font tab not only allows for changing the typeface, but also colors and alignment.

graphics/22fig03.gif

The following states are available:

  • Original The color of the font when the button first appears on the page and the mouse is not hovering on it

  • Hovered The color of the font when the mouse pointer is hovered over the button

  • Pressed The color of the font when the mouse is clicked on the button

Vertical and horizontal alignment can also be controlled on the Font tab. When the Font tab is selected, the Preview tab adds dashed lines to indicate text margins as a reference. As text alignment is changed, it is aligned on these dashed lines.

Configuring the Button Image

The Image tab (shown in Figure 22.4) gives you control over how the button itself appears. From this tab, you can adjust the size of the button using the Width and Height boxes.

Figure 22.4. The Image tab provides all the settings necessary to control the images FrontPage creates for your buttons.

graphics/22fig04.gif

Checking the Maintain Proportions check box causes any change in one dimension to be automatically sized in the other dimension. If you want to change one dimension without changing the other, uncheck the Maintain Proportions check box.

The Create Hover Image and the Create Pressed Image check boxes control whether FrontPage creates a hover image and a pressed image for the button. If a hover image is not created, the button's appearance will not change when the mouse is hovered over it. If a pressed image is not created, the button will not change appearance when pressed.

graphics/troubleshooting_icon.jpg

If the graphic files for your Interactive Buttons don't appear when browsing to your Web site, see the "Button Shows Broken Graphic Icon" in the "Troubleshooting" section of this chapter.


The Preload Button Images check box determines whether images for the button are preloaded. Preloading images for your Interactive Buttons will provide for a much better experience for your site visitors. If you don't preload images, when the user first hovers over a button, there will be a delay while the hover image is loaded. There will be another delay when the button is clicked while the pressed image is loaded. If the Create Hover Image and the Create Pressed Image check boxes are both unchecked, the Preload Button Images check box will be unavailable because there will be no images to preload.

The Image tab also allows you to control whether FrontPage saves the images for your button as JPEG or GIF files. When the Make the Button a JPEG Image and Use This Background Color radio button is selected, FrontPage will create your images as JPEGs and will configure the background for the button in the color you specify.

NOTE

Only if you have chosen a button type that is not rectangular will you be able to see the background color you specify.


If the Make the button a GIF Image and Use a Transparent Background radio button is selected, FrontPage will save your button's images as GIFs, and the background color of the page on which they are inserted will show through for any non-rectangular buttons.

Because JPEG images can be saved with more colors than GIF images, depending on what type of button you chose on the Button tab, you might see better image quality with a JPEG image. However, JPEG images are significantly larger than GIF images, so make your choice wisely.

For more information on the differences between GIF images and JPEG images, see "Web Graphic Formats," p. 847.


After an Interactive Button has been inserted, it can be edited by simply double-clicking on the button in FrontPage's Design view. The Interactive Button dialog will be displayed, and any settings can be modified.



Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net