Summary: excellent and easy
Jul 5, 2007 by
★★★★★ 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.
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.
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.