Frontpage: Tabellen und Design

Tabellen kann man auf einer Webseite entweder als solche darstellen zum Beispiel für eine Auflistung, wie eine Telefonliste oder ähnliches, zum anderen verwenden Webdesigner Tabellen sehr gerne zum Layouten der einzelnen Elemente wie Navigationsbuttons, Grafiken und Texte. Denn durch die Verwendung einer Tabelle als Layout-Hilfe lassen sich die Einzelelemente exakt ausrichten.

Soll eine Tabelle nun als Layout-Hilfsmittel dienen und deshalb der Rahmen im Browser nicht als Linie angezeigt werden, wählt man einfach für die Rahmenstärke die "0" aus. Zu Tabellen als Layout-Hilfsmittel noch ein wichtiger Hinweis: Problematisch können so erstellte Seiten für Menschen mit Sehbehinderungen sein, weil diese sich die Internetseiten meistens mit einem Bildschirmlesegerät vorlesen oder mit einem Zusatzgerät in Brailleschrift anzeigen lassen und diese Geräte geben die Tabelle nicht immer in der logischen Reihenfolge wieder. Wenn man Internetseiten gestaltet und zur Zielgruppe auch Menschen mit Sehbehinderungen gehören, dann sollte man das Seitenlayout mit Hilfe der Positionierung erstellen. Nähere Informationen zur Positionierung findet man in der FrontPage-Hilfe.
Auch die Verschachtelung einzelner Tabellen ineinander wird durch FrontPage ermöglicht. So ist es beispielsweise möglich eine unsichtbare Tabelle (Rahmenstärke 0) als Layout-Vorlage zu verwenden und innerhalb dieser Tabelle eine sichtbare Tabelle (ab Rahmenstärke 1) für eine Auflistung darzustellen.
Da Tabellen, wie beschrieben, für verschiedene Zwecke eingesetzt werden wird hier zuerst die Verwendung einer einfachen HTML-Tabelle beschrieben, die man auf der Website als solche mit Rahmen anzeigen möchte.
Um eine einfache HTML-Tabelle einzufügen wählt man in der Menüleiste Tabelle -> Einfügen -> Tabelle aus. Daraufhin öffnet sich ein Dialogfenster in welchem man zahlreiche Tabelleneigenschaften angeben kann: Anzahl der Spalten und Zeilen, Ausrichtung, Zellauffüllung, Rahmenbreite und -farben oder Auswahl eines Bildes welches als Hintergrund der Tabelle angezeigt werden soll. Hat man eine Tabelle eingefügt und möchte noch einmal etwas ändern, dann gelangt man im Entwurfsmodus, wenn man mit dem Mauszeiger auf die Tabelle zeigt und einmal mit der rechten Maustaste klickt und anschließend Tabelleneigenschaften auswählt wieder in das Dialogfenster Tabelleneigenschaften. Eine andere Möglichkeit zu den Tabelleneigenschaften zu gelangen ist: Auf eine beliebige Stelle innerhalb der Tabelle zu klicken und danach oben in der Leiste Direktauswahl von Tags neben den Pfeil der Schaltfläche <table> klicken und anschließend Tageigenschaften auswählen.

Darstellung: Tag-Eigenschaften

Die Angabe der Tabellenbreite und -höhe verwendet man wenn man der Tabelle eine bestimmte Größe auf der HTML-Seite zuzuweisen möchte. Lässt man diese Angaben weg, dann bestimmt der Tabelleninhalt die Größe der Tabelle. Gibt man keine Tabellenbreite an, dann wird die Breite der Tabelle durch die Zeile mit dem breitesten Inhalt festgelegt. Der Zellabstand gibt den Wert für den Abstand zwischen den einzelnen Zellen einer Tabelle an. Mit dem Textabstand legt man Wert fest für den Abstand zwischen dem Text innerhalb der Zelle und dem Zellrand. Bei diesen Werten sollte man einfach mal ein bisschen experimentieren um herauszufinden was einem persönlich am besten zusagt.

Darstellung: Tabelleneigenschaften

Templates erstellen mit Layouttabellen

In FrontPage 2003 gibt es das praktische Feature zur Erstellung von Layouttabellen. Diese Tabellen bieten die gleichen Strukturen und verwenden die gleichen Regeln wie einfache HTML-Tabellen. Gleichzeitig sind Layouttabellen aber auch ein besonderer Typ von HTML-Tabellen. Layouttabellen erleichtern das Erstellen von Webseiten, weil man darin die verschiedenen Elemente, die auf einer Webseite angezeigt werden sollen, detailgenau platzieren kann. Um eine Layouttabelle einzufügen wählt man in der Entwurfsansicht oben in der Menüleiste unter Tabelle -> Layouttabellen und -zellen aus. Daraufhin öffnet sich auf der rechten Seite ein entsprechendes Fenster. Das Fenster Tabelle -> Layouttabellen und -zellen bietet einige Vorlagen für Tabellenlayouts an. Des Weiteren kann man darin auch die Zellformatierung vornehmen, Höhen- und Breitenangaben für die Tabelle entweder in Pixel oder Prozent eintragen und die Ausrichtung links, zentriert oder rechts der Tabelle angeben.

Darstellung: Layouttabellen

Eine eingefügte und markierte Layouttabelle zeigt FrontPage im Entwurfsmodus mit einer grünen Umrandung und mit blauen Zellenbegrenzungen. An dem grünen Rahmen befinden sich meherere Register mit den Angaben für die jeweilige Höhe beziehungsweise Breite einer Zeile oder Spalte. Klickt man mit der linken Maustaste neben die Tabellelinien so erscheint die Tabelle mit gepunkteten Linien. Um wieder in die Ansicht mit den farbigen Linien zurück zu kommen fährt man mit dem Mauszeiger soweit an den Tabellenrand bis die grüne Umrandung angezeigt wird, dann genügt ein Klick und es erscheint wieder die Ansicht mit den Zahlen und den blauen Zellabgrenzungen.
Nun gibt es zwar sehr viele Vorlagen, aber nicht immer passen die Größen der Templates für die eigene HTML-Seite. Zum Beispiel weil der Platz für das Logo zu klein oder zu groß ist oder ähnliches. Das Ändern der einzelnen Spalten und Zeilen kann man auf verschiedene Arten vornehmen.
Zeigt man mit der Maus auf einen der blauen Rechtecke und ändert sich dann der Pfeil der Maus in ein schwarzes umgekipptes "T" oder in einen schwarzen Winkel, dann kann man die Tabelle mit gedrückter Maustaste vergrößern oder verkleinern. Hat man die gewünschte Größe aufgezogen oder zusammen geschoben lässt man die Maustaste einfach wieder los. Spalten oder Zeilengrößen kann man leicht ändern, wenn man mit der Maus auf eine der grünen Rauten zeigt, dabei verwandelt sich das Mauszeigersymbol entweder in einen Oben-Unten-Doppelpfeil o oder einen Links-Rechts-Doppelpfeiln. Wieder kann man mit gedrückter Maustaste die Größe der Spalten oder Zeilen ändern. Manchmal ist es aber auch erforderlich die genaue Größe einer Spalte und oder Zeile einzugeben. In den Registern sind jeweils neben der blauen Ziffer grüne Dropdownpfleile. Klickt man auf einen dieser Pfeile öffnet sich ein kleines Auswahlmenü. Mit der Auswahl Spaltenbreite ändern öffnet sich ein ein Eingabefenster in dem man die absoluten Angaben für die Spaltenbreite eintragen kann. Gleiches gilt für die Angabe der Zeilenhöhe.

Darstellung: Verwendung der Layouttabelle

Die Eigenschaften einer einzelnen Zelle lassen sehr schön sich in dem Fenster Zellformatierung einstellen. Das Aufgabenfenster Zellformatierung öffnet man entweder dadurch dass man im Aufgabenfenster Tabelle und Layout die Verknüpfung Zellformatierung auswählt oder noch schneller, indem man auf die Zelle der Layouttabelle doppelklickt, welche man bearbeiten möchte. In dem Fenster Zellformatierung kann man die Eigenschaften und Rahmenstärke einstellen. Eventuell soll der Rahmen einer Zelle nur auf der linken und unteren Seite angezeigt werden. Auch das kann man hier angeben. Den Kopf- und Fußteil einer einzelnen Zelle kann man hier mit verschiedenen Farben gestalten. Alle vier Ecken einer Zelle kann man einzeln abrunden und einfärben. Ein Schatten macht eine einzelne Zelle oder die ganze Tabelle plastischer. Mit den verschiedenen Zelleigenschaften kann man das Layout sehr individuell gestalten. Hier sind der Kreativität kaum Grenzen gesetzt.

Hintergrundinformationen zu Layouttabellen in FrontPage

Layouttabellen sind HTML-Tabellen, das heißt sie basieren auf dem HTML-Code für Tabellen, der mit dem Tag <table> beginnt und mit dem Tag </table> endet. Jede Layoutzelle wird durch die Tabellendaten-Tags <td> und </td> begrenzt. In dieser Form wird der Tabellen-Code schon seit vielen Jahren so standardmäßig programmiert und von den einzelnen Browsern verstanden. Anders ist bei den Layouttabellen die in Microsoft FrontPage 2003 erstellt werden nur, dass das Programm noch folgende Kommentarzeile hinzufügt:
 Die Anzeige im Browser ändert sich durch die Kommentarzeile nicht, sie dient nur dafür, dass Microsoft FrontPage 2003 erkennt, das es sich bei der nachfolgenden Tabelle um eine Layouttabelle handelt. Wer jetzt in den Quellcode schaut wird erkennen das auch in den einzelnen Zellen verschiedene Kommentare wie beispielsweise  oder  und ähnliches zu finden sind. Auch hier gilt selbstverständlich wie bei allen Kommentaren, dass diese im Browser nicht angezeigt werden, sondern in diesem Fall lediglich zur Verwendung des Programms Microsoft FrontPage 2003 verwendet werden.

Designs verwenden und anpassen

Um eine eigene Tabellenvorlage zu zeichnen sollte man zuerst Lineal und Gitternetz, die beide nur in der Entwurfsansicht angezeigt werden, einstellen. Über Ansicht -> Lineal und Gitternetz lässt sich diese Ansicht ein- und auch wieder ausblenden. Sehr praktisch ist die Funktion mit der man einen Entwurf, ein so genanntes Durchpausbild hinter die Seite legen kann um dann die einzelnen Elemente nachzuarbeiten. Ein Durchpausbild wird als halbtransparentes Bild nur im Hintergrund der Entwurfsansicht angezeigt und nicht im Browser. Hat man zu Beginn seiner Arbeit den Layoutentwurf mit einem Bildbearbeitungsprogramm erstellt, dann lässt sich dieser mit der Funktion Durchpausbild leicht als Vorlage hinter die HTML-Seite legen, um diese nachzuarbeiten. Für ein Durchpausbild sollte die Vorlage in einem dieser Formate vorhanden sein: GIF, JPEG, PNG, WMF oder BMP. Im Entwurfsmodus wählt man im Menü Ansicht -> Bild durchpausen -> Konfigurieren. Es öffnet sich das Dialogfenster Bild durchpausen dort definiert man über den Button Durchsuchen die vorbereitete Vorlage aus und kann im unteren Teil des Dialogfensters noch die Transparenzstärke einstellen. Den Abstand des Durchpausbildes kann man ebenfalls in diesem Fenster anpassen. Dies ist beispielsweise notwendig wenn die Vorlage inklusive der Browserleiste erstellt wurde. Über die X- und Y-Abstandswerte kann die Vorlage so angepasst werden, dass genau mit der linken oberen Ecke der Entwurfsansicht übereinstimmt. Mit dem Button Übernehmen kann man überprüfen, ob die Abstände und Transparenzen passen, ohne das man schon auf OK drücken muss und sich das Dialogfenster Bild durchpausen schon schließt. Wenn das Durchpausbild exakt eingefügt wurde kann man mit dem erstellen und dem befüllen der Layouttabelle beginnen. Wie eine Layouttabelle eingefügt wird ist im Kapitel "Templates erstellen mit Layouttabellen" beschrieben.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Formulare

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Frontpage: Tabellen und Design

Templates erstellen mit Layouttabellen

Hintergrundinformationen zu Layouttabellen in FrontPage

Designs verwenden und anpassen

Über uns

Cookie-Einstellungen