2 Dreamweaver
tutorial |
||||||||
Creating the content Layers and Menu | ||||||||
Demo Two View Demo |
||||||||
1. Create your hidden content layers, the button layer
that will activate the menu slide, and the menu layer with
text links. Add layer-background-color, or layer-background-image url(your.gif)
to the layer definition (for Netscape) by using the HTML Inspector.
Position the show/hide content layers using the Layers Inspector,
making sure that each layer is lined up exactly underneath the
next one. |
||||||||
Tutorial Index index |
||||||||
Behaviors make the page Dynamic | ||||||||
1. Assign behaviors to the show/hide layer content first. The hidden layers will be triggered with an onClick event from the links in the yellow menu shown to the left. Place the mouse on the first link, select the Behavior's Inspector , choose onClick and then show/hide layer from the Actions menu. Set Layer One to visible, and Layers Two and Three to hide. Click OK. Select the next text link Two, choose onClick from the Behaviors Inspector and show/hide layers from the Actions menu; set Layer Two to visible and Layer One and Three to hide. Click OK. Continue these same steps for any further layers. Check the page in the browser to see the effect. 2. The final task is to animate the sliding menu
. This can be accomplished in Dreamweaver with the Timeline feature
or with custom behaviors like the slide layer action which
can be downloaded free from the Dreamweaver
Depot . The yellow link menu will slide in from the
left after the first diamond button is clicked. This
layer is already positioned where it will stop at the end
of the slide. Make a note of these coordinates that appear
in the Layer Inspector. Now set a negative number in the
Left position box so that the layer moves off of the page. Don't
change the Top coordinates since the layer moves along a straight
path. 4. Check the page in the browser to see the effect. and
make any necessary
changes. . To slide the layer back off of the screen, place
mouse on the second diamond button. Choose onClick
from Behaviors, and slidelayer from the Actions. Enter the
same layer name in the Relative box and the negative
coordinates Left -125 Top 50. Enter 4 in both the
Step and Delay boxes. Click OK. The page is now complete. View and run
the Test for 4.0 Browsers. |
||||||||
Rhine Home home |
||||||||
Nirvana Online dhtml demos & graphics |
||||||||