Insert a Spry Collapsible Panel Tab in Dreamweaver CS4
Share this Dreamweaver Article:
Ok this tutorial will give you a basic introduction to the spry features of Dreamweaver CS4. We are going to be installing a Spry Collapsible Panel in Dreamweaver and it is very easy to do. You may have already played around with the Spry Assets available in Dreamweaver but probably didn’t know that you can style these spry assets using CSS styles. You can also add images, rollover effects and change lots more aspects of the Spry Assets available in Dreamweaver.
Ok , open up a blank XHTML 1.0 transitional web page in Dreamweaver and go to:
Insert> Spry> Collapsible panel.
Put whatever you like for the alternative text and click Ok. Now you will see a basic shell of a Spry Collapsible Panel. Looks pretty boring so far. But we can style this Spry Asset using CSS styles. First, let’s preview the Spry panel in a browser by clicking on the Globe icon and then preview it in the browser of your choice.
Ok, so we are looking at our Spry panel in a browser. You will notice that the Spry panel consists of a panel tab, and a content area. When you move your mouse over the panel tab you will also see that there is a rollover effect taking place. If you click on the panel tab you will see that the content panel collapses underneath the panel and that the panel itself changes colour to a default light blue hexadecimal color.
Ok, I’m going to insert an image in the tab portion of the spry panel. It is best for me to use a rectangular image to insert into the tab area because I will be putting links, some of which are quite long into the content area available.
So I’m going to place
my cursor inside of the tab panel and delete
the word ‘tab.’ With
my cursor still inside
the tab panel I’m going to go to Insert > Image and then Ill select my image of choice. It is always best practice to get into the habit of testing any changes you have made in your browser, and I’ll do just that. So, you will notice that the image has been inserted into the panel tab and on top of the rollover effect. The rollover effect is still in perfect working order. The image was taller than the default height set for the panel tab, but the tab has expanded to encompass the image.
Ok, back in Dreamweaver I’m going to delete the text ‘content’ which is located just below the tab panel. You will see that the content div tag collapses which is normal. Here I will place any text or links that I choose. I will also style the contents panel by selecting the outside encompassing div tag and clicking on the create CSS rule icon located in the files panel. Then I will go to the background category and change the background to black and I’ll go to the ‘type’ category and change the text type to a yellow color. I will also go to the box category and adjust the width to fit the image that I have inserted while leaving a little bit of room for the rollover effect to still show in the background.
There is one last thing that I’ll do to the collapsible panel and that is to create an appear/fade effect on the image that I inserted using the behaviours panel which is located by going to Window > Behaviours or pressing shift + F4. Ill now click on the plus icon and select effects from the popup menu and ill choose appear/fade from the list of options.
You can choose many effects from the behaviours panel which can be activated by your visitors by them clicking, by mouse over, by mouse out and many many more options besides.
Ok you will now see the effects dialogue box for the appear / fade option. Some of the
effects do not have as many options as the appear and
fade effect. We can choose what element we would like the appear / fade option to apply to and I’m going to apply it to the current selection which is the image that I inserted but you can apply this effect to any element within your webpage. With the effect duration we can choose how many milliseconds we would like the effect to last for and I will leave that as the default 1000 milliseconds.
There is also an option to choose the starting opacity or how see through the image or targeted element will be. I’m going to leave it as the default which will be from 0 to 100% and I’m going to leave the option to toggle the effect as blank. The toggle option allows the effect to repeat itself over and over again according to the actions of the visitor.
The effect always defaults to ‘onclick’ which is sometimes annoying but can easily be remedied so don’t think you have made a mistake with the effect because you have not. Simply find in the behaviours panel the onclick category which should have a yellow ‘cogwheel beside it and click inside of that box. You will be able to choose how the effect is applied to the element or image by using the drop down menu. I'm going to choose OnMouseOver for my effect.
Finally, test your effect in your local browser to make sure that you are happy with the behaviour that you have just created.
Congratulations, you have now been introduced to the behaviours panel. You don’t need a spry element to apply behaviour as you can apply effects and behaviours to any element on your website.
I hope you have enjoyed this Dreamweaver CS4 spry tutorial. You can see the completed Spry Collapsible Panel On the left of the screen.
For a Dreamweaver Video Tutorial explaining how to use the above techniques follow this link: