ThemeSets.net Mini Catalog Presentation
The Series 3 Presentation (a.k.a. Slide Show) Applet is
ideal for showcasing a family photo album or pictures of vacation spots,
as well as appealing walk-through presentations for real-estate sites! The
ability to hyperlink each image makes it ideal for the mini-catalog of
online products as illustrated in this Tip. Try it for yourself by simply
clicking on any of the product images in the applet above to open a new
browser window promoting that theme product!
The Problem - Making Images the Same Size
Many FrontPage users simply haven't taken the time to
learn how to quickly and efficiently manipulate images in their image
editor. This tutorial focuses on how to resize a set of images of varying
dimensions to a fixed width for use in the presentation applet - all using
FrontPage 2000 only.
We are using four images for this presentation, all are
600 pixels wide, but the height varies from 346 pixels to 363 pixels.
Since the images are so large, the image will take too long to load, so we
will need to resize the images to be more compact and faster loading.
The Solution - Simple, use FrontPage!
In this tutorial, we will be temporarily placing images
on the page to resize them and then once resized, the image will be saved
to the web. Then we will be adding the images to the applet to make the
presentation complete. So lets get started!
In FrontPage, bring up a page that you wish to place the
Presentation applet on. Then select the Insert-> Picture-> File menu
item and then locate the image you wish to resize. The image will appear
on the page. Click on the image to select it, then press ALT + Enter,
which will bring up the dialog shown below. Be sure the checkboxes
"Specify size" and "Keep aspect ratio" are checked.
Then put your cursor in the Width edit field and change to your desired
width (we chose 250 pixels). The height will be automatically adjusted,
while the "Keep aspect ratio" is checked (note the size of the
tallest image, as you will need this for use in the applet later). Select
OK to exit the picture properties dialog.
Picture Properties Dialog
You now should see the newly sized image
size on the page. With the image still selected, click on the Resample
icon at the bottom of your screen as shown below. This will tell FrontPage
that the image is to be re-sampled when saved.
Resample Icon Selection
Now save the file by clicking on the Disk
Icon in the upper left section of FrontPage or by pressing ctrl-s. The
following dialog will appear:
Save Resized Image Dialog
It is recommended that you rename the image
by adding a character sequence that denotes that the image has been
resized, i.e., table48.jpg would be renamed to table48_sm.jpg.Also note
which folder you saved the images into for later use. It is recommended
that you save your images in the images/ folder. When you are through with
the changes, click the OK button and the revised image will be saved and
ready for use in the Presentation Applet!
After saving the image, you can delete the
image from the page (remember you are deleting the reference to the image
on that page, not the image itself). Then perform the steps above for the
other images that you wish to resize. Now we are ready to place the images
into the Presentation applet.
Using the Presentation Applet
In FrontPage, place your cursor where you
want the applet to appear and select the "Presentation Applet"
item from the FrontLook menu. By default, the "Images" window
will appear. Then click on "Add..." button on the right side. A
window similar to the image shown below will appear.
Adding New Images
Click on the globe as shown above to locate
the image in the images folder in the current web. Select the file and
press the OK button. Do this for all the files you wish to add to the presentation
applet. Then press the OK button of the "Add New Images" dialog
and the images will appear in the Images list on the Images Panel. You
will likely wish to remove the two default images from the Images list by
selecting each one and pressing the Remove button.
You can set the Presentation parameters for
each image by selecting an image from the Images list and then setting the
Audio control, the status bar message to be displayed when the user "mouses
over" the applet and the URL accessed when the user clicks on the
image. In this example, the URL Target was set to "Blank" which
means the page will open in a new window. The Effect control sets the
specific transition effect for each image. Remember - you can always use
the Preview button to preview the animation.
After you have added all the images, the
applet must be sized to accommodate your largest image. Select the
"Background" tab and you should see the following:
For the applet on this page, the Background
Image was set to "None" (click on the popup menu as shown above,
and scroll up to None). Then change the Width to 250 (remember, that's the
width we made all the images) and the Height to 151 (which was the height
of the tallest of the four images).
Finally, you will probably want to adjust
with the Animation tab settings - this can speed up or slow down both the
transitions or the length of time the image will be displayed before the
next transition.
Tip of the Month Contributed by: Teri
Carnright, http://www.themesets.net
