Eine zweite Navigation & ein Top-Link ohne Anker

Im Fußbereich fehlt noch die Navigation für die übrigen drei Seiten. Um diese anzulegen aktivieren wir ein weiteres Mal das Werkzeug für die Schaltflächen-Navigationsleiste und ziehen auch dieses Mal ein senkrechtes Rechteck auf. Es ensteht eine weitere Navigationsleiste.

Auch diese stellen wir über die EP auf „Benutzerdefiniert” um. Wir wählen wieder im linken Teil des Fensters die benötigten Seiten aus und übertragen sie in den rechten Teil des Fensters. Die Seite Gästebuch ziehen wir über die Seite Impressum, wie wir es bei der ersten Navigationsleiste auch gemacht haben.

In der Eigenschaftenpalette stellen wir die Anzeige wieder auf „Alle Seiten” und die Orientation auf „Horizontal”.
Nun ist eine horizontale Navigationsleiste für die restlichen drei Seiten erstellt. Allerdings passen die Schaltflächen nicht zum schwarzen Footer.

Deshalb wechseln wir in der EP zum Reiter „Stil” und betätigen dort wieder den Button „Erweitert”. Links im Fenster markieren wir  jeweils unsere Seiten und rechts wählen wir den gewünschten Schaltflächensatz aus. Für die Seiten Kontakt und Impressum wählt Ihr das „Button Set 1”, für die letzte Schaltfläche Gästebuch wählt Ihr das „Button Set 2”. Die Änderung wird mit „OK” bestätigt und unsere Navigationsleiste ist jetzt schwarz.

Jetzt muss die Navigationsleiste im Footer platziert werden. Da wir dort aber nicht nur die Navigation, sondern auch einen Top-Link und die wichtigsten Kontaktdaten platzieren wollen, reicht uns die eine Tabellenzelle der Footer-Tabelle nicht aus. Wir arbeiten also auch dieses Mal mit einer „Tabelle in Tabelle Konstruktion”. Ihr legt, wie bereits erklärt, eine neue Tabelle an und gebt dieser die gleichen Maße wie Eurer Footer-Tabelle. Text- und Zellenabstand, sowie Rahmen werden wieder auf „0” gesetzt. Diese Tabelle bekommt jedoch zwei Spalten und zwei Zeilen.

Die beiden Spalten der untersten Zeile verbinden wir jedoch gleich wieder. Hierzu markieren wir mit gedrückter Hochstelltaste beide Zellen und klicken auf dem letzten Reiter der EP das Symbol zum Zellen verbinden an.

Per Drag & Drop befördern wir die neue Tabelle in die Footer-Tabelle und die schwarze Navigation in die linke Spalte der neuen Tabelle.

Jetzt schließen wir erstmal wieder unser auseinander geschobenes Layout. Das kann man einerseits mit den Schiebereglern tun, aber ich würde Euch gern auch noch eine andere Möglichkeit hierzu zeigen.
Mit einem einfachen Klick ins Layout oder mit der Taste F9 rufen wir die Layout-Eigenschaften auf. Bei Höhe geben wir einen Wert von 1 px ein und bestätigen diese Eingabe mit der Entertaste.

Es erscheint eine Fehlermeldung, welche darauf hinweist, dass das Einstellen dieser Höhe aufgrund zu großer Inhalte nicht möglich ist. Man bietet uns jedoch freundlicher Weise an, die kleinstmögliche Höhe einzustellen. Mehr wollen wir ja gar nicht. Kurz gesagt, ein zweites „Enter” und alles ist gut.

Unser Layout ist zwar wieder schön geschlossen, aber die untere Navi hängt noch ziemlich unglücklich in ihrer Zelle rum. Sie muss gescheit platziert werden. Hierfür legen wir eine neue Formatvorlage mit möglichst griffigem Namen an. Über den Reiter „Rahmen” legen wir Textabstände fest; nämlich Unten und Links jeweils 30 px.

Wir markieren die Zelle, in welcher die Navi liegt und stellen die vertikale Ausrichtung über die EP auf „Unten” ein.


 

Im nächsten Schritt weisen wir der Zelle die eben angelegte CSS-Klasse zu und siehe da, unsere Navi sitzt da, wo wir sie haben wollen.

Bei langen Seiten mit viel Inhalt ist es für den User manchmal mühsam, vom Ende der Seite wieder hoch zur Navigation zu scrollen. Ein Top-Link erleichtert das ungemein.
Wir fügen die hierfür erstellte Grafik ein. Wir klicken auf das Symbol zum Bild einfügen und anschließend in die rechte Zelle der zweiten Footer-Tabelle.

Im sich öffnenden Fenster navigieren wir zu unserer Grafik und wählen diese aus. Nach Bestätigung über den Button „Öffnen” schließt sich das Fenster und die Grafik wird eingefügt.

Auch die Grafik muss erst richtig platziert werden. Hierzu stellen wir zunächst die Ausrichtung der Zelleninhalte über die EP  auf Vertikal: Unten und Horizontal: Rechts. Die Grafik rutscht nun ganz unten rechts in die Ecke und wird mit Hilfe einer weiteren CSS-Klasse dazu gebracht, ihre exakte Position einzunehmen.

Wir legen also erneut eine CSS-Klasse an und definieren auch hier wieder über den Reiter „Rahmen” die gewünschten Textabstände.

Wie gewohnt weisen wir der Zelle die angelegte Formatvorlage zu und die Grafik ist fertig ausgerichtet.

Damit die Grafik auch ihrer Beschriftung gerecht wird, müssen wir sie noch mit einem Link bestücken. Dazu markieren wir sie und klicken auf der EP auf den Button „Link”.

Es öffnet sich ein Fenster und wir wählen bei Linktyp über das Pulldown-Menü „Externer Link “ aus.

Im nächsten Schritt wählen wir im Pulldown-Menü neben Neuer Link: (ohne) aus und geben im Eingabefeld daneben ein # Rautezeichen ein. Wir klicken auf „Speichern” und danach auf „Link” und unsere Grafik ist verlinkt. Bei einem Klick auf diesen Link werden Seitenbesucher künftig in null Komma nix nach oben an den Seitenanfang befördert.






Und ein weiterer Abschnitt unserer Arbeit ist abgeschlossen, doch es geht noch weiter.