Anzeige
Tutorialbeschreibung

Spry-Widgets in Dreamweaver erstellen (2)

Spry-Widgets in Dreamweaver erstellen (2)

Wie wir im ersten Tutorial schon gesehen haben, kann man mit dem Spry Framework Daten dynamisch anzeigen lassen. Wenn man diese Technik nun auf eine Seite anwendet, hat das den Vorteil, dass man die Seite nicht erst wieder laden muss, sondern nur der definierte Inhalt aktualisiert wird.

Zu diesem Live-Feature gibt es noch viele andere, sogenannte Widgets. Wir widmen uns hier nur dem Spry-Akkordeon, der Spry reduzierbare Palette, der Spry-Menüleiste und dem Bau einer Spry-Seite. Die Registerkarten werden ein eigenes Tutorial bekommen, in dem auch gezeigt wird, wie man ein Spry-Widget anpasst (CSS).

Wichtig: Ihr benötigt Adobe Dreamweaver CS3 und müsst das Tutorial "Spry-Bereich und Spry-Tabelle in Dreamweaver erstellen" und das Tutorial "Site Verwaltung" von Stefan gelesen haben.


Schritt 1 - Eine neue Seite erstellen und anpassen

a) Als erstes starten wir Dreamweaver. Nun klicken wir auf "Datei --> Neu...". Dort wählen wir folgende Paramter:

Übersicht 1:

Leere Seite
Seitentyp: HTML
Layout: <Kein>
DocType: XHTML 1.1
Layout-CSS: leer lassen
CSS-Datei anfügen: leer lassen

Abbildung 1:
Bilder


b) Nun klicken wir auf den Button "Seiteneigenschaften" und nehmen dort folgende Einstellungen vor:

Erscheinungsbild:
- Seitenschrift: Tahoma, Verdana, Arial
- Größe: 11 Pixel
- Textfarbe: #FFFFFF
- Hintergrundfarbe: #000000
- Hintergrundbild: leer lassen
- Wiederholen: leer lassen
- Linker Rand: 10 Pixel
- Rechter Rand: 10 Pixel
- Oberer Rand: 10 Pixel
- Unterer Rand: 10 Pixel
Verknüpfungen:
- Schriftart für Seitenlink: (Gleiche wie Seitenschriftart)
- Größe: leer lassen
- Farbe für Hyperlinks: #0099FF
- Besuchte Hyperlinks: #0099FF
- Rollover-Hyperlinks: #00CC00
- Aktive Hyperlinks: #00CC00
- Unterstreichungsstil: Unterstreichung nur bei Rollover anzeigen
Überschriften:
- alles leer lassen
Titel/Kodierung:
- Titel: Spry-Test
- Document Type (DTD): XHTML 1.1
- Kodierung: Westeuropäisch
Tracing-Bild:
- alles leer lassen

Diese Einstellungen können auch nach belieben angepasst werden, jedoch empfiehlt es sich, die oberen zu übernehmen.
Ein Klick auf "OK" und wir haben die Einstellungen gespeichert.

c) Wir klicken in dem Bedienfeld "Einfügen" auf die Registerkarte "Allgemein" und klicken dort auf "Tabelle".

Hilfestellung 1:
Bilder


Nun haben wir ein Fenster vor uns und nehmen dort folgende Einstellungen vor:

Abbildung 2:
Bilder


Nun haben wir eine Tabelle in unserer Seite. Diese brauchen wir nicht weiter anzupassen, denn nun kommen wir zu einem wirklich wichtigen Teil, welcher die Erstellung einer Site-Definition beeinhaltet.

d) Wir klicken im oberen Menü auf "Site --> Neue Site...".

Abbildung 3:
Bilder


Diese Einstellungen bitte abnehmen, dann auf "Weiter >" klicken, bei der folgenden Seite die Einstellungen auf standard lassen, bei der darauf folgenden Seite die Einstellungen auch beim Standard belassen und auf der vorletzten Seite "keine" in der oberen Liste als Servertyp auswählen. Das letzte Fenster beenden wir mit einem Klick auf "Fertig". Wir öffnen noch das Bedienfeld "Anwendung" und die dortige Registerkarte "Bindungen".

Als Titel der Seite nehmen wir Spry-Test.
Den Titel kann man natürlich auch nach belieben anpassen.

Da wir nun mit allen wichtigen Voreinstellungen fertig sind, kommen wir zum eigentlichen Teil dieses Tutorials, dem Einfügen der Spry-Widgets.

Schritt 2 - Das Spry-Akkordeon, die Spry-Menüleiste und die Spry reduzierbare Palette erstellen

a) Zuerst erstellen wir einen normalen Spry-Bereich. Wie im ersten Tutorial erläutert, wird hierbei ein XML-Datensatz importiert:

<?xml version="1.0" encoding="utf-8"?>
<root>
  <data>
    <titel>Warum Dreamweaver CS3?</titel>
    <desc>Da es der weltweit marktführende HTML-Editor ist.</desc>
  </data>
  <data>
    <titel>Warum Spry?</titel>
    <desc>Weil man damit Seiten dynamisch und fast ohne Ladezeiten anzeigen lassen kann.</desc>
  </data>
  <data>
    <titel>Unser Ziel</titel>
    <desc>Eine Spry-Seite.</desc>
  </data>
</root>

Dieser wird dann importiert und wir erstellen in einer der rechten Tabellenspalte eine Spry-Tabelle, welche nur den Titel enthält. Dazu wählen wir im Fenster einfach den Tag "<desc>" ab. Nachdem wir die Spry-Tabelle erstellt haben, machen wir diese zu einem Link, indem wir um den Spry-Tag {titel} den HTML-Tag "<a href="#"></a>" legen, dabei steht {titel} zwischen dem normalen Tag (<a href="#">) und vor dem Tagschließer (</a>). Das ganze speichern wir und öffnen es im Browser (F12):

Abbildung 4:
Bilder


Eine ganz einfache Spry-Tabelle, welche ihren Inhalt nun in einer Überschrift (titel) und in einem Hauptbereich (desc) ausgibt. Dazu erstellen wir wie auf dem Bild unten abgebildet zwei Spry Bereiche. Damit wir noch Platz für ein Menü habenerstellt ihr ie Überschrift erst in der zweiten Zeile der rechten Spalte und den Hauptbereich in der dritten Zeile der rechten Spalte.

Abbildung 5:
Bilder


Da wir eine Spry-Seite wollen, selektieren wir "Detailbereiche" beim Erstellen eines neuen Spry-Bereiches. Einmal speichern und im Browser vergleichen, wenn alles stimmt, sind wir fertig hiermit.

b) Nun wollen wir ein Menü erstellen und dazu klicken wir auf "Spry-Menüleiste" und es öffnet sich folgendes Fenster:

Hilfestellung 2:
Bilder


In diesem Fenster wählen wir "Horinzontal", man kann aber auch, wenn man die Menüleiste auf die linke Seite als vertikales Menü haben will, das ganze auf "Vertikal" stellen, und wir klicken auf "OK":

Abbildung 6:
Bilder


Nun wird es ein bisschen kompliziert, das ganze zu erklären, wir sehen nun in den Eigenschaften drei Kästen vor uns:

Abbildung 7:
Bilder


Eine kleine Übersicht schafft Abhilfe:

Übersicht 2:
Bilder


Das heißt, jedes Element hat ein Unterelement und das Unterelement hat Nebenelemente, in der Darstellung sieht dies dann so aus:

Abbildung 8:
Bilder


Wir belassen es hierbei bei dem Standard.

Ist das Menü erstellt, so speichern wir unsere Datei und vergleichen sie im Browser.
Kleiner Hinweis: Einbinden von XML-Datensätzen ist hier auch möglich, einfach im Quelltext die Elemente mit dem jeweiligen Tag ersetzen.

c) Nun haben wir unser Menü und wollen natürlich auch unsere reduzierbare Palette (einklappbarer Bereich) einfügen:

Dazu klicken wir unter der Registerkarte "Spry" im Bedienfeld "Einfügen" auf "Reduzierbare Palette".

Hilfestellung 3:
Bilder


Abbildung 9:
Bilder


In dem Bedienfeld "Eigenschaften" geben wir an:

Übersicht 3:

- Anzeige: Geöffnet
- Standardstatus: Geschlossen
- Animation aktivieren: Nein

Wir können das ganze nun mit Inhalt füllen, ich schreibe in den Titel einfach mal "Spry-Framework" und als Inhalt "Tutorial für PSD-Tutorials unter Dreamweaver CS3". Wir speichern, Dreamweaver zeigt uns an, wo er die Spry-Assets speichert und das ganze sollte etwa so aussehen:

Abbildung 10:
Bilder


Wenn wir nun auf die reduzierbare Palette klicken, wird diese sich öffnen, man kann natürlich auch einstellen, dass sich das ganze animiert, bzw. von Anfang an aufgeklappt ist. Wenn ihr diese mal ausklappt und auf einen anderen Spry-Bereich klickt, dann werdet ihr merken, dass dieser die Palette nicht beeinflusst, bzw. keine Änderungen hervorruft. Man kann natürlich auch in der reduzierbaren Palette einen Spry-Bereich erstellen, einfach den Text mit dem von euch preferierten, in der XML-Datei angegebenen Tag ersetzen.

d) At last but not least, das Akkordeon. Dafür klicken wir auf "Spry-Akkordeon" unter der Registerkarte "Spry" in dem Bedienfeld "Einfügen".

Hilfestellung 4:
Bilder


Abbildung 11:
Bilder


Wir ändern hierbei die Bezeichnung 1 zu "Dreamweaver CS3" und die Bezeichnung 2 zu "Photoshop Lightroom". Inhalt 1 wird zu "Create, develop and maintain standard websites and web applications" und Inhalt 2 zu "Simplify photography from shoot to finish". Wir speichern und schauen uns das ganze im Browser an. Natürlich kann man hier auch wieder eigene Werte benutzen, einfach rumprobieren. Ein Doppelklick auf ein Akkordeon macht dies zum beim Seitenaufruf ausgeklappten.

Schritt 3 - Das Hochladen auf einen Server und verändern der relativen Links

Wir öffnen unser FTP-Programm und laden alle Dateien im Ordner unserer Site-Definition in einen beliebigen Ordner auf dem Webserver hoch. Die Links in den Dateien sollten alle gleich bleiben, wer den Ordner SpryAssets verschieben will, der ändert im Quelltext den Code

<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />

zu

<script src="Ordnername/xpath.js" type="text/javascript"></script>
<script src="Ordnername/SpryData.js" type="text/javascript"></script>
<script src="Ordnername/SpryMenuBar.js" type="text/javascript"></script>
<script src="Ordnername/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="Ordnername/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
<link href="Ordnername/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="Ordnername/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="Ordnername/SpryAccordion.css" rel="stylesheet" type="text/css" />

um. Ihr braucht hierzu keine CHMOD-Rechte auf dem Server zu verändern.

Fertig. Das Fazit?

Wenn man diese Technik versteht und beherrscht, kann man leistungsvolle und dynamische Seiten erstellen. In Zeiten des Web 2.0 ist das Spry Framework für AJAX eigentlich die perfekte Lösung, denn es lässt sich per CSS und JavaScript nahtlos anpassen und integrieren.

Ich hoffe es gefällt euch und ihr könnt damit etwas anfangen, in diesem Sinne:

Viel Spass beim Tutorial und beim Rumprobieren, freut euch auf das nächste Tutorial, es kommt bestimmt!

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Hundefreund88
Portrait von jaquesbubu
  • 13.12.2010 - 17:48

Toll, vielen herzlichen Dank

Portrait von HansNepomuk
  • 19.09.2010 - 11:39

danke, mehr davon!!! Wann kommt der dritte Teil???

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 15.09.2010 - 17:03

Sehr hilfreich Danköö.
MfG Dj-Clk

Portrait von jr3012
  • 12.08.2010 - 13:02

Tolles und hilfreiches Tutorial. Vielen Dank dafür.

Portrait von Jamaja
  • 26.06.2010 - 16:30

super gemacht und sehr hilfreich, endlich hat das ausprobieren ein ende^^

Portrait von Manolo10781
  • 20.04.2010 - 16:54

sehr gut, hat mich einiges weitergebracht

Portrait von CO_SA
  • 13.03.2010 - 09:43

Super, immer etwas dabi, dass man so noch nicht wußte

Portrait von Freistoss
  • 10.08.2009 - 10:34

Gute Sache! Recht herzlichen Dank...

Portrait von Parafinx
  • 16.07.2009 - 18:53

Hilfreich

gibt es noch mehr von dir??

Portrait von paul_schmidt
  • 11.07.2009 - 22:51

Wie auch schon der erste Teil war auch dieser Teil wieder gut erklärt und hilfreich.
Danke

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 07.07.2009 - 15:51

besten dank, hat mir etwas weitergeholfen

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 07.07.2009 - 15:47

besten Dank hat mir teilweise weitergeholfen

Portrait von williamo
  • 21.06.2009 - 12:53

Nachdem ich beim ersten Teil noch etwas verwirrt war, was sicherlich an fehlenden XML Kenntnissen liegt ;-), habe sogar ich dieses jetzt sehr schnell verstanden.
SUPER !

Portrait von kavan2457
  • 19.05.2009 - 22:25

Sehr hilfreich! Danke

Portrait von Benny777
  • 12.03.2009 - 18:17

wie der teil zuvor sehr schön

Portrait von Kuske
  • 03.10.2008 - 21:13

Absolut toll! Mehr als hilfreich und sehr gut erklärt.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 09.06.2008 - 11:53

Danke, ein sehr hilfreiche Arbeit.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 07.05.2008 - 10:02

Vielen Dank für das Tutorial! Auf dem kann man aufbauen.

Portrait von NiGem0611
  • 20.04.2008 - 10:59

super erklärt. vielen dank für das tolle tutorial !

x
×
×