Zurück ] Inhalt ] Weiter ]

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 Designs

Wir 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:

  • lebendige Farben: legt das Farbschema für das Design fest
  • aktive Grafiken: verwendet Animationen für Linien, Banner und Schaltflächen. Als animierte Schaltflächen werden Hoverschaltflächen verwendet, die jedoch auf Java-Skript-Code basieren.
  • Hintergrundbild: verwendet eine Grafik für den Hintergrund.

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:

  • Designs stellen eine einfache Möglichkeit dar, aufwendige Layouts für ein Web zu erstellen.
  • Die Verwaltung des Aussehens wird vollständig von Frontpage übernommen. Änderungen am Design wirken sich auf alle Seiten des Webs aus.
  • Da Frontpage nur Grafiken, Java-Skript und Cascading Style Sheets für die Umsetzung der Designs verwendet, sind Design weitestgehend kompatibel zu den meisten modernen Browsern.
  • Designs können als Ausgangspunkt für individuellere Layouts verwendet werden.

Den Vorteilen stehen einige Einschränkungen entgegen:

  • Frontpage verwaltet nur Elemente, die von Frontpage generiert werden, z.B. Navigationsleisten, Seitenbanner, Aufzählungen, Formatierungen. Erweitert man die Navigationsleiste um eigene Schaltflächen, muß man selbst die notwendigen Grafiken erstellen und verwalten.
  • Wegen der Verwendung von Grafiken werden Web-Seiten langsamer geladen. Eine Webseite kann schnell 20 kleine Grafiken enthalten. Da insbesondere Navigationsschaltflächen auf mehreren Seiten verwendet werden, entschärft sich das Problem teilweise.
  • Die Verwendung vieler Grafiken belastet den Account beträchtlich. Wenn man sehr beschränkte Ressourcen hat, sollte man u.U. mehr Inhalt für besseres Aussehen eintauschen. 
  • Obwohl man zusätzliche Designs aus dem Internet bekommen kann, ist man im wesentlichen auf die Vorgaben der vordefinierten Designs beschränkt.

Cascading Style Sheets

Style-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.

  • Definition von Styles in einer eigenen Datei: für die zentrale Verwaltung von Styles eines Webs wird man eine Textdatei mit der Dateierweiterung *.css erstellen. in dieser Datei werden die Definitionen aufgezählt. Dateien, die diese Styles verwenden wollen verwenden im Kopf der HTML-Datei die folgende Anweisungsfolge:
    <head>
      ...
      <link rel="stylesheet" type="text/css" href="myStyle.css">
      ...
    </head>
  • Definitition von Styles im Kopf der HTML-Datei: Man kann im Kopfbereich der HTML-Datei Styles definieren, die nur in dieser Seite verwendet werden sollen. Dazu fügt man die folgenden Anweisungen im Kopf der HTML-Datei ein:
    <head>
      <style type="text/css">
      <!--
        ... Style-Sheet-Angaben ...
      //-->
      </style>
    </head>
    Damit Browser, die Cascading-Style-Sheets nicht unterstützen, die Formatdefinitionen irrtümlicherweise als Text anzeigen, sollten die eigentliche Formatdefinitionen in HTML-Kommentare eingebunden werden.
  • Style-Definitionen im Rumpf der HTML-Datei: Man kann in einzelnen Tags im HTML-Code Styles einmalig definieren und verwenden. Im folgenden Beispiel werden für verschiedene Tags Styles eingesetzt:
    <div style="background-color:#FFFFE0">
      <h1 style="color:red; font-size:36pt;">
          Überschrift 1. Ordnung</h1>
      <p style="margin-left:1.5cm;">Ein Textabsatz</p>
    </div>

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 <style> und </style> am Anfang der HTML-Datei verwendet werden. Außerdem müssen wir uns auf wenige Beispiele beschränken, da die Möglichkeiten für Formatdefinitionen unüberschaubar sind.

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:
/* myStyle.css */
body,td      { background-color: #FFFFCC }
table        { border-width: 0; padding: 1 }
th           { background-color: #FFFF55 }
td.code      { background-color: #FFFF77 }
td.cell      { background-color: #FFFF99 }
p,ul,ol,blockquote,table,img { margin-left:15px; }

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 <th>) festgelegt.  Die beiden folgenden Anweisungen legen ebenfalls die Hintergrundfarbe von Datenzellen in Tabellen fest (Tag <td>). Allerdings wird für Datenzellen zwei Unterklassen definiert - code und cell. Für Zellen von Tabellen kann nun durch die Angabe des Tags <td class="code"> einer Zelle zu der Unterklasse Code zugehörig definiert werden. Somit können Datenzellen von Tabellen nun 3 unterschiedliche Hintergrundfarben zugewiesen werden: die Hintergrundfarbe der Webseite und die Hintergrundfarben für die Unterklassen cell und code. In der letzten Zeile im oben angegebenen Code wird die Einrückung des linken Randes für verschiedene Tags auf 15 Pixel festgelegt.

Die folgende Gegenüberstellung verdeutlicht, daß durch die Verwendung von Style-Sheets der HTML-Code wesentlich übersichtlicher und leichter verständlich wird:
Mit Style Sheets Mit Style Sheets
<html>
<head>
<title>Mit Style</title>
<style>
  body,td {
    background-color: #FFFFCC }
  table   {
    border-width: 0; padding: 1 }
  td.cell {
    background-color: #FFFF99 }
  th      {
    background-color: #FFFF55 }
</style>
</head>
<body>
<h1>Mit Style-Sheets</h1>
  <table width="100%">
    <tr>
      <th width="50%">
          Überschrift 1</th>
      <th width="50%">
          Überschrift 2</th>
    </tr>
    <tr>
      <td width="50%" class="cell">
          Inhalt 1</td>
      <td width="50%" class="cell">
          Inhalt 2</td>
    </tr>
  </table>
</body>
</html>

Seite anzeigen

<html>
<head>
<title>Ohne Style</title>
</head>
<body bgcolor="#FFFFCC">
<h1>Ohne Style-Sheets</h1>
  <table width="100%"
         border="0"
         cellpadding="1">
    <tr>
      <th width="50%"
          bgcolor="#FFFF55">
          Überschrift 1</th>
      <th width="50%"
          bgcolor="#FFFF55">
          Überschrift 2</th>
    </tr>
    <tr>
      <td width="50%" bgcolor="#FFFF99">
          Inhalt 1</td>
      <td width="50%" bgcolor="#FFFF99">
          Inhalt 2</td>
    </tr>
  </table>
</body>
</html>

Seite anzeigen

Der Code beider HTML-Seiten erzeugen gleich aussehende Seiten. Bei Verwendung von Styles wird der Kopf-Bereich aufgebläht. Diese Definitionen wären sonst in einer externen Datei gespeichert. Der Rumpf ist bei Verwendung von Style-Sheets wesentlich kürzer und übersichtlicher. Insbesondere werden Formatierungsanweisungen nicht ständig wiederholt. Dadurch ist der Code auch leichter zu ändern.

 


Skript - MS Frontpage
[ Top Zurück ] Inhalt ] Weiter ] Norman May