In einer Website haben Seiten oft das gleiche Layout. Speziell beim Einsatz von Tabellen, in denen die Navigation auf der linken oder rechten Seite, oben oder unten eingesetzt wird. Diese Anteile der Website dürfen nicht verrutschen und müssen auf jeder Seite feststehen. Zur Lösung dieses Problems gibt es in HTML Vorlagen. Dreamweaver setzt dies Funktion ein mit einer fertigen Funktion, Dateien als Vorlagen speichern und diese Vorlagen zu bearbeiten. Die Beschreibung bezieht sich auf die Version Dreamweaver 4.0. In der Version MX ist die Sitedefinition leicht geändert worden. Eine Website mit einer Vorlage in Dreamweaver erstellen.... 1 Eine neue Website für Dreamweaver erstellen... 1 Die neue Website in Dreamweaver erstellen... 1 Eine vorhandene Site auswählen... 2 Eine Vorlage erstellen... 2 Die Vorlage bearbeiten... 3 Kopien von der Vorlage ziehen... 3 Die Hyperlinks aktivieren... 4 Weiteres Arbeiten mit Vorlagen... 4
Eine Website mit einer Vorlage in Dreamweaver erstellen. Eine Website hat sehr viele Seiten, hiervon sind ggf. einige Bereiche immer feststehend. Für solche Bereiche, die sich nicht verändern, können Vorlagen eingesetzt werden. Auf einer Vorlage werden in Dreamweaver feststehende und veränderbare Bereiche festgelegt. Diese Übungsaufgabe setzt Grundkenntnisse über das Erstellen von Vorlagen und Ziehen von Kopien voraus. Zusätzlich werden mögliche Kenntnisse in einem Grafikprogramm vorausgesetzt und können für diese Aufgabe mit verwendet werden. Eine neue Website für Dreamweaver erstellen Die neue Site wird im Hauptordner: D:\Websites im Windowsexplorer vorbereitet. Für die Übung heißt dieser Ordner D:\Websites\DWTrainingV Wenn der Ordner erstellt ist, starten Sie Dreamweaver. Die neue Website in Dreamweaver erstellen Direkt nach dem Start in Dreamweaver wählen Sie Site > Neue Site Sie erhalten ein Dialogfeld, in welchem Dreamweaver Sie zu einem Sitenamen auffordert. Wenn der Sitename gegeben ist, wird über das Ordnersymbol der Ordner D:\Websites\DWTrainingV aus dem Explorer ausgewählt. Mit diesem Sitenamen können Sie innerhalb von Dreamweaver den Ordner D:\Websites\DWTrainingV leicht wieder finden. Dr. Viola Vockrodt-Scholz 1
Wichtig ist es, vor dem Start von Dreamweaver die Website zu öffnen oder die Site zu definieren, mit der man arbeiten möchte. Eine vorhandene Site auswählen Mit dem Befehl Site > Site öffnen können verschiedene Website, an denen gearbeitet wird, geöffnet werden. Dreamweaver wählt hierzu jeweils den vorher definierten Ordner im Windows-Explorer. Wenn Sie wählen können Sie festlegen, mit welcher bereits in Dreamweaver definierten Site Sie arbeiten können. Site > Site definieren Eine Vorlage erstellen Sie haben die Site DWTrainingV erstellt. Dreamweaver zeigt Ihnen als Site einen leeren Ordner. In der Regel haben wir in einer kleinen Website einen Ordner für Bilder (Häufig mit dem Namen Images ) und die Homepage, die Datei index.htm. Im Beispiel sollen alle Dateien von einer Vorlage bestimmt werden. In der Vorlage wollen wir den Navigationsbereich festlegen, der auf allen Seiten gleich sein soll. Dafür eignet sich eine Tabelle. Wer gerne möchte, kann hier die Funktion Navigationsleiste von Dreamweaver einsetzen. Voraussetzung hierfür ist, dass in einem Grafikprogramm vier Schaltflächen gleicher Größe erstellt werden, die für die einzelnen Hyperlinks verwendet werden. Die Vorlage hat ein einfaches Layout (Das Thema ist variabel): Dr. Viola Vockrodt-Scholz 2
Home Angebot Details Preise Termine Team Kontakt Am besten werden die Hyperlinks auf die Dateien bereits jetzt erstellt. Dies kann auch später geschehen, wenn die Dateien erstellt sind. Wenn diese Tabelle erstellt ist, die Vorlage mit dem Befehl Datei > als Vorlage speichern speichern. Die Vorlage erhält den allgemeinen Namen Navigation. Dreamweaver erstellt beim ersten Speichern einer Vorlage den Ordner Templates in der Website. Irgendwelche merkwürdigen Speicheranfragen kommen dann, wenn der gewählte Speicherort mit der geöffneten DW-Site nicht übereinstimmen. Dann muss erst die richtige Site definiert werden. Die Vorlage bearbeiten Die Vorlage ist in der jetzt vorliegenden Form nicht veränderbar, d. h. dass auf Kopien der Vorlage keine Änderungen vorgenommen werden können. Die Tabelle mit den Hyperlinks soll unveränderbar bleiben. Der gesamte Bereich darunter soll für das weitere Layout zur Verfügung stehen. Dieser Bereich wird markiert und mit dem Befehl Modifizieren > Vorlagen > Neuer bearbeitbarer Bereich für die Kopien der Vorlage veränderbar gemacht. Die Vorlage kann jetzt geschlossen werden. Kopien von der Vorlage ziehen Mit dem Befehl Datei > Neu von Vorlage kann eine Kopie oder eine Instanz der Vorlage geöffnet werden. Dr. Viola Vockrodt-Scholz 3
Dies ist eine normale HTML-Datei, die in der Site gespeichert wird. Ein möglicher Name wäre angebot.htm. In dem bearbeitbaren Bereich können jetzt alle weiteren Bearbeitungen vorgenommen werden. Die Navigationsleiste lässt sich nicht verändern. Alle Dateien werden so erstellt und bearbeitet. Die Hyperlinks aktivieren Um die Hyperlinks auf alle Dateien zu erstellen, wird die Vorlage mit wieder geöffnet. Die Hyperlinks werden erstellt. Datei > Öffnen Bei Schließen und speichern der Vorlage fragt Dreamweaver nach, ob die Dateien aktualisiert werden sollen. Wenn Sie aktualisieren wählen, werden die Hyperlinks auf alle Kopien der Vorlage übernommen. Weiteres Arbeiten mit Vorlagen Bisher haben wir Vorlagen erstellt und für neue Seiten Kopien von der Vorlage gezogen. Es gibt einige weitere Möglichkeiten, mit Vorlagen umzugehen. 1. Eine Datei nachträglich mit einer Vorlage verknüpfen Sie haben z. B. eine Vorlage für die Navigation erstellt und bemerken nachträglich, dass Sie diese Leiste auch auf anderen Dateien Ihrer Site gebrauchen könnten. Sie wählen Modifizieren > Vorlagen > Vorlage auf Seite anwenden. 2. Eine Datei nachträglich von einer Vorlage lösen Sie entscheiden während des Erstellens der Website, dass eine Datei besser in einem Popup- Fenster erscheinen soll, als im Rahmen der Navigation. Die Navigationsleiste der Vorlage ist aber schon auf der Seite. Sie können diese Datei wieder von der Vorlage lösen mit dem Befehl Modifizieren > Vorlagen > Von Vorlage lösen 3. Die Vorlage rasch öffnen, um Änderungen zu ermöglichen Sie bemerken beim Layout der Seite, dass Sie in der Vorlage eine Änderung brauchen. Sie wählen Dr. Viola Vockrodt-Scholz 4
Modifizieren > Vorlagen > Angefügte Vorlage öffnen 4. Die aktuelle Seite aktualisieren Um die aktuelle Seite hinsichtlich Änderungen in der Vorlage zu aktualisieren wählen Sie Modifizieren > Vorlagen > Aktuelle Seite aktualisieren 5. Um alle Seiten zu aktualisieren Falls Sie mehrere Seiten geöffnet haben, die Sie nach der Vorlagenänderung aktualisieren wollen, wählen Sie: Modifizieren > Vorlagen > Seiten aktualisieren Dr. Viola Vockrodt-Scholz 5