Summary: excellent and easy
Jul 5, 2007 by
Web Teacher
★★★★★ Project Seven (PVII) creates menu systems, slide show systems, CSS page designs and systems like tab panels and the product called Accordion Panel Magic (APM). These products are designed to work as Dreamweaver extensions and suites that are installed into Dreamweaver using the Extensions Manager.
If you own Dreamweaver CS3, there are some spry widgets, one of which is an accordion panel. I’ll talk about how the PVII Accordion Panel Magic product compares with the spry widgets in CS3 as well.
For people using older versions of Dreamweaver, the PVII product suite works with Dreamweaver versions MX through CS3 on both Windows and OS X. Accordion Panel Magic works in major modern browsers including IE6, IE7, Safari, Firefox, and Opera; and also supports older browsers such as IE5.x Windows and IE5 Mac.
I created an out-of-the-box implementation of PVII’s APM. I didn’t change anything in the default choices or the style sheet. (APM has five built in style sheets to choose from. I simply accepted the first one.) View the APM test page. You can see that the accordion panels adjust automatically to the height of the content they contain.
In Dreamweaver, the APM tools are in the Insert or Modify menu. When you create an accordion panel for the first time, you find it in the Insert menu. After that, you make any changes using the Modify menu. A similar dialog window opens in either case, letting you choose the number of panels you want, the style sheet you want, and the headings you want. When you close out the dialog box, the accordion panels are completely expanded in the Dreamweaver Design View, which makes it very easy to add or edit content.
The dialog window that inserts and modifies APM will be familiar to anyone who has used other PVII products. Even newbie PVII extension users will have an easy time making decisions, adding panels, and choosing modifications because the interface is clear and understandable. Once you have a basic set of accordion panels on the page, the CSS is easily customized using the normal Dreamweaver CSS interface.
You can add a new set of panels as easily as you added the first one. Look again at the test page and make note of the fact that the second set of panels have very little content and APM adjusts automatically to this fact.
I did a few tests in Firefox. With no customization on my part, the JavaScript that PVII uses to operate the panels runs to 412 lines of code, including comments. The style sheet is a minimally commented 90 lines. The HTML and CSS both validate as error free. It passed the Cynthia Says Web Content Accessibility tests for both Section 508 and WAI with no errors or warnings. With CSS disabled, the contents displayed completely. However, if JavaScript is disabled the only content that can be accessed is the content in the panel that is automatically expanded when the window opens. (This fact is true of the Dreamweaver widgets, also. Therefore it becomes a decision as to whether to use accordion panels at all, rather than a decision about which particular brand of accordion panel to choose. If you know your target audience operates without JavaScript, then the choice is pretty obvious.)
**Correction:** In my original tests, I disabled JavaScript, but didn’t reload the page with JavaScript disabled. So the information about the APM page and the spry widget page not displaying fully expanded is completely wrong! Now that I’ve realized that the page must be reloaded after disabling JavaScript, I see that both systems open with the page fully expanded and all the content is accessible. I apologize for my incorrect information due to an overlooked page refresh.
If you’re using an older version of Dreamweaver, the APM suite is an excellent product and well worth the $60 price. But what if you’re using CS3? Should you consider buying it even with the spry accordion widget built into Dreamweaver already?
I did some out-of-the-box work with the Dreamweaver spry accordion panel, too. See the results. The first thing you probably noticed is that the panels are a set pixel height. So the panel with longer content gets a scroll bar. The panels with less content (as in the second set) are at a set size, too, even if the content is only one line long. Dreamweaver does comment the CSS to instruct you to add your own desired height, but the rule affects the entire widget, not the individual content panes. The default height is 200px. I like the way APM’s height adjusts automatically to the amount of content much better.
The spry widgets are on the insert bar. Just click the icon and the panel is inserted on the page. The Property inspector then is used to add or remove headings. If you want to see the content of a panel, you must first select the widget in the document window, then choose the heading in the Property inspector for the content you want. Otherwise the content is hidden in Design View. Even after the content is visible in Design View, it was hard to edit, because Dreamweaver seems to think that all the content of a panel should be selected at one time. I finally discovered that if I clicked inside the content panel three or four times, Dreamweaver would deselect the entire panel contents and let me insert my cursor where I wanted it in the text. I resorted to adding and editing content in Code View. This was not a big deal to me, since I work in Code View all the time, but some people may consider it a drawback.
In my online tests with Firefox. The JavaScript to run the Dreamweaver version is 525 lines of code (about 40 lines are helpful comments). The CSS takes 109 heavily commented lines. The comments in the CSS tell you things like “set a height.” The HTML validator returned one error, the CSS validator found two. With CSS disabled, the contents displayed completely. With JavaScript disabled, they did not. (Note: see correction above.) The spry widgets passed the 508 web content accessibility test, but did not completely meet the criteria for the WAI tests. There were two priority 3 warnings and one priority 3 error.
Even if you own CS3, the Project VII product does a nicer job. It automatically adjusts height to fit the contents of the panel. And it’s easier to work with in Dreamweaver. I recommend it.
Technorati Tags: Dreamweaver, Dreamweaver extensions, Project VII, Accordion Panel Magic