Anzeigen von Daten mit Spry

Wenn Sie nur einen Datensatz erstellen, müssen Sie sich keine Gedanken über die Position der Einfügemarke machen. Wenn Sie einen Datensatz erstellen und gleichzeitig ein Layout einfügen möchten, stellen Sie sicher, dass sich die Einfügemarke an der Position befindet, an der das Layout auf der Seite eingefügt werden soll.

Wählen Sie „Einfügen“ > „Spry“ > „Spry-Datensatz“ aus.

Führen Sie im Dialogfeld „Datenquelle angeben“ die folgenden Schritte aus:

• Wählen Sie im Popupmenü „Datentyp auswählen“ die Option „HTML“ aus. (Diese Option ist standardmäßig ausgewählt.)

• Legen Sie einen Namen für den neuen Datensatz fest. Der Standardname für den ersten erstellten Datensatz ist „ds1“. Der Datensatzname kann nur Buchstaben, Ziffern und den Unterstrich enthalten und darf nicht mit einer Ziffer beginnen.

• Geben Sie die HTML-Elemente der Datenquelle an, die Dreamweaver erkennen soll. Wenn Sie die Daten beispielsweise innerhalb eines div-Tags angeordnet haben und Dreamweaver anstelle von Tabellen div-Tags erkennen soll, wählen Sie aus dem Popupmenü „Ermitteln“ die Option „DIVs“ aus. Mit der Option „Benutzerdefiniert“ können Sie beliebige Tagnamen eingeben, die erkannt werden sollen.

• Geben Sie den Pfad zur Datei mit der HTML-Datenquelle an. Der Pfad kann sowohl relativ als Verweis auf eine lokale Datei der Site (z. B. „data/html_data.html“) als auch als absolute URL auf einer (per HTTP oder HTTPS) verfügbaren Webseite angegeben werden. Sie können auf die Schaltfläche „Durchsuchen“ klicken, um zu einer lokalen Datei zu wechseln und diese dann auszuwählen.

  Dreamweaver stellt die HTML-Datenquelle im Dialogfeldbereich „Datenauswahl“ dar und zeigt Markierungen für die Elemente an, die als Container für den Datensatz verwendet werden können. Dem zu verwendenden Element muss bereits eine eindeutige ID zugeordnet sein. Wenn dies nicht der Fall ist, wird in Dreamweaver eine Fehlermeldung angezeigt, und Sie müssen erneut die Datenquellendatei öffnen und eine eindeutige ID zuweisen. Darüber hinaus dürfen in der Datenquellendatei auswählbare Elemente nicht in Spry-Bereichen abgelegt sein oder andere Datenverweise enthalten.

  Alternativ können Sie auch einen „Entwurfsphasen-Feed“ als Datenquelle angeben. Weitere Informationen finden Sie unter Entwurfsphasen-Feeds verwenden.

• Wählen Sie das für den Datencontainer gewünschte Element aus, indem Sie auf einen der gelben Pfeile klicken, die im Dialogfeldbereich „Datenauswahl“ angezeigt werden, oder indem Sie aus dem Popupmenü „Datencontainer“ eine ID auswählen.

  
  Auswahl des Elements für den Datencontainer des HTML-Datensatzes

  Bei umfangreichen Dateien können Sie auf den Pfeil zum Aus- und Einblenden unterhalb des Dialogfeldbereichs „Datenauswahl“ klicken, damit mehr Daten angezeigt werden.

  Nachdem Sie das Containerelement für den Datensatz ausgewählt haben, wird im Dialogfeldbereich „Datenvorschau“ eine Vorschau des Datensatzes angezeigt.

• Optional: Aktivieren Sie das Kontrollkästchen „Erweiterte Datenauswahl“, wenn Sie für den Datensatz CSS-Datenselektoren angeben möchten. Wenn Sie beispielsweise im Textfeld „Zeilenselektoren“ den Wert .product und im Textfeld „Spaltenselektoren“ den Wert .boximage angegeben haben, enthält der Datensatz nur die Zeilen, denen die Klasse „.product“ zugewiesen ist, und nur die Spalten, denen die Klasse „.boximage“ zugewiesen ist.

  Wenn Sie in eins der Textfelder mehrere Selektoren eingeben möchten, trennen Sie diese mit einem Komma.

  Weitere Informationen finden Sie unter Spry-Datensatzselektoren.

• Wenn Sie im Dialogfeld „Datenquelle angeben“ alle Eingaben vorgenommen haben, klicken Sie auf „Fertig“, um direkt im Anschluss den Datensatz zu erstellen, oder auf „Weiter“, um mit dem Dialogfeld „Datenoptionen festlegen“ fortzufahren. Wenn Sie auf „Fertig“ klicken, steht der Datensatz im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung.

Führen Sie im Dialogfeld „Datenoptionen festlegen“ die folgenden Schritte aus:

• Optional: Legen Sie den Typ von Datensatzspalten fest, indem Sie eine Spalte markieren und im Popupmenü „Typ“ einen Spaltentyp auswählen. Wenn beispielsweise eine Spalte des Datensatzes Zahlenwerte enthält, markieren Sie diese Spalte und wählen Sie im Popupmenü „Typ“ den Spaltentyp Zahl aus. Diese Option ist nur von Bedeutung, wenn der Benutzer die Möglichkeit haben soll, die Daten nach dieser Spalte zu sortieren.

  Sie können eine Datensatzspalte markieren, indem Sie auf die entsprechende Kopfzeile klicken, die Spalte im Popupmenü „Spaltenname“ auswählen oder sie mit den Pfeilen nach links und rechts in der linken oberen Ecke des Dialogfelds anwählen.

• Optional: Legen Sie fest, wie die Daten sortiert werden sollen, indem Sie im Popupmenü „Spalte sortieren“ die Spalte auswählen, nach der sortiert werden soll. Nach dem Auswählen der entsprechenden Spalte können Sie festlegen, ob die Sortierung aufsteigend oder absteigend erfolgen soll.

• Optional (nur Tabellen): Deaktivieren Sie das Kontrollkästchen „Erste Zeile als Kopfzeile verwenden“, wenn Sie anstelle der in der HTML-Datenquelle angegebenen Spaltennamen generische Spaltennamen (d. h. „column0“, „column1“, „column2“ usw.) verwenden möchten.

• Optional (nur Tabellen): Aktivieren Sie das Kontrollkästchen „Spalten als Zeilen verwenden“, um die horizontale und vertikale Ausrichtung der Daten im Datensatz umzukehren. Wenn Sie dieses Kontrollkästchen aktivieren, werden Spalten als Zeilen verwendet.
• Optional: Aktivieren Sie das Kontrollkästchen „Doppelte Zeilen herausfiltern“, um doppelte Datenzeilen aus dem Datensatz auszuschließen.
• Optional: Aktivieren Sie das Kontrollkästchen „Datencache deaktivieren“, wenn Sie stets Zugriff auf die aktuellsten Daten im Datensatz wünschen. Wenn die Daten automatisch aktualisiert werden sollen, aktivieren Sie das Kontrollkästchen „Daten automatisch aktualisieren“ und geben Sie das Aktualisierungsintervall in Millisekunden ein.
• Wenn Sie im Dialogfeld „Datenoptionen festlegen“ alle Eingaben vorgenommen haben, klicken Sie auf „Fertig“, um direkt im Anschluss den Datensatz zu erstellen, oder auf „Weiter“, um mit dem Dialogfeld „Einfügeoptionen auswählen“ fortzufahren. Wenn Sie auf „Fertig“ klicken, steht der Datensatz im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung.

Führen Sie im Dialogfeld „Einfügeoptionen auswählen“ einen der folgenden Schritte aus:

• Wählen Sie ein Layout für den neuen Datensatz aus und legen Sie die gewünschten Einrichtungsoptionen fest. Weitere Informationen finden Sie unter Datensatzlayout auswählen.

• Wählen Sie die Option „Kein HTML einfügen“ aus. Wenn Sie diese Option auswählen, wird der Datensatz in Dreamweaver erstellt, der Seite jedoch kein entsprechender HTML-Code hinzugefügt. Der Datensatz steht im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung und Sie können einzelne Daten manuell aus dem Datensatz auf die Seite ziehen.

Klicken Sie auf „Fertig“.

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 „SpryData.js“ und „SpryHTMLDataSet.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.

Wenn Sie nur einen Datensatz erstellen, müssen Sie sich keine Gedanken über die Position der Einfügemarke machen. Wenn Sie einen Datensatz erstellen und gleichzeitig ein Layout einfügen möchten, stellen Sie sicher, dass sich die Einfügemarke an der Position befindet, an der das Layout auf der Seite eingefügt werden soll.

Wählen Sie „Einfügen“ > „Spry“ > „Spry-Datensatz“ aus.

Führen Sie im Dialogfeld „Datenquelle angeben“ die folgenden Schritte aus:

• Wählen Sie im Popupmenü „Datentyp auswählen“ die Option „XML“ aus.

• Legen Sie einen Namen für den neuen Datensatz fest. Der Standardname für den ersten erstellten Datensatz ist „ds1“. Der Datensatzname kann nur Buchstaben, Ziffern und den Unterstrich enthalten und darf nicht mit einer Ziffer beginnen.

• Geben Sie den Pfad zur Datei mit der XML-Datenquelle an. Der Pfad kann sowohl relativ als Verweis auf eine lokale Datei der Site (z. B. „datafiles/data.xml“) als auch als absolute URL auf einer (per HTTP oder HTTPS) verfügbaren Webseite angegeben werden. Sie können auf die Schaltfläche „Durchsuchen“ klicken, um zu einer lokalen Datei zu wechseln und diese dann auszuwählen.

  Dreamweaver stellt die XML-Datenquelle im Dialogfeldbereich „Zeilenelement“ dar. Dabei wird die XML-Struktur der zur Auswahl verfügbaren Datenelemente angezeigt. Wiederholende Elemente sind mit einem Plussymbol (+) gekennzeichnet und untergeordnete Elemente sind eingerückt.

  Alternativ können Sie auch einen „Entwurfsphasen-Feed“ als Datenquelle angeben. Weitere Informationen finden Sie unter Entwurfsphasen-Feeds verwenden.

• Wählen Sie das Element aus, das die anzuzeigenden Daten enthält. Dabei handelt es sich in der Regel um ein sich wiederholendes Element wie „<menu_item>“ mit mehreren untergeordneten Elementen wie „<item>“, „<link>“, „<description>“ usw.

  
  Auswahl eines wiederholenden Elements für den XML-Datensatz

  Nachdem Sie das Containerelement für den Datensatz ausgewählt haben, wird im Dialogfeldbereich „Datenvorschau“ eine Vorschau des Datensatzes angezeigt. Das Textfeld „XPath“ zeigt einen Ausdruck, der die Position des gewählten Knotens in der XML-Quelldatei angibt.

• Wenn Sie im Dialogfeld „Datenquelle angeben“ alle Eingaben vorgenommen haben, klicken Sie auf „Fertig“, um direkt im Anschluss den Datensatz zu erstellen, oder auf „Weiter“, um mit dem Dialogfeld „Datenoptionen festlegen“ fortzufahren. Wenn Sie auf „Fertig“ klicken, steht der Datensatz im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung.

Führen Sie im Dialogfeld „Datenoptionen festlegen“ die folgenden Schritte aus:

• Optional: Legen Sie den Typ von Datensatzspalten fest, indem Sie eine Spalte markieren und im Popupmenü „Typ“ einen Spaltentyp auswählen. Wenn beispielsweise eine Spalte des Datensatzes Zahlenwerte enthält, markieren Sie diese Spalte und wählen Sie im Popupmenü „Typ“ den Spaltentyp Zahl aus. Diese Option ist nur von Bedeutung, wenn der Benutzer die Möglichkeit haben soll, die Daten nach dieser Spalte zu sortieren.

  Sie können eine Datensatzspalte markieren, indem Sie auf die entsprechende Kopfzeile klicken, die Spalte im Popupmenü „Spaltenname“ auswählen oder sie links oben im Dialogfeld mithilfe der Links-/Rechtspfeile auszuwählen.

• Optional: Legen Sie fest, wie die Daten sortiert werden sollen, indem Sie im Popupmenü „Spalte sortieren“ die Spalte auswählen, nach der sortiert werden soll. Nach dem Auswählen der entsprechenden Spalte können Sie festlegen, ob die Sortierung aufsteigend oder absteigend erfolgen soll.

• Optional: Aktivieren Sie das Kontrollkästchen „Doppelte Zeilen herausfiltern“, um doppelte Datenzeilen aus dem Datensatz auszuschließen.

• Optional: Aktivieren Sie das Kontrollkästchen „Datencache deaktivieren“, wenn Sie stets Zugriff auf die aktuellsten Daten im Datensatz wünschen. Wenn die Daten automatisch aktualisiert werden sollen, aktivieren Sie das Kontrollkästchen „Daten automatisch aktualisieren“ und geben Sie das Aktualisierungsintervall in Millisekunden ein.

• Wenn Sie im Dialogfeld „Datenoptionen festlegen“ alle Eingaben vorgenommen haben, klicken Sie auf „Fertig“, um direkt im Anschluss den Datensatz zu erstellen, oder auf „Weiter“, um mit dem Dialogfeld „Einfügeoptionen auswählen“ fortzufahren. Wenn Sie auf „Fertig“ klicken, steht der Datensatz im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung.

Führen Sie im Dialogfeld „Einfügeoptionen auswählen“ einen der folgenden Schritte aus:

• Wählen Sie ein Layout für den neuen Datensatz aus und legen Sie die gewünschten Einrichtungsoptionen fest. Weitere Informationen finden Sie unter Datensatzlayout auswählen.

• Wählen Sie die Option „Kein HTML einfügen“ aus. Wenn Sie diese Option auswählen, wird der Datensatz in Dreamweaver erstellt, der Seite jedoch kein entsprechender HTML-Code hinzugefügt. Der Datensatz steht im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung und Sie können einzelne Daten manuell aus dem Datensatz auf die Seite ziehen.

Klicken Sie auf „Fertig“.

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..

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.

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“.

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:

Ändert die Darstellung der Zeilen mit ungerader Zeilennumber in der dynamischen Tabelle in Abhängigkeit vom ausgewählten Klassenstil.

Ändert die Darstellung der Zeilen mit gerader Zeilennumber in der dynamischen Tabelle in Abhängigkeit vom ausgewählten Klassenstil.

Ändert das Erscheinungsbild einer Tabellenzeile in Abhängigkeit vom ausgewählten Klassenstil, wenn der Mauszeiger darüber bewegt wird.

Ändert das Erscheinungsbild einer Tabellenzeile in Abhängigkeit vom ausgewählten Klassenstil, wenn Sie darauf klicken.

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.

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.

Passen Sie im Dialogfeldbereich „Masterspalten“ den Inhalt des Masterbereichs wie folgt an:

• Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus dem Masterbereich zu löschen. Klicken Sie auf das Plussymbol (+) und wählen Sie einen Spaltennamen aus, um dem Masterbereich neue Spalten hinzuzufügen. Standardmäßig wird in Dreamweaver der Masterbereich mit Daten aus der ersten Spalte des Datensatzes gefüllt.

• Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich „Masterspalten“ nach oben oder unten wird die Anordnung der Datendarstellung im Masterbereich der Seite festgelegt.

Wiederholen Sie die oben aufgeführten Schritte für den Dialogfeldbereich „Detailspalten“. Standardmäßig wird in Dreamweaver der Detailbereich mit allen Daten gefüllt, die nicht im Masterbereich angezeigt werden (d. h. alle Spalten des Datensatzes außer der ersten).

Optional: Legen Sie für Daten im Detailbereich unterschiedliche Containertypen fest. Markieren Sie dazu den Namen einer Detailspalte und wählen Sie im Popupmenü „Containertyp“ den dafür zu verwendenden Container aus. Sie können zwischen den Tags DIV, P, SPAN oder H1-H6 auswählen.

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 nun die Master- und Detailbereiche angezeigt werden und mit den von Ihnen ausgewählten Datenverweisen gefüllt sind. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen.

Passen Sie im Dialogfeldbereich „Spalten“ den Inhalt der gestapelten Container wie folgt an:

• Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus den gestapelten Containern zu löschen. Klicken Sie auf das Plussymbol (+) und wählen Sie einen Spaltennamen aus, um den Containern neue Spalten hinzuzufügen. Standardmäßig werden in Dreamweaver gestapelte Container mit Daten aus jeder Spalte des Datensatzes gefüllt.

• Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich „Spalten“ nach oben oder unten wird die Anordnung der Datendarstellung für die gestapelten Container auf der Seite festgelegt.

Optional: Legen Sie für Daten in den gestapelten Containern unterschiedliche Containertypen fest. Markieren Sie dazu den Namen einer Datensatzspalte und wählen Sie im Popupmenü „Containertyp“ den dafür zu verwendenden Container aus. Sie können zwischen den Tags DIV, P, SPAN oder H1-H6 auswählen.

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 nun die Container angezeigt werden und mit den von Ihnen ausgewählten Datenverweisen gefüllt sind. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen.

Passen Sie im Dialogfeldbereich „Spotlight-Spalten“ den Inhalt des Spotlight-Bereichs wie folgt an:

• Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus dem Spotlight-Bereich zu löschen. Klicken Sie auf das Plussymbol (+) und wählen Sie einen Spaltennamen aus, um dem Spotlight-Bereich neue Spalten hinzuzufügen. Standardmäßig wird in Dreamweaver der Spotlight-Bereich mit Daten aus der ersten Spalte des Datensatzes gefüllt.

• Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich „Spotlight-Spalten“ nach oben oder unten wird die Anordnung der Datendarstellung im Spotlight-Bereich der Seite festgelegt.

Optional: Legen Sie für Daten im Spotlight-Bereich unterschiedliche Containertypen fest. Markieren Sie dazu den Namen einer Datensatzspalte und wählen Sie im Popupmenü „Containertyp“ den dafür zu verwendenden Container aus. Sie können zwischen den Tags DIV, P, SPAN oder H1-H6 auswählen.

Wiederholen Sie die oben aufgeführten Schritte für den Dialogfeldbereich „Gestapelte Spalten“. Standardmäßig werden in Dreamweaver die gestapelten Spalten mit allen Daten gefüllt, die nicht im Spotlight-Bereich angezeigt werden (d. h. alle Spalten des Datensatzes außer der ersten).

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 nun die Spotlight-Bereiche und daneben die gestapelten Containern angezeigt werden und mit den von Ihnen ausgewählten Datenverweisen gefüllt sind. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen.

Doppelklicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf den Namen des Datensatzes und nehmen Sie die gewünschten Änderungen vor.

Beginnen Sie mit dem Erstellen eines Spry-Datensatzes (entsprechende Anweisungen finden Sie in den vorangegangenen Abschnitten).

Klicken Sie im Dialogfeld „Datenquelle angeben“ auf den Hyperlink „Entwurfsphasen-Feed“.

Klicken Sie auf die Schaltfläche „Durchsuchen“, um den Entwurfsphasen-Feed zu suchen, und klicken Sie dann auf „OK“.

Wählen Sie „Einfügen“ > „Spry“ > „Spry-Bereich“.

Für den Objektcontainer wählen Sie die Option „<DIV>“ oder „<SPAN>“. Standardmäßig wird ein <div>-Container verwendet.

Wählen Sie eine der folgenden Optionen aus:

• Um einen Spry-Bereich zu erstellen, wählen Sie unter „Typ“ die Option „Bereich“.

• Um einen Spry-Detailbereich zu erstellen, wählen Sie die Option „Detailbereich“. Das sollten Sie nur tun, wenn Sie dynamische Daten binden wollen, die bei sich verändernden Daten in einem anderen Spry-Bereich aktualisiert werden.

Wählen Sie Ihren Spry-Datensatz aus dem Menü aus.

Wenn Sie den definierten Bereich für ein Objekt erstellen bzw. ändern möchten, wählen Sie zunächst das Objekt und dann Folgendes aus:

Umschließt das Objekt mit einem neuen Bereich.

Ersetzt den aktuellen Bereich eines Objekts.

Wenn Sie auf „OK“ klicken, fügt Dreamweaver einen Bereichsplatzhalter mit dem Text „Inhalt für Spry-Bereich hier einfügen“ in Ihre Seite ein. Sie können diesen Platzhaltertext durch ein Spry-Datenobjekt, z. B. eine Tabelle oder Wiederholungsliste, oder durch dynamische Daten aus dem Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) ersetzen.

Klicken Sie dazu in der Kategorie „Spry“ des Bedienfelds „Einfügen“ auf die Schaltfläche für das entsprechende Spry-Datenobjekt.

Um den Platzhaltertext mit dynamischen Daten zu ersetzen, wählen Sie eine der folgenden Möglichkeiten:

• Ziehen Sie ein oder mehrere Elemente aus dem Bedienfeld „Bindungen“ über den ausgewählten Text.

• Geben Sie in der Codeansicht den Code für ein oder mehrere Elemente ein. Verwenden Sie folgendes Format: {dataset-name::element-name}, wie in {ds1::category}. oder {dsProducts::desc}. Wenn Sie in Ihrer Datei nur einen Datensatz oder Datenelemente aus dem für Ihren Bereich verwendeten Satz benutzen, können Sie den Namen des Datensatzes weglassen und dafür {category} oder {desc} schreiben.

Welche Methode Sie für die Definition der Inhalte Ihres Bereichs auch verwenden, in jedem Fall werden folgende Zeilen zu Ihrem HTML-Code hinzugefügt:

Wählen Sie „Einfügen“ > „Spry“ > „Spry-Wiederholung“.

Für den Objektcontainer wählen Sie je nach gewünschtem Tag-Typ die Option „<DIV>“ oder „<SPAN>“. Standardmäßig wird ein <div>-Container verwendet.

Wählen Sie die Option „Wiederholen“ (Standard) oder „Untergeordnete Elemente wiederholen“.

Wählen Sie Ihren Spry-Datensatz aus dem Menü.

Wenn bereits ein Text oder Element ausgewählt ist, können Sie ihn/es umschließen oder ersetzen.

Klicken Sie auf „OK“, um einen Wiederholungsbereich auf Ihrer Seite anzuzeigen.

Wenn Sie auf „OK“ klicken, fügt Dreamweaver einen Bereichsplatzhalter mit dem Text „Inhalt für Spry-Bereich hier einfügen“ in Ihre Seite ein. Sie können diesen Platzhaltertext durch ein Spry-Datenobjekt, z. B. eine Tabelle oder Wiederholungsliste, oder durch dynamische Daten aus dem Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) ersetzen.

Klicken Sie dazu in der Kategorie „Spry“ des Bedienfelds „Einfügen“ auf die Schaltfläche für das entsprechende Spry-Datenobjekt.

Um den Platzhaltertext mit einem oder mehreren dynamischen Datensätzen zu ersetzen, wählen Sie eine der folgenden Möglichkeiten:

• Ziehen Sie ein oder mehrere Elemente aus dem Bedienfeld „Bindungen“ über den ausgewählten Text.

• Geben Sie in der Codeansicht den Code für ein oder mehrere Elemente ein. Verwenden Sie folgendes Format: {dataset-name::element-name}, wie in {ds1::category}. oder {dsProducts::desc}. Wenn Sie in Ihrer Datei nur einen Datensatz oder Datenelemente aus dem für Ihren Bereich verwendeten Satz benutzen, können Sie den Namen des Datensatzes weglassen und dafür {category} oder {desc} schreiben.

Welche Methode Sie für die Definition der Inhalte Ihres Bereichs auch verwenden, in jedem Fall werden folgende Codezeilen zu Ihrem HTML-Code hinzugefügt:

Wählen Sie „Einfügen“ > „Spry“ > „Spry-Wiederholungsliste“.

Wählen Sie das Container-Tag aus, das Sie verwenden wollen: UL, OL, DL oder SELECT. Die anderen Optionen variieren je nach ausgewähltem Container. Wenn Sie „SELECT“ wählen, müssen Sie folgende Felder definieren:

• Spalte anzeigen: Dieser Seiteninhalt wird dem Benutzer im Browser angezeigt.

• Wertespalte: Dies ist der an den Background-Server gesendete Wert.

So können Sie beispielsweise eine Liste der US-Bundesstaaten erstellen und dem Benutzer Namen wie „Alabama“ und „Alaska“ anzeigen. An den Server wird allerdings „AL“ bzw. „AK“ gesendet. Oder Sie verwenden „SELECT“ als Navigationsleiste und zeigen dem Benutzer Produktnamen wie „Adobe Dreamweaver“ und „Adobe Acrobat“ an, senden aber URLs wie „support/products/dreamweaver.html“ und „support/products/acrobat.html“ an den Server.

Wählen Sie Ihren Spry-Datensatz aus dem Menü aus.

Wählen Sie die anzuzeigenden Spalten.

Klicken Sie auf „OK“, um eine Wiederholungsliste auf Ihrer Seite anzuzeigen. In der Codeansicht sehen Sie, dass <ul>-, <ol>-, <dl>-HTML- oder FORM-Auswahl-Tags in Ihre Datei eingefügt wurden.