Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding Spry widget structures

From: Dreamweaver CS3 Beyond the Basics

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.

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.

So notice that Dreamweaver adds a div tag with 90 of Accordion one and gives it a class of Accordion. After that, we have a repeating structure. We first have a div tag with the class Accordionpanel, then we have a div tag with the class AccordionpanelTab. That's the tab that goes across the top. Underneath that, we have a div with the class AccordionpanelContent. That's of course, where all our content is. Then the AccordionpanelTab closes out and it starts all over again for each panel in your Accordion. So those are the styling hooks that Dreamweaver uses in order to create Cascading Style Sheets to control not only look and feel but also the functionality of this. You are free to change those class names if you have got something in your own Style Sheets that you want to use and you rather style them yourself, you can change those names. If you are going to change those class names however, you need to be aware of the fact that there are four class names that you cannot change physically on the page. Those are Static Classes and you are going to have to pass in some Variable information into the constructor function in order to change them and I am going to bring up a slide that's going to describe those classes to you.

So other than the class names that I pointed out to you within the Accordionpanel structure, there are four class names that Dreamweaver is going to create styles for that you can't exactly select. They are AccordionpanelTabHover, AccordionpanelOpen, AccordionpanelClosed and AccordionFocused. As you can probably surmise from this, they actually describe different states of the panels and the Accordion in itself. You have got to hover over the tab attribute whether a panel is open or whether a panel is closed 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 change those class names, if you are going to change the class names of everybody, is to actually pass variables into the Constructor function. And on the slide towards the bottom here, we have a section of codes that's going to show you how to do that. Just to sort of decipher this code for you, you will find this code in any page where you have an Accordion widget. The var keyword is actually naming the Accordion so if you change its name, and we haven't changed our 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 in the name and typically that's all you are going to see within the constructor function. 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 you pass 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 would be. So if you are going to go ahead and change these class names into something that you are driving, you need to be sure to go ahead and pass these along too into 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 go look at your CSS Styles panel and I am probably going to roll up most of my panels and expand this so I can kind of see what is going on here. In addition to our regular CSS Styles, which is our shows.css, up top you will see a link to another style sheet that we didn't create, SpryAccordion.css. Anytime you use 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's going 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 wrong with that. Different people use different style deployment strategies and rather than trying to guess where you would like these styles, Dreamweaver merely places them in an External Style Sheet. They don't have to stay there and as a matter of fact, I would actually recommend grabbing these styles and then bringing them into your own Style Sheets so that you can modify them and maintain them without having to deal with a lot of External Style Sheets that you don't necessarily need. So I am going to go ahead and using my CSS Styles panel, I am going to double click 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 to notice right off the bat is there is a lot of commenting inside the CSS file and that's a good thing because what Adobe has done for us is they have given us 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 might effect. So there is a lot we can learn from these comments. So I am just going to scroll down and you can see despite the comments, there is actually not a lot of styles in here.

There is not a whole lot of them. So modifying and changing your Accordion panel really isn't going to require a lot of work on our part. So what I am going to do is just go ahead and select all of these styles and copy them. Then I will close the SpryAccordion.css and I am going to paste these into an existing style sheet that's driving our page. So I am going to open up the shows.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 driving some of the show page content, we will place these on the shows_secondary.css file. So let's double click that to open that up and if you scroll down, you will find an area down at the very bottom of our Styles where I have left a comment that says Paste Accordion Styles Here.

So I am going to click inside that, we will just paste our Accordion Styles in and save this file. Now let's go back to our current.htm and we need to scroll up because in the head of our document, and you will find this on line 17 there is the link tag to our external SpryAccordion.css. You want to go ahead and highlight that and just Delete it. Now we could have also removed that using the 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 any difference in functionality or look and feel. So I will scroll down a little bit and notice that I can still click on each of the tabs and I am still getting the various states. So it looks exactly the way it did before. That's fine because what we have really done here is just organized our styles. We have moved them into a central location, now they are going to be easier for us to maintain and edit and that's what we are going to do in our next movie.

Show transcript

This video is part of

Image for Dreamweaver CS3 Beyond the Basics
Dreamweaver CS3 Beyond the Basics

102 video lessons · 38792 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.