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:
- Horizontales Menü und
- 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 
.
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
.
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 
.
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 
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 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. 
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 
auf.
Wir wählen dann 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.
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 –> 
).
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
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 einbindenFü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 auf
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