Fellow student Liz's instructions on how to make fade in/out and grow/shrink Spry effects with photographs or images

 

To start you need:

A new file; a table or div tag; two images of the same size

(see instructions page to optimise your images)

 

To do this in a table:

In DW open a new file and insert a table. If you want a frame you could perhaps choose three columns and three rows. The picture will go in the centre cell.

Click inside the centre cell and insert the first image as a background image in Properties Inspector bar

Drag the borders of the cell to the size of your image.

 

Insert the second image on top of the first one via Insert:

Open Behaviours panel: Window > Behaviours (or from Tag Inspector, above file panel)

 

Select the second image and click on +sign in Behaviours panel > Effects then either shrink/grow or fade/appear and complete the menu.

Click OK. The effect appears in the panel and can be changed or deleted or another effect can also be inserted.

Preview in Browser

You can also select the whole table and click the Highlight effect to make the frame change colours

 

This example shows fading in and out and margin highlight effects: (click on image)

 

 

 

 

 

 

 

 

 

 

 

 

To do this using a div tag:

Insert an AP div tag and using New CSS Rule set the size and position of your tag to the size of your image

Using CSS Rule panel insert the first image as a background (Background section in Category list)

Insert second image on top of the first one by dragging it from file list

Proceed as above to set Effects.  This example has shrink and grow effect: (click on centre of image)