Video: Understanding Spry widget structures

Our Accordion widget is now functional but it doesn't look all that great. So in these next series of exercises we will explore how CSS can control not only our Accordion's appearance but also how it functions. To understand how our styles can control our Accordion we need to first understand the structure of the Accordion. So I am still in the current.htm exercise file and I am just going to click inside my Accordion, really kind of anywhere and switch over to Code View. So that should jump us down and if you happen to be above or below it, the Accordion starts on about Line 58.

Covering diverse topics such as improving workflow and managing CSS styles, Dreamweaver CS3 Beyond the Basics is a hands-on course that teaches users how to move beyond standard, static websites. Instructor James Williamson explores how to increase productivity, interactivity, and accessibility with Dreamweaver. He also discusses how to extend the application's capabilities with XML and XSL. Exercise files accompany the tutorials.

Understanding Spry widget structures

Our Accordion widget is now functional but it doesn't look all that great. Soin these next series of exercises we will explore how CSS can control not onlyour Accordion's appearance but also how it functions. To understand how ourstyles can control our Accordion we need to first understand the structure ofthe Accordion. So I am still in the current.htm exercise file and I am justgoing to click inside my Accordion, really kind of anywhere and switch over toCode View. So that should jump us down and if you happen to be above or belowit, the Accordion starts on about Line 58.

So notice that Dreamweaver adds a div tag with 90 of Accordion one and gives ita class of Accordion. After that, we have a repeating structure. We first havea div tag with the class Accordionpanel, then we have a div tag with the classAccordionpanelTab. That's the tab that goes across the top. Underneath that, wehave a div with the class AccordionpanelContent. That's of course, where allour content is.Then the AccordionpanelTab closes out and it starts all over again for eachpanel in your Accordion. So those are the styling hooks that Dreamweaver usesin order to create Cascading Style Sheets to control not only look and feel butalso the functionality of this. You are free to change those class names if youhave got something in your own Style Sheets that you want to use and you ratherstyle them yourself, you can change those names. If you are going to changethose class names however, you need to be aware of the fact that there are fourclass names that you cannot change physically on the page. Those are StaticClasses and you are going to have to pass in some Variable information into theconstructor function in order to change them and I am going to bring up a slidethat's going to describe those classes to you.

So other than the class names that I pointed out to you within theAccordionpanel structure, there are four class names that Dreamweaver is goingto create styles for that you can't exactly select. They areAccordionpanelTabHover, AccordionpanelOpen, AccordionpanelClosed andAccordionFocused. As you can probably surmise from this, they actually describedifferent states of the panels and the Accordion in itself. You have got tohover over the tab attribute whether a panel is open or whether a panel isclosed or whether the Accordion widget is in a focused state.

Now since you can't actually select that and change it, the only way to changethose class names, if you are going to change the class names of everybody, isto actually pass variables into the Constructor function. And on the slidetowards the bottom here, we have a section of codes that's going to show youhow to do that. Just to sort of decipher this code for you, you will find thiscode in any page where you have an Accordion widget. The var keyword isactually naming the Accordion so if you change its name, and we haven't changedour name but if you change its name to in this case acc2, that's what you would see there.

Then you are going to see = new Spry. Widget.Accordion. It will first pass inthe name and typically that's all you are going to see within the constructorfunction. But if you want to change your class names, this is how you do it.You type in a curly brace and after that you pass on hoverClass and then youpass in the name that you want for that, in this case, we are using just hover.Then openClass, closedClass and focusedClass.So the values that you see in quotation marks, "hover" "open" "closed" or"focused" that would be whatever the class name that you are looking for wouldbe. So if you are going to go ahead and change these class names into somethingthat you are driving, you need to be sure to go ahead and pass these along toointo the constructor function.

So we know that we can change these names but for the purpose of this exercise,we are just going to leave the names at their default. Now I want you to golook at your CSS Styles panel and I am probably going to roll up most of mypanels and expand this so I can kind of see what is going on here. In additionto our regular CSS Styles, which is our shows.css, up top you will see a linkto another style sheet that we didn't create, SpryAccordion.css. Anytime youuse one of the widgets whether it is one of the tab panels or the Accordion,Dreamweaver is going to create an external cascading style sheet file that'sgoing to hold all the styles that controls and styles that particular widget.

It is not going to integrate it with your own styles and there is nothing wrongwith that. Different people use different style deployment strategies andrather than trying to guess where you would like these styles, Dreamweavermerely places them in an External Style Sheet. They don't have to stay thereand as a matter of fact, I would actually recommend grabbing these styles andthen bringing them into your own Style Sheets so that you can modify them andmaintain them without having to deal with a lot of External Style Sheets thatyou don't necessarily need.So I am going to go ahead and using my CSS Styles panel, I am going to doubleclick the SpryAccordion.css to open up those styles. Now by double clicking it,it is going to open up this file and one of the things that you are going tonotice right off the bat is there is a lot of commenting inside the CSS fileand that's a good thing because what Adobe has done for us is they have givenus very extensive coding that tell you exactly what's happening with the style,what that selector is doing, who it is driving and what changing it mighteffect. So there is a lot we can learn from these comments. So I am just goingto scroll down and you can see despite the comments, there is actually not alot of styles in here.

There is not a whole lot of them. So modifying and changing your Accordionpanel really isn't going to require a lot of work on our part. So what I amgoing to do is just go ahead and select all of these styles and copy them. ThenI will close the SpryAccordion.css and I am going to paste these into anexisting style sheet that's driving our page. So I am going to open up theshows.css and we can see that there are two style sheets affecting our page,main.css and shows_secondary.css, so since these are styles that are drivingsome of the show page content, we will place these on the shows_secondary.cssfile. So let's double click that to open that up and if you scroll down, youwill find an area down at the very bottom of our Styles where I have left acomment that says Paste Accordion Styles Here.

So I am going to click inside that, we will just paste our Accordion Styles inand save this file. Now let's go back to our current.htm and we need to scrollup because in the head of our document, and you will find this on line 17 thereis the link tag to our external SpryAccordion.css. You want to go ahead andhighlight that and just Delete it. Now we could have also removed that usingthe CSS Styles panel but since we are in Code View that was fairly easy to do.So, let's save the file and if test it in our browser we shouldn't notice anydifference in functionality or look and feel. So I will scroll down a littlebit and notice that I can still click on each of the tabs and I am stillgetting the various states. So it looks exactly the way it did before. That'sfine because what we have really done here is just organized our styles. Wehave moved them into a central location, now they are going to be easier for usto maintain and edit and that's what we are going to do in our next movie.

Find answers to the most frequently asked questions about Dreamweaver CS3 Beyond the Basics .

Here are the FAQs that matched your search "" :

Expand all | Collapse all

please wait ...

Q: In the Chapter 3 movie “Creating rounded corners with background graphics”, the instructor uses a .last class selector. What are the CSS properties of this selector?

A: The .last selector is as follows:#current p.last{background: url(../_images/current_btm_bg.gif) no-repeat bottomleft;padding-bottom: 2em;margin: 0;}The background is the bottom rounded corner graphic, the bottom padding keeps the type away from the bottom of the box and thus the rounded corners, and the margin ensures that the box elements fit seamlessly with each other.

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.