Operation Manual

Der Datensatz wird von Dreamweaver erstellt. Wenn Sie eine Layoutoption ausgewählt haben, werden auf der Seite das Layout und
Platzhalter für die Daten angezeigt. In der Codeansicht ist zu erkennen, dass Dreamweaver den Headerinformationen Verweise auf die
Dateien „xpath.js“ und „SpryData.js“ hinzugefügt hat. Diese Dateien sind wichtige Elemente von Spry, die für das Funktionieren der Seite
erforderlich sind. Achten Sie darauf, den entsprechenden Code nicht aus der Seite zu entfernen, sonst ist der Datensatz nicht funktionsfähig.
Beim Hochladen der Seite auf einen Server müssen auch diese Dateien als abhängige Dateien hochgeladen werden.
Datensatzlayout auswählen
Im Dialogfeld „Einfügeoptionen auswählen“ können Sie unterschiedliche Optionen für die Anzeige der Datensatzdaten auf der Seite auswählen.
Daten können in einer dynamischen Spry-Tabelle, einem Master-/Detaillayout, einem Layout mit gestapelten Containern (einspaltig) oder als
Layout gestapelter Container mit Spotlight-Bereich (zweispaltig) dargestellt werden. Das Dialogfeld „Einfügeoptionen auswählen“ enthält
Miniaturansichten der jeweiligen Layouts.
Layout mit dynamischer Tabelle
Wählen Sie die Option „Tabelle einfügen“ aus, wenn die Daten in einer dynamischen Spry-Tabelle angezeigt werden sollen. Spry-Tabellen
ermöglichen dynamische Spaltensortierung und weitere interaktive Verhalten.
Klicken Sie nach der Auswahl dieser Option auf die Schaltfläche „Einrichten“, um das Dialogfeld „Tabelle einfügen“ zu öffnen, und führen Sie dann
die folgenden Schritte aus:
1. Passen Sie im Dialogfeldbereich „Spalten“ die Spalten für Ihre Tabelle wie folgt an:
Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus der Tabelle zu löschen. Klicken Sie auf
das Plussymbol (+) und wählen Sie einen Spaltennamen aus, um der Tabelle neue Spalten hinzuzufügen.
Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu verschieben. Wenn Sie eine
Spalte nach oben verschieben, bewegen Sie sie in der angezeigten Tabelle nach links, im anderen Fall nach rechts.
2. Damit eine Spalte sortiert werden kann, wählen Sie sie im Dialogfeldbereich „Spalten“ aus und aktivieren Sie dann das Kontrollkästchen
„Spalte beim Klicken auf Überschrift sortieren“. Standardmäßig sind alle Spalten sortierbar.
Wenn das Sortieren einer Spalte nicht möglich sein soll, wählen Sie den Spaltennamen im Dialogfeldbereich „Spalten“ aus und deaktivieren
Sie dann das Kontrollkästchen „Spalte beim Klicken auf Überschrift sortieren“.
3. Wenn CSS-Stile mit Ihrer Seite als angehängtes Stylesheet oder als Gruppe einzelner Stile in der HTML-Seite verknüpft sind, können Sie
eine CSS-Klasse für eine oder mehrere der folgenden Optionen anwenden:
Ungerade-Zeilen-Klasse Ändert die Darstellung der Zeilen mit ungerader Zeilennumber in der dynamischen Tabelle in Abhängigkeit vom
ausgewählten Klassenstil.
Gerade-Zeilen-Klasse Ändert die Darstellung der Zeilen mit gerader Zeilennumber in der dynamischen Tabelle in Abhängigkeit vom
ausgewählten Klassenstil.
Hover-Klasse Ändert das Erscheinungsbild einer Tabellenzeile in Abhängigkeit vom ausgewählten Klassenstil, wenn der Mauszeiger
darüber bewegt wird.
Auswahl-Klasse Ändert das Erscheinungsbild einer Tabellenzeile in Abhängigkeit vom ausgewählten Klassenstil, wenn Sie darauf klicken.
Hinweis: Die Reihenfolge der Klassen für ungerade und gerade Zeilen sowie Hover und Auswahl in Ihrem Stylesheet ist von
entscheidender Bedeutung. Die Regeln müssen in genau dieser Reihenfolge (ungerade, gerade, Hover und Auswahl) angegeben sein.
Wenn sich die Regel für die Hover-Klasse im Stylesheet unterhalb der Regel für die Auswahl-Klasse befindet, wird kein Hover-Effekt
dargestellt, bis der Benutzer den Mauszeiger über eine andere Zeile hält. Wenn sich die Regeln für die Hover- und Auswahl-Klasse im
Stylesheet oberhalb der Regeln für ungerade und gerade Zeilen befinden, funktionieren die Effekte für ungerade und gerade Zeilen
überhaupt nicht. Sie können Regeln im Bedienfeld „CSS“ mit der Maus ziehen und verschieben, um sie korrekt anzuordnen, oder Sie
können den CSS-Code direkt bearbeiten.
4. Wenn die zu erstellende Tabelle eine dynamische Spry-Mastertabelle werden soll, aktivieren Sie das Kontrollkästchen „Detailbereiche beim
Klicken auf Zeile aktualisieren“. Weitere Informationen finden Sie unter Dynamische Spry-Mastertabellen und Aktualisierung von
Detailbereichen.
5. Klicken Sie auf „OK“, um das Dialogfeld zu schließen, und klicken Sie dann im Dialogfeld „Einfügeoptionen auswählen“ auf „Fertig“.
Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass die Tabelle nun mit einer Kopfzeile und einer Zeile mit Datenverweisen
angezeigt wird. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen.
Master-/Detaillayout
Wählen Sie die Option „Master-/Detaillayout einfügen“ aus, wenn Sie die Daten in einem Master-/Detaillayout anzeigen möchten. Bei einem
Master-/Detaillayout werden durch Klicken auf ein Element im Masterbereich (links) die Informationen im Detailbereich (rechts) aktualisiert. Der
Masterbereich enthält üblicherweise eine lange Liste mit Namen, z. B. eine Liste verfügbarer Produkte. Wenn der Benutzer auf einen der
Produktnamen klickt, werden im Detailbereich ausführlichere Informationen über das ausgewählte Produkt angezeigt.
Klicken Sie nach der Auswahl dieser Option auf die Schaltfläche „Einrichten“, um das Dialogfeld „Master-/Detaillayout einfügen“ zu öffnen, und
führen Sie dann die folgenden Schritte aus:
351