DWT-Vorlagen

Seit Frontpage 2003 gibt es eine ganz neue Möglichkeit, eine Webseite zentral zu managen. War früher die Arbeit mit gemeinsamen Randbereichen und später der Aufbau mit Tabellen und "Include"-Dateien erforderlich, so können mit Frontpage 2003 eine oder mehrere Vorlagen erstellt und an die Seiten verbunden werden. Dies ist ein großer Schritt in Richtung der Trennung von Layout und Inhalte.

Die Arbeit beginnt man daher zuerst mal bei dem Entwurf einer Seite und der Definition der später variablen Teile. Anhand der Vorlage lassen sich auch wunderbar die Formate des StyleSheets aufzeigen:

Zusätzlich definieren Sie über die Option "Format - dynamische Webvorlage - Bearbeitbare Bereiche verwalten" die Teile, die später vom Anwender oder ihnen gefüllt werden. Ich hab derer vier Bereiche:

  • Der Titel
    Ansonsten würde eine Änderung der Vorlage alle Titel aller vorhandenen Seiten überschreiben.
  • Breadcrumb
    Hier schreibt später ein Skript die Navigation hinein. Damit funktioniert dies auch ohne JavaScript auf einem Client
  • Menu
    Auch das Menü erstelle ich mit einem Script automatisch und verhindere so, dass Frontpage diesen Text überschreibt.
  • Content
    Da steht dann die eigentliche Information, die ich mühsam von Hand schreibe.

Um diese Bereiche herum gestalten Sie dann ihre Webseite. Die Bereiche werden im Quelltext als Kommentar eingefügt. Hier als Muster den Titel:

Das "BeginEditable" und "EndEditable" zeigt Frontpage später an, welche Bestandteile der Seite bei einer Änderung der Vorlage übernommen werden müssen.

Sie erstellen später dann einfach eine neue Seite basierend auf der Vorlage oder nutzen eine bestehende Seite, auf der nur der reine Content steht und binden diese an die Vorlage. Frontpage sorgt dafür, dass das Layout auf allen Seiten "gleich" ist. Bei der Bearbeitung der der eigentlichen Webseite sorgt Frontpage sogar dafür dass der vorgegebene Code der DWT-Vorlage nicht geändert werden kann. Sie können nur noch die Stellen editieren, die in der Vorlage als "editierbar" gekennzeichnet sind.

DWT und DIV

Wenn Sie nun aber ihre Webseite mit Vorlagen verwalten und auf der Vorlage einen oder mehrere Bereiche als "editierbar" gekennzeichnet haben, dann ist es vielleicht eine gute Idee, eben diesem Block auch mittels DIV-Tag eine eigene ID zu verpassen. Das könnte im Source dann so aussehen:

<div id="content"><!-- #BeginEditable "Content" -->
<h1>Headline</h1>
<p>Content
<!-- #EndEditable --></div>

Damit können Sie dann auch über das StyleSheet jedem Block ein eigenes Format zuweisen ohne das Layout an andere Stelle zu gefährden. Ich selbst nutze diese auch, d.h. für das Menü, den Content etc. gibt es auch eine eigene DIV-ID und passende Formate im StyleSheet.

DWT und FPExt

Eine Sache sollten Sie aber noch beachten: Diese Funktion können Sie nur mit Frontpage 2003 und den Windows Sharepoint Services (WSS) verwenden oder ein "Diskweb" nutzen. Wenn ihr Webserver nur Frontpage2002 Erweiterungen hat, dann wird Frontpage bei einer Änderung der Vorlage nur die Seiten aktualisieren, die sie gerade geöffnet haben. Die Windows Sharepoint Services sind aktuell nur mit Windows 2003 und IIS6 verfügbar und nicht mit den früheren Office Server Extensions oder Sharepoint Team Services (STS) zu verwechseln.

Da ich selbst natürlich auch keinen IIS6 auf meinem XP-Notebook laufen habe, öffne ich meine Webseite nicht mehr über den IIS mit Frontpage Extensions, sondern einfach direkt über C:\inetpub\wwwroot. Wenn ich die Seiten dann auf den Server veröffentliche, dann sorgt Frontpage schon, das das Layout und der Content richtig zusammengefügt sind. Vielen Dank Microsoft für diese geniale Funktion der DWT-Vorlagen, die vermutlich viel zu selten bekannt sind.

Wenn Sie heute schon Seiten mit Content und Layout haben, dann sollten Sie überlegen, ob Wie mit einem Skript den Content vorher frei stellen, so dass Sie die Seite mit der Vorlage problemlos verbinden können. Frontpage fragt sie dann, in welches Feld der "Body" der bisherigen Seite eingefügt wird. Ich habe mir dazu ein VBScript gebaut, welches anhand bestimmte Merkmale (z.B. Content beginnt bei <h1> und endet vor der nächsten Zelle der Tabelle) die Inhalte kennzeichnet bzw. frei stellt.

Manchmal kann es trotzdem passieren, dass Sie eine Datei oder Vorlage z.B. von jemandem bearbeiten lassen und einfach so in das Verzeichnis ihres Webs einkopieren. Frontpage erkennt diese Änderung dann nicht. Sie müssen dann die Überarbeitung aller Seiten manuell anstoßen:

Ein "Hyperlinks neu berechnen" ist nicht ausreichend.

DWT und META-Tags

Auch die META-Tags im Header einer Webseite können natürlich Bestandteil einer DWT-Vorlage sein. Bei mir sind Sie dies auch, damit alle Seiten die gleichen META-Tags besitzen. Folgende Tags sind dabei aktiv:

Die META-Tags bewirken, dass Suchmaschienen die Schlüsselworte in ihren Index aufnehmen, steuern, wie oft diese wieder kommen sollen und schalten das nervige "Smartbrowsing" im Webbrowser ab. Früher hatte ich hierüber auch das Caching von Proxies (<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> und <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> gesteuert, was aber letztlich zu mehr Traffic geführt hat. Zwar sehe ich nun in den Protokolldateien nur noch die Zugriffe, die nicht direkt von einem Proxy-Cache beantwortet wurden, aber das ist für mich kein Problem.  Schließlich werte ich die Daten nur grob aus und muss keine Werbeclicks etc. ermitteln.

Weitere Links