So verwenden Sie Vorlagen in Dreamweaver

Autor：Eve Cole Aktualisierungszeit：2009-05-30 18:50:16

Das Webdesign-Tool Dreamweaver (im Folgenden als DW bezeichnet, die aktuell höchste Version ist 4.02, das Beispiel in diesem Artikel ist Version 4.0) verfügt über eine sehr leistungsstarke Funktion, nämlich Vorlagen!

Was ist also der Reiz von Vorlagen? Welche Eigenschaften hat es?

Mithilfe von Vorlagen können wir Elemente festigen, die auf jeder Seite der Website erscheinen.

Durch die Verwendung von Vorlagen zum Erstellen von WEB-Seiten kann der gesamten Website ein einheitlicher Stil verliehen werden.

Solange die Vorlage geändert wird, können alle WEB-Seiten, auf die die Vorlage angewendet wird, geändert werden, ohne dass jede Seite manuell geändert werden muss. Wenn Sie beispielsweise Ihr Urheberrecht ändern müssen, müssen Sie dann das Urheberrecht Seite für Seite ändern? Was ist, wenn es Tausende von Seiten gibt? Ich glaube, dass du zunächst zwei oder drei groß sein wirst. Wenn Sie jedoch Vorlagen verwenden, ist dies kein Problem.

Nachfolgend finden Sie ein umfassenderes Beispiel, das Ihnen schnell dabei helfen kann, die Verwendung von Vorlagen zu beherrschen.

1. Seite bearbeiten

Öffnen Sie DW und erstellen Sie eine neue Site, die wir „Spider Web“ nennen.

Erstellen Sie eine neue leere Seite als interne Seite (normalerweise hat eine Website nur eine Homepage, daher müssen wir keine Vorlage für die Homepage erstellen) und nennen Sie sie body.htm.

Bearbeiten Sie diese Seite und vervollständigen Sie sie wie in Abbildung 1 gezeigt.

Abbildung 1, die Seite body.htm nach Abschluss der Bearbeitung. Achten Sie auf Punkt A, der als bearbeitbarer Bereich verwendet wird und unten erwähnt wird.
2. Vorlage generieren

Nachdem die Bearbeitung abgeschlossen ist, speichern wir diese Seite als Vorlage (beachten Sie, dass sie nicht als normale HTML-Webseite gespeichert wird). Sie können es über „Datei“ als Vorlage speichern in DW als Vorlage speichern. Nach der Ausführung dieses Befehls wird das Fenster „Als Vorlage speichern“ angezeigt, wie in Abbildung 2 dargestellt.

Abbildung 2: Fenster „Als Vorlage speichern“.

In Abbildung 2 ist B die Site-Auswahl, wir wählen „Spider Web“, C ist der Name der Vorlagendatei, unter dem wir speichern möchten, wir füllen den Text aus. Klicken Sie zum Speichern oben rechts auf „Speichern“.

Zu diesem Zeitpunkt drücken wir F8, um die Site (Site-Manager) aufzurufen, und Sie können body.dwt im Vorlagenordner sehen (wenn eine Vorlagendatei vorhanden ist, generiert DW automatisch den Vorlagenordner und dwt ist der Vorlagentyp Datei)

3. Vorlage bearbeiten

Wenn Sie die Vorlagendatei body.dwt in Site öffnen, werden Sie feststellen, dass sie sich scheinbar nicht von der Seite body.htm unterscheidet, aber tatsächlich unterscheidet sie sich. Sie können in body.htm keine bearbeitbaren Bereiche hinzufügen. Bearbeitbare Bereiche können nur in Vorlagendateien hinzugefügt werden.

Damit jeder den „bearbeitbaren Bereich“ besser versteht, verwenden wir zunächst diese Vorlage, um eine HTML-Datei zu generieren: Klicken Sie auf Datei→Neu aus Vorlage. Das Fenster „Vorlage auswählen“ wird angezeigt, wählen Sie den Textkörper in den Vorlagen aus und klicken Sie dann oben auf „Auswählen“. rechte Ecke, um eine neue HTM-Datei zu erstellen. Wir benennen diese neue Seite in body2.htm um. Jetzt verwenden wir DW, um die Dateien body.htm und body2.htm zu öffnen und die Unterschiede zu vergleichen. In der oberen rechten Ecke der Seite body2.htm finden Sie die Worte „Template:body“. (Diese Seite wird aus der Vorlagendatei body.dwt generiert.) Gleichzeitig werden Sie überrascht sein, dass die Datei body2.htm nicht bearbeitet werden kann (body.htm kann bearbeitet werden). Dies liegt übrigens daran, dass der „bearbeitbare Bereich“ nicht in der Vorlagendatei body.dwt definiert ist, wodurch die generierten Seiten nicht bearbeitet werden können. Daher müssen wir der Vorlagendatei einen bearbeitbaren Bereich hinzufügen. Hier sind die Schritte zum Hinzufügen eines bearbeitbaren Bereichs:

1) Öffnen Sie die Vorlagendatei body.dwt. Wir hoffen, dass die mittlere Tabelle bearbeitet werden kann (d. h. A in Abbildung 1). Aber in der Datei body.dwt, nicht body.htm), also fügen Sie hier den bearbeitbaren Bereich hinzu.

2) Platzieren Sie den Mauszeiger in der Tabelle bei A, klicken Sie mit der rechten Maustaste und wählen Sie Neuer bearbeitbarer Bereich nennen Sie es die bearbeitbare Regionsmarkierung). Wir füllen Region01 aus und klicken auf OK, um dieses Fenster zu schließen und die Bearbeitung der aktuellen bearbeitbaren Regionsmarkierung abzuschließen. Zu diesem Zeitpunkt können Sie die Anzeige in der Tabelle sehen, wie in Abbildung 3 dargestellt.

Abbildung 3: Fenster „Neuer bearbeitbarer Bereich“.

Beachten Sie, dass es einen bearbeitbaren Bereich mit der Bezeichnung Region01 gibt.

Bisher haben wir einen bearbeitbaren Bereich definiert. Wenn es mehrere Bearbeitungsbereiche gibt, können wir dasselbe tun.

※Sie können auch einen neuen bearbeitbaren Bereich über „ÄndernàVorlagenàNeuer bearbeitbarer Bereich…“ erstellen. Wenn Sie den bearbeitbaren Bereich löschen möchten, können Sie „ÄndernàVorlagenàBearbeitbaren Bereich entfernen…“ verwenden und dann den Anweisungen folgen.
4. Generieren Sie Seiten mithilfe von Vorlagen

Tatsächlich haben wir bereits erwähnt, dass die Schritte zum Generieren von Seiten mithilfe von Vorlagen über DateiàNeu aus Vorlage erfolgen. Bitte beachten Sie die entsprechenden Schritte in Schritt drei. Jetzt verwenden wir die Vorlage, um eine Seite mit dem Namen body3.htm zu generieren. Zu diesem Zeitpunkt werden Sie feststellen, dass die Maus auf der Seite body3.htm mit Ausnahme des bearbeitbaren Bereichs Region01, der bearbeitet werden kann, an anderer Stelle eingeschränkt ist. In diesem bearbeitbaren Bereich fügen wir den Inhalt hinzu, den wir benötigen, zum Beispiel können wir nach Belieben einen Artikel schreiben. Auf diese Weise können wir Vorlagen verwenden, um Seiten entsprechend unseren Anforderungen zu generieren.

5. Ändern Sie den Inhalt der Vorlage und aktualisieren Sie die Site-Dateien

Öffnen Sie die Vorlagendatei body.dwt und ändern Sie die Bereiche, die wir ändern müssen. Wir können beispielsweise das Logobild ersetzen oder alle nicht bearbeitbaren Bereiche ändern oder sogar bearbeitbare Bereiche hinzufügen oder löschen usw.

Im Folgenden wird anhand der Änderung des Logos veranschaulicht, wie die Vorlage die Datei aktualisiert.

Wir ändern das Logobild in ein anderes Bild, das uns gefällt, und speichern die Datei body.dwt nach Abschluss. Zu diesem Zeitpunkt öffnet DW ein Fenster mit der Frage, ob die Datei aktualisiert werden muss, und DW aktualisiert automatisch alle Seiten Mit dieser Vorlage generiert, öffnet DW während des Updates das Update-Protokoll.

※Wenn „Nicht aktualisieren“ ausgewählt ist, behält DW die Vorlagendatei direkt bei und aktualisiert die Seite nicht vorübergehend. Wir können die Seite jedoch manuell aktualisieren. Wählen Sie einfach „Ändern→Vorlagen→Seiten aktualisieren…“.

Zu diesem Zeitpunkt öffnen wir jede mit body.dwt generierte Seite, z. B. body3.htm. Sie werden feststellen, dass sich das Logobild geändert hat.

Es ist nicht schwer, mit dieser Funktion das Problem der Site-Aktualisierung zu lösen. Dieser Artikel dient nur als Ausgangspunkt. Viele Funktionen müssen nicht erwähnt werden Probieren Sie mehr aus, damit Sie den Vorlagenstil von DW vollständig nutzen können.

In DW gibt es auch eine Funktion namens Bibliothek, die organisch mit Vorlagen kombiniert werden kann, wodurch Vorlagen leistungsfähiger werden. Wenn Leser interessiert sind, bin ich bereit, dieses Geschenk jedem anzubieten.