Startseite

NOF-Community

Impressum

 

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

Nachdem ich ja eine Fortsetzung angekündigt hatte, folgt hier nun die Anleitung zur Erstellung einer vertikalen CSS-Navigation mit NetObjects Fusion. Legen wir los!

Je nach gewohnter Arbeitsweise könnt Ihr auch hier wieder 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 Spalte ein, die Anzahl der Zeilen 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 Zeilen 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 Maustaste 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 Zeile 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 Tabellenzeile 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

Im Anschluss markiert Ihr nun alle Zeilen. Dazu klickt ihr einmal in die erste Zeile haltet die Hochstell-Taste gedrückt und klickt dann in die letzte Zeile. Alle Zeilen sollten nun markiert sein, sprich einen inneren schwarzen Rand haben. Auf der Eigenschaftenpalette sind nun die Spalteneigenschaften aufgerufen und Ihr stellt über das Pulldownmenü die Spaltenbreite auf „automatisch”.

7

Eure Tabelle sollte dann in etwa wie im folgenden Screenshot aussehen.

8

Nun markiert Ihr mit einem einfachen Klick in die erste Zeile. Sie muss einen inneren schwarzen Rand haben und der Cursor darf nicht blinken. Über die Eigenschaftenpalette stellt Ihr die Zeilenhöhe nun auch auf „automatisch”.
So geht Ihr Zeile für Zeile vor, bis die Höhe aller Zeilen auf „automatisch” steht.

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. Der erste Link erscheint inm Textfeld und Ihr wechselt mit einem harten Zeilenumbruch (1x die Enter-taste drücken) ind die nächste Zeile.

11

So fügt Ihr nacheinander alle Links in das Textfeld ein, die in Eure Navigationsliste aufgenommen werden sollen.

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. Da ich für diese Navi mit einer Hintergrundgrafik arbeiten möchte und diese Grafik eine Höhe von 32px hat, legt Ihr hier eine Zeilenhöhe von 32px fest.
Außerdem tragt ihr unter „Abstand oben” einen Wert von 0 Pixel ein und  für „Abstand unten” legt Ihr einen Wert von 1 Pixel fest.  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”. Im Bereich „Textabstand” legt Ihr für „Links” einen Abstand von 10px fest, damit die Beschriftung der Navi später nicht am äußeren linken Rand klebt.

16

Nachdem der Reiter Rahmen abgearbeitet ist, wechselt Ihr zum Reiter „Hintergrund”. Bitte speichert Euch die folgende Hintergrundgrafik und kopiert sie dann in eure Zwischenablage.
 
SF

Nun klickt Ihr auf dem Reiter „Hintergrund” den Durchsuchen-Button an. Es öffnet sich ein Fenster, und Ihr navigiert, wenn Ihr nicht automatisch dort landet, zum Asset_ordner Eures Projekts. Dort fügt Ihr nun die Grafik ein und wählt diese mit einem Doppelklick auf die Datei oder einem einfach Klick auf den Button „Öffnen” aus.

17

Im Bereich Bildposition stellt Ihr nun ein, wie die Hintergrundgrafik ausgerichtet werden soll. Da ich nur eine Grafik für den normalen Style des Links als auch für den hover-Style verwende, richte ich die Grafik horizontal links aus, da mein Link den orangen Teil der Grafik als Hintergrund bekommen soll. Bei „Wiederholen” wählt Ihr bitte „Ohne” aus.

17a

Und damit sind wir auch schon wieder beim letzen Reiter der Eigenschaftenpalette angelangt, dem Reiter „Benutzerdefiniert”.
Hier legen wir nun fest, wie breit unsere Sachaltfläche werden soll. Ich reize nicht die komplette Breite des orangen Grafikteils aus und entscheide mich für eine Breite von 240px. Also klickt Ihr einmal auf „Neu” und nehmt folgende eingaben vor.

Name:

width

Wert:

240px

 

Damit die Beschriftung der Schaltflächen vertikal zentriert wird, braucht es eine weitere Eingabe.
Name:

valign

Wert:

middle

 

Und eine letzte Angabe noch, damit der Link nicht als Link sondern als Schaltfläche anklickbar ist.

Name:

diplay

Wert:

block

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, alle Zeilen 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 Tabellenspalten nun von selbst.

Die Textfeldnutzer gehen beim Zuweisen der Klassen genauso vor, wie die Tabellenutzer.

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. Vom Grundsatz her sehen unsere Navis schon ganz gut aus. Aber wenn man bedenkt, dass wir nur 1px Absttand zwischen den Schaltflächen definiert haben, scheinen mir die Lücken hier doch ein wnig zu groß zu sein.

Dieses Problem werden wir nun im nächsten Schritte beheben.

21

Dazu wechselt Ihr in die Design-Ansicht und aktiviert mit einem einfachen Klick unter „Text” den Absatz „Standard” , so dass dieser schwarz umrandet ist. Die Ansicht der Designansicht hat sich im Laufe der verschiedenen NOF-Versionen etwas verändert. Nutzer der älteren Versionen müssen zunächst auf der kleinen Palette den „Format”-Button klicken, um dann zur großen Eigenschaftenpalette zu gelangen, während Nutzer neuerer Versionen auf der kleinen Eigenschaftenpalette nur den letzten Reiter aktivieren müssen. In den alten Versionen wird der Reiter Absatz aktiviert und für oben und unten ein abstand von 0px festgelegt.

In den neueren Versionen wird wie gesagt der letzte reiter der Eigenschaftenpalette angeklickt. Das Häkchen bei „einheitliche Ränder” muss entfernt sein und dann wir auch hier für oben und unten ein Wert von 0px festgelegt. (Siehe Screenhot, dort sind beide Möglichkeiten berücksichtigt)

22

Nach erneuter lokaler Publizierung haben sich die Lücken geschlossen und wir sehen den festgelegten Abstand von 1px.

22a

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”.

23

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 ein anderes Aussehen bekommen.
Es soll nämlich die andere Hälfte meiner Hintergrundgrafik angezeigt werden. Also aktiviere ich den Reiter „Hintergrund” und änere ausschließlich die Position der Hintergrundgrafik von Links auf Rechts. Die Eingabe bestätige ich mit einem Klick auf den „OK”-Button.

25

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-position: right top;
 }

</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.

37

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 horizontale 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