Creating a Spry Collapsible Panel in Dreamweaver

In this video I’m gonna show you how to create a spry collapsible panel in Dreamweaver...

Download everything we made in this video (ZIP)

Hey everybody, Greg Davis here. In this video I'm gonna show you how to create a spry collapsible panel in Dreamweaver.

I have got a blank html page HERE, I have already it saved as sprycollapsiblepanel.html.

Just simply select where you wanna place your spry collapsible panel.

And let's GO to the Insert panel, Spry tab, and SELECT Spry Collapsible Panel.

HERE it is.

I TURN Live View ON.

And HERE is our spry collapsible panel.

You CLICK it, it collapses, you CLICK it again and it drops down. That's the spry collapsible panel.

I TURN Live View OFF.

And let's edit it.

Just roll over your panel, and you can see THIS little blue tab shows up. SELECT it, and notice the properties panel becomes populated with all of the properties for your panel, and you can edit it.

You can select how you want it to display here in Dreamweaver, and you can select a default state.

I SELECT the tab, and I just TYPE in "Spry Collapsible Panel Tab"

And for the content, I just PASTE in some content real quick.

Here we go!

Let's SAVE this page.

Dreamweaver is saying that these 2 supporting files have been copied to our local site to make our spry collapsible panel work. One of them is a css file, the other one is a javascript file.

I HIT Ok.

And now if you take a look at your files, just HIT the Refresh button, or F5, and you will see we've got this new SpryAssets folder, containing the supporting files. And we can now style our panel with css.

So, let's GO to the css panel, and OPEN UP "SpryCollapsiblePanel.css"

This is the css file that Dreamweaver created for our spry collapsible panel, and this is what we are gonna be editing to edit the look of our panel.

I SELECT my Tab.

And if I let GO the mouse for a few seconds, THIS little indicator will show up right HERE.

I CLICK it to bring up the Code Navigator

Now, you could also just alt,click your tab (or cmd,opt,click on the mac) and you could bring up the Code Navigator right away.

Let's see what rules are affecting this tab.

First, we have got this .CollapsiblePanel class style.

And if you take a look at the tag selector, you will see that this .CollapsiblePanel class style is applied to the containing div that is holding the entire panel.

So let's edit this .CollapsiblePanel class style.

I DOUBLE-CLICK it.

I GO box, and I want my panel to BE 500px wide.

I GO to border, and I GET RID OF this border.

We could also do some other things here, but we are gonna edit the Tab, and the content area separately.

So, I just HIT Ok.

And let's edit our Tab. First, we are gonna work with this .CollapsiblePanelTab class style.

I DOUBLE-CLICK it.

And you can edit the font of your tab right HERE.

I CHANGE the font-family to Arial, the font-size to 18px.

And I leave it bold, but I CHANGE the font color to white.

I GO to background, and I CHANGE the background color of my tab to blue (#09F).

I GO to box, and I CHANGE the height of my tab to 30px.

And I also GIVE it some padding, not same for all, Top:17px, Right:10px, Bottom:8px, and Left:60px.

This is gonna position the text inside of the tab. And notice the overall height of the tab is 30px, plus the top padding, plus the bottom padding. So right now, our tab is 55px tall.

And of course the width is being inherited from the parent container, and we just CHANGED that to 500px wide. The size is gonna be important when you create the background image for your tab, so remember that.

Now, let's GO to border, and let's GET RID of this border.

I HIT Ok.

And as you can see, we also have an Open version, a Closed version, a Hover version, and a Focused version of this tab. These are all separate class styles, so we can edit the different states of our tab separately.

First, let's edit the open version (.CollapsiblePanelOpen .CollapsiblePanelTab).

I DOUBLE-CLICK it

I GO to background, and we are gonna use background images for the different states, so let's GO over to Fireworks, and let's create the background images real quick.

I CREATE a New Fireworks Document, and we are gonna create small images, so a 1000px wide, and 1000px tall canvas should be enough. The canvas color will BE transparent.

I HIT Ok.

And HERE is our Fireworks document.

I GET the Rectangle tool.

And I CREATE a rectangle.

I MAKE it 500px wide, because remember, our panel is also 500px wide.

And I MAKE it 200px tall, but the height won't make any difference.

I CHANGE the color to blue (#0099FF).

And I CHANGE the roundness to 20%, I want it to be round.

And let's create a little icon that is gonna indicate whether our panel is open or closed.

I GET the Ellipse tool.

And I CREATE a small circle.

It's gonna BE 20px wide, and 20px tall.

Its color will BE transparent, but I GIVE it a white, 2px stroke.

I GET my Pointer tool.

And I just MOVE it to the corner.

I GET the L-Shape tool.

And I CREATE an L-Shape, trying to MAKE it 10px wide, and 10px tall.

You can see the size on the Properties panel at the bottom left corner.

I CHANGE its color to white, and no stroke.

I GET my Scale tool.

And I MAKE it look upwards.

I GET my Pointer tool.

And I MOVE it into my circle.

Here we go!

I RIGHT,CLICK on my rectangle (or hold down your ctr key and click on it on the mac) and SELECT "Insert Rectangular Slice"

This is gonna be the background image of our tab, and our Tab is 55px tall, remember.

So this slice also has to BE 55px tall.

Make sure your icon is in the right position on your tab. Right now, it is.

I GET my Pointer tool.

I SELECT my slice.

And I HOLD DOWN the alt key (or opt key on mac), and DRAG a copy of this slice over here for the content area.

Make sure it's in the right position.

And now I SELECT this whole thing.

I HOLD DOWN the alt key (or opt key on mac), and DRAG a copy over here for the different versions.

I need ONE MORE copy.

I only need one content slice, so I DELETE the other 2.

And let's make some changes to the different versions.

I TURN the Web Layer OFF.

And this first one is gonna be the open version, the second one is gonna be the closed version.

So I SELECT the L-Shape in the second one.

And I GO under Modify, Transform, and I SELECT Rotate 180 degrees.

And this one is now looking downwards.

Just make sure it's in the right position.

Now, the third one is gonna be the hover version, so I just SELECT this rectangle, and I CHANGE its color to bright blue (#00CCFF).

I TURN the Web Layer back ON.

And on my canvas, I SELECT the first slice, and I NAME this slice: bg_tab_open.

Next, I SELECT my content slice, and I NAME it: bg_content.

I SELECT my next slice, the closed version, and I NAME it: bg_tab_closed.

I SELECT the last one, the hover version, and I NAME it: bg_tab_hover.

Alright, we can now export our slices.

I SELECT the first slice.

And I'm gonna export these images to PNG24 format, because I don't want them to have a transparent background, and the PNG24 format doesn't support that.

I just RIGHT,CLICK on my selected slice (or ctr,click on the mac) and SELECT "Export selected slice"

I SAVE it in my local site folder, and the file name will be the slice name. I CLICK Save.

I SELECT the second slice, I export it to PNG24 format, I RIGHT,CLICK on the selected slice "Export selected slice" CLICK Save.

I SELECT the third slice, I export it to PNG24 format, I RIGHT,CLICK on the selected slice "Export selected slice" CLICK Save.

I SELECT the last one, PNG24 format, I RIGHT,CLICK on it "Export selected slice" CLICK Save.

And I just SAVE my Fireworks document.

I save it in my local site folder, and the file name will BE "sprycollapsiblepanel" PNG, CLICK Save.

And let's GO back to Dreamweaver.

Now, I have got the OPEN version opened up HERE.

So let's browse the background image, the open version.

I HIT Ok.

And I DELETE this background color, I don't need that.

I HIT Ok.

And next, we are gonna edit the closed version (.CollapsiblePanelClosed .CollapsiblePanelTab).

I DOUBLE-CLICK it.

I GO to background, and I BROWSE the background image, the closed version.

I HIT Ok, Ok.

Next, we are gonna edit the hover version (.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover).

I DOUBLE-CLICK it.

I GO to background, and I BROWSE the background image, the hover version.

I HIT Ok.

I DELETE the background color.

HIT Ok.

And let's edit the content area. We are gonna edit this .CollapsiblePanelContent class style.

I DOUBLE-CLICK it.
And you can edit the text of your content area right HERE.

I CHANGE the font-family to Arial, the font-size to 16px, and I CHANGE the font color to white.

I GO to background, and I BROWSE the background image for the content area.

I HIT Ok.

And let's see how it looks, I HIT Apply

And by default, background images repeat in every direction, but I don't want it to repeat.

So I SELECT no-repeat.

And I POSITION it to the bottom.

I HIT Apply.

And the background image is now at the bottom, but the rest of the content area is white, so I just CHANGE the background color to the same blue as the image itself.

I HIT Apply.

And you can see that the background image and the background color work together just fine.

I GO to box, and I GIVE my content area some padding, not same for all, Top:5px, Right:20px, Bottom:10px, and Left:20px.

This is gonna position the text in the content area.

I HIT Ok.

I TURN Live View ON.

And HERE is our spry collapsible panel.

It works, and it looks pretty good.

But, let's separate the TAB, and the CONTENT area with a white line right HERE.

I DOUBLE CLICK .CollapsiblePanelTab.

I GO to border, and I GIVE JUST the bottom a solid, 1px, white border.

I HIT Ok.

And HERE it is. This is how you do it.

I hope you learned something. I hope you enjoyed it. If you want more videos from me go to my website EasyWebDesignSystem.com, and join my list. Thanks a lot for watching, and see you in the next video. Bye!

Next video:

Working with the Spry Tooltip Widget in Dreamweaver>>>

All videos in recommended learning order:

How to design a website using Adobe Fireworks>>>

Building a Website Start To Finish With Dreamweaver>>>

How To Embed a YouTube Video On Your Website>>>

Floating Div Tags in Dreamweaver>>>

How To Create a Table in Dreamweaver>>>

Building a Web From in Dreamweaver>>>

Dreamweaver CSS Website Layouts>>>

Creating a CSS Drop Down Menu in Dreamweaver>>>

Creating a Spry Menu Bar in Dreamweaver>>>

Creating Spry Tabbed Panels in Dreamweaver>>>

Creating a Spry Collapsible Panel in Dreamweaver>>>

Working with the Spry Tooltip Widget in Dreamweaver>>>

Creating a Web Photo Gallery/Album in Dreamweaver>>>

Adding JavaScript in Dreamweaver>>>

Send Email with a Web Form>>>