The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.

If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.

Frequently Asked Questions (Training)

When should I register?
You should register as soon as a class is available. We make every attempt to have a minimum of two students so you may be required to reschedule if the class does not make.
What are the class hours?
Class time is 9:00am - 4:00pm. Two 10-15 minutes breaks are scheduled in the morning and afternoon. Lunch is typically scheduled around noon. Students can go out to eat or bring their own lunch.
What should I know before coming to a class?
You need a basic knowledge of computers and its operating system. While not necessary, it also helps that you have a general knowledge of the application you are taking. We will make every attempt to help every student; however, we can not slow down the class pace unreasonably if it will cause other students feeling cheated of their time.
Do you have Mac computers?
Currently, we do not have Mac computers. However, most Mac users bring in their own Mac laptops with the current software version loaded on it. All you need is the class files and training material/book, which we provide.
Do you accept credit card, checks or P.O.?
Currently, we accept all major credit card payment online when you register as well as checks if they are sent and received prior to the start of a class. We will be accepting Purchase Orders in the near future.
What software version is used?
It depends on student/company requirements. However, we normally teach on the latest version while still highlighting changes from a previous version.
What books do you teach from?
Unless it is a specialized course with no training book available, we normally teach from Adobe Class Room In A Book series.
What is your company retake policy?
If for some reason beyond your control (i.e., business/personal emergency), you can not complete the course, we will allow you to retake it in part or in full based upon seat availability.
What is your cancellation/rescheduling policy?
We handle cancellation and rescheduling on a case-by-case basis. Depending on the class size and overhead cost associated with setting up a class will determine if a reimbursement or rescheduling is given.
What is your refund policy?
We only offer refund if the class did not meet for events beyond our control (i.e., failure, severe weather, etc.).

If you don't see your question, or need a more indepth answer, please e-mail us.

STEPS:

  1. Create a series of Spry collapsible panels using the Spry tab in the Insert Panel in a parent container (i.e., #content <div>) by clicking the the Spry Collapsible Panel button as many times as you need to. (In our example, we will be creating 10 FAQ question/answer series so we will need to click ten times.)

    TIP: To wrap all of the <div> with another <div>, first, select them all in the Code View and then click on the Insert Div Tag in the Layout tab. In the Insert Div Tag dialog box that appears, ensure that the Wrap Around Selection is selected adn then add the id name of panelgroup and the class name of CollapsiblePanelGroup to their corresponding fields and then click the OK button.

  2. Wrap these panels in Code view with a <div> tag with an id name of panelgroup and a class name of CollapsiblePanelGroup:

    <div id="panelgroup" class="CollapsiblePanelGroup">

    <div class="CollapsiblePanelTab" tabindex="0">When should I register?</div>

    ....
    ....  [Tags for collapsible Panels goes in between]

    </div>

  3. Delete the series of Collapsible panel variables and replace them with a single variable in the <script> tag at the bottom of the page:

    Delete:
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
    var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
    var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
    .... [Any other variables as well]

    Replace with:
    var panelgroup = new Spry.Widget.CollapsiblePanelGroup("panelgroup");

  4. Add the following argument to the CollapsiblePanelGroup and then test in a browser:

    var panelgroup = new Spry.Widget.CollapsiblePanelGroup("panelgroup", {contentIsOpen:false});

    NOTE: By default, all panels' content are opened. The "contentIsOpen:false" is used to close all panels' content when the page is loaded.  Also, note the commas after the first argument.

  5. Create two text links (Open All and Close All ) above or below (or above and below) the Collapsible panel in Design view and then add the following built-in methods (openAllPanels/closeAllPanels) to the onclick event handlers to them in Code view. Note also that the "href" attributes are set to dummy links (javascript:;):

    <p><a href="javascript:;" onclick="panelgroup.openAllPanels()">Open All</a> | <a href="javascript:;" onclick="panelgroup.closeAllPanels()">Close All</a></p>

  6. Test current project in a browser by clicking on links to see if they open or close panels.

  7. Replace the default panels and content text with your own text by first selecting a particular panel (you should see in eye icon) and then replace the panel text (i.e., Tab to something else). Then, select the word "Content" within that panel and replace it with your own text. Repeat for each panel.

  8. (Optional) Style the SpryCollapsiblePanel.css as you see fit:
    NOTE: It is best to save the current CSS file (SpryCollapsiblePanel.css) under a new name (i.e., SpryCollapsiblePanel_faq.css) and then relink the newly create css file to the page by changing the reference in the <link> tag that is in the <head> tag:
    TIP: To create a new CSS file under a new name, right-click on the current CSS file on the related link tab and select Open as Separate File and then save it as a new new (i.e., SpryCollapsiblePanel_FAQ.css).

    <link href="../SpryAssets/SpryCollapsiblePanel_faq.css" rel="stylesheet" type="text/css" />

    In the example above, thirty pixels left and right margins were added to the panel group:

    .CollapsiblePanel {
    margin: 0px 30px; ..... }

    or you can create a NEW id selector for the <div> tag that was wrapped around all of the panels:

    #panelgroup { margin: 0px 30px; }

  9. (Optional) Replace the Open All and Close All text with images using <img> tags if you like or style the text however you see fit.

  10. (Optional) Add additional panels within this group later, if necessary.  You will need to delete new variables that will be created in the <script> tag at the bottom of the page.
    NOTE: To correctly add another panel below the current panel group, click inside the last panel and then select its selector in the tag selector at the bottom of the document window (i.e., div.CollapsiblePanel#CollapsiblePanel10) an then press the right arrow key.  This will move the cursor to the correct location in both the Code and Design view so that the panel is nested WITHIN the group of panels.