Anzeige
Tutorialbeschreibung

Spry-Tabelle und Spry-Bereich in Dreamweaver erstellen (1)

Spry-Tabelle und Spry-Bereich in Dreamweaver erstellen (1)

Die Creative Suite 3 ist da und mit ihr auch Dreamweaver CS3. Dem neuen weltweit marktführenden HTML-Editor stehen in seiner neuesten Version wieder tolle neue Funktionen zur Seite, welche auch das Programmieren und Gestalten in Zeiten des Web 2.0 erleichtern. Dem sogenannten Spry-Framework, eine von Adobe entwickelte AJAX Laufzeitumgebung, wollen wir uns in diesem Tutorial näher widmen.

Das Spry-Framework hat viele Anwendungsmöglichkeiten, welche über Spry-Dokumentprüfung, Tabellen, Bereiche, XML-Datensätze, reduzierbare Paletten, aufklappbare Registerkarten, Akkordeons und Menüleisten gehen. Der Vorteil hierbei ist, dass man die Seite nicht neu laden muss, sondern durch einen Klick einfach die Daten aus dem Quelltext oder aus einem XML-Datensatz abgerufen werden.

Wir wollen uns hier aber nur mit der Grundtechnik, einen Spry-Bereich zu erstellen, beschäftigen.
Wichtig:
Voraussetzung ist Adobe Dreamweaver CS3.


Schritt 1 - Eine Seite erstellen oder öffnen

Als erstes starten wir Dreamweaver CS3 und öffnen ein beliebiges Dokument. Das ganze sollte nun so, oder halt in eurer Website, aussehen:

Abbildung 1:

Spry-Schritt 1-01Bilder

Schritt 2 - Ein XML-Dokument erstellen

Als nächstes brauchen ein simples XML-Dokument. Ich habe mir eine ganz einfache geschrieben:

<?xml version="1.0" encoding="utf-8"?>
<root>
<data>
<titel>Über Oblivion goes Medieval</titel>
<desc>Oblivion goes Medieval ist ein groß angelegtes und ehrgeiziges Projekt, welches die Möglichkeiten von Oblivion voll ausnutzen und aus einem Fantasy-Rollenspiel ein reales Rollenspiel, welches zeitlich im Mittelalter angelegt ist, machen soll. Das kleine aber erfahrene Team hat sich hierbei einer großen und noch nie bearbeitenden Aufgabe gestellt, welche nur mit höchster Konzentration und viel Zeit gelöst werden kann und schließlich zu einem guten Ergebnis führt.
<![CDATA[<br/><br/><br/>]]>
</desc>
</data>
<data>
<titel>OgM Team</titel>
<desc>
<![CDATA[<u>Das Team (17):</u>
<table width="100%" border="0">
<tr>
<td width="25%">Cyborg11</td>
<td width="30%">Ideensucher und CS-Designer</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 301491524</td>
</tr>
<tr>
<td width="25%">Halvar</td>
<td width="30%">Historiker und Burgenanalyse</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 329758976</td>
</tr>
<tr>
<td width="25%">Exara</td>
<td width="30%">Projektleiter, Planung und CS-Designer</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 217312886</td>
</tr>
<tr>
<td width="25%">Elvenkiller / BayernFan</td>
<td width="30%">Story und CS-Designer (Interior)</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 475007621</td>
</tr>
<tr>
<td width="25%">Incontrolable</td>
<td width="30%">Scripts</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: -</td>
</tr>
<tr>
<td width="25%">Jim-Panse</td>
<td width="30%">Website- und Forenverwaltung</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 270637817</td>
</tr>
<tr>
<td width="25%">Lara</td>
<td width="30%">Historikerin</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 194762522</td>
</tr>
<tr>
<td width="25%">MadMax</td>
<td width="30%"> CS-Designer und Modells </td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 473083282</td>
</tr>
<tr>
<td width="25%">Mafio01</td>
<td width="30%">Pressearbeit auf <a href="http://www.nirn.de/forums/oblivion">www.nirn.de</a></td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 163869322</td>
</tr>
<tr>
<td width="25%">mars_6600gt</td>
<td width="30%">Story</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 289542064</td>
</tr>
<tr>
<td width="25%">NBthekiller / Nils</td>
<td width="30%">CS-Designer und Bretagne Hauptquest</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 207967491</td>
</tr>
<tr>
<td width="25%">Oberst Rall</td>
<td width="30%"><em>momentan keine Aufgabe</em></td>
<td width="30%"><em>nicht verfügbar</em></td>
<td width="15%">UIN: -</td>
</tr>
<tr>
<td width="25%">Phoenix-CH</td>
<td width="30%">Story</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: -</td>
</tr>
<tr>
<td width="25%">Ramses001</td>
<td width="30%">Historiker und Retexturierer</td>
<td width="30%"><em>nicht verfügbar</em></td>
<td width="15%">UIN: -</td>
</tr>
<tr>
<td width="25%">Sandro</td>
<td width="30%">Historiker</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: -</td>
</tr>
<tr>
<td width="25%">Timobile</td>
<td width="30%">Story und Retexturierer</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 412107659</td>
</tr>
<tr>
<td width="25%">White Messiah</td>
<td width="30%">Story</td>
<td width="30%">Profil im Forum | E-Mail schreiben</td>
<td width="15%">UIN: 272546911</td>
</tr>
</table>
<u>Freie Mitarbeiter (3):</u>
<table width="100%">
<tr>
<td width="25%">Chillix</td>
<td width="30%">Modells</td>
<td width="30%"><em>nicht verfügbar</em></td>
<td width="15%">UIN: -</td>
</tr>
<tr>
<td width="25%">Schwammerlsepp</td>
<td width="30%">Modells</td>
<td width="30%"><em>nicht verfügbar</em></td>
<td width="15%">UIN: -</td>
</tr>
<tr>
<td width="25%">Seven-D</td>
<td width="30%">Heightmap</td>
<td width="30%"><em>nicht verfügbar</em></td>
<td width="15%">UIN: -</td>
</tr>
</table>]]>
</desc>
</data>
<data>
<titel>Kontakt</titel>
<desc>
<![CDATA[<u>ICQ:</u><br/><div>&nbsp;- 270363817 (Jim-Panse, Verantwortlicher Website und Community)</div><div>&nbsp;- 236236236 (Exaras, Projektleiter)</div><br/><u>E-Mail:</u><br/><div>&nbsp;- Jim-Panse@hotmail.com</div><div>&nbsp;- Exaras@hotmail.de</div><br/>]]>
</desc>
</data>
<data>
<titel>Impressum und Danksagungen</titel>
<desc>lala</desc>
</data>
</root>

Erläuterung: Dies ist eine einfache XML-Datei. Man beginnt hierbei mit dem Tag <root>, dann nimmt man pro Abschnitt den Tag <data> (Schließen des Tags nicht vergessen), für den Titel <titel>, für den Text <desc> und für ein mögliches Bild img. Möchte man nun HTML-Code in die XML-Datei einbinden, so fügt man den Parameter <![CDATA[ hinzu und schließt diesen nach den normalen HTML-Tags wieder mit ]]>.

Schritt 3 - Einen neuen Spry-XML-Datensatz erstellen

Nun, da wir unseren Text haben, klicken wir in dem Bedienfeld "Einfügen" auf die Registerkarte "Spry" und anschließend auf "Spry-XML-Datensatz" und es öffnet sich ein Fenster:

Hilfestellung 1:
Bilder


Abbildung 2:
Bilder


Datensatzname: Hier kann man einen beliebigen Wert eingeben, wir lassen hier den Standardwert.
XML-Quelle: Hier gibt ihr bitte die Quelle eurer XML-Datei an.

Danach auf "Schema abrufen" klicken. Damit auch alles korrekt importiert wird, klickt ihr im Fenster bitte noch auf "Vorschau...". Ihr habt nun ein korrektes hierarchiches Schema der XML-Datei vor euch.

Wichtiger Hinweis: Wenn ihr Bilder einbinden wollt, dann klickt auf das Zeilenelement und wählt dort unter Datentyp "Bild-Link" aus. Vergisst auch nicht bei dem data Tag im img Tag "Bild-Link" anzuwählen.

Der Rest bleibt so wie er ist, klickt auf OK und ihr habt den Datensatz erfolgreich importiert.

Schritt 4 - Eine Spry-Tabelle einfügen

Nun wollen wir aber unsere Spry-Tabelle erstellen, in der nur die Titel, also eine Art Menü angezeigt werden. Dazu braucht ihr einen Vorlagenlink, den ihr bitte vollständig markiert. Achtet darauf, dass nicht nur der Text sonder auch der <a> Tag im Quellcode markiert ist. Nun klickt ihr auf "Spry-Tabelle" und es erscheint ein Fenster:

Hilfestellung 2:
Bilder


Abbildung 3:
Bilder


Hier entfernt ihr nun die desc-Spalte (desc-Spalte auswählen und auf das Minus unter ds1), wir wollen ja ein Menü nur aus den Titeln haben.
Ein Klick auf OK bringt uns zu einer Seite mit Spry-Tabelle.
Kleiner Fehler von mir: Ihr müsst "Detailbereiche beim Klicken auf Zeile aktualisieren" ankreuzen.

Nun klicken wir auf die Tabelle und entfernen die Zeile in der "Titel" (th-Tag) steht.
Wir gehen in den Quelltext und drücken STRG+F. Wir geben nun in der Suche "{titel}" an und bei Ersetzen <a href="#">{titel}</a> an.
Ein erster Test speichert mit STRG+S die Spry-js-Dateien und mit F12 öffnet die Seite sich im Browser, das ganze sollte nun so, oder ähnlich aussehen:

Abbildung 4:
Bilder


Schritt 5 - Einen Spry-Bereich einfügen

Als nächster Schritt steht die Erstellung eines Spry-Bereiches an, welcher den <desc> Tag als Haupttext und den <titel> Text als Überschrift haben soll.
Dazu klicken wir auf die Spalte links neben dem Menü und klicken danach in der Registerkarte "Spry" auf "Spry-Bereich" und es öffnet sich folgendes Fenster:

Hilfestellung 3:
Bilder


Abbildung 5:
Bilder


Nehmt nun die Einstellungen der Abbildung ab und klickt auf OK.
Ihr seht nun an der Stelle, an dem ihr euren Spry-Bereich erzeugt habt, steht "Inhalt für Spry-Detailbereich hier einfügen".
Wichtig ist nun, dass ihr den Text durch {desc} (in diesen Klammern) ersetzt. Um das ganze per Klick zu machen, müsste man eine Site-Definition erstellen.
Schauen wir uns das ganze nochmal im Browser an (STRG+S und F12) und das ganze sollte doch schon klappen.

Schritt 6 - Den Spry-Bereich erweitern

Wir fügen noch einen Spry-Bereich, nur diesmal überhalb des in Schritt 5 genannten <desc> Tags, ein. Er basiert auf den gleichen Einstellungen und ihr fügt hier bitte {titel} ein. Hier wird nun der Titel angezeigt.

Fertig. Das Fazit?

Wenn euch dieses Tutorial klargemacht hat, wie man diese Technik nutzt, dann kann man das auf alle XML-Dokumente in dem oben genannten Schema anwenden.
Man kann das ganze auch noch mit den Spry-Widgets aus Tutorial Zwei "Spry-Widgets in Dreamweaver erstellen" kombinieren und im JS- und CSS-Quelltext verändern.

Viel Spass mit dem Tutorial!

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Hundefreund88
  • 17.01.2011 - 16:04

Ich bin sehr froh über dieses tutorial

Portrait von jr3012
  • 12.08.2010 - 13:01

Tolles und hilfreiches Tutorial. Vielen Dank dafür.

Portrait von Jamaja
  • 26.06.2010 - 16:29

sehr gut erklärt, hab genau sowas in verbindung mit dem zweiten teil gesucht, vielen dank!

Portrait von paul_schmidt
  • 11.07.2009 - 22:49

Tolles und hilfreiches Tutorial.
Vielen Dank dafür.

Portrait von Benny777
  • 12.03.2009 - 18:12

Tolles tutorial vorallem für jemanden wie mich, der noch am Anfang ist^^

Portrait von phamo
  • 28.01.2009 - 13:36

Klasse Tut :) hat mir alles nen bisschen näher gebracht und mein Wissen erweitert :)

Portrait von hub

hub

  • 11.06.2008 - 16:30

das hab sogar ich verstanden, danke!

Portrait von Yulan
  • 07.06.2008 - 09:20

Super Tut, war sehr hilfreich.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 07.05.2008 - 09:58

Einfach und verständlich erklärt. Da kann nichts mehr schiefgehen :)

Portrait von NiGem0611
  • 20.04.2008 - 10:56

vielen dank, das tut hat mir super geholfen.

Portrait von goe82
  • 14.10.2007 - 20:51

echt gut, sehr lehrreich!

Portrait von thha
  • 07.09.2007 - 11:10

Du bist der Retter in der Not, war schon am verzweifeln, weil ich nichts gefunden hab, wie man HTML Code in einer XML-Datei ausführen kann. Vielen Dank!

Portrait von feuergeist
  • 17.08.2007 - 08:20

ebenfalls supi und gut nachvollziehbar, danke-danke!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.07.2007 - 10:58

Danke, der Workshop ist sehr ausführlich und verständlich beschrieben. Gleich ausprobiert und es funzte auf Anhieb.

Portrait von HeinDeep
  • 01.07.2007 - 21:36

Super Tutorial, gut und verständlich geschrieben. Vielen Dank

Portrait von jaset
  • 26.06.2007 - 19:52

Klasse Tutorial

Aber geht des auch mit einer älteren Version von DW?
Ich habe noch den Vorgänger von DW CS3.

Also Wenn es da einen Trick geben sollte, immer her damit.


MfG jaset

Portrait von GeneralFabi
  • 23.06.2007 - 23:06

Oha, hatte nicht gedacht, dass ich gleich so viele positive Rückmeldungen bekomme...danke.

natürlich werden noch einige Tutoprials kommen, darunter ein Tutorial für den allgemeinen Gebrauch, die restlichen Spry-Tools (Registerkarten, reduz. Palette, Wiederholung, Wiederholungsliste, Akkordeon, Überprüfung), dann noch einige Tutorials zu Photoshop CS3 Extended (u.a. Fluchtpunktwerkzeug), der Integration von Photoshop mit Dw, dem allgemeinen Gebrauch von Dw (erweiterter Tabellenmodus, Anpassung der Oberfläche, Codeansicht, dessen Vorteile und Funktionen, Designansicht, dessen Vorteile und Funktionen). Also seid mal gespannt, da wird noch einiges kommen.

Ich schreibe momentan zu einem Tutorial zu Erstellung einer kompletten Live-Seite (mit zwei Webseiten) und den reduzierb. Paletten, den Registerkarten und den Akkordeons.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 23.06.2007 - 20:29

Klasse Sache. Würde mich freuen wenn Du weitere Tutorials zu DW 3 und Spry schreiben würdest. Istz mit einer der besten neuerungen in DW (imho).

Greetz

Portrait von BodyCount
  • 23.06.2007 - 06:32

Das ist mal sehr gut beschrieben und auch sehr verständlich erklärt damit kann jeder was anfangen der es lernen möchte oder für seine Seite selbst gebrauchen will.

Portrait von bernieundert
  • 22.06.2007 - 12:01

gut geschrieben und sehr verständlich. Danke.

x
×
×