|
|
Grundeinstellungen der CSS-Textnavigation - Für Anfänger geeignet
Der Einstieg in die CSS-Navigation ist durchaus auch für Anfänger leicht zu bewältigen.
Als Beispiel nehmen wir eine horizontale Navigation. Gerade für horizontale Navigationen eignet sich dieses Instrument sehr gut, weil man für den Seitentitel nicht an die Breite einer grafischen Schaltfläche gebunden ist. Damit kann man die vorhandene Zeilenbreite optimal ausnutzen.
Darüber hinaus kann man die Seiten in der Navigation beliebig benennen, unabhängig vom Seitennamen, der in der Site-Ansicht angelegt ist.
|
Voraussetzungen
Wenn man für ein Projekt eine einzelne Formatierung für Textlinks verwendet, sollen diese Formatierungen in der Design-Ansicht in den Formatvorlagen definiert werden.
Design-Ansicht > in der Menüleiste > Design (IN NOF11! “Formatvorlagen” anklicken > Formatvorlagen verwalten > link (A) > bearbeiten > Einstelllungen für die gesamte Website bearbeiten.
Ebenso verfahren mit Link:aktiv, Link:hover etc.
|
|
|
|
Wenn die Text-Navigation nun mit den Standard-Einstellungen für Links erfolgen soll, wird in der Seitenansicht in einer Zeile der Textlink eingetragen, danach in den Text-Eigenschaften > link > interner Link eintragen. Fertig.
Wer aber verschiedene Link-Formatierungen benötigt, muss unbedingt darauf achten, dass die Link-Formatvorlagen in der Design-Ansicht alle auf “automatisch” stehen. Sonst funktionieren zusätzliche Link-Formatierung nicht.
|
Voreinstellungen für individuelle CSS-Linkformate:
In der Seiten-Ansicht können wir beliebig viele Link-Formatierung eintragen.
Klick auf Menüleiste > Text > Formatvorlagen verwalten > neu > Namen eintragen (z.B. navi) > siteübergreifend
Ein Kontextmenü öffnet sich, in dem alle Einstellungen für die Navigation vorgenommen werden können. Hier kann man gegebenenfalls auch einen Hintergrund definieren:
|
|
|
|
Textlinks werden standardmässig unterstrichen dargestellt. Wer den Unterstrich entfernen will, deaktiviert das Kästchen: “Effekte: automatisch”.
Wenn alles richtig eingestellt wurde, werden die weiteren Formatierungen für die “navi” wie folgt angelegt:
Text > Formatvorlagen verwalten > “navi” markieren, > auf “duplizieren” klicken > Namen eingeben: navi:aktiv > Siteübergreifend > OK > Bestätigen.
Den gleichen Schritt für navi:besucht; navi:hover; navi:verknüpft vornehmen. Eventuelle Formatveränderungen für hover (mouse-over) in die hover-Formatvorlage eintragen. Ansonsten sind alle Einstellungen aus der Formatvorlage “navi” automatisch übernommen.
|
|
|
|
Die Formatvorlagen sind jetzt fertig, wir können mit der Eingabe fortfahren:
|
Zuweisung der Link-Formate:
Wir befinden uns in der Seiten-Ansicht. Im Masterrahmen unter dem Banner fügen wir eine Tabelle oder Tabellenzeile ein. Die Tabelle mit der Navigation kann zum Beispiel so aussehen:
|
|
|
|
Wir schreiben den ersten Navi-Titel in die Zelle rein: Home.
Wir markieren das Wort Home und verlinken das Wort mit der richtigen Seite im Eigenschaftsfenster. Wir erkennen das Ergebnis, denn das Wort Home wird jetzt in der automatischen Link-Formatierung angezeigt.
Nun müssen wir diesem Link unsere Formatvorlage zuweisen. Wir markieren das verlinkte Wort, und finden im Eigenschaftsfenster das Weltkugel-Symbol der Links vor:
|
|
|
|
Im Eigenschaftsfenster wird im Pulldown-Menü die richtige Formatvorlage zugewiesen.
Im Grunde ist es auch schon alles. Die weiteren Seitentitel werden eingetragen, die Links eingegeben, das Format zugewiesen.
Nach dem gleichen Muster werden weitere Link-Formatierungen definiert. Statt “navi” heisst die zweite Linkformatierung zum Beispiel “navitext” . Im Text wird der Link dann mit der Formatvorlage “navitext” versehen.
Fragen zu den NOF-Tutorials beantworten wir gerne in unserem Netobjects-Forum.
|
|
Nach oben
|
|
|
|
|
