|
 
|
|

Dreamweaver: Lesson 8 - Dynamic Effects with Layers
To
complete our site, we will add the final Secret Cornwall page which makes
use of certain dynamic HTML effects to create an interactive site. Dynamic
effects, like JavaScript, are attached to events that can be triggered
by mouse movements. As the events in this example are produced by the
cursor moving over parts of an image, the image must first be sliced so
that different sections can cause different effects. If you have a program
such as ImageReady or Fireworks to hand, download the image penwith.jpg
and open it in one of these applications: using mask tools, each program
can create guidelines for slicing the image as well as generating the
HTML code to incorporate the image within a web page. Alternatively, download
the different pewith_r_*.jpg files and the file penwith_table.htm and
cut and paste it into a template file named map.html.
 The
spliced image should be positioned in the centre of the page, with the
file penwith_title.gif and links to each of the top level pages beneath
it. The images
contained in the table contain four yellow circles and four red stars
corresponding to different places that display hidden text on the page.
Using the Insert Layer tool, draw four boxes on each side of the map,
copying the files penwith1-8.txt into each box. Once text is entered,
select each layer from the Layers palette (Window, Layers, or F11) and,
in the properties box, set the visible setting to 'hidden'. It is generally
easier to work with multiple layers if they are given distinctive names,
and you can change the name for each layer in the properties palette.
After
making each layer invisible, select the star or circle that corresponds
to each one and
select the behaviours in the Layers and Behaviors window. At the top of
this window are plus and minus buttons to add and remove dynamic effects
(or behaviours) to web pages. Click on the plus button and select Show-Hide
Layers: a dialog box appears with the names of each layer and buttons
to hide or show each layer. Select show for each layer.
Click here to
see what the page should look like, then click Back on the browser toolbar
to return to this page.
|