Introduction
When applying Super Themes to their
web, users often find they would like to add a couple of extra
theme-styled rollover
buttons that match the theme of the web site but are not part of the
FrontPage navigation system. This months tip outlines a
technique that employs FrontPage to make rollovers that have the style of the theme applied to the web. This technique was
used on our web site for the "Downloads", "Catalog" and
"Affiliate Sign Up" buttons
on the left panel. The other buttons on the left panel were generated by
the FrontPage navigation system.
Where possible, we recommend that you use the
FrontPage navigation system to generate your navigation buttons. This
technique is for those special situations where you need additional
navigation flexibility and you are not able to use FrontPage Link bars
feature (i.e., you do not have access to FP2002 extensions on your
server).
Overview
To make the rollover buttons that look just like the rest of the theme
buttons, we use FrontPage to generate a button set on a dummy web site created for this purpose.
We then grab
the graphics from the dummy web site, rename them, copy them to our
main web site and then added some JavaScript to make the rollover effect.
So lets get started.
Step 1: Bring up and FrontPage and make a new empty web
site on your hard drive. In this example, an empty web was created at C:\buttons
using the File->New->Web... dialog item in FP2000.
Creating an Empty Web in FrontPage
Step 2: After the web has been
created, press the Navigation Button on the left
panel. Click the New Page button on the FrontPage toolbar to add a
home page to the web. Then right-click on the Home page and select
"New Page" from the popup menu. Now right-click on the "New
Page 1" box and select "Rename" from the popup menu. Change
the name to "Downloads" (see illustration below).
Adding a Pages to the Navigation view and then renaming it to
"Downloads"
Step 3: Now apply a Super Theme to the Web (or your
favorite FrontPage theme from the Format->Theme... dialog). For this
example,
select the Format->Super Themes... menu item and then select the
Simplicity-Blues Super Theme and then press the OK button.
Apply the Simplicity-Blues Super Theme or your favorite
FrontPage Theme to the web
Now double click on the home page in the
navigation view to make sure your Downloads navigation buttons look
correct.
Step 4: Now it time to retrieve the FrontPage made
buttons. Launch Windows Explorer and go to the c:\buttons directory. In that directory, you will see a _derived folder
with similar contents.
Contents of the _derived folder
Notice the "vbtn", "vbtn_a"
and "vbtn_p" endings on the ends of the .gif files. The "vbtn"
indicates that these images are vertical buttons, the "_a"
indicates an active or rollover button and the "_p" indicates a
pressed button. Copy these files into the "images" folder of your main web
and rename them appropriately if you wish. I renamed them:
- downloads.gif,
- downloads_a.gif and
- downloads_p.gif
Step 5: Now you can insert your file names into the
following JavaScript template and place the code on a web page of your
choice.
Where href="../_files/downloads.asp" is the
URL you want the user to go to when the button is pressed.
Select the above HTML (control-a) and copy it
(control-c). Then bring up FrontPage, place the cursor on the page where
you would like to insert the code. Then press the HTML tab and paste the
code to the page (control-v). Edit the code with your file names and URL
to go to when the button is pressed.
The new rollover navigation button
This button
will operate in IE and Netscape, although the pressed version of the
image will not operate in the Netscape browser.
Shared Border JavaScript Rollover Template
If you plan on using this button in the Shared Border, then you will
have to make some of the image references absolute because FP will not
translate the relative URLs during the shared border creation.
Replace the "http://www.frontlook.com/" with
the name of your server.
To insert the JavaScript into the left shared border
page, you will need to open the "left.htm" file in the _borders
directory, switch to HTML mode and paste the JavaScript code in to the
proper place.
Border files in the _borders folder
If you can't see the _borders folder, then select the Tools->Web Settings... menu item and then the advanced tab and check the "show documents in hidden folders" check box. Then press OK.
And That's It!
Now repeat steps 2, 4 and 5 for any other buttons you would like to
add.
The procedure may seem a little complicated at first, but with some
practice you should be able to master the process in short order. It's
great to be able use FrontPage to make theme styled buttons with labels
for use on your web site.
