Dynamische Navigation erstellen

Lernziele

In diesem Kapitel lernen Sie:

wie Sie das Autonavigations-PlugIn verwenden
wie Sie eine eigene Navigation erstellen
wie Sie Navigationsvorlagen erstellen
wie Sie die Navigationsstruktur erstellen
wie Sie Navigationspunkte konfigurieren

Einführung

Die dynamische Navigation (im folgenden nur noch Navigation genannt) dient dazu anhand einer Vorlage die Seiten gemäss einer vorgegebenen Struktur untereinander zu verlinken. Die Navigation kann auch erreicht werden, wenn Sie die Seiten untereinander direkt mit Hyperlinks jeweils manuell verlinken. Dies hat aber den Nachteil, dass wenn Sie eine neue Seite erstellen, meist mehrere andere Seiten erweitern müssen, damit auf die neue Seite navigiert werden kann. Bei der Navigation in CONTEX werden neue Seiten auf Wunsch automatisch in die bestehende Navigation integriert, ohne das Sie etwas dazu beitragen müssen.

Die Navigation basiert auf dem CONTEX Autonavigations-PlugIn, welches flexibel genug ist, um den meisten Navigationsansprüchen zu genügen.

Das Autonavigations-PlugIn

Das Autonavigations-PlugIn ist eine Komponete, welche CONTEX um die Navigationsfunktion erweitert. Bei neu erstellten Webs ist das PlugIn bereits integriert und konfiguriert. Wenn das PlugIn noch nicht in das Web integriert wurde, Müssen Sie es erst hinzufügen. Gehen Sie folgendermassen vor:

Klicken Sie im Hauptmenü auf "Extras" -> "Benutzerinhalte (PlugIn's)..."
Prüfen Sie ob in dem neu geöffneten Fenster bereits der Eintrag "CONTEX Standard Autonavigation PlugIn 3.0 (ox.CONTEX30.PlugIns.AutoNavigation.CAutonav)" vorhanden ist. Wenn ja wurde das PlugIn bereits dem Web hinzugefügt und Sie können das Fenster schliessen und diese Prozedur verlassen.
Wenn nicht klicken Sie auf "Neu"
Bei dem Fenster, das sich nun geöffnet hat, klicken Sie auf die Lupe. Es öffnet sich ein weiteres Fenster.
Klicken Sie bei diesem Fenster wieder auf die Lupe, sodas sich der Dateidialog öffnet.
Wechseln Sie in diesem auf das CONTEX Programverzeichnis (der Standardpfad hier ist "C:\Programme\Object dynamiX\CONTEX30" und suchen Sie die Datei "oxCONTEX30PlugInsAutoNavigation.dll". Evtl wird diese Datei nicht direkt von Windows angezeigt, in diesem Falle müssen Sie erst den Windows Explorer so konfigurieren, das er auch .dll Dateien anzeigt.
Klicken Sie auf "Öffnen" und dann auf OK.
Klicken Sie nochmals auf OK und dann auf Schliessen.
CONTEX muss nun neu gestartet werden, damit das PlugIn verwendet werden kann. Tun Sie dies jetzt.

Bevor Sie nun das PlugIn Einsetzen, müssen Sie dessen Funktionsweise verstanden haben.

Funktionsweise des Autonavigations-PlugIns

Das PlugIn wird als Inhalt erstellt und jeweils am Besten als QuickLinx (££) mit einen bestimmten Bereich der Seitenvorlage verknüpft. Sie könne auch eine normale Marke (§§) verwenden, müssen aber dann den Navigations-PlugIn Inhalt jeweils mit der Marke jeder Seite verknüpfen, was ja nicht gerade der Sinn und Zweck der Sache ist. Das PlugIn wird dann jeweils vom Generator wie normale Inhalte angesprochen und generiert dann jeweils die Navigation.

Wenn das PlugIn vom Generator den Auftrag erhält die Navigation zu generieren, ermittelt das PlugIn als erstes die entsprechende Navigations-Vorlage, in der abgebildet ist wie die Navigation aussehen und die einzelnen Navigations-Levels untereinander verknüpft sind. Diese Navigations-Vorlage ist nichts anderes als eine Inhaltsvorlage, wie Sie sie bereits kennen. Die entsprechende Inhaltsvorlage wird anhand des Names gesucht, also wenn der Inhalt "£ £NavSection0£ £" heisst, dann muss die Inhaltsvorlage "NavSection0" heissen.

Nun analysiert das PlugIn die Inhaltsvorlage und ermittelt die Position (den Level) der aktuellen Seite innerhalb der Navigationshierarchie. Damit die Position ermittelt werden werden kann, müssen die Seiten untereinander verknüpft werden. Dies geschieht mit Hilfe des Navigations-Assistenten von CONTEX oder mit Hilfe des Navigations-Editors, der sich hinter dem Menüpunkt "Extras" -> "Navigation festlegen" versteckt. Es werden immer Seiten mit Verzeichnissen verknüpft, damit eine Seite wieder mehere Unterpunkte (Seiten im zugeordneten Verzeichnis) auflisten kann. Die Navigationshierarchie kann sich von der Physikalischen Struktur der Seiten und Verzeichnisse unterscheiden und muss desshalb separat aufgebaut werden. Dies bedeutet im allgemeinen keine Grossen Aufwand und muss nur gemacht werden, wenn neue Verzeichnisse in die Navigation aufgenommen werden. Der Navigationsassistent erledigt diese Arbeit im übrigen mit 4 Mausklicks.

Anschliessend wird der vom PlugIn generierte HTML Code in die Seite integriert.

Das ganze hört sich ziemlich kompliziert an, ist aber wenn man genau hinschaut logisch und wenn man einmal eine Navigation erstellt hat (was pro Web ja meist nur einmal gemacht werden muss) nicht mehr so verwirrend. Aber gehen wir das ganze einmal Schritt für Schritt durch:

1. Erweitern der Seitenvorlage um NavSections

Die NavSections werden als System Tags auf den Seitenvorlagen definiert und bestimmen die Position an der die einzelnen Navigationen angezeigt werden müssen. Die NavSections können frei in der Seitenvorlage positioniert werden. Die Marke "NavSection0" muss natürlich nicht umbedingt so heissen, es ist jeder belibige Name möglich, allerdings muss er mit dem Namen des Inhaltes und der Inhaltsvorlage korrespondieren.

Eine NavSection beinhaltet eine oder mehrere NavLevels. NavLevels sind die eigentlichen Naviagationsstufen. Eine NavSection kann maximal 9 NavLevels beinhalten, sie sollten aber dem Konsumenten Ihrer Webseite zuliebe nicht mehr als 3 NavLevels pro NavSection bauen. Die Anzahl an NavSections ist unbeschränkt.
Die Grafik unten zeigt 2 NavSections in der Vorlage; eine im Linken Bereich mit der Hauptnavigation (NavSection0) und eine im Oberen Bereich mit der SubNavigation (NavSection1)

2. Erstellen der Navigations-PlugIn Inhalte

Die Navigations-PlugIn Inhalte können quasi auf jeder Marke erstellt werden, wenn Sie aber QuickLinx verwenden, erstellen Sie am Besten eine Inhaltsgruppe "Navigation". Anschliessen klicken Sie auf dieser Inhaltsgruppe die rechte Maustaste und wählen Sie "Neu" -> "CONTEX Standard Autonavigation PlugIn 3.0". Beim anschliessenden Dialog geben Sie bitte den die entsprechende Bezeichnung ein (bei QuickLix ££ nicht vergessen), z.B. £ £NavSection0£ £. Klicken Sie auf OK um den Inhalt zu erstellen.

Wenn Sie den neu erstellten Inhalt nun doppelklicken, öffnet sich ein Dialog zum könfigurieren des Inhalts:

In diesem Dialog können Sie nach einer bestimmten Anzahl Detail-Wiederholungen HTML Code einfügen lassen. So ist es z.B. möglich dem Navigations-PlugIn mitzuteilen, das nach 5 Navigationspunkten ein Zeilenumbruch ( ) einzufügen ist. Dazu können Sie die Levels bei denen diese Funktion angewendet werden soll mit ; getrennt definieren.

"Benutzerdefinierte Navigationsdefinitionen verwenden" aktiviert, dass zu diesem PlugIn eigene Navigations-Punkte Einstellungen konfiguriert werden können. Wenn Sie diesen Punkt aktivieren, verwendet das PlugIn eine für diesen Inhalt Spezifische Navigationspunktdefinition. Dies ist nützlich, wenn die einzelnen Navigationspunkte z.B. auf der SiteMap anders aussehen sollen, als auf der Navigation. Durch das aktivieren dieses Punktes erhalten Sie einen Eintrag in der Combobox "Konfiguration" im "Festlegen der Navigation" Dialog.

3. Erstellen der Navigationsinhaltsvorlage

Sie müssen pro NavSection definieren, welche NavLevels darin enthalten sind und wie diese untereinander verknüpft sind. Dazu müssen Sie in den Inhaltsvorlagen eine neue Inhaltsvorlage erstellen, welche den gleichen Namen wie der Inhalt hat (aber ohne ££):

Die Definition wird im XML Format erstellt und kann folgende Tags enthalten:

Tag	Beschreibung
<!--NAVLEVELn HEAD--> <!--/NAVLEVELn HEAD-->	Der Head wird jeweils zu Begin eines Levels generiert. Zwischen den Marken kann angegeben werden, was zu begin des Level's generiert werden soll.
<!--NAVLEVELn CONTENT--> <!--/NAVLEVELn CONTENT-->	Der Content wird jeweils pro Level Navigationspunkt generiert. Hier kann angeben werden, was jeweils pro Navigationspunkt generiert werden soll.
<!--NAVnDESC-->	Dies ist die Hauptvariable, welche den kompletten Navigationspunkt liefert (inkl Bezeichnung, Link, Bilder, Formatierung, Klassen etc.).
<!--NAVLEVELn FOOTER--> <!--/NAVLEVELn FOOTER-->	Der Footer wird jeweils am Ende eines Levels generiert. Zwischen den Marken kann angegeben werden, was nach dem Level generiert werden soll.
<!--TREE-->	Gibt an, dass dieser Level sich wie ein Tree verhalten soll. Ist die Tree-Funktion aktiv, wird jeweils nur der gerade aktive Ast des Navigationsbaumens dargestellt, alle anderen Äste erscheinen "eingeklappt". Das Schlüsselwort kann nur im Head verwendet werden.
<!--RepeatLastSiblingSeparator-->	Normalerweise wird der Text welcher zwischen NAVDesc und NAVLEVELn Footer ist nach jedem NavPunkt wiederholt, ausser nach dem letzten NavPunkt. Wird diese Option im NAVLEVELn HEAD angegeben, wird auch nach dem letzten NavPunkt noch wiederholt. Das Schlüsselwort kann nur im Head verwendet werden.
<!--NAVLEVELnID-->	Liefert eine durch CONTEX erzeugte eindeutige ID des NavPunktes. Diese ist identisch mit der ID der Seite.
<!--NAVLEVELnLINK-->	Liefert den reinen Link auf die Zielseite (href="...") ohne die A Tags
<!--NAVLEVELnTARGET-->	Liefert den definierten Target Ausdruck z.B. _blank
<!--NAVLEVELMARKERS-->	Wird dies im <!--NAVLEVELn HEAD--> Bereich angegeben, generiert CONTEX Markers die den Start und End Bereich eines NavLevels beschreiben. (z.B: <--!NavLevel1 Start--> und <--!NavLevel1 End-->) Kann für Debug Zwecke verwendet werden.
<!--NAVLEVELnTEXT-->	An dieser Stelle fügt CONTEX den reinen Text (Bezeichnung) des Navigationspunktes ein.
<!--NAVLEVELnALT-->	Verwenden Sie diese Variable, um den ALT Text (Alternativer/Tooltip Bildtext) den der Benutzer in der Navigations-Maske hinterlegt hat einzublenden.
<!--NAVLEVELnCLASS-->	Diese Variable liefert den aktuellen Klassenname eines Navigationspunktes.
<!--NAVLEVELnIMAGEFILE-->	Liefert den Pfad und Namen des aktuellen Navigations-Bild.
<!--NAVLEVELnHTML-->	An dieser Stelle fügt CONTEXT alles innerhalb des href's eines Navigationspunktes ein. Also die Bezeichnung das Bild und evtl der Code dazwischen.
<!--NAVLEVELn IF Ausdruck -->	Der NAVLEVELn IF Tag kann innerhalb des <!--NAVLEVELn CONTENT--> verwendet werden, um zu definieren, ob bzw, welchen CONTENT verwendet werden soll. Folgende Ausdrücke können verwendet werden: CHILDREN: Ist TRUE wenn Navigationspunkte untergeordnete Navigationspunkte hat. FIRST: Ist True, wenn es der erste Navigationspunkt eines Levels ist. LAST: Ist True, wenn es der letzte Navigationspunkt eines Levels ist. OPEN: Ist True, wenn der Navigationspunkt geöffnet ist. CURRENT: Ist True, wenn der Navigationspunkt angewählt (aktiv) ist. NAVLEVELID: Ist True, wenn die die ID des Navigationspunktes mit der angegebenen ID übereinstimmt. Die ID des Navigationspunktes ist identisch mit der ID der Seite. z.B. NAVLEVELID=230 NAVLEVEL: Ist True, wenn die angegebene verschachtelungsebene identisch mit der hier angegebenen Zahl ist. z.B. NAVLEVEL= 1 META: Ist True wenn das Meta-Flag auf den Seiteneigenschaften ageklickt ist. Die einzelnen ausdrücke können miteinander kombiniert werden: <!--IF CHILDREN=TRUE FIRST=FALSE --> Die einzelnen Ausdrücke werden immer mit AND verknüpft. Um mit OR zu Arbeiten müssen verschiedenen <!--NAVLEVELn CONTENT--> definiert werden: <!--NAVLEVELn CONTENT--><!--NAVLEVELn IF CHILDREN=TRUE FIRST=FALSE --> Kinder, nicht der Erste<!--/NAVLEVELn CONTENT--> <!--NAVLEVELn CONTENT--><!--NAVLEVELn IF CHILDREN=TRUE FIRST=TRUE --> Kinder, der Erste<!--/NAVLEVELn CONTENT--> CONTEX arbeitet die <!--NAVLEVELn CONTENT--> von oben nach unten ab und nimmt den ersten zutreffenden NAVLEVELn IF. Die Reihenfolge der Definition ist also entscheidend! Wenn ein NAVLEVEL keine NAVLEVELn IF Definition hat, wird diese immer dann verwendet, wenn keine anderer NAVLEVELn IF zutrifft (ELSE).

*n Steht jeweils für den Level (mit 0 beginnend)

Pro NavLevel wird zuerst einmal der <NAVLEVELn HEAD> generiert anschliessend wird pro Navigationspunkt im NavLevel der <NAVLEVELn CONTENT> generiert und zu Schluss wird noch der  eingefügt. Es folgen einige Beispiele von Navigationsdefinitionen:

Beispiel 1

Die einzelnen Levels können jeweils ineinander verschachtelt werden:

Beispiel 2

Die einzelnen Levels jeweils Flach bzw. Nacheinander definieren:

Beispiel 3

Navigationslevel mit Unterscheidung zwischen Ersten und Letztem Navigationspunkt eines Levels und Unterscheidung, ob noch Unternavigationspunkte enthalten sind:

CN: <IMG height=9 src="C:\Temp\TestNav\Resource\nav\minus.gif" width=9 useMap="" lowsrc="" border=0 >
 

   -

CF:

CL:

CN: <IMG height=9 src="C:\Temp\TestNav\Resource\nav\plus.gif" width=9 useMap="" lowsrc="" border=0 >

F: <IMG height=2 src="C:\Temp\TestNav\Resource\nav\nav_1_hg.gif" width=9 useMap="" lowsrc="" border=0 >

L: <IMG height=16 src="C:\Temp\TestNav\Resource\nav\nav_1_abschl.gif" width=9 useMap="" lowsrc="" border=0 >

N: <IMG height=16 src="C:\Temp\TestNav\Resource\nav\nav_1.gif" width=9 useMap="" lowsrc="" border=0 >

Weiteres Beispiel siehe: PopUp Navigation

4. Erstellen der Navigationsstruktur

Nachdem Sie nun Definiert haben, wie die Levels in den einzelnen Sections dargestellt werden sollen, müssen Sie noch definieren, wie die einzelnen Seiten untereinander verknüpft werden sollen. Dies kann auf 2 Arten geschehen, entweder Sie verwenden den Assistenten oder Sie verknüpfen die Seiten und Verzeichnisse untereinander von Hand.

Der Assistent

Sie finden den Assistenten zum erstellen der Navigationsstruktur im Menü "Extras" -> "Navigations Assisten":

Im 2. Schritt definieren Sie, wie wie der Assistent die Struktur ermitteln soll. Hier haben Sie 3 Möglichkeiten:

Navigationsgruppen anhand der Struktur erkennen.	Erstellt die Navigation genau so, wie der physikalische Aufbau des Webs in dem Objektbaum ist.
Navigationsgruppen anhand der Bezeichnung erkennen.	Versucht anhand der Seitenbezeichnung und der Verzeichnissbezeichnung eine Navigation zu erstellen. Dabei sucht der Assistent pro Seite ein Navigationsverzeichnis, welches den gleichen Namen wie die Seite selbst hat.
Navigationsgruppen entfernen.	Löst die Navigationsdefinition auf.

Auf den weiteren Seiten der Navigation können Sie noch definieren, ob die gesammte Navigation neu erstellt werden soll, oder ob nur die Seiten in die Navigation eingebaut werden sollen, welche noch nicht eingebunden sind.

Navigation festlegen

Eine weitere Möglichkeit die Navigationsstruktur festzulegen ist die via dem Navigations-Editor. Dieser Starten Sie unter "Extras" -> "Navigation festlegen".

Im Linken Baum-Bereich sehen Sie die Struktur der Navigation mit den entsprechenden NavLevels. Rechts oben sehen Sie alle Verzeichnisse, welche Sie Seiten auf der linken Seite durch Drag&Drop oder durch den klick auf "Navigationsgruppe zuweisen" zuweisen können. Sie können jeweils an eine Seite ein Verzeichnis zuordnen, das dann wiederum die Aufzulistenden Seiten erhält. Sie müssen keine Seiten den Verzeichnissen zuordnen, dies wird aus der physischen Struktur entnommen. Das hat den Vorteil, das wenn ein Benutzer eine neue Seite in einem Verzeichnis erstellt, dies gleich an der richtigen Stelle in der Navigation erscheint. Wenn neue Verzeichnisse erstellt werden, müssen diese jeweils in die Navigation aufgenommen werden.

Eine Navigationsgruppen zuweisung heben Sie auf, indem Sie das entsprechende Verzeichnis (links) markieren und dann auf "Navigationsgruppe entfernen" klicken.

Mit den Buttons "XML Datei generieren" oder "Text Datei generieren" generieren jeweils eine Textdatei der Navigationsstruktur in dem entsprechenden Format.

5. Definition der einzelnen Navigationspunkte

Nun bleibt noch die Darstellung der einzelnen Navigationspunkte zu definieren. Klicken Sie dazu im linken Bereich auf die entsprechende Seite, bei der Sie die Darstellung anpassen möchten und modifizieren Sie dann die einzelnen Einstellungen rechts unten. Jeder Navigationspunkt kann in jeder Sprache separat konfiguriert werden, desshalb sollten Sie erst die entsprechende Sprache wählen. Wenn Sie "Alle Sprachen wählen", werden alle Einstellungen, die Sie machen immer für alle Sprachen verwendet.
Nun sollten Sie die entsprechende Konfiguration wählen. Normalerweise reicht hier eine Standard Konfiguration,wenn Sie aber unterschiedliche Darstellungen der gleichen Navigationspunkte an verschiedenen Orten benötigen (z.B. Sitemap) dann können Sie hier die entsprechende Navigationskonfiguration wählen (siehe Benutzerdefinierte Navigationsdefinitionen). "Für diese Konfiguration Standard wiederherstellen" löscht die gemachten benutzerdfinierten Konfigurationseinstellung, damit wieder die Standarddefinitionen verwendet werden.

Die darunter in den Registerkarten vorhandenen Einstellungen gelten nun immer für die gewählte Sprache und Konfiguration und werden hier kurz beschrieben:

Tab 1: Allgemein

Bezeichnung	Dies ist der Text, der in der Navigation dargestellt wird. Sie können den Text wenn Sie möchten auch noch mit HTML Tags versehen. Wenn Sie nur Bilder als Navigation verwenden möchten, können Sie die Bezeichnung leer lassen. Wenn Sie die Seitenbezeichnung anpassen (Im Seitendialog), wird wenn gewünscht auch gleich diese Navigationsbezeichnung (in der jeweiligen Sprache) angepasst.
Navigationspunkt aktivieren	Hier können Sie die Darstellung des Navigationspunktes ein oder ausschalten. Dadurch ist es möglich einzelne Seiten in der Navigation gar nicht darzustellen, andere nur in bestimmten Sprachen oder Konfigurationen.

Tab 2: Darstellung

Im der zweiten Registerkarte "Darstellung" können Sie das aussehen des einzelnen Navigationspunktes bestimmen.

Inaktiver/Normaler Link: Bild	Wenn ein Bild anstelle eines Textes (oder Bild und Text kombiniert) angezeigt werden soll, können Sie hier ein entsprechendes Bild aus dem Ressourcenmanager wählen. Das Bild wird angezeigt, wenn der Link nicht aktiv ist, bzw sich der Mauszeiger nicht über dem Link befindet.
Inaktiver/Normaler link: CSS Class	Hier bestimmen Sie, welche Klasse aus dem Style Sheet verwendet werden soll, um den Link darzustellen. Die Klasse bestimmt das aussehen des Links und wird haupsächlich bei Text Darstellung verwendet. Wenn Sie nichts angeben verwendet CONTEX hier automatisch die Klasse "NavLevelN" , wobei N für den entsprechenden Level steht, z.B "NavLevel1".
Aktiver/MousOver Link: Bild	Definiert das Bild, welches angezeigt werden soll, wenn der Link aktiv oder wenn der Mauszeiger über dem Link steht (Für letzteres muss ein Bild beim normalen Link eingestellt sein). Damit die MausOver Navigation funktioniert muss auf den Internet-Auftritt Eigenschaften "MouseOver Effekt beim Navigation" aktiviert sein und die entsprechenden Scripts müssen in der Script Datei vorhanden sein.
Aktiver/MousOver Link: CSS Class	Definiert die Klasse aus dem Style Sheet welche verwendet werden soll, um den Link darzustellen, wenn er aktiv ist, oder sich der Mauszeiger über dem Link befindet. Wenn Sie nichts angeben verwendet CONTEX hier automatisch die Klasse "NavLevelActiveN" , wobei N für den entsprechenden Level steht, z.B "NavLevelActive1".
Zuerst Text dann Bild	Wenn Sie eine Bezeichnung und ein Bild definiert haben, wird normalerweise immer zuerst das Bild dargestellt und danach der Text. Dies können Sie hier umkehren.
HTML Code zwischen Text und Bild	Wenn Sie möchten können Sie hier noch HTML Code zwischen Text und Bild einfügen.

Tab 3: Link

Normlerweise zeigt ein Navigationslink auf die entsprechend Seite. Auf dieser Registerkarte können Sie den Link aber auch noch umleiten:

[Nach Oben]

CONTEX Version 3.3

Neu: CONTEX kann ab sofort für Privatanwender mit einer Website bis zu 30 Seiten kostenlos verwendet werden!