| Screen Action |
Audio Script |
|
FrontPage is open showing the home page of an animal health products business in
Preview view.
|
Suppose you run a small business in animal health products, and your interstate customers are asking for a Web address to view your product line. You want quick ways to build professional-looking pages.
|
|
The pointer moves to the left navigation pane and points in turn to three of the interactive buttons there. Each button changes background color as the pointer moves to it, and the text on the third button changes color as the pointer presses it.
The pointer moves to the Design button and presses it. Design view opens. The pointer moves to the right of the Food Products button, and the
right-click menu opens. The pointer clicks Insert Rows, and the menu closes. A new, blank cell appears above the interactive buttons. The pointer moves to that cell. On the Insert menu, the pointer clicks
Interactive Buttons.
|
Enter interactive buttons. New in FrontPage 2003, here are some to the left of the page. They light up, and you can change the text color. You may have heard these referred to as rollovers.
You can choose from a wide variety of button styles and colors. Now you'll add one to showcase your Vitamins product line.
|
|
The Interactive Buttons dialog box opens. On the Button tab, the pointer clicks Chain Column 3
in the
Preview
box.
The button image changes. The pointer scrolls down the
list in the Buttons box and selects
Corporate 5. The image in the Preview box changes.
|
You can preview an interactive button or sample the effects. Notice that when you point to or press on the image, it changes.
To match your Web site, you'll go with the
Corporate number 5 button style.
|
|
To add a label to the new button, the pointer moves to the Text
box. The text Vitamins is entered.
This text appears on the button in the Preview box.
To make the Vitamins button a hyperlink, the pointer moves to the
Browse
button and clicks it. The
Edit Hyperlink dialog box opens to show a list of possible links. The pointer scrolls down that list, selects Vitamins,
and then clicks
OK.
The scene returns to the Interactive Buttons dialog box.
|
Next, you label the button Vitamins and link to the target page.
By using these buttons, you can add compelling interactivity without the effort of learning graphic design and coding skills.
|
|
The pointer clicks the
Font
tab, and the appearance of the dialog box changes. The pointer opens the
Pressed Font Color
list and selects teal from the grid of sample colors. The bar in the Pressed Font Color box changes to teal. The pointer moves to the Preview box and there clicks the button image, on which the text color changes to teal.
|
On the Font and Image tabs, you can begin to change the button. For instance, you can change the pressed font color to teal, and sample it. This will show customers that your site can tell when some action is about to occur.
|
|
The pointer clicks the
Image
tab, and the appearance of the dialog box changes.
The pointer moves to the Width box, and a value of 200 is entered. The button image changes in the Preview box. The pointer clears the Maintain Proportions
check box. A value of 110 appears in the Width box, and a value of 26 appears in the Height box. The button image changes in the Preview box.
The pointer moves to a box titled Make the button a JPEG image and use this background color: and there opens a grid of sample colors. The grid closes again. The pointer clicks OK, and the dialog box closes.
|
You can also change the button size. If you increase the width to 200, it's too large. Instead, just remove proportions and go with 110 by 26.
Keep all other options the same.
A JPEG image will best highlight the buttons since it can display millions of colors against a solid background.
|
|
In Design view, on the File menu, the pointer clicks Save. The
Save Embedded Files
dialog box appears with several button names selected.
The pointer clicks
OK, and the dialog box closes.
The scene changes from FrontPage to Microsoft Internet Explorer, which shows the home page, now with a new Vitamins button.
|
Now, save your changes and view the site in a browser.
Interactive buttons help customers navigate in two ways: with hyperlinks and by changing the button color.
|
|
The pointer goes to the
Vitamins button. The button color and text color change. The pointer clicks the Vitamins
button, and a different Web page appears.
|
Here's your new interactive button. There's the hover effect, and when you press, there's the text color change.
|
|
On this
Vitamins
page, the Vitamins button is brown. The
pointer moves to the page heading section, which shows the name of the business.
|
Now on the Vitamins product page, do you notice that the button is brown? By changing button colors, interactive buttons can show navigational context on your site. This means you can keep the same heading on all pages.
|
|
The pointer moves to the left and clicks the
Home
icon to return to the home page, on which the Vitamins button is not brown but blue like the other buttons there.
Next the animated text Experience Your Own Great Moments appears. Under it appears the static text For more information followed by a URL: http://www.microsoft.com/office.
|
By using interactive buttons in FrontPage 2003, you can create a Web site quickly, and spend more time with your customers.
|
United Kingdom
Play Demo 
Problems watching the video? Try our troubleshooting tips.
Printer-Friendly Version
Show All
Hide All
