Arbeiten mit Vorlagen (bearbeitbare und wiederholende Bereiche)

Erstelle dir zunächst das Dokument mit den Rahmenbedingungen, die in allen von der Vorlage zu erstellenden Dokumenten identisch sein sollen, und lasse die Bereiche mit individuellen Inhalten zunächst frei. In meinem Beispiel habe ich dafür eine HTML-Datei aus der PSD-Tutorials.de-Workshop-DVD genommen. Darin werden in den Formen>Kategorien alle Erweiterungen angezeigt. Hier habe ich zunächst 4 Platzhalter eingetragen: Kategoriename (oben), Bild (links), Kategoriename (Mitte) und Text (rechts):

Wir empfehlen:
Dreamweaver-Video-Training

 

Um daraus eine richtige Vorlage zu erstellen, musst du diese als Vorlage abspeichern:

 

Dann brauchst du nur noch den Namen für die Vorlage zu definieren:

 

Jetzt kannst du endlich die zu bearbeitenden Bereiche festlegen. Dazu klickst du auf den Bereich, der bearbeitbar bleiben soll. In meinem Beispiel ist es das Wort Bild, wo später immer ein Vorschaubild eingefügt werden soll. Danach ein Klick auf die Einfügepalette>Vorlagen-Symbol>Bearbeitbarer Bereich:

 

Jetzt brauchst du nur noch schnell einen aussagekräftigen Namen für den Bereich zu vergeben:

 

Jetzt hat Dreamweaver für dich den Bereich festgelegt. Du kannst das auch im Code ersehen: Es werden spezielle Dreamweaver-HTML-Kommentare eingefügt, die der Browser aber nicht anzeigt, die jedoch für die Weiterbearbeitung in Dreamweaver notwendig sind.

 

Zum Schluss sollte deine Vorlage ungefähr so aussehen:

 

Ab jetzt kannst du anhand dieser Vorlage neue Dokumente einrichten. Dazu klickst du auf Datei>Neu>Seite aus Vorlage.

 

Auch ist es möglich, dass du durch die Elemente-Palette bei neuen Dokumenten direkt die entsprechende Vorlage zuweisen kannst (dazu einfach per Drag&Drop die Vorlage auf das Dokument ziehen):

 

Du kannst jetzt deine neue Datei nur in den veränderbaren Bereichen editieren:

 

Wenn du jetzt z. B. 150 derartig aufgebauter Dateien hast, und dir dann irgendwann einfällt, anstatt des blauen Rahmen einen lieber roten haben zu wollen, geht das super einfach zu ändern. Klicke zunächst auf das Register Dateien und dann siehst du die Ordnerstruktur deiner Webseite. Darin befindet sich ein neuer Ordner namens Templates. Den bitte niemals ändern, weil sonst die Arbeit mit den Vorlagen für die aktuelle Webseite nicht mehr möglich ist. Ein Doppelklick auf die angewendete Vorlage startet die Bearbeitung. In unserem Beispiel wäre es die Allgemeine Formenübersicht.dwt:

 

Darin änderst du jetzt die Rahmenfarbe:

 

Wenn du das gemacht hast, sieht deine Vorlage so aus:

 

Sobald du auf Speichern klickst, merkt Dreamweaver sofort die Änderung und schlägt richtiger weise vor, dass deine anderen Dateien, die auf der Vorlage basieren, aktualisiert werden:

 

Danach erscheint ein neuer Dialog, wo du auswählen kannst, ob alles aktualisiert werden soll oder nur bestimmte Dateien. Du wählst dann Gesamte Site aus:

 

Und siehe da, deine Testdatei wurde erfolgreich aktualisiert:

 

Kleiner Tipp: Manchmal ist es notwendig, die Dateien von einer Vorlage zu lösen. Das kannst Du ganz schnell realisieren: Klicke dazu auf Menü>Modifizieren>Vorlagen>Von Vorlage lösen:

 

Wie du siehst, ersparst du dir damit sehr viel Arbeit. Darum: Arbeitest du mit vielen HTML-Dateien für z. B. eine Intranetwebseite, eine Internetseite (ohne CMS) oder für ein kleines Portfolio, dann unbedingt mit Vorlagen arbeiten, denn eines ist sicher: Das Design wirst du sicher alle paar Jahre ändern wollen, und damit geht es viel schneller von der Hand!

ACHTUNG: Es lassen sich auf diesem Weg jedoch keine neuen Tabellenzeilen hinzufügen. Die gute Nachricht ist aber, dass Dreamweaver extra dafür eine Option hinzugefügt hat:

 

Du musst jetzt nur Wiederholende Tabelle einfügen und dann wie in meinem Beispiel alles ausfüllen (wenn du so wie ich eine Trennlinie nach jedem Eintrag haben möchtest).

Danach kannst du auf dieser Vorlage eine neue Datei erstellen und jederzeit neue Einträge hinzufügen und sogar sortieren:


Hätte ich das vorher schon gewusst, wäre meine DVD sicher noch schneller fertig geworden, weil ich genau so eine Funktion immer vermisst habe bzw. gar nicht wusste, dass es schon so etwas gibt. Also schaut es euch an, es lohnt <<<<

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training