Von Amber Mitchell

In diesem Artikel wird erläutert, wie Sie das Layout einer Webseite optimieren können, indem Sie die Seitenelemente analysieren und in Microsoft FrontPage anordnen.

Stellen Sie sich vor, Sie möchten ein Puzzle zusammensetzen, das jedoch keine Ähnlichkeit mit herkömmlichen Puzzles hat. Sie entscheiden, wie groß die einzelnen Teile sind, wie sie zusammenpassen und sogar wie das Endergebnis aussieht. Eine Website ist mit einem solchen Puzzle vergleichbar.

Es gibt eine Vielzahl von Herangehensweisen beim Erstellen des Layouts für eine Webseite. Dabei sind einige Möglichkeiten jedoch besser geeignet als andere. Mit Microsoft FrontPage, dem Tool zur Erstellung und Verwaltung von Websites, können Sie die Website Ihrer Schule, Ihre Intranetseiten oder ein beliebiges webbasiertes Tool entwerfen.

Die Puzzleteile

Für die meisten Seiten auf Ihrer Site ist eine einzelne Layoutvorlage ausreichend, möglicherweise mit Ausnahme der Startseite und von Seiten mit speziellem Inhalt. Das Layout-Puzzle besteht normalerweise aus fünf Hauptteilen. Diese Komponenten kommen so häufig vor, dass in FrontPage Funktionen zum Arbeiten mit den Teilen (gemeinsame Randbereiche, eingeschlossene Seiten und Hyperlinkleisten) sowie Tools zum Zusammensetzen der Teile (Tabellen und Frames) vorhanden sind.

Unten sehen Sie ein Beispiel für ein typisches Layout, das für viele Sites geeignet ist. Möglicherweise möchten Sie versuchen, Ihre Site kreativer und individueller zu gestalten, bedenken Sie dabei jedoch, dass Ihre Site in der Regel nur einen Teil der Sitzung eines Benutzers ausmacht. Wenn Sie keinen sehr wichtigen Grund für ein außergewöhnliches Layout haben, sind die Besucher Ihrer Site Ihnen sicherlich dankbar für eine konventionelle Gestaltung. (Hinweis: Gestalten Sie nicht das Layout, sondern stattdessen die Grafiken kreativ und individuell!)

Abbildung 1: Elemente eines typischen Websitelayouts

1. Sitekennung

Der Benutzer muss auf jeder Seite erkennen können, dass es sich um Ihre Site handelt. Die Startseite ist hierbei besonders wichtig, Sie können dort z. B. das Logo Ihrer Schule, Ihren Namen oder eine andere Grafik deutlicher hervorheben. Häufig kann die Sitekennung als Banner im oberen Seitenbereich eingefügt werden. Beachten Sie die Höhe dieses Bereichs. Wenn er zu groß ist, beginnt der eigentliche Inhalt zu weit unten auf der Seite.

2. Navigationsleiste

Mithilfe der Navigationsleiste können Besucher Inhalte leichter finden. Die Navigationsstruktur sollte daher ungefähr der Informationshierarchie der Site entsprechen. Im besten Fall haben Sie die Informationen logisch angeordnet, bevor Sie sich über die visuelle Darstellung Gedanken machen.

Wenn Sie die Navigationsstruktur festgelegt haben, können Sie nun die optimale Position dafür ermitteln. Im Grunde haben Sie die Auswahl zwischen einer Navigationsleiste am oberen Rand oder am seitlichen Rand oder auch beides.

Vorteile einer Navigationsleiste am oberen Rand:

• Leicht erkennbar
• Der Inhalt kann über die gesamte Breite des Bildschirms angezeigt werden
• Kann mit der Sitekennung kombiniert werden

Vorteile einer Navigationsleiste am Seitenrand:

• Unterstützung einer beliebigen Anzahl von Navigationselementen
• Längere Beschreibungen der Elemente möglich
• Integration von mehreren Navigationsebenen möglich, wenn die Besucher länger auf der Site navigieren

Bei umfangreichen Sites sind möglicherweise Navigationsleisten sowohl am oberen als auch am seitlichen Rand erforderlich. Bei der Site für einen Schulbezirk können z. B. die Hyperlinks für die einzelnen Schulen in einer Navigationsleiste oben und allgemeine Informationen an der Seite angezeigt werden.

3. Inhalt

Der Hauptinhaltsbereich (Seitentitel, Überschriften, Text und Bilder) enthält die Informationen, die die Besucher eigentlich suchen. Sie sollten daher diesem Bereich die angemessene Aufmerksamkeit widmen und nicht zunächst die anderen Bereiche gestalten und den dann noch verbleibenden Platz dem Inhalt zuweisen.

Zwei wichtige Aspekte im Hinblick auf den Inhalt sind Lesbarkeit und Flexibilität. Eine optimale Lesbarkeit erhalten Sie, wenn die einzelnen Spalten zwischen 100 und 600 Pixel breit sind. Den Besuchern fällt es in der Regel schwer, extrem kurze oder lange Zeilen zu lesen. Wenn die Größe des Hauptinhaltsbereichs zwischen 350 und 600 Pixel liegt, können unterschiedliche Vorlagenoptionen verwendet werden, z. B. Layouts mit einer, zwei oder drei Spalten.

4. Untergeordneter Inhalt

Bei kommerziellen Sites wird ein untergeordneter Inhaltsbereich häufig für Werbung verwendet. Auf Sites von Schulen kann ein solcher Bereich Ankündigungen, Neuigkeiten oder weiterführende Hyperlinks enthalten. Wenn Ihre Site viele Informationen umfasst, sollten Sie den Bereich nutzen, um mehr Informationen bereitzustellen. Wenn dies nicht erforderlich ist, können Sie den Platz für den eigentlichen Inhalt nutzen.

5. Informationen zum Inhalt

Zu den Informationen zum Inhalt gehören Copyrightinformationen, das Datum der letzten Aktualisierung, Hyperlinks zu Sicherheit und Datenschutz sowie Angaben zu der für den Inhalt verantwortlichen Person. Diese Informationen sind zwar erforderlich, aber unwichtig für die meisten Besucher. Daher bietet sich hier eine Fußzeile als Position an. Wählen Sie eine kleinere Schriftgröße, um diese Angaben von den anderen Informationen abzuheben.

Verknüpfen der Informationen durch Tabellen

Sie haben also das perfekte Layout für Ihre Site gefunden. Nun müssen Sie es in die Realität umsetzen. Die gängigste Methode zum Implementieren eines Webseitenlayouts sind Tabellen.

Webseitentabellen bestehen genau wie eine Kalkulationstabelle aus Zeilen, Spalten und einzelnen Zellen. Die Webseitentabellen haben jedoch häufig kein striktes Tabellenlayout, da einzelne Zellen sich über mehrere Zeilen oder Spalten erstrecken können. Die oberste Zeile in Abbildung 1 geht z. B. über zwei Spalten, und die linke Spalte reicht über zwei Zeilen hinweg. Dies kann zunächst kompliziert wirken, beim Experimentieren mit Tabellen in FrontPage werden Sie jedoch einen visuellen Eindruck davon gewinnen.

In FrontPage gibt es eine Reihe von Tools zum Erstellen und Bearbeiten von Tabellen. Erstellen Sie zunächst mithilfe der Zeichnungssymbolleiste ein Layout für die gesamte Seite, wie in Abbildung 1 dargestellt. Lassen Sie das vierte Feld weg, da hierfür eine eigene Tabelle besser geeignet ist.

So erstellen Sie mit der Zeichnungssymbolleiste ein Layout für die gesamte Seite

1. Klicken Sie im Menü Tabelle auf Tabelle zeichnen. Die Symbolleiste Tabellen wird geöffnet, und Tabelle zeichnen ist ausgewählt.
2. Zeichnen Sie auf der Seite den äußeren Rahmen der Tabelle, indem Sie den Mauszeiger von der oberen linken Ecke in die untere rechte Ecke ziehen.
3. Zeichnen Sie für die Zellen vertikale und horizontale Linien in der Tabelle.

So passen Sie die Eigenschaften der Tabelle an

1. Klicken Sie mit der rechten Maustaste in die Tabelle, und klicken Sie dann auf Tabelleneigenschaften.
2. Geben Sie die Breite der Tabelle als feste Anzahl von Pixeln oder als Prozentsatz der Breite des Browserfensters an.
3. Legen Sie die Anzahl der Pixel für den Text- und Zellenabstand fest, um die Abstände am Rand der Tabellenzellen anzugeben.
4. Legen Sie bei einer Tabelle, die das Layout einer ganzen Seite definiert, die Ränder auf 0 fest.

Im Folgenden finden Sie einige Tipps zum Verwenden von Tabellen:

• Stapeln Sie Tabellen.   Beim Laden einer Webseite werden die Tabellen in der Reihenfolge geladen, in der Sie im Code aufgeführt sind. Bei einer langen, komplexen Tabelle kann es einige Zeit dauern, bis der Inhalt angezeigt wird. Häufig ist es besser, eine Tabelle für ganze Seiten in Tabellen für den oberen, den mittleren und den unteren Bereich aufzuteilen. Besucher der Seite können dann z. B. den Namen und das Logo der Schule sehen, während der Inhalt noch geladen wird (und nicht nur eine leere Seite).
• Schachteln Sie Tabellen.   Tabellen können ineinander geschachtelt werden. Sie sollten diese Möglichkeit jedoch nicht zu häufig einsetzen, da sonst das Laden der Seite verzögert wird. Ein gutes Beispiel für eine geschachtelte Tabelle ist das vierte Feld in Abbildung 1.
• Lassen Sie einen leeren Bereich um Textspalten herum.   In vielen Fällen ist es ratsam, die Eigenschaften für Zellen- und Textabstand auf 0 festzulegen, damit zwischen den Puzzleteilen keine Lücken entstehen. Dennoch soll in der Regel um den Text ein Abstand eingefügt werden, damit er nicht direkt an andere Elemente angrenzt. Hierzu können Sie leere Spalten verwenden (siehe Abbildung 2), die Sie wie oben beschrieben als Zellen in der Tabelle zeichnen können.

Abbildung 2: Ein leerer Bereich (rot markiert) um den Text erhöht die Lesbarkeit

• Optimieren Sie die Ausrichtung.   Experimentieren Sie in jeder Tabellenzelle mit der Ausrichtung, um die gewünschten vertikalen Abstände zu erhalten. Im Allgemeinen sollten Sie in den Eigenschaften für die einzelnen Zellen die Ausrichtung am oberen Rand auswählen. Wenn sich der Inhalt zu weit oben befindet, können Sie manuell einen kleinen Abstand hinzufügen. Das Drücken der EINGABETASTE für einen neuen Absatz reicht hierfür häufig aus.

Frames für das Puzzle

Frames bieten eine weitere Möglichkeit zum Umsetzen des Layouts für eine Webseite. Sie haben jedoch einen recht schlechten Ruf. Sie können nur schwer als Lesezeichen gespeichert oder von Suchmaschinen indiziert werden und sind für die Besucher häufig verwirrend. Frames sind daher auf der Website für eine Schule eher ungeeignet.

Bei einigen Intranetsites und webbasierten Tools kann jedoch mit Frames die Navigation erleichtert werden. Angenommen, Sie möchten ein webbasiertes Tool zum Verwalten einer Datenbank mit Kontaktinformationen zu Mitarbeitern erstellen. Hier könnten Sie ein Frame für die Datenbankaktionen (Hinzufügen, Bearbeiten und Löschen von Mitarbeitern) verwenden und in einem anderen Frame die Informationen zu dem jeweiligen Mitarbeiter anzeigen. Der Frame für die Datenbankaktionen muss nur einmal geladen werden, wohingegen der Frame mit den Informationen nach jeder Aktion aktualisiert wird. Bei einer Tabelle hingegen müssten beide Abschnitte nach jedem Klicken erneut geladen werden.

Abschließende Bemerkung

Eine Webseite kann Ihnen wie ein Puzzle vorkommen – mit einem einfachen und konventionellen Layout können Sie den Besuchern jedoch helfen, die gesuchten Informationen zu finden.