Startseite

NOF-Community

NOF-Academy

Googlesuche

Impressum

 

Eine CSS-Navigation in NetObjects Fusion erstellen - Tutorial/Anleitung

Ab und an raten wir unseren Usern zu einer CSS-Navigation. Ein einfacher Grund hierfür kann sein, dass sich die js-Dateien der NOF-eigenen Navigationsleiste mit anderen eingefügten Komponenten „beißen”. Wie dem auch sei, Gründe für eine CSS-Navi gib es verschiedene, nur eine gescheite Anleitung zur Erstellung einer solchen Navi, die fehlt bislang. Das soll sich hiermit ändern.
Lasst Euch bitte nicht von der Vielzahl der Screenshots schrecken, ich habe wie in all meinen Tutorials größten Wert darauf gelegt, die Anleitung so zu schreiben, dass auch ein absoluter Anfänger eine Chance hat, mir Ihr zu einem guten Ergebnis zu gelangen.
Legen wir los!

Je nach gewohnter Arbeitsweise könnt Ihr entscheiden, ob Ihr Eure CSS-Navigation mittels Tabelle oder Textfeld aufbauen wollt. Beides ist gleichermaßen möglich. Die Tabellennutzer ziehen eine neue Tabelle auf.
Mit einem Klick auf das Tabellenicon und einem Klick an die gewünschte Stelle auf der Arbeitsfläche öffnet sich ein Fenster für die Voreinstellungen. Hier richtet Ihr nun eine Tabelle mit einer Zeile ein, die Anzahl der Spalten richtet sich nach der Anzahl der gewünschten Schaltflächen. Höhe und Breite der Tabelle stellt Ihr auf „Automatisch”.

1

In meinem Beispiel hier habe ich mich für 5 Spalten entschieden. Wenn die Tabelle eingefügt ist, stellt Ihr zunächst über die Eigenschaftenpalette den Tabellenrahmen auf „0”.

2

Die Textfeldnutzer fügen statt der Tabelle ein neues Textfeld an der gewünschten Stelle ein. Hierzu wird einmal das Textfeldicon angeklickt und danach wird an der gewünschten Stelle mit gedrückter Mustaste ein Textfeld in der gewünschten Breite aufgezogen.

Hierbei kommt es nicht auf Maßarbeit an, man kann das Textfeld auch noch nachträglich breiter auseinander ziehen und wieder zusammen schieben.

3

Im nächsten Schritt setzen wir die Links zu den Seiten, die in unserer Navi verlinkt werden sollen. Hierzu machen wir einen Doppelklick in die erste Zelle oder in das Textfeld und klicken im Anschluss auf den Button „Link” auf der Eigenschaftenpalette.
Es öffnet sich ein Fenster in welchem ein gelber Ordnerbaum Eurer Seitenstruktur zu sehen ist. Ihr wählt hier nun mit einem Klick die erste Seite aus, die in Eure Navigation aufgenommen werden soll und wenn diese blau hinterlegt ist klickt Ihr am unteren Rand des Fensters auf die Schaltfläche „Link”. Ihr könnt die gewählte Seite im Ordnerbaum auch doppelklicken.

4

Als Resultat dieser Aktion seht Ihr in der ersten Tabellenzelle den ersten Link. Lasst euch bitte nicht davon irritieren, dass die Tabellenhöhe etwas aus dem Ruder läuft und der Link etwas verstümmelt wirkt, das ändern wir in einem der nächsten Schritte ab.

5

So setzt Ihr das Ganze nun fort, bis in jeder Tabellenzelle der gewünschte Link zu sehen ist.

6

Nun markiert Ihr mit einem einfachen Klick in die erste Spalte. Sie muss einen inneren schwarzen Rand haben und der Cursor darf nicht blinken. Über die Eigenschaftenpalette stellt Ihr die Spaltenbreite nun auf „automatisch”.

7

So geht Ihr nun Spalte für Spalte vor, bis die Spaltenbreite aller Spalten auf „automatisch” steht. Eure Tabelle sollte dann in etwa wie im folgenden Screenshot aussehen.

8

Im Anschluss markiert Ihr nun alle Spalten. Dazu klickt ihr einmal in die erste Spalten haltet die Hochstell-Taste gedrückt und klickt dann in die letzte Spalte. Alle Zellen sollten nun markiert sein, sprich einen inneren schwarzen Rand haben. Auf der Eigenschaftenpalette sind nun die Zeileneigenschaften aufgerufen und Ihr stellt über das Pulldownmenü die Zeilenhöhe ebenfalls auf „automatisch”.

9

Wie im folgenden Screenshot zu sehen ist, hat die Tabelle nun wieder eine ganz normale Form eingenommen.

10

Die Textfeld-Nutzer fügen ebenso Ihre Links in Ihr Textfeld ein.  Hierzu macht Ihr einen Doppelklick in das Textfeld und klickt im Anschluss auf den Button „Link” auf der Eigenschaftenpalette.
Es öffnet sich ein Fenster in welchem ein gelber Ordnerbaum Eurer Seitenstruktur zu sehen ist. Ihr wählt hier nun mit einem Klick die erste Seite aus, die in Eure Navigation aufgenommen werden soll und wenn diese blau hinterlegt ist klickt Ihr am unteren Rand des Fensters auf die Schaltfläche „Link”. Ihr könnt die gewählte Seite im Ordnerbaum auch doppelklicken.

11

So fügt Ihr nacheinander alle Links in das Textfeld ein, die in Eure Navigationsliste aufgenommen werden sollen. Ihr könnt die Links lückenlos einfügen, es braucht kein Leerzeichen zwischen den einzelnen Links.

12

Nun legt Ihr die erste Formatvorlage oder auch CSS-Klasse an. Hierzu klickt Ihr in der oberen Menüleiste auf „Text” und im Klappmenü auf „Formatvorlagen verwalten”. Es öffnet sich ein Fenster in welchem Ihr unten links den Button „Neu” anklickt.
Es öffnet sich ein weiteres kleines Fenster. Hier aktiviert Ihr die Punkte „Benutzerdefinierte Formatvorlage erstellen” und „Site-übergreifend”. Im vorhandenen Eingabefeld vergebt Ihr einen Namen für Eure Formatvorlage und bestätigt die Eingabe mit einem Klick auf den Button „OK”.

13

Standardmäßig ist der Reiter „Zeichen” aktiviert und hier nehmt Ihr nun auch gleich die ersten Einstellungen vor. In meinem Beispiel habe ich mich für die Schriftart „Verdana” entschieden, das Schriftdesign belasse ich auf „Automatisch”, man kann hier aber auch durchaus „kursiv” oder „fett” auswählen. Außerdem kann ich hier die Schriftgröße und -farbe festlegen, welche ich auf 12px und weiß gestellt habe. Über das Pulldownmenü „Groß-/Kleinschreibung” habe ich „Großbuchstaben” ausgewählt und zum guten Schluss habe ich unter „Effekte” das Häkchen bei „Automatisch” entfernt, was bewirkt, dass der Link ohne Unterstreichung angezeigt wird.

14

Nun wechselt Ihr zum Reiter Absatz. Unter „rechter Rand” tragt ihr einen Wert von 4 oder 5 Pixel ein. Diese Einstellung hat zur Folge, dass die einzelnen Navigationsschaltflächen einen Abstand zueinander einhalten und nicht direkt aneinander kleben.

15

Im Anschluss wechselt Ihr zum Reiter „Rahmen”. Ich habe mich entschieden meiner Schaltfläche einen dezenten Rahmen zu geben. Also aktiviere ich den Punkt „Rahmen” und lege eine Rahmenfarbe fest. Da meine Schaltfläche die Farbe „orange” bekommen soll, habe ich für die Rahmenfarbe einen blassen Orangeton gewählt. So wirkt der Rahmen nicht wie ein Rand, sondern gibt der Schaltfläche eher den Effekt dass sie optisch leicht hervorgehoben wirkt.
Außerdem legt Ihr an dieser Stelle einen Textabstand fest. In meinem Beispiel wird ober- und unterhalb des Textes die Schaltfläche je 8px hoch sein und links und rechts vom Linktext wird sie einen Überhang von je 15px haben.

16

Nachdem der Reiter Rahmen abgearbeitet ist, wechselt Ihr zum Reiter „Hintergrund”. Hier gibt es nicht viel zu tun, da wir in diesem Beispiel nur mit einer Hintergrundfarbe arbeiten. Und diese legen wir an dieser Stelle nun fest. Ich habe mich, wie schon erwähnt für ein kräftiges Orange entschieden.

17

Und damit sind wir auch schon beim letzen Reiter der Eigenschaftenpalette angelangt, dem Reiter „Benutzerdefiniert”.
Hier legen wir nun fest, dass unser Link nicht nur ein Link ist, sondern eine Schaltfläche. Sprich, nicht nur der Text wird als Link angesehen, sondern auch der Bereich den wir um den Link herum definiert haben. Nämlich oben und unten je 8 und links und rechts je 15px. Und das geht wie folgt.
Ihr klickt einmal die Schaltfläche „Neu”. Danach gebt Ihr in das Feld „Name”

diplay

ein und in das Feld „Wert”

block

 Danach schließt Ihr den gesamten Vorgang mit einem Klick auf den OK-Button unten rechts am Fensterrand ab.

18

Als nächstes weisen wir den eingefügten Links nun die angelegte CSS-Klasse zu. Dazu doppelklickt Ihr einmal vor den ersten Link um ihn dann zu markieren. Wenn das erledigt ist, aktiviert Ihr auf der Eigenschaftenpalette den Reiter mit dem Globus, sucht im Pulldownmenü nach dem Namen Eurer angelegten Formatvorlage und wählt diesen mit einem einfachen Klick aus. Diesen Vorgang wiederholt Ihr nun für jeden einzelnen Link, bis allen Links die CSS-Klasse zugewiesen wurde. Bei den Tabellennutzern kann es passieren, dass nun die Tabelle nochmals aus der Form gerät. Sollte dies der Fall sein, dann markiert wie vorhin schon einmal, eine der betroffenen Spalten und stellt im Pulldownmenü auf der Eigenschaftenpalette die Spaltenbreite nochmals auf „Automatisch”. Auch dann, wenn hier schon automatisch angezeigt wird. In aller Regel korrigieren sich alle anderen Tabellenspalten nun von selbst.

Die Textfeldnutzer müssen beim markieren der einzelnen Links ein wenig darauf achten, dass sie immer nur einen Link erwischen.

19

Nun könnt Ihr mit einem Klick auf den Button „Site publizieren” das erste Mal lokal publizieren und Euer bisheriges Werk in Augenschein nehmen. Die Tabellennutzer sollten, sofern Ihre Links immer nur aus einem einzigen Wort bestehen nun schon recht zufrieden sein. Wer allerdings einen Zusammengesetzten Link aus mehreren Wörtern oder einer Wort-Zahl Kombination hat und sich somit ein Leerzeichen in seinem Link befindet, dem wird sich ein ähnliches Bild bieten wie mir hier.
Von den Textfeldnutzern ganz zu schweigen. Aber nein, Ihr habt nichts falsch gemacht, wenn Eure Navi so aussieht wie im folgenden Screenshot.

Beide Probleme werden wir in den nächsten zwei Schritten beheben.

21

Zuerst das Problem mit dem Umbruch im Link. Besonders bei Links wie „Über uns” tritt dieses Problem in Kombination mit Tabellen gern auf. Markiert den Betroffenen Link und klickt auf der Eigenschaftenpalette den Button „Link”.

Im sich öffnenden Fenster aktivieren Nutzer der älteren NOF-Versionen den Reiter „Vor dem Link” und geben dort folgenden Codeschnipsel ein

<nobr>

Im Anschluss aktiviert Ihr den Reiter „Nach dem Link” und gebt diesen Codeschnipsel ein.

</nobr>

Die Eingabe bestätigt Ihr mit einem Klick auf den OK-Button, gefolgt von einem Klick auf den Button „Link”.
Sofern nötig, muss dieser Vorgang für jeden betroffenen Link wiederholt werden.

22

Hier nochmal eine Ansicht für Nutzer der neueren NOF-Versionen. Das Fenster zum einfügen der Codeschnipsel sieht hier deutlich anders aus.

22a

Nun zu dem Problem der Textfeldnutzer. Damit die Navigationsleiste der Textfeldnutzer das selbe Aussehen bekommt, wie die der Tabellennutzer, müssen die Textfeldnutzer ihrer Formatvorlage noch eine kleine Formatierung hinzufügen. Ihr geht also nochmals auf Text >> Formatvorlagen verwalten, sucht in der Auflistung links nach Eurer Formatvorlage und markiert diese mit einem einfachen Klick. Ein Klick auf den Button „Bearbeiten” öffnet erneut die große Eigenschaftenpalette, auf welcher Ihr bitte den Reiter „Benutzerdefiniert” aktiviert. Hier klickt Ihr nun wieder auf „Neu” und gebt im Anschluss im Feld Name:

float

ein und im Feld Wert:

left

Mit einem Klick auf den Button „OK”, gefolgt von einem Klick auf den Button „Schließen” ist der Vorgang abgeschlossen.

23

Nach erneuter lokaler Publizierung sollten sowohl die Tabellen- als auch die Textfeldnutzer zufrieden sein.

24

Auf den ersten Blick sieht unsere CSS-Navigation schon ganz nett aus, aber sie hat noch keinen Rollover-Effekt. Um den kümmern wir uns nun im nächsten Schritt. Um einen solchen Effekt zu erzeugen, benötigen wir eine weitere CSS-Klasse.
Hierzu klickt Ihr erneut auf Text >> Formatvorlagen verwalten, aktiviert wieder die Punkte „Benutzerdefinierte Formatvorlage erstellen” und „Site-übergreifend” und vergebt im vorhandenen Eingabefeld einen Namen für Eure zweite Formatvorlage. Aber!!! Der Name dieser Formatvorlage besteht aus dem Namen der ersten Formatvorlage in exakt der selben Schreibweise und dem Zusatz:

:hover

In meinem ´Beispiel lautet der Name meiner zweiten Formatvorlage also „Navi:hover”. Wenn Ihr das erledigt habt, bestätigt Ihr die Eingabe mit einem Klick auf den Button „OK”.

25

Für diese Klasse müssen wir nur solche Formatierungen vornehmen, die sich von denen der ersten Klasse unterscheiden sollen.
Textgröße und Textdesign sollte man z.B. möglichst nicht ändern, da dies bei mousover meist für Ruckeln und Springen der Schaltfächen sorgt. Diese Werte sollen also beibehalten werden und werden deshalb in dieser Formatvorlage auch nicht definiert, denn sie werden von der ersten Formatvorlage -bedingt durch den teils identischen Namen- vererbt. Was wir jedoch ändern wollen, ist die Farbe der Schaltfläche. Wenn man mit der Maus über die Schaltflächen fährt, sollen diese eine andere Farbe bekommen.
In meinem Beispiel habe ich mich für die Farbe „blau” entschieden. Also aktiviere ich den Reiter „Hintergrund” und stelle die gewünschte Hintergrundfarbe ein.

26

Im Anschluss klickt Ihr nochmals auf den kleinen Pfeil neben dem Farbtöpfchen und anschließend auf „Mehr Farben...”
Wozu, werdet Ihr gleich erfahren.

27

Es öffnet sich das Farbauswahlfenster in welchem ihr den aktuelle gewählten Farbton  durch einen kleinen Kreis hervorgehoben seht. Ihr klickt ein Stück entfernt von diesem Farbton in den heller werdenden Bereich und wählt damit einen ähnlichen, aber helleren Blauton aus. Den Farbwert dieses Tons, beginnend mit einem Rautezeichen markiert Ihr und kopiert ihn in die Zwischenablage. Anschließend klickt Ihr auf „Abbrechen” und danach auf den blauen Link am unteren Fensterrand „Mit CSS-Editor bearbeiten”.
Warum? Weil unsere Formatvorlage ohne Abänderung den orangen Rahmen der ersten Formatvorlage übernehmen würde, uns jedoch bei der :hover-Klasse der Reiter „Rahmen” geklaut wurde.

28

Im sich öffnenden Editor-Fenster tragen wir nun also unseren geänderten Rahmen mit dem Farbwert aus der Zwischenablage ein.

border: 1px solid #25A9FF;

Im Anschluss klickt Ihr auf „OK” und „Schließen”.

Wenn Ihre Seite nun nochmals lokal publiziert, werdet Ihr sehen, dass die Button bei Berührung mit der Maus Ihre Farbe ändern.

29

Damit haben wir bereits eine funktionierende CSS-Navigation erstellt. Wer darüber hinnaus möchte, dass in seiner CSS-Navigation automatisch die aktuell aufgerufene Seite hervorgehoben wird, (siehe Navi oben) der muss den folgenden Schritten der Anleitung auch noch folgen.

Um diese Idee in die Tat umzusetzen, müssen wir sowohl allen Seiten die über die Navi aufgerufen werden können, als auch den einzelnen Links aus der Navigation IDs zuweisen. Das geht so:

Öffnet die erste Seite aus Eurer Navigationsleiste und drückt auf der Tastatur einmal die Taste F9. Damit ruft Ihr die Eigenschaftenpalette für die Layouteigenschaften auf. Hier klickt Ihr nun den Button „HTML” an. In den älteren Versionen muss der Reiter „Im Haupttext-Tag” aktiviert werden um darunter die ID für die geöffnete Seite zu vergeben. Die ID sollte einen klaren Bezug zum Seitennamen haben und gut zu merken sein. In meinem Beispiel bekommt die Startseite die ID Home. Der einzutragende Code sieht wie folgt aus:

id=”home”

30

Nutzer der neueren NOF-Versionen finden den korrekten Platz für die Einfügung mit einem Klick auf das dritte Icon am oberen Rand Ihres Editor-Fensters.

31

Nun wechselt Ihr über die Site-Ansicht zur nächsten Seite die in Eurer Navigation enthalten ist, öffnet diese, aktiviert wieder mit der Taste F9 die Layouteigenschaften und öffnet wieder mit dem HTML-Button, das Fenster um die ID einzutragen. Auch diese ID sollte wieder den Bezug zum Seitennamen haben und gut zu merken sein. So arbeitet Ihr nacheinander alle Seiten aus Eurer Navigationsleiste ab, bis jede Seite Ihre eigene ID bekommen hat.

 

In meinem Beispiel heißen die Seiten der Navi und deren IDs folgendermaßen:


Seitenname        Seiten_ID

Home                   id=”home”
Seite 1                 id=”seite1”
Seite 2                 id=”seite2”
Seite 3                 id=”seite3”
Seite 4                 id=”seite4”

Bitte verwendet keine Umlaute (ä,ü,ö) oder Sonderzeichen!

32

Nachdem Eure Seiten nun alle IDs bekommen haben, müssen die Links Eurer Navigationsleiste nun auch noch IDs bekommen.
Hierzu markiert Ihr den ersten Link Eurer Navi und klickt auf der Eigenschaftenpalette den Button Link.
Auch hier unterscheiden sich wieder die Ansichten der Fenster älterer Versionen von denen neuerer Versionen. Deshalb nutzt auch hier wieder jeder den Screenshot der auf seine NOF-Version zutreffend ist.
Nutzer älterer Versionen aktivieren den Reiter „In dem Link” und geben darunter die ID für Ihren Link ein. Die ID sollte sich aus dem Kürzel „nav” und der ID der zur Schaltfläche gehörenden Seite zusammensetzen.

Also in meinem Beispiel lautet die ID für die Schaltfläche Home:

id=”navhome”

Wenn Ihr die ID für den Link eingetragen habt, bestätigt Ihr die Eingabe mit einem Klick auf den OK-Button und schließt den Vorgang mit einem Klick auf den Button „Link” ab.

33

Nutzer der neueren Versionen aktivieren mit einem Klick auf das zweite Icon am oberen Rand des Editor-Fensters den Cursor an der Stelle, an welcher die ID eingetragen werden muss.
Diesen Vorgang wiederholt Ihr nun für jeden einzelnen Link Eurer Navigationsleiste.
Zur besseren Übersicht liste ich nochmals auf, wie die einzelnen IDs in meinem Beispiel lauten:

Seitenname        Link-ID

Home                   id=”navhome”
Seite 1                 id=”navseite1”
Seite 2                 id=”navseite2”
Seite 3                 id=”navseite3”
Seite 4                 id=”navseite4”

Bitte verwendet auch hier keine Umlaute (ä,ü,ö) oder Sonderzeichen!

34

Und nun legen wir noch fest, wie die aktive Schaltfläche bei Aufruf der Seite dargestellt werden soll. Ich habe mich dafür entschieden, der aktiven Schaltfläche das selbe Aussehen zu geben, wie der Schaltfläche bei mouseover. Deshalb kopiere ich mir nun die entsprechenden Formatvorgaben einfach aus der Formatvorlage heraus.
Dazu geht Ihr wieder auf Text >> Formatvorlagen verwalten, sucht auf der linken Seite des Fensters die Formatvorlage für den Hover-Effekt und klickt diese an. Aus dem rechten Bereich des Fensters könnt ihr nun die Styleangaben markieren und in die Zwischenablage kopieren.

35

Und nun kommen wir zum letzten Schritt. Ihr drückt bitte einmal die Taste F10 auf Eurer Tastatur um die Masterrahmeneigenschaften aufzurufen. Anschließend klickt Ihr auf den „HTML”-Button und aktiviert bei Nutzung einer älteren NOF-Version den Reiter „Zwischen Head-Tags”.

Dort platziert Ihr nun folgenden Code. Wie er sich zusammensetzt und angepasst werden muss, werde ich gleich noch erläutern.

<style type"text/css">

#home #navhome,
#seite1 #navseite1,

#seite2 #navseite2,

#seite3 #navseite3,

#seite4 #navseite4 {
   background-color: rgb(48,145,235);
   border: 1px solid rgb(92,170,241);
}

</style>

Der von mir rot eingefärbte Code sind die IDs der Seiten, gefolgt von den Ids der Links die zur jeweiligen Seite gehören (grün gefärbt) solltet Ihr wegen einer höheren Seitenzahl diesen Code erweitern müssen, achtet bitte darauf, dass hinter der letzen ID kein Komma gesetzt wird. Der blau gefärbte Code ist die Styleangabe die wir aus unserer hover-Klasse heraus kopiert haben.

All diese Eintragungen müssen natürlich die Bezeichnungen Eurer IDs enthalten und dementsprechend angepasst werden.

36

Und hier nochmal die Ansicht für die Nutzer neuerer NOF-Versionen. Ein Klick auf das zweite Icon in der Symbolleiste des Editorfensters aktiviert den Cursor an der passenden Stelle für die Einfügung.

38

Ich wünsche Euch viel Spaß und Erfolg bei der Umsetzung des Tutorials!  Fragen können in unserer NOF-Community gestellt werden!


Das könnte dich auch interessieren:
Eine vertikale CSS-Navigation mit NetObjects Fusion erstellen
Eine einfache CSS-Klapp-Navigation in NetObjects Fusion erstellen

Formatvorlagen in NetObjects Fusion - Was ist das?
Mit NetObjects Fusion Formatvorlagen erstellen
Formatvorlagen zuweisen - NetObjects Fusion