FrontPage Help
Split or merge frontpage tables
FrontPage behaviors and layers
Behaviors and Layers with frontpage 2003
With just frontpage alone we can create some awesome image swapping, text changes and just about anything we want too. Here's an example the rest of this page tells you how to do it.
Tutorial
Once your FrontPage image gallery, picture swap or what ever you want to call it has been designed we simply use frontpage to do all the hard work.
For this tutorial i have used 7 graphics.
1) small1
2) small2
3) small3
4) large1
5) large2
6) large3
7) instructions
Numbers 1,2,3 and 7 are the images you see when view as a normal web page. Images 4,5 and 6 replace image 7 when images 1,2 or 3 are selected.
Make a layer and call it small1. Click on the edge of the layer and do right click/copy. Then do right click/paste. This should paste a new layer called small2. Then paste again and it front page should paste a third layer called small3.
Once again do right click/paste and this time in the layers property box
Double click on the layer that is small4 in the id area and change the name to large1.
Now you have to select the large1 layer
Do right click/copy and then do right click/paste. Frontpage should paste a new layer called large2.
Repeat two more times. On the last layer large5 you must change the name to instruction.
Now you should have a layout like the one above.
Then make sure that the visibility is set the same as the screenshot shows
Inserting the images
On each layer, click inside and insert the appropriate image. If you already have an image inside the layer you must first delete it.
Setting the behaviors in front page
Click on the layer small1 and then on the behaviors menu click insert/change property. You will see the following prompt
Click on the select element button and then select div from the first dropdown and click large1in the second dropdown.
DO NOT FORGET TO CLICK ON THE RESTORE ON MOUSE OUT EVENT. That is if you want to go back the the instruction image! Play about with this control and see what effects you get.
Repeat this process for the other images small2 and small3 - link small2 to large2 and so on.
The instructions panel
You will have noticed the instructions panel? (the main large image) This gives the user a guide as to what to do. It is in the layer called instruction and the z index/order is set to 0. If yours is not you should change it. - Why? The instructions image is the image that the user will see by default. By setting it to 0 the other images will load up in the background. This is important in that all the images load first. By doing this the user does not have to wait for the image after clicking - the effect should be instant.
Layer and behaviors in front page make designing web sites even more fun.
This is specific to FrontPage 2003 - tips and tutorials that only work on 2003 will be highlighted. Unless otherwise stated, tips and tricks for frontpage will work with all versions of frontpage.