Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

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

a notification box appears which prompts you to accept Dreamweaver copying some JavaScript and some CSS styles which are inherent to the Collapsible Panel Tab

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. 

Saving JavaScript and CSS When saving you will see that a notification box appears which prompts you to accept Dreamweaver copying some JavaScript and some CSS styles which are inherent to the Collapsible Panel Tab.  The JavaScript and CSS styles will be created in a new folder which Dreamweaver will call Spry Assets.  The Spry Assets folder will be created inside of your root directory.

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.

Dreamweaver spry logo 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.

Plus Icon in the Behaviours Panel WindowThere 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. 

Choosing effects from the Plus icon popup menu 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. 

Appear and Fade Dialogue box with targeting and adjustment options 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.

Re-assigning effects in the Behaviours Panel
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:

How to Insert a Spry Collapsible Panel in Dreamweaver CS4

blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial

Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials