|
Webs mit einheitlichen Design |
|
In diesem Abschnitt wollen wir Techniken besprechen, die ein einheitliches Design für alle Seiten eines Webs ermöglichen. Neben einem einheitlichen Aussehen für alle Seiten gewährleisten diese Techniken auch, daß Änderungen im Design auf alle Seiten automatisch übernommen werden. So kann beispielsweise die Hintergrundfarbe aller Seiten eines Webs leicht geändert werden. Arbeiten mit VorlagenÄhnlich zu anderen Programmen des Office-Paketes kann man auch in Frontpage Vorlagen erstellen, die Basis für die Seiten eines Webs sind. Wenn eine neue Seite erstellt werden soll, kann über den Menüpunkt Datei/Neu die Vorlage ausgewählt werden. Die neu erstellte Seite enthält alle Inhalte wie Bilder, Formatierungen und Komponenten, die in der Formatvorlage definiert wurden. Auf diese Weise kann man sich auch unnötige Doppelarbeit ersparen. Um eine Vorlage zu erstellen, erstellt man zuerst eine neue Seite. In dieser Seite fügt man alle Elemente ein, die einheitlich im Web verwendet werden sollen. Insbesondere kann man die Position von Logos und Navigationsbereichen oder die Hintergrundfarbe festlegen. Verwendet man Navigationsleisten in gemeinsamen Bereichen, braucht man für keine Vorlage erstellen, denn in diesem Fall enthalten neue Seiten des Webs automatisch auch diese Bereiche. Hat man alle Elemente der Vorlagenseite eingestellt, wird die Seite als Vorlage gespeichert. Dazu wählt man im Menüpunkt Datei/Speichern unter. Als Dateityp muß man Frontpage-Vorlage auswählen. Beim Speichern der Vorlage soll auch ein Titel und eine Beschreibung für die Dokumentvorlage festgelegt werden. Ein ausdrucksvolle Beschreibung kann den Anwendern die Arbeit hier wesentlich erleichtern. Speichert man die Vorlage im aktuellen Web wird ein Ordner angelegt, der die Definition der Vorlage enthält. Nachdem die Vorlage gespeichert wurde, kann die Vorlage benutzt werden, wenn man über den Menüpunkt Datei/Neu eine neue Web-Seite erstellen möchte. Wird die Vorlage geändert, z.B. die Hintergrundfarbe der Vorlage ändert sich von Gelb auf Grün, werden diese Änderungen nicht auf die Seiten übernommen, die auf dieser Vorlage basieren. Diese Seiten unterhalten keinerlei Verknüpfung zu der Vorlage, auf der sie basieren. Da mit Designs und Cascading Style Sheets Instrumente zur Verfügung stehen, mit denen auch Formatierungen für viele Webseiten auch bei Änderungen konsistent gehalten werden können, lohnt der Einsatz von Vorlagen nur, wenn man dadurch Tipp-Arbeit sparen kann. Auch das erscheint fraglich, da viele dieser Aufgabenstellungen mit gemeinsamen Randbereichen effizienter und eleganter gelöst werden können. Arbeiten mit DesignsWir hatten im vorigen Abschnitt festgestellt, daß das Problem eines einheitlichen Aussehens für das gesamte Web mit Vorlagen nicht befriedigend zu lösen ist. Designs stellen einen Ansatz von MS Frontpage dar, dieses Problem zu lösen. Frontpage bietet hier eine Auswahl von vordefinierten Designs, die direkt für das eigene Web übernommen werden können. Ändert man das Design, werden Änderungen automatisch auf alle Seiten des Webs übernommen. In den Designs werden Formatierungen für alle Formatvorlagen festgelegt, z.B. Aufzählungszeichen, Schriftstil für Überschriften oder Text- und Hintergrundfarben. Um ein vordefiniertes Design zu übernehmen, wählt man den Menüpunkt Format/Design aus. Im erscheinenden Dialog kann man ein Design aus der Liste der Designs auswählen. Eine Vorschau der im Design definierten Elemente wird auch angezeigt. Bei der Auswahl des Designs kann man noch folgende Optionen einstellen:
Die Optionen Hintergrundbild und aktive Grafiken lassen die Größe der Dateien und die Anzahl der Grafikdateien erheblich ansteigen, denn für jede animierte Schaltfläche müssen zwei Bilder erzeugt werden. Dadurch wird die Ladezeit der Web-Seite verlangsamt. Soll das Design für das Web geändert werden, wählt man den Menüpunkt Format/Design erneut aus und wählt ein neues Design oder ändert die Einstellungen für das aktuelle Design. Die Änderungen werden automatisch für alle Seiten des Wes übernommen, die in der Navigationsansicht registriert sind. Zusammenfassend können folgende Vorteile für die Verwendung von Designs festgehalten werden:
Den Vorteilen stehen einige Einschränkungen entgegen:
Cascading Style SheetsStyle-Sheets sind eine Ergänzung zu HTML. Mit Style-Sheets kann man für HTML-Befehle Formateigenschaften definieren, die für alle Seiten eines Webs verwendet werden können. Änderungen diese Definition wirken sich auf alle Seiten des Webs unmittelbar aus. Allerdings können mit Style-Sheets Formatierungen festgelegt werden, die im HTML-Code nicht eingestellt werden können. Beispielsweise kann der linke Einzug eines Absatzes festgelegt werden. Neben Definitionen des Aussehens von Objekten in HTML-Seiten können Objekte auch pixelgenau positioniert werden. Die Definitionen von Styles können zentral vorgenommen werden. Dadurch wird der HTML-Code einfacher, übersichtlicher und schneller. Neuere Web-Browser unterstützten Cascading-Style-Sheets zum großen Teil. Allerdings sollte man die Einstellungen im einzelnen mit dem Browser testen, ehe man die Seiten veröffentlicht. Im schlimmsten Fall werden die Angaben einfach ignoriert. Dann sehen aufwendig gestylte Web-Seiten recht primitiv aus. Die Definition von Style-Sheets kann hierarchisch aufgebaut werden. In der folgenden Auflistung von Möglichkeiten zum Definieren von Styles wird im Konfliktfall die letztmögliche Definition verwendet, d.h. je näher die Definition des Styles zu dessen Verwendung steht, desto höher ist dessen Priorität.
Alle drei Möglichkeiten, Styles zu definieren können gemischt werden.
Wir werden uns im folgenden darauf beschränken, Styles zentral in einer
Datei zu definieren. Die Anweisungen zum definieren von Styles können genau so
zwischen den Tags Um Styles zu definieren, wird das folgende Schema verwendet: In einer Textdatei gibt man zuerst den Namen des Tags ein, dessen Aussehen definiert werden soll. Anschließend wird in geschweiften Klammern das Aussehen des Tags festgelegt:
Im Beispiel wird zuerst die Hintergrundfarbe für den Rumpf von Seiten und für
Datenzellen einer Tabelle festgelegt. Sollen verschiedenen Tags gleiche
Attribute zugewiesen werden, so kann man diese Attribute mit Komma getrennt
aufzählen. Anschließend wird für Tabellendefinitionen festgelegt, daß die
Rahmendicke 0 und der Zellabstand 1 Pixel betragen soll. Somit sind alle
Tabellen standardmäßig unsichtbar. Weiterhin wird die Hintergrundfarbe der
Tabellenüberschrift (Tag Die folgende Gegenüberstellung verdeutlicht, daß durch die Verwendung von Style-Sheets der HTML-Code wesentlich übersichtlicher und leichter verständlich wird:
|
| ||||||