Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > NOF-Navigation und CSS-Navigation

NOF-Navigation & ihre Einstellungen - Teil 2 - (optische Einstellungen)

(1/2) > >>

nettesekel:
Natürlich haben wir auch einige Möglichkeiten, auf das Aussehen unserer Navigationsleiste einzuwirken.

Über den zweiten Reiter der Navigationsleisten-Eigenschaften können wir einige wenige Einstellungen zum Aussehen der Navigationsleiste vornehmen.
Als da wären, ein Rahmen in definierbarer Stärke, ein definierbarer Abstand zwischen den Schaltflächen und eine Farbwahl zum Füllen des eingestellten Abstandes.




Unter folgendem Link könnt ihr euch ein Beispiel ansehen, wie diese Einstell- ungen in der Realität aussehen.

http://demos.nof-community.de/Navigation/Schaltflaechenabstand/index.html

nettesekel:
Die wesentlichen Einstellmöglichkeiten für das Design unserer Navigationsleiste müssen wir jedoch aus der Designansicht heraus vornehmen. Je nach gewünschtem Änderungsumfang sollte man auch über ein Grafikprogramm verfügen und dieses ansatzweise bedienen können.

Wenn ihr die Designanasicht aufruft findet ihr standardmäßig zwei grafische Buttonsets vor, die Sets Primary und Secondary.

Warum zwei Sets? Weil so die Möglichkeit besteht den Schaltflächen ein unterschiedliches Aussehen zu geben. So können z.B. die Standardschaltflächen optisch anders aussehen als die des Klappmenüs.

Jedes Buttonset besteht aus 4 Buttons.
Der 1. Button (A) steht für die Standardansicht der Schaltfläche. So wie dieser Button aussieht so sehen die nicht aktiven Navigationsschaltflächen bei Seitenaufruf aus.

Der 2. Button (B) steht für die Rolloveransicht des Standardbuttons. So wie dieser Button aussieht, so wird ein nichtaktiber Button aussehen, wenn man ihn mit dem Mauszeiger "berührt".

Der 3. Button (C) steht für den Hervorgehobenen Button. So wie dieser Button aussieht, so wird später der Button der Seite dargestellt werden, auf der sich der Seitenbesucher gerade befindet.

Der 4. Button (D) steht für die Rolloveransicht des hervorgehobenen Buttons. Er gibt vor, wie sich der aktive Button verändern soll, wenn man ihn mit dem Mauszeiger berührt.

nettesekel:
Ihr müsst also hier nun für jeden der vier Buttos separat die entsprechenden Einstellungen vornehmen. Dazu wählt ihr den jeweiligen Button mit einem einfachen Klick aus, so dass er einen schwarzen Rahmen hat. Nun könnt ihr über die Eigenschaftenpalette die gewünschten Formatierungen vornehmen.

Folgende Formatierungen sind möglich:

* Schriftart
* Schriftgröße
* Schriftdesign (fett, kursiv...)
* Schriftfarbe
* horizontale Text-Ausichtung
* eventueller horizontaler Text-Einzug
* vertikale Text-Ausrichtung
* eventueller vertikaler Text-Einzug
* Schriftdrehung gradweise, wenn bei 10 das Häkchen fehlt
Schriftdrehung in 45°-Schritten, wenn bei 10 das Häkchen gesetzt ist
* rechter Winkel ja/nein
* Schriftausrichtung bei mehrzeiliger Schrift
* Durchsuchen-Button zur Auswahl der zu verwendenden Button-Grafiken


Über den Durchsuchen-Button ist es möglich, den einzelnen Buttons auch andere Grafiken zuzuweisen. Man kann also durchaus auch seine eigene, individuelle Navigationsleiste erstellen.

Sollten z.B. die Buttons eurer Navigationsleiste mal zu kurz sein, wäre neben der Änderung der Schriftgröße auch das Austauschen der Button-Grafiken gegen entsprechend verlängerte Button-Grafiken eine einfache Lösung für dieses Problem.

nettesekel:
Noch schnell 1-2 Sätze zum Anlegen von Buttonsets. Wer mehrere Navigationsleisten in seinem Projekt nutzt, kann durchaus den Bedarf haben, mehr als diese zwei Standard-Buttonsets anzulegen. Die kann man ganz einfach mit einem Rechtsklick und der entsprechenden Auswahl im Kontextmenü verwirklichen. (siehe 3 Pfeile im Screenshot)

Sollen die Buttonsets z.B. die selbe Schrifteinstellung verwenden wie ein der bereits vorhandenen Sets, so kann man mit einem Rechtsklick in die Beschriftung dieses Buttonsets im Kontextmenü die Auswahl „Duplizieren” treffen und spart sich so jede Menge Klicks für das Einstellen der Schrift jedes einzelnen Buttons.

nettesekel:
Zuweisen kann man die verschiedenen Buttonsets dann aus der Arbeitsansicht heraus. Dazu klickt man die Navigationsleiste an um die Navi-Eigenschaften aufzurufen, aktiviert den zweiten Reiter der Eigenschaftenpalette und klickt dort den Button „Erweitert” an.

Es öffnet sich ein Fenster, in welchem wir unsere Navigationsstruktur sehen können. Wir wählen mit einem einfachen Klick die gewünschte Navigationsebene aus und wählen rechts über das Pulldownmenü, den zu verwendenden Schaltflächensatz aus.

Navigation

[0] Themen-Index

[#] Nächste Seite