Das Anlegen von Sitestruktur & Navigation

Bevor wir uns um die Erstellung der Seitennavigation kümmern, ist auch hier wieder etwas Vorarbeit nötig. Der obere schwarze Bogen, welcher unsere Navigationsleiste oberhalb einfassen soll, fehlt noch.
Deshalb kümmern wir uns nun um eine passende Breite unserer Tabellenspalten. Im Moment haben wir eine Tabelle von 990 px Breite mit zwei Spalten. Also jede Spalte dürfte eine Breite von 450 px haben. Unsere Schaltflächengrafiken haben eine Breite von je 171 px, ein wenig Abstand links und rechts sollte auch noch sein. Also planen wir für unsere linke Tabellenspalte 240 px ein.

Nun könnte man die linke Spalte markieren und ihr über die EP eine Breite von 240 px zuweisen. Wer einmal versucht hat, eine Tabellenspalte so auf ein gewünschtes Maß zu bringen, wird gemerkt haben, dass er mindestens zehn Versuche braucht, um seinen Wunsch in die Tat umzusetzen.
Warum nimmt die Spalte nicht das vorgegebene Maß an? Ganz einfach. Wenn ich in NOF eine neue Tabelle mit vorgegebener Breite und Spaltenzahl aufziehe, berechnet NOF automatisch wie breit die einzelnen Spalten sein müssen und legt diese Breite in px fest.
In unserem Falle sind es zwei Spalten a 495 px. Geben wir nun für die linke Spalte einen Wert von 240 px ein und bestätigen diese Eingabe, dann versucht NOF zunächst diese Eingabe umzusetzen. Nun meldet sich jedoch die rechte Zelle zu Wort und sagt: „Halt! So geht das nicht! Ich soll 495 px breit sein! Die Tabelle soll 990 px breit sein! Und du willst nur 240 px breit sein? Das ist falsch!”
So kindisch es sich anhören mag, genauso spielt sich das Ganze ab. Die Eingabe die wir hier versuchen zu tätigen, ergibt rechnerisch einfach keinen Sinn.

Wir gehen die Sache also anders an. Zunächst markieren wir die linke Spalte und stellen in der EP  die Spaltenbreite auf „automatisch”. Somit ist für die linke Spalte keine feste Breite mehr vorgegeben und sie kann sich problemlos unseren folgenden Eingaben anpassen.

Jetzt wählen wir die linke Spalte der Tabelle aus und geben ihr über die EP eine Breite von 240 px. Ihr werdet sehen, dass sich die Breite der rechten Spalte ganz von allein auf 750 px ändert. Allerdings steht sie noch immer auf automatisch.

Damit sich die Breite dieser Spalte jedoch nicht nach belieben ändern kann, setzen wir diese Einstellung wieder auf px zurück.

Am oberen Rand der linken Spalte soll unser Bogen erscheinen. Da dieser Spalte jedoch bereits ein Hintergrund zugewiesen ist, können wir das auf diesem Wege nicht angehen. Es muss eine neue Tabelle aufgezogen werden. Hierzu klicken wir auf das Tabellen-Icon und einmal in die linke Tabellenspalte. Die Tabelle erhält eine Spalte, eine Zeile und eine Breite von 240 px, also dieselbe Breite wie die Spalte in welcher sie platziert wird. Die Höhe dieser Tabelle stellen wir gleich auf automatisch, damit sie sich später reibungslos der Höhe unserer Navigation anpassen kann. Text- und Zellenabstand, sowie den Rahmen der Tabelle stellen wir auf „0”.

Wir markieren nochmals die linke Tabellenspalte und stellen in der EP über den Reiter „Spalte” die vertikale Ausrichtung auf „oben”.

Wir benötigen jetzt eine weitere Formatvorlage und erstellen diese auf dem bereits bekannten Weg. Als Gedankenstütze und zum Abgucken der vorzunehmenden Einstellungen nutzt Ihr bitte die nächsten zwei Screenshots.


 

Wir müssen die angelegte Formatvorlage nur noch der Tabellenzeile unserer neu angelegten Tabelle zuweisen. Auch hier zur Erinnerung und zum Festigen nochmal ein Screenshot.

Wir wechseln in die Baumansicht. Dort markieren wir die bislang einzige Seite mit einem einfachen Klick. Hat das Seitensymbol einen blauen Rahmen erhalten, so ist die Seite markiert. Das Kontextmenü hilft uns mangels geeigneter Optionen an dieser Stelle nicht weiter, deshalb nutzen wir das obere Menü. Dort klicken wir auf „Bearbeiten” und danach im Pulldownmenü auf „Kopieren”.

Jetzt haben wir die fertig gestaltete Seite mit allen vorhandenen Inhalten in unserer Zwischenablage.

Die Home-Seite bleibt markiert und wir fügen die Kopie nun in unser Projekt ein. Hierzu wählen wir über das obere Menü „Bearbeiten” und „Einfügen” oder wir fügen die Seiten mit Hilfe der Tastenkombination STRG+V ein. Insgesamt müssen acht neue Seiten eingefügt werden.

All unsere Seiten heißen jetzt Home. Das kann selbstverständlich nicht so bleiben. Selbst für die Startseite ist diese Bezeichnung nicht empfehlenswert, weil der Begriff „Home” einer Suchmaschine keinerlei Auskunft über den Inhalt der Seite liefert. Mit einem Klick in das Beschriftungsfeld, wird die Schrift blau hinterlegt und kann bearbeitet werden. Nacheinander vergebt Ihr für jede der Seiten einen griffigen Seitennamen. Wenn das erledigt ist haben wir unsere Seitenstruktur angelegt und können endlich unsere Hauptnavigation einbauen.

Zunächst betätigen wir den im Screenshot gekennzeichneten Schieber und vergrößern unser Layout nach unten hin.
Ich erkläre Euch kurz, warum ich das tue. Wenn man in NOF eine neue Navigationsleiste aufzieht und dabei nicht geschickt ein senkrechtes oder waagerechtes Rechteck aufzieht, so öffnet NOF eine horizontale Navigationsleiste. Diese Navigationsleiste beinhaltet automatisch die bereits angelegten Seiten. Bei neun Seiten und einer Schaltflächenbreite von je 171 px, macht das bei einer horizontalen Navigationsleiste eine Gesamtlänge 1539 px. Würden wir die Navigationsleiste also sofort in unser Tabellenlayout einfügen und dabei vielleicht ein klein wenig ungeschickt vorgehen, wäre unser mühsam angelegtes Layout erstmal gesprengt. Das ist sicherlich reparabel, aber unnötig und für einen Anfänger oftmals eine Überforderung.

Um diese Art von Panne zu vermeiden, fügen wir unsere Navigationsleiste also zunächst in das blanke Layout ein. Hierzu klicken wir einmal auf des Icon für die Schaltflächen-Navigationsleiste und ziehen dann in dem aufgeschobenen grauen Bereich ein senkrechtes Rechteck auf.

Im folgenden Screen seht ihr ganz schwach die gestrichelte Linie, welche beim Aufziehen der Navigation zu sehen ist.

Sobald wir die Maustaste loslassen, erscheint unsere Navigationsleiste.

Da ich mir ungern von einem Programm vorschreiben lasse, wie meine Navigationsleiste aussehen soll, stelle ich die NOF-eigene Navigation immer auf „Benutzerdefiniert” um. Nicht erschrecken, denn unsere bereits vorhandenen Schaltflächen verschwinden nun wieder und statt dessen erscheint ein grauer Rahmen mit einem gelb unterlegten Fragezeichen. Das ist völlig normal. Wir betätigen jetzt den Button „Bearbeiten”.

Es öffnet sich ein Fenster, welches in zwei Bereiche aufgeteilt ist. Im linken Bereich sehen wir unsere Seitenstruktur mit allen vorhandenen Seiten. Der rechte Teil stellt den Inhalt unserer Navigationsleiste dar. Wir stellen uns also unsere Navigation von Hand zusammen. Hierzu kann man links eine Seite markieren und mit dem Button „Hinzufügen” in das rechte Fenster übertragen. Den selben Effekt erzielt man mit einem Doppelklick auf eine Seite  im linken Teil des Fensters.

Wir fügen unserer Navigationsleiste also die Seiten FlowerPower, Schnittblumen, Grünpflanzen, Gestecke, Services und Galerie hinzu. Die Seite Galerie ziehen wir im rechten Fester  einmal auf den Ordner Services, als wollten wir in Windows eine Datei in einen Ordner verschieben. Es sollte dann wie im unteren Screenscot aussehen. Ihr bestätigt noch mit „OK”. Für die anderen drei Seiten legen wir später eine zweite Navigationsleiste an.

Nachdem wir bestätigt haben, erscheint unsere benutzerdefinierte Navigationsleiste. Damit auch wirklich alle von uns ausgewählten Seiten angezeigt werden, nehmen wir über die EP noch die hierfür erforderliche Einstellung vor.
Anzeige: Alle Seiten

Per Drag & Drop befördern wir die Navigationsleiste in die dafür vorbereitete Tabelle. Soweit schon ganz gut, aber die Navigation klebt am linken Rand und verdeckt den Schatten unserer Layout-Tabelle. Das kann so nicht bleiben.

Wir öffnen unsere Formatvorlagen. Dazu geht man vor, als wolle man eine neue Formatvorlage erstellen. Links im Fenster sind alle bereits angelegten Klassen aufgelistet. Wir markieren dort mit einem Klick die Vorlage, welche wir für den schwarzen Bogen angelegt haben. Im unteren Menü des Fensters klicken wir auf bearbeiten und wechseln in der großen EP sofort auf den Reiter „Rahmen”. Im unteren Bereich dieses Reiters befinden sich Einstellmöglichkeiten für den Textabstand. Hier geben wir für Oben 65 px, für Unten 15 px und für Links 45 px ein und bestätigen unsere Änderungen mit „OK”.

Kaum eingegeben, rutscht unsere Navigationsleiste an die gewünschte Stelle. Jetzt haben wir es uns verdient, mal einen Blick zu werfen. Um zu sehen, wie unsere Website später im Browser aussehen wird, publizieren wir die Seite einmal lokal.

Das sieht doch schon ganz nett aus. Was mich allerdings noch stört, ist die gepunktete Linie der letzten Schaltfläche, weil die Navigationsleiste auch ohne eine solche Linie beginnt.

Hier legen wir doch noch einmal Hand an. Wir markieren mit einem Klick die Navigationsleiste, aktivieren auf der EP den Reiter „Stil” und betätigen dort den Button „Erweitert”.

Im sich öffnenden Fenster markiert Ihr links im Ordnerbaum die Seite Galerie und weist ihr rechts über das Pulldownmenü Schaltflächensatz „Secondary” zu. Das ist der Schaltflächensatz mit Blümchen aber ohne gepunktete Linien.

Nach erneuter lokaler Publizierung sehen wir, ob unsere Einstellungen erfolgreich waren.



Prima, aber noch nicht fertig. Wer mag, mir nach.