Vorlagen-Handling in Adobe Dreamweaver

Dreamweaver erlaubt es, Templates zu erstellen. Dabei werden Grundstrukturen verwendet, in denen man optionale und editierbare Bereiche festlegen kann. Wiederkehrende Aufgaben können hiermit zeitsparender erledigt werden und auch die Pflege eines Projektes wird abgesichert, wenn etwa nur das Bildmaterial und der Text variiert werden können.

Grundsätzliches

Grundstrukturen einer Website, aber auch schon fertig gestaltete Projekte, können sehr leicht in eine Vorlage umgewandelt werden. Dazu geht man einfach ins Menü und dort auf Datei > Als Vorlage speichern. Im Dialog gibt man die Site an, eine Beschreibung und den Speicherort, wonach man die Eingabe bestätigt und damit auch schon eine Vorlage abgespeichert hat.

Sollte eine Abfrage kommen, ob Links aktualisiert werden sollen, gibt man JA an, damit Bildpfade oder Pfade zu Dokumenten aktuell gehalten werden. Die Datei wird dann im Format .dwt abgelegt, was für „Dreamweaver-Template“ steht.

Im Reiter Allgemein kann man die Optionen in Bezug auf die Vorlagen entdecken. Ist dieser Reiter nicht zu sehen, so klickt man zuvor auf Fenster > Arbeitsbereichlayout > Klassisch.

Um etwa einen Textabschnitt oder auch nur eine Überschrift in einen editierbaren Abschnitt zu verwandeln, wird der Text markiert und in den Optionen der Vorlagen auf Bearbeitbarer Bereich geklickt.

Dieser erhält einen Namen, der nach der Bestätigung als Markierung am Text zu sehen ist. Es kann auch eine sich wiederholende Tabelle oder ein optionaler Bereich bestimmt werden.

Basierend auf diesem Template kann man nun Dokumente erstellen. Nach einem Klick auf Datei > Neu wählt man dazu Seite aus Vorlage und von einer Site eine der verfügbaren Vorlagen aus. Bei Seite bei Vorlagenänderung aktualisieren sollte ein Häkchen zu sehen sein. Nach dem Erstellen wird deutlich, welche Bereiche dieser Vorlage man bearbeiten kann und welche Bereiche nicht (was durch ein Verbotsschild als Mauszeiger symbolisiert wird).

Anwendungen

Sehr praktisch sind die Templates, wenn man sich wiederholende Bereiche kontrollieren möchte. Nehmen wir an, in einem „div“ sind eine Überschrift, ein Bild und ein Textblock gegliedert. Man wählt zunächst im Quellcode das komplette „div“ aus, inklusive Start- und Endtag, und klickt im Reiter Allgemein und den Optionen der Vorgaben auf Wiederholender Bereich.

Dieser erhält einen Namen und wird noch etwas vorbereitet. So könnte man in unserem Beispiel etwa jeweils die Überschrift und den Text auswählen und diese Inhalte über Bearbeitbarer Bereich editierbar machen.

Das Foto soll als Optionaler Bereich umgesetzt werden. Dazu klickt man es an und dann in den Optionen der Vorgaben auf den entsprechenden Eintrag. Das Bild erhält einen Namen und wird über Modifizieren > Vorlagen > Attribut editierbar machen weiter behandelt. Zu den Attributen eines Bildes gehören SRC, Alt, Name, Width, Height, Class und ID. Wählen wir zum Test einmal SRC aus und setzen ein Häkchen bei Attribut bearbeitbar machen. Bei Beschriftung könnte man etwa „Quelle“ einsetzen, bei Typ sollte URL stehen und dann kann man den Vorgang auch schon mit OK abschließen.

Öffnet man nun ein neues Dokument auf Basis dieser Vorlage, so kann man sehr leicht über Wiederholen und dem Plus-Symbol eine Kopie dieses div-Bereiches anlegen. Und natürlich kann man in den Bereichen, Original wie Kopie, auch ganz einfach den Text der Überschrift und die Beschreibung zum Foto anpassen.

Das Foto selbst wird über Modifizieren > Vorlageneigenschaften ausgetauscht. Die Pfadangabe wird angewählt. Ein Eingabefeld mit einem Ordnersymbol zur Dateiauswahl erscheint, worüber man den Pfad zu einer anderen Aufnahme auswählen kann. Nach der Bestätigung ist das neue Bild an seinem Platz.

Vorgaben ändern

Soll ein Bereich nicht mehr editierbar sein, so entfernt man die entsprechenden Tags. Dazu könnte man direkt im Quellcode arbeiten oder etwas bequemer einfach den Bereich markieren, unten bei der Auflistung aller Tags innerhalb der Markierung über das Tag gehen und die rechte Maustaste drücken. Im Dialog erscheint gleich als erster Punkt Tag entfernen.

Soll ein zusätzlicher Bereich als editierbar definiert werden, so geht man wie bei der Erstellung eines Templates vor. Man wählt den den Bereich aus und klickt in den Optionen der Vorgaben auf Bearbeitbarer Bereich, der dann noch einen Namen erhält.

Wird die Vorgabe gespeichert erscheint eine Abfrage, welche Vorlagendateien aktualisiert werden sollen. So geht man sicher, dass die Dokumente der Site, die mit dieser Vorgabe verbunden sind, auch die Änderungen übernehmen. Nach einem Klick auf Aktualisieren kommt eine weitere Abfrage, aber nur, wenn ein editierbarer Bereich entfernt wurde. Dabei muss man angeben, was mit den Inhalten geschehen soll, die vorgegeben waren. Unter Inhalt in neuen Bereich verschieben gibt man „Nirgends“ oder einen der weiteren editierbaren Bereiche an.

Auch schon bestehende HTML-Dokumente können noch mit einer Vorgabe ausgestattet werden. Man geht dazu auf Modifizieren > Vorlagen > Vorlage auf Seite anwenden. Es kommt die Abfrage, welche Site und welche Vorgabe es denn sein darf. Man kann eine Seite auch wieder von dem Template unabhängig machen, in dem man auf Modifizieren > Vorlagen > Von Vorlage lösen klickt. Dreamweavers Vorlagen sind also recht flexibel und leicht anzulegen.

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.