Creating Spry Tabbed Panels in Dreamweaver
In this video I'm gonna show you how to create spry tabbed panels 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 spry tabbed panels in Dreamweaver.
I have got a blank html page HERE, I have already it saved as sprytabbedpanels.html.
Just simply select where you wanna place your spry tabbed panels.
And let's GO to the Insert panel, Spry tab, and SELECT Spry Tabbed Panels.
And HERE it is.
I TURN Live View ON.
And HERE is our Spry Tabbed Panel.
You can CLICK on the different tabs and you can go back and forth, and you can put different content on each panel. If you have an eCommerce website it's gonna be very useful to you.
I TURN Live View OFF.
And let's edit our spry tabbed panels.
Just roll over your spry object, and you can see THIS little blue tab shows up. SELECT that blue tab, and notice the properties panel becomes populated with all of the properties for your spry object, and you can edit it.
We have got 2 different panels HERE: we have got Tab 1 and Tab 2.
Let's ADD a 3rd panel on top of that.
And you can CHANGE the stacking order of your panels using these arrows.
And over HERE, you can select a default panel. That's what visitors are going to see by default.
And to name your panels, simply SELECT inside of your tab, and just type in whatever you want instead of Tab x,y,z…
And if you click THIS little eyeball, you will see the content inside of your actual panel.
We have got Content 1 inside of Tab 1, Content 2 inside of Tab 2, and so on and so forth.
Just paste in your content for your different tabs, I'm not gonna do that right now.
Let's save this page real quick.
Dreamweaver is saying that these 2 supporting files have been copied to our local site to make our spry tabbed panels 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 panels with css
So, let's GO to the css panel, and OPEN UP "SpryTabbedPanels.css"
This is the css file that Dreamweaver created for our spry tabbed panels, and this is what we are gonna work with to style our panels. But there are so many class styles in here, it's very difficult to figure out what's going on, so we are gonna use the Code Navigator to understand the css.
I just PUT my cursor inside of this "Tab 1"
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 the element (or do a cmd,opt,click on the mac) and you could bring up the Code Navigator right away.
This Code Navigator allows you to easily see all the css rules that are affecting your current selection. So basically, THESE are the rules that are affecting my selected tab.
If you HOVER OVER them, you will see their properties.
The first one is this: .TabbedPanels class style.
And if you take a look at the tag selector, you will see that this .TabbedPanels class style is applied to the containing div that is holding our panels.
So over HERE, I DOUBLE-CLICK this .TabbedPanels class style.
I GO to box, and you can see the width is 100%, so the div expands horizontally to fill up the available space.
Let's CHANGE that to 500px wide.
I HIT Ok.
And our panels are now 500px wide. Great!
Let's style our tabs.
I'm gonna CLICK this little eyeball to select my Tab 1.
And then I ALT,CLICK on it to bring up the Code Navigator, or I just CLICK this little indicator.
And the second rule here is this: .TabbedPanelsTabGroup class style, which doesn't seem to do very much, because it only has a margin 0, and a padding 0 property.
But this 3rd rule has a lot of properties. So this is probably the rule that is styling our tabs.
And the last one is THIS "Selected" version, which is probably styling our selected tabs.
And over HERE, we also have a "Hover" version, that is probably styling our hover tabs.
It's not always this obvious, so you really need to understand the Code Navigator and the css to figure out what's going on, and once you understand the css, then you can style your different elements.
Now, let's style our tabs. First, we are gonna work with: .TabbedPanelsTab
I DOUBLE-CLICK it.
And you can edit the font of your tabs right HERE.
I'm gonna CHANGE the font-family to Arial, and the font-size to 16px
And I CHANGE the font color to white.
Let's GO to background, and I CHANGE the background color of my tabs to grey (#666)
You could also use background images. I'm not gonna do that right now.
Let's GO to border, and let's GIVE it a solid, 1px, black border, all the way around.
I HIT Ok.
And let's style our selected tab. We are gonna work with: .TabbedPanelsTabSelected
I DOUBLE-CLICK it.
I GO to background, and I CHANGE the background color to some kind of dark grey (#333)
Let's GO to border, and let's GIVE it a solid, 1px, black border, all the way around.
I HIT Ok.
I TURN Live View ON.
And HERE it is. It works pretty well.
Let's style our hover tabs. We are gonna work with: .TabbedPanelsTabHover
I DOUBLE-CLICK it.
I GO to background, and I CHANGE the background color of my hover tabs to dark grey (#333).
Let's GO to border, and let's GIVE it a solid, 1px, black border, all the way around.
I HIT Ok.
And finally, let's style our content area
I ALT,CLICK on my content to bring up the Code Navigator
And let's see what we got here…
It seems like this .TabbedPanelsContentGroup class style is the most dominant. That's the one that has the most properties.
So I'm gonna DOUBLE-CLICK that.
And I CHANGE the font-family to Arial.
I GO to background, and I CHANGE the background color of my content area to grey (#CCC)
I GO to box, and I CHANGE the padding to 10px, all the way around.
I GO to border, and I GIVE it a solid, 1px, black border, all the way around.
I HIT Ok.
And HERE is our Spry Tabbed Panel.
You just need to fill it up with your own content, and you are ready to rock and roll.
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:
Creating a Spry Collapsible Panel 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>>>