Spry-Widgets: Grundlagen
Das [1] Spry-Framework besteht aus einer [2] CSS-Bibliothek und einer [3] JavaScript-Bibliothek.
Im Rahmen des Spry-Frameworks können [4] Spry-Widgets mit interaktiven Seitenelementen (zB Menüs) auch in einfachen HTML-Seiten erstellt werden. Ein Spry-Widget besteht aus folgenden Elementen:
[5] Widget-Struktur mit HTML-Code;
[6] Widget-Verhalten mit JavaScript-Code;
[7] Widget-Stil mit CSS-Code;
In Dreamweaver werden Spry-Widgets im Menü [8] "Einfügen" -> Spry oder im Fenster [9] "Einfügen" -> "Spry" aus den vorhandenen Icons ausgewählt und eingefügt.

Beispiele für Spry-Widgets:
[10] Spry-Menüleiste für horizontale oder vertikale Menüs;
[11] Spry-Paletten mit Registerkarten;
[12] Spry-Akkordeon mit Titelleisten und zugehörigen Inhalten;

Horizontale Spry-Menüleiste erstellen
Ein Spry-Widget als [1] Spry-Menüleiste für ein horizontales Menü (im Webbrowser als Pulldown-Menü verwendbar) kann in Dreamweaver folgendermaßen erstellt werden:
[2] Im Menü "Einfügen" -> "Layoutobjekte" -> "Spry-Menüleiste" auswählen oder das Symbol
[3] "Spry-Menüleiste" aus dem Menü [4A] "Layout" oder aus dem Menü [4B] "Spry" auswählen;
[5] Im Fenster "Spry-Menüleister" das Layout "Horizontal" auswählen;
[6] Eine vordefinierte Anzahl von [7] Menüelementen und [8] Menü-Unterelementen wird im Arbeitsfenster erstellt.
[9] Die Struktur dieser Menü-Elemente wird durch Aufzählungslisten (<ul><li>....) festgelegt
[10] Das Aussehen bzw. Design der Menüelemente bestimmt eine gewisse Anzahl von CSS-Stilen, die in der gleichzeitig erzeugten Datei [11] "SpryMenuBarHorizontal.css" enthalten sind.
Die dynamischen Eigenschaften rnthält die Spry-Menüleiste durch den JavaScript-Code in der entstanden JavaScript-Datei [12] "SpryMenuBar.js"
[13] Im Eigenschaftsinspektor sind die vordefinierten Eigenschaften zu sehen:
[14] Vordefinierter Namen der Menüleiste (id id="MenuBar1");
Die [7] Elemente und [8] Unterelemente mit den vordefinierten Bezeichnungen (zB "Element", "Element 1.1"...);
[15] Textfeld, in dem die vordefinierten Bezeichnungen geändert werden können;
[16] Feld, in dem ein zugehöriger Hyperlink eingetragen werden kann (vordefiniert "#" -> Hand wird im Browser angezeigt.)
[17] Vor der Vorschau im Webbrowser werden zusätzlich Grafiken (zB Pfeile) in die Website kopiert, die das Aussehen der Spry-Menüleisten mitbestimmen

Änderung der Spry-Menü-Einträge
Die Menü-Elemente (Listeneinträge) einer [1] Spry-Menüleiste können direkt im [2] Arbeitsfenster oder nach [3] Auswahl der Spry-Menüleiste im [4] Eigenschaftsinspektor geändert werden. Jedem [5] Menü-Element kann außer der Bezeichnung [5A] (zB im Feld "Text") ein [6] Hyperlink, ein [7] Titel (als "Tool-Tip) und ein [8] Ziel für den Hyperlink zugeordnet werden.

Beispiel für Änderung der Listeneinträge:
[9] Änderung des Elementes "Element 1" im Feld "Text" in [9A] "Cadat Educ";
[10] Zuordnung eines Hyperlinks [10A]("http://www.cadat.at/acd/");
[11] Eintrag des Titels für den Tool-Tip [11A](zB "Übersicht");
[12] Zurodnung eines Zieles für den Hyperlink [12A] (zB "_blank", um den Link in einem neuen Fenster zu öffnen)
[13] Änderung des Unterelementes "Element 1.1" im Feld "Text" in [13A] "Dreamweaver";
[14] Zuordnung eines Hyperlinks für das Unterelement;
[15] Eintrag des Titels für das Unterelement;
[16] Analog dazu können weitere Elemente und Unterelemente geändert werden.
[17] Layout und Funktionalität können im Webbrowser überprüft werden

Spry-Menüeinträge hinzufügen
Der [1] Spry-Menüleiste können [2] Menü-Elemente und [3] Menü-Unterelemente (Listeneinträge) nach [4] Auswahl der Spry-Menüleiste im [5] Eigenschaftsinspektor hinzugefügt werden.
Durch das Klicken auf das [6] Plus-Symbol wird unterhalb des [7] markierten Menü-Elementes bzw. Menü-Unterelements ein [8] neues Menü-Element bzw. Menü-Unterelement hinzugefügt und anschließend im [9} Text-Fenster umbenannt. Das neue Element wird gleichzeitig im [10] Arbeitsfenster angezeigt.
Auf die gleiche Weise können weitere [11] Menü-Unterelemente (zB ein Unterelement des Unterelements) hinzugefügt werden, wobei darauf zu achten ist, dass das zugehörige [12] Menü-Element bzw. Menü-Unterelement markiert ist.
Dreamweaver fügt, in der [13] Entwurfsansicht sichtbar, das neue Unterelement neben dem übergeordneten Menü-Element hinzu.

Spry-Menü-Einträge entfernen
Aus der [1] Spry-Menüleiste können [2] Menü-Elemente und [3] Menü-Unterelemente (Listeneinträge) nach [4] Auswahl der Spry-Menüleiste im [5] Eigenschaftsinspektor entfernt werden.
Durch das Klicken auf das [6] Minus-Symbol wird das [7] markierte Menü-Elementes bzw. Menü-Unterelement entfernt (gelöscht). Das aktuelle Menü wird im [8A] Eigenschaftsinspektor und gleichzeitig im [8B] Arbeitsfenster angezeigt.
Auf die gleiche Weise können weitere Elemente und Unterelemente entfernt werden.
Wird ein [9] Menü-Element oder Menü-Unterelement, das weitere [10] Unterelemente enthält, entfernt, werden sowohl das [11] ausgewählte Element als auch die zugehörigen [12] Unterelemente gelöscht. Dies muss vorher in einem Popup-Fenster bestätigt werden.

Position von Menü-Elementen ändern
In der [1] Spry-Menüleiste können die Postionen der [2] Menü-Elemente und [3] Menü-Unterelemente (Listeneinträge) nach [4] Auswahl der Spry-Menüleiste im [5] Eigenschaftsinspektor geändert bzw. verschoben werden.
Durch das Klicken auf eines [6] der Pfeil-Symbole wird das markierte Menü-Elementes bzw. Menü-Unterelement in Pfeilrichtung vertikal verschoben. Das aktuelle Menü mit dem verschobenen Element gleichzeitig im [7] Arbeitsfenster angezeigt. Das vertikale Verschieben von Menü-Elementen (Hauptelementen) bewirkt in Wirklichkeit ein horizontales Verschieben im Arbeitsfenster der Entwurfsansicht und im Webbrowser.
Durch mehrmaliges Drücken auf das Pfeil-Symbol kann des Element um mehrere Positionen verschoben werden.


Beispiel: Verschieben (Positionsänderung) von Elementen:
[8] Menü-Unterelement "PremierePro" nach oben verschieben:
[8A] Unterelement auswählen -> [8B] "Symbol "Pfeil nach oben" anklicken -> [8C] verschobene Position wird angezeigt;
[9] Menü-Element "Cadat Educ" nach unten verschieben:
[8A] Element auswählen -> [8B] "Symbol "Pfeil nach unten" anklicken -> [9C] verschobene Position wird angezeigt: im Eigenschaftsinspektor = vertikale Verschiebung, in der Entwurfsansicht = horizontale Verschiebung;
[10] Die zugehörigen Unterelemente werden mitverschoben.

Spry-Akkordeon erstellen
Spry-Akkordeons sind sogenannte "reduzierbare Paletten", die aus einer Titelleiste und einem Inhaltsfenster bestehen. Eine SpryAkkordeon-Palette zeigt sowohl Titelleiste als auch Inhalt an, während alle anderen nur die Titelleiste zeigen. Durch Anklicken einer Titelleiste wird das zugehörige Inhaltsfenster geöffnet und das vorherige Inhaltsfenster geschlossen.
Spry-Akkordeons bestehen analog zu den anderen Spry-Widgets, aus dem HTML-Code, dem JavaScript-Code ("SpryAccordion.js") und dem CSS-Code ("SpryAccordion.css").

In Dreamweaver werden Spry-Akkordeons folgendermaßen erstellt:
Im Menü [1] "Einfügen" -> [2] "Layoutobjekte" -> [3] "Spry-Akkordeon" auswählen oder das Symbol [4] "Spry-Akkordeon" aus dem Menü "Layout" oder aus dem Menü "Spry" auswählen;
[5] Zwei Spry-Accordeons mit Titelleiste und Inhaltsfenster werden erstellt (siehe auch Eigenchaftsinspektor und Tagleiste!). Alle Elemente sind in <div>-Tags eingeschlossen. Folgende Vorgaben werden angewendet:
[6] Tagleiste: <div#Accordion1.Accordion> : enthält Tag, ID-Selektor und Klassenselektor
[7] Bezeichnung (ID-Selektor): id="Accordion1" (siehe Tagleiste und Eigenschaftsinspektor)
[8] Klasse (Klassenselektor) des für das gesamte Spry-Akkordeon: class="Accordion" (siehe Tagleiste und Eigenschaftsinspektor), weitere Klassen für Titelleiste und Inhaltsfenster
[9] Bezeichnung in den Titelleisten: "Bezeichnung 1" und "Bezeichnung 2" (siehe Dokumentfenster und Eigenschaftsinspektor)
[10] Inhalt in den Inhaltsfenstern: "Inhalt 1" und "Inhalt 2"
[11] Öffnen des zweiten
Inhaltfensters: Klicken auf das Augen-Symbol der zweiten Titelleiste (und umgekehrt)

Anmerkung
Natürlich werden die Bezeichnungen der Titelleisten und die Inhalte bei weiterer Bearbeitung sofort geändert werden.

Spry-Akkordeon -Titel und Inhalt bearbeiten
Titel und Inhalt von Spry-Akkordeons können im Dreamwever im Dokumentfenster geändert werden.
[1A] und [1B] Titel: Text in den Titelzeilen im Dokumentfenste ändern, Änderungen werden auch im Eigenschaftsinspektor angezeigt
[2A] und [2B] Inhalt: Text im im geöffneten Inhaltsfenster ändern
[3] Öffnen des geschlossenen Inhaltsfensters: In der zugehörigen Titelzeile auf das [3A] Augensymbol klicken oder
im Eigenschaftsinspektor im Eingebefeld von [3B] "Bereiche" Bezeichnung der zugehörigen Titelzeile auswählen
[4] Funktion der Spry-Akkordeons im Webbrowser überprüfen: [5] geschlossenes Inhaltsfenster durch Klicken auf die zugehörige Titelzeile öffnen

Anmerkung
Im Internetexplorer das Ausführen von JavaScript zulassen, in anderen Browsern wird das Ausführen von JavaScript üblicherweise zugelassen

Spry-Akkordeon - Bereich hinzufügen
Zu einem bereits vorhandenem Spry-Akkordeon können in Dreamweaver beliebig viele Bereiche hinzugefügt werden.

Neue Spry-Akkordeons werden in der Entwurfsansicht von Dreamweaver folgendermaßen hinzugefügt:
[1] Spry-Akkordeon auswählen: In der Tag-Leiste den <div>-Tag mit der richtigen "id" anklicken (zB <div#Accordion1.Accordion>)
[2] Im Eigenschaftsinspektor Bereich, nach welchem ein neues Spry-Akkordeon eingefügt werden soll, auswählen (zB Bereich "Funktion HEUTE ()")
[3] Symbol "+" (plus) anklicken
[4] Neuer Bereich mit der vorgegebenen Bezeichnung (zB "Bezeichnung 3") wird hinzugefügt und im [5] Dokumentfenster mit Titelleiste und geöffneten Inhaltsfenster angezeigt.

Anmerkung
Hinzugefügten Bereich bearbeiten siehe -> "Spry-Akkordeon -Titel und Inhalt bearbeiten"