Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 9: Vorlagenverwaltung in Dreamweaver

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.

Sobald Sie sicher sind, dass die Maske für Ihre neue Website steht, können Sie diese im Dreamweaver als Vorlage (Template) definieren. In der Vorlage werden Bereiche markiert, die veränderbar sind - alle anderen Elemente, die überall gleich aussehen (z.B. Navigation), bleiben quasi "gesperrt", wenn Sie Dateien ab dieser Vorlage herstellen.

Der Vorteil tritt vor allem zu Tage, wenn Sie ohne PHP-includes (kommt später in Übung 22) arbeiten: Sobald Sie Navigationspunkte hinzufügen oder löschen, machen Sie dies nur einmal in der Vorlage. Falls Sie konsequent alle Seiten ab dieser Vorlage erstellt haben (das ist die Bedingung!), werden alle Seiten bei einer Änderung der Vorlage automatisch angepasst. Alles, was Sie tun müssen, ist, die Seiten nochmals auf den Server zu schieben - fertig.

Tipp: Wenn Sie anderen, vielleicht ungeübten Leuten Websites zum Bearbeiten übergeben, eignen sich Vorlagen bestens als Schutz gegen ungewollte Änderungen an den Seiten. Alles, was der "Neo-User" wissen muss, ist, wie man eine neue Seite ab Vorlage erstellt - auf der Seite selbst kann der User nichts ändern ausser die Bereiche, die Sie explizit als editierbar markiert haben. Dies gilt auch, wenn Sie mit Includes gearbeitet haben

Öffnen Sie nun eine beliebige "fertige" Seite Ihres Web-Angebots oder eine früher erstellte Übungsseite. Alternativ können Sie auch eine vorgefertigte Testseite verwenden, die hier gezippt zur Verfügung steht.

Falls Sie noch keine Site definiert haben, tun Sie dies jetzt!

Wählen Sie "Datei / als Vorlage speichern" und geben Sie im Feld "Speichern unter" des erscheinenden Fensters "vorlage" ein:

In Ihrer Site wird nun automatisch ein Ordner "Templates" erstellt, darin erscheint neu die Datei vorlage.dwt (= Dreamweaver Template), und Ihre offene Datei hat neu im blauen Balken oben die Bezeichnung << Vorlage >> (vorlage.dwt).

Diese Datei ist nun Ihre Vorlage für alle weiteren Seiten. Nun müssen noch Bereiche definiert werden, die später verändert werden dürfen. Schreiben Sie am besten ein wenig Beispieltext an den Ort, den Sie später editierbar machen wollen. Markieren Sie dann den Text (z.B. da, wo später der Lauftext der Seite stehen soll).

Kilcken Sie dann am besten mit der rechten Maustaste in die Markierung und wählen Sie "Vorlagen / Neuer bearbeitbarer Bereich" aus:

Geben Sie dem Bereich einen Namen, der später auch für Neulinge aussagekräftig ist, z.B. "HierTextEinfuegen":

Editierbare Bereiche haben jeweils einen hellblauen Rahmen. Fahren Sie so fort, bis alle Bereiche, die später editierbar sein müssen, auch so sind. Speichern Sie die Vorlage am Schluss. Schliessen Sie alle offenen Dateien.

Wenn Sie nun eine neue Seite auf der Basis dieser Vorlage erstellen möchten, wählen Sie einfach "Datei / Neu" und dann den Reiter "Vorlage" (CS3: "Datei / Neu" > Seite aus Vorlage) - und zum Schluss klicken Sie Ihre Site an - die Vorlage erscheint:

(oben: Screen aus MX 2004 / unten: CS3)

Wählen Sie die gewünschte Vorlage mit einem Doppelklick aus - Sie bekommen nun zum Beispiel dies (wichtig ist vor allem der Text "Hier Text einfügen" - das ist eben der vorhin erstellte bearbeitbare Bereich):

Wenn Sie nun versuchen, in andere Bereiche zu klicken, ist alles vergeblich... alles, was Sie ändern können, ist der Bereich, den Sie vorhin definiert haben.

Hier zeigt sich: Eine Vorlage muss "todsicher" stimmen, bevor Sie sie als Vorlage verwenden. Allerdings ist es kein Problem, nachträglich Änderungen an der Vorlage zu machen, solange diese nicht das ganze Konzept über den Haufen werfen.

Fügen Sie in der neuen Datei einige Textzeilen ein (löschen Sie den Beispieltext am besten) und speichern Sie die Seite unter einem beliebigen Namen innerhalb der Site (ausser im Ordner "Templates" - da kommen NUR Vorlagen rein).

Erstellen Sie so 3-4 neue Dateien ab der Vorlage und füllen Sie sie mit Phantasie-Inhalten.

So weit so gut. Nehmen wir jetzt an, Sie wollen in der Navigation einen Punkt hinzufügen. Öffnen Sie aus der Siteverwaltung mittels doppelklick die Vorlage mit der Endung dwt und fügen Sie unter der Navigation einen beliebigen Text ein:

Sobald Sie die Datei nun speichern und/oder schliessen, erscheint folgendes Fenster:

Falls Sie nun "Aktualisieren" klicken, ist nachher alles in Butter - wie Ihnen das nächste Fenster bestätigt:

Gepüft: 3 / Aktualisiert: 3 - also alles nach Wunsch verlaufen. Wenn Sie nun die Dateien öffnen, werden Sie sehen: Die Änderung wurde global übernommen - auf allen Seiten, die auf der Vorlage basieren.

Stellen Sie neue Seiten darum immer auf Basis einer Vorlage her. Nachträgliches Verknüpfen einer Datei mit einer Vorlage ist zwar möglich (siehe Menu Ändern / Vorlagen), aber führt unweigerlich zu Komplikationen, wenn die Layouts verschieden sind - solche Fenster sind dann die Folge...

Die Vorlage braucht übrigens nicht auf dem Server zu liegen - alle Änderungen geschehen mit Standard-HTML-Code. Es genügt, wenn die Vorlage in Ihrer Site (auf Ihrem Rechner) vorhanden ist.

Alles, was Sie jetzt noch tun müssen, ist, allfällige neu eingefügte Bilder und natürlich die veränderten Dateien selbst auf den Server zu kopieren - und fertig ist die Sache!

Zum Nachlesen: KnowWare-Heft 27, Seite 71

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.