NetObserver Studie
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Dreamweaver > Vorlagen (Templates)

Wozu Vorlagen (Templates) in Dreamweaver?

Manchmal vergeht einem der Spass an der Arbeit, wenn man manche Dinge wieder und wieder tun muss. Eine Abhilfe schaffen hier Vorlagen (Templates). Wir haben nun aktuell eine ausführliche Beschreibung der Anwendung und Möglichkeiten von Vorlagen in Dreamweaver. Und die Arbeit geht schneller von der Hand.

 

1. Eine Vorlage ist nur dann eine Vorlage, wenn Sie als solche gespeichert ist. Dreamweaver erzeugt dabei selbstständig den passenden Ordner in der Site (Site kein Begriff? Hier klicken).

Öffnen Sie eine neue leere Datei und wählen Datei/Als Vorlage speichern. Geben Sie einen Namen ohne Endung ein. Anmerkung: Es könnte auch jede beliebige fertige HTML-Datei als Vorlage gespeichert werden. tooltipp

2. Nach dem speichern finden Sie in der Siteansicht einen Ordner Namens - Template - und darin Ihre soeben gespeicherte Vorlage mit der Dateiendung *.dwt (typisch für Vorlagen). tooltipp

3. Eine Vorlage macht nur dann Sinn, wenn darin sogenannte - Bearbeitbare Bereiche - definiert werden. Vorab eine Erläuterung was es damit auf sich hat.

In einer Vorlage gibt es zwei Kategorien Bereiche: 1. Bearbeitbare und 2. gesperrte. Dies müssen Sie unbedingt auseinanderhalten, sonst verstehen Sie bald die Welt nicht mehr:) Der Sinn von Vorlagen ist einfach der, Sie können beliebig viele HTML-Dateien aus nur einer Vorlage erzeugen. Möchten Sie nun in allen mit dieser Vorlage verknüpften Dateien etwas ganz bestimmtes ändern, dann brauchen Sie dies nur in der Vorlage zu tun. Alle - mit eben genau dieser Vorlage - verknüpften Dateien werden mit der entsprechenden Änderung aktualisiert. Das wäre jedoch das reinste Chaos, wenn es nicht eben diese zwei Bereiche geben würde.

Bearbeitbare Bereiche: sind solche, die in den verknüpften HTML Dokumenten - nicht - aktualisiert werden. Warum nicht? Jede HTML-Datei hat gewöhnlich unterschiedlichen Inhalt. Damit nicht urplötzlich in 100 Dateien dasselbe an Inhalt drinsteht, definiert man diese Bearbeitbaren Bereiche.

Gesperrte Bereiche: sind automatisch alle anderen Bereiche, die nicht in einen bearbeitbaren Bereich fallen! Diese werden demzufolge in allen HTML-Dateien aktualisiert. Gesperrte Bereiche können nur in der Vorlage selbst editiert werden, nicht in den verknüpften HTML-Dateien. Sie werden das gleich merken.

4. Sie haben die Vorlage noch offen. Erstellen Sie eine einfache Tabelle mit zwei Zeilen. In die oberste schreiben Sie eine Überschrift und geben dieser irgendeine Farbe. Setzen Sie nun den Cursor in die Zeile darunter und klicken: Modifizieren/Vorlage/Neuer Bearbeitbarer Bereich (Strg+Alt+V). Es erscheint folgendes Fenster. Vergeben Sie einen eindeutigen Namen und klicken OK. tooltipp

5. Nun erscheint in der Zeile eine hellblaue Rahmung mit dem entsprechenden Namen. Dies ist nun Ihr Bearbeitbarer Bereich den Sie später frei in den mit der Vorlage verknüpften Dateien bearbeiten können. Die Überschrift entspricht einem gesperrten Bereich und ist nur hier in der Vorlage bearbeitbar. tooltipp

6. Schreiben Sie ruhig schon mal irgendeinen Text in diesen Bereich, das ist Jacke wie Hose was da drin steht. Speichern Sie die Vorlage nochmals ab. Sollte wieder Erwarten schon ein Abfragefenster erscheinen, gehen Sie dort vorerst auf Nicht aktualisieren. tooltipp

7. Ein etwas längerer Weg jetzt: Erzeugen Sie eine neue leere Datei. Gehen Sie auf Modifizieren/Vorlagen/Vorlage auf Seite anwenden (auch mal schauen was es da noch so in dem Menü gibt). Es öffnet sich folgendes Fenster, wenn Sie bis jetzt alles richtig gemacht haben. Hier können Sie die entsprechende Vorlage auswählen. Sie haben da nur eine drin, aber das können auch beliebig viele sein. Wählen Sie die Vorlage aus. Der schnelle Weg wäre gewesen: Datei/Neu von Vorlage tooltipp

8. Ihre leere Datei bekommt nun den selben Inhalt wie die Vorlage selbst, nur mit einer gelben Rahmung um die ganze Seite. Daran erkennen Sie, das die Datei mit einer Vorlage verknüpft ist. Schreiben Sie ruhig mal einen anderen Text in den bearbeitbaren Bereich, irgendwas, egal. Wenn Sie versuchen die Überschrift zu ändern, dann klappt das nicht. Ihr Cursor verwandelt sich in einen Sperr-Kreis. Versuchen Sie es ruhig, es geht nicht. Speichern Sie die Datei als eine normale HTML - Datei (*.html) und schließen diese. tooltipp

9. Nehmen wir einmal an, Sie haben nun 100 solcher Dateien mit der Vorlage verknüpft. In der einen steht Hinz, in der anderen Kunz usw. Nun fällt Ihnen ein, die Überschrift nicht Rotbraun, sondern blau zu machen. Öffnen Sie die entsprechende Vorlage (Name siehe gelbe Rahmung) und ändern dort einfach die Farbe der Überschrift. Die Vorlage können Sie mit Modifizieren/Vorlagen/Angefügte Vorlage öffnen, oder mit Rechtsklick und Angefügte Vorlage wählen oder auch über Fenster/Vorlagen und die entsprechende Vorlage dann einfach doppelklicken. tooltipp

10. Haben Sie was geändert und speichern die Vorlage erneut ab, öffnet sich folgendes Fenster. Damit will Dreamweaver alle verknüpften Dateien aktualisieren. Sie können das abbrechen, aber ist ja nicht Sinn und Zweck. Klicken Sie Aktualisieren und das wars. Sie bekommen noch ein Protokollfenster angezeigt welches Sie beruhigt schließen können. Haben Sie zu schnell Aktualisieren geklickt, ist es eh zu spät:) tooltipp

11. Sie können die Vorlage jetzt schließen und die damit verknüpte HTML-Datei öffnen. Sie werden dort die Überschrift blau vorfinden und der Inhalt hat sich nicht geändert, da dieser wie schon gesagt, in einem Bearbeitbaren Bereich steht. tooltipp

Anmerkung: Es kann vorkommen, Sie möchten eine Datei nicht mehr mit einer Vorlage verknüpft haben, klicken Sie einfach Modifizieren/Vorlage/Von Vorlage lösen.

12. Das sollte für den Anfang reichen. Experimentieren Sie ruhig etwas und erstellen mehrere Dateien nur von dieser einen Vorlage, klappt alles wunderbar. Probieren Sie auch mehrere bearbeitbare Bereiche zu definieren, ist alles machbar. Das bisschen Überschrift ist nur ein kleines Beispiel. Genauso funktioniert das mit anderen Sachen z.B. mit Links, Bildern, CSS-Formatierungen etc.

Vorlagen haben aber auch ihre Tücken. Sie sollten sich unbedingt klar sein, wann Vorlagen zu verwenden sind und wann man doch lieber auf andere Dreamweaver-Spezialitäten z.B. Bibliothekselemente etc. zurückgreift. Ganz wichtig ist eben das auseinanderhalten der Bereiche, wird oft mißverstanden! Mit reichlich Übung kriegen Sie Vorlagen in den Griff, denn dann sind diese durchaus wertvoll.

 

Autor: (ar)

Abbildungen

Abbildung 1 - leere Datei als Vorlage speichern

Abbildung 1 - leere Datei als Vorlage speichern

Abbildung 2 - so speichert DW Vorlagen

Abbildung 2 - so speichert DW Vorlagen

Abbildung 3 - Bearbeitbaren Bereich definieren

Abbildung 3 - Bearbeitbaren Bereich definieren

Abbildung 4 - Bearbeitbarer Bereich (hellblau)

Abbildung 4 - Bearbeitbarer Bereich (hellblau)

Abbildung 5 - irgendein Text

Abbildung 5 - irgendein Text

Abbildung 6 - Vorlage auf Seite anwenden

Abbildung 6 - Vorlage auf Seite anwenden

Abbildung 7 - HTML Seite ist mit Vorlage verknüpft

Abbildung 7 - HTML Seite ist mit Vorlage verknüpft

Abbildung 8 - Vorlage selbst ändern

Abbildung 8 - Vorlage selbst ändern

Abbildung 9 - alle mit der Vorlage verknüpfte Dateien aktualisieren

Abbildung 9 - alle mit der Vorlage verknüpfte Dateien aktualisieren

Abbildung 10 - Seite (n) aktualisiert

Abbildung 10 - Seite (n) aktualisiert

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /