OpenOffice Menü Navigation mit Tabellen erstellen
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 1. Textverarbeitungsprogramm > 2. Menü für die Navigation erstellen

2. Ein Menü für die Navigation in OpenOffice erstellen

Bis jetzt haben wir die erste Webseite erstellt für die Startseite. Will man nun eine Website haben, braucht man weitere Seiten. Um diese Aufzurufen, braucht man eine Menüleiste für die Links (Hyperlinks) zu den anderen Seiten.
Für die Menüleiste gibt es zwei Arten zur Auswahl:

  1. Horizontales Menü und
  2. Vertikales Menü

Wir werden beide Arten in unsere Seite einbauen.

Möglichkeit 1: Ein Menü mit Tabellen erstellen


A) Farbiges Menü ohne Grafiken

Jetzt soll oben ein horizontales Menü entstehen. Zuerst mit 3 Links, die wir dann auf 4 Links erweitern, dann ein vertikales Menü Links mit zuerst 2, das dann um 1 weiteren Link erweitert wird.
Als erstes fügen wir an der Stelle, an der wir das Menü haben wollen eine Tabelle ein tabelle-symbol. Zeilen wählen wir eine und Spalten drei, da wir 3 Links haben. Soll das Menü einen sichtbaren Rahmen haben, lassen wir das Umrandung drin, ansonsten nehmen wir es raus umrandung. Das ganze kann auch später geändert werden. In die Zellen tragen wir die Namen der Links ein, die wir brauchen. Per Maus können die Zellen auch vergrößert oder verkleinert werden, wenn man auf die Kanten geht.
Neben der bekannten horizontalen Ausrichtung der Schrift (linksbündig, zentriert…) kann der Text in Tabellen auch vertikal ausgerichtet werden vertikal-tabelle. Macht natürlich nur Sinn, wenn man vorher die Tabellenhöhe per Maus breiter gezogen wurde, als die Schrift hoch ist.
Den Zellen kann eine eigene Hintergrundfarbe gegeben werden, indem man auf Tabelleneigenschaften tabelleneigenschaften geht und im Reiter Hintergrund eine Farbe wählt.
Im Reiter Umrandung kann man den Rahmen raustellen, wenn als Stil – Keine – auswählt wird.
Jetzt fällt uns ein, dass wir einen weiteren Link benötigen, daher fügen wir eine weitere Spalte hinzu . Und tragen auch hier einen Linktitel mit ein.

Nicht jeder will, dass sein Menü über die ganze Seite geht und so die Links weit auseinander gezogen werden. In den Tabelleneigenschaften tabelleneigenschaften im ersten Reiter Tabelle kann dies geändert werden. Wird gewünscht, dass das Menü von Links aus die Seite zu 60 % überdeckt, stellt man bei Ausrichtung links ein. Bei Breite aktiviert man relativ und gibt statt der 100% nur 60% ein. tabelle-ausrichtung

Verlinkung der Seiten untereinander per Hyperlink

Aktueller Stand ist nun, dass wir unsere index.html Seite haben mit dem eben erstellten Menü mit dem Linktext drin. Im Browser betrachtet alles schön und gut, aber die Links sind noch nicht anklickbar.
Daher geht es nun an das Verlinken von weiteren Seiten per Hyperlink. Unsere index Datei speichern wir ersteinmal auf diesem Stand ab, sofern noch nicht geschehen. Nun brauchen wir weitere Seiten auf die wir verlinken können. Daher speichern wir die index Datei nun unter Beachtung der Regeln für Dateinamen unter neuen Namen für die Unterseiten ab. Für jeden Link eine neue Datei. Ist das passiert, markieren wir mit der Maustaste den ganzen Text für einen Link und rufen Hyperlink hyperlink auf. Wir wählen dann Dokument hyperlink-dokument aus und als Pfad für das Sprungziel rufen wir direkt (mit dem Ordner Symbol am Ende die Seite) die Seite auf, die verlinkt werden soll. Nicht vergessen “Übernehmen” zu klicken und dann auf “Schließen”. Das ganze wiederholen wir mit allen Links. Jetzt haben wir das Menü auf einer der Seiten fertig und wollen es auf allen Seiten haben. Daher speichern wir diese Seite nun auch für alle anderen Seiten mit “Speichern unter” ab. Rufen wir nun unsere Seite im Browser auf, so können wir nun auf allen Seiten durch klicken der Links im Menü zugreifen. Alle Seiten sehen noch gleich aus, jetzt kann der Inhalt für die anderen Seiten erstellt werden. Fertig ist die Website.

B) Menü aus/mit Grafiken

Nun das ganze als vertikales Menü mit Grafiken. Wir nehmen mal an, dass wir 4 weitere Links brauchen, die wir im vertikalen Menü unterbringen wollen. Dazu erstellen wir an der stelle wo das Menü sein soll, eine Tabelle mit 5 Zeilen und 2 Spalten, also immer eine Spalte und eine Zeile mehr, als wir für das vertikale Menü benötigen. ich wünsche mir auf der linken seite das Menü, so dass die Erklärung darauf hinausläuft, dass ein Menü auf der linken Seite entsteht.
Sollte wer das Menü rechts haben wollen, muss er das folgende seitenverkehrt machen.
Zuerst mit der Maus alle fünf Zeilen auf der rechten Seite markieren und verbindet sie (Symbol 1 im Bild –> zellen-verbinden).
Die gewünschten Grafiken für das Menü kopiert ihr nun in euren Ordner mit den ganzen erstellen Seiten. Der besseren Übersicht wegen sollte man dafür einen eigenen Ordner anlegen, den man den Regeln für Dateinamen entsprechend z.B. Bilder nennen kann. Jetzt können wir die Grafiken einfügen und klicken die Spalte an, in der der erste Menüpunkt liegen soll. Wir rufen Einfügen -> Aus Datei auf. Nun können wir unseren Bilder Ordner mit den Grafiken für das Menü aufrufen und einen Button für den ersten Punkt auswählen und einfügen. Das machen wir mit den anderen Feldern ebenfalls, das unterste Feld bleibt leer. Nun verbraucht unser Menü die Hälfte der ganzen Seite. Das ändern wir, indem wir mit der Maus die Mittellinie anklicken und nach links ziehen, soweit wie wir das ganze haben wollen. Am besten bis knapp an die Grafik, unseren Button. Die Höhe der Felder mit den Buttons ist viel zu groß. Man sollte nun meinen, man kann jetzt mit der Maus die Höhe ebenfalls verringern, aber das geht noch nicht. Es wird jetzt noch automatisch Platz für den Text gelassen. Wir müssen jetzt dafür sorgen, dass die Zelle und die Grafik keinen Platz für den Text unterhalb benötigt. Als erstes ändern wir das für die Zelle, daher klicken wir in die gewünschte Zelle, die geändert werden soll. Oben bei Tabelleninhalt  wählen wir nun Textkörper aus. Siehe da, die Höhe wird schon geringer. Jetzt müssen wir das ganze noch für den Button abändern. Hierfür müssen wir nur die Vorgabe machen, dass der Text nicht drunter, sondern rechts oder links vom Button stehen soll. Beides funktioniert, daher kann beides gewählt werden. Button markieren durch Klick mit der Maus und Umlauf links oder rechts umlauf-links-rechts anklicken. Diese beiden Symbole befinden sich in etwa in der Mitte der Symbolleiste (nicht die anderen). Schon passt sich die Tabellenzelle dem Bild an und kann auch mit der Maus nun verändert werden.
In die rechte Tabelle können wir nun unseren Inhalt reinkopieren, bzw. erstellen.

Der Hintergrund der Tabellenzellen kann zusätzlich wie unter A beschrieben mit Farbe hinterlegt werden. Verknüpfen der Buttons mit Seiten funktioniert genauso wie oben beschrieben. Dazu musst nur statt dem Text der Button markiert werden.

C) Einen Header einbinden

Für gewöhnlich haben Webseiten einen Header, auch als Kopfzeile oder Kopfleiste bekannt. Als erstes erstellen wir an der richtigen Stelle eine Tabelle mit 1×1 Feldern. Jetzt fügen wir den Hintergrund ein, den wir vorher schon erstellt haben und in unseren Bilder Ordner kopiert haben.
Wir rufen dafür die Tabelleneigenschaften tabelleneigenschaftenauf und wählen den Reiter Hintergrund. Diesmal wählen wir bei “Als” nicht Farbe aus, sondern Grafik und wählen die Datei aus. Nun markiert man Verknüpfen. Ist es eine Grafik die über die ganze Breite gehen soll, nimmt man Position und wählt eine Anzeige Position in der oberen Linie per Klick aus. Ansonsten wird kein Bild angezeigt.
Will man den Hintergrund mit einer kleinen Grafik füllen, die sich immer wiederholt, so werden die anderen Optionen genutzt.

Alternativ kann man auch darauf verzichten die Grafik in den Bilder Ordner zu kopieren und beim auswählen der Grafik Verknüpfung abwählen. Dann wird die Grafik automatisch in den Ordner gespeichert, wo auch die HTML Seite liegt.

Möglichkeit 2: Ein Frame Menü erstellen

Eine weitere Möglichkeit ein Menü zu erstellen ist mit Frames zu arbeiten. Das hat den Vorteil, dass man nicht alle Seiten einzeln abändern und speichern muss, wenn man z.B. einen weiteren Menüpunkt hinzufügt, so wie wir das unter A gemacht haben.

Suchmaschinen werden Frames nicht mehr unterstützen. Auch im neuem HTML5 gibt es keine Unterstützung mehr. Daher ist das eine sehr blöde Idee, noch Seiten mit Frames bauen zu wollen.

Weiter mit 3. Vor – und Nachteile beim Webseiten mit Textverarbeitungsprogrammen erstellen