Dokumentation Navigationsmodul

Aus DeDi-Help

Wechseln zu: Navigation, Suche

DeDi Modul : Navigation Versionsstand 0.94-dev Entwicklerversion


Das Modul Navigation ist eines der wichtigsten Module zur Bedienung der DeDi-Webseite. Die Einsatzgebiete des Moduls sind vielfältig, wir beschränken uns hier jedoch auf den Einsatz als Seitenmenü innerhalb unserer DeDi-Webseite. Allerdings kann mann mit diesem Modul auch z.B. eine Sitemap aufbauen.


Das Modul bietet uns die Möglichkeit, eine dynamisch aus der Datenbank generierte Navigation (Menü) auf unsere Seite einzubinden. Das bedeutet, dass wir in unsere Navigation keine Seitenlinks manuell eintragen brauchen, sondern der Inhalt der Navigation aus den in der Datenbank gespeicherten Seiten und Ordnern generiert wird. Das Modul bietet uns vielfältige Einstellmöglichkeiten, so dass unserer Kreativität "fast" keine Grenzen gesetzt sind. Durch die Verwendung eines HTML-Templates ist es möglich alle HTML-konformen Elemente weiterhin zu verwenden, von der Grafik bis zum Java- oder PHP-Skript.


Nachdem das Modul importiert wurde (im Backend unter Design > Module > Modul importieren) können wir alle wichtigen Einstellungen vornehmen. Die Einstellungen können wir entweder vorab, im Backend unter Design > Module > Modul konfigurieren, oder später innerhalb der Templatekonfiguration vornehmen. Wir empfehlen bei diesem Modul die Einstellung im Template nach anlegen der ersten Seite/Ordner, da dann die gemachten Änderungen gleich mit dem Layout abgestimmt und eventuell korrigiert werden können. Wenn Sie bereits "offline" ein Navigationskonzept fertig haben, können Sie dieses auch bereits im Modul Voreinstellen. Änderungen können später zu jederzeit automatisch auf alle Seiten übertragen werden.


Die Konfiguration des Moduls teilt sich in zwei Bereiche. Oben finden wir allgemeine Einstellmöglichkeiten und unten die Templateeinstellungen in Form von normalen HTML Code.


[bearbeiten] Erklärung der Einstellmöglichkeiten:

Schriftart {font1, 2, 3}

Einstellung der Schriftarten in unserer Navigation. Später finden wir im HTML-Code des Navigationstemplates die Definition der Schriftarten wieder. Im Template können bis zu drei, {font1} {font2} {font3}, unterschiedliche Schriftarten definieren deren Aussehen aus der CSS-Datei entnommen wird. Natürlich können Sie auch auf die Verwendung der CSS-Einstellung verzichten und die Definition der Schriftarten direkt in das Navigationstemplate per HTML schreiben. In diesem Falle wählen wir in dem Drop-Down Menü den obersten Punkt, "kein" aus. In den Standard CSS-Regeln sieht DeDi bereits eine Definition extra für die Navigation vor. Wählen Sie einfach "Navigation Ordner" bzw. "Navigation Seiten". Durch diese Aufteilung können wir später leicht das Aussehen der Ordner (Hauptmenüpunkte) und der Seiten per CSS einstellen.


Seiten sortieren nach

Hier stellen wir ein in welcher Reihenfolge die gespeicherten Seiten und Ordner in der Navigation ausgegeben werden sollen. Die Navigation sieht folgende Struktur vor:

  • Hauptmenüpunkt = Ordner im Backend
  • Seiten = Seiten unterhalb der Ordner im Backend

In der Standardeinstellung werden die Ordner und Seiten genauso angezeigt wie wir sie im Backend ablegen. Also der Erste Ordner ganz oben. Später, in der Konfiguration der einzelnen Ordner, kann es sinnvoll sein, die Reihenfolge der Ausgabe mit anderen Kriterien zu belegen.


Folgende Sortierungen stehen zur Verfügung:

  • Standard (wie backend)
  • nach Name
  • nach Erstellungsdatum
  • nach Änderungsdatum
  • nach Besucherzahl


Mit den beiden Optionsfeldern "aufsteigend" oder "absteigend" können wir die Richtung der Sortierung beeinflussen.


Anzeigen von

Mit diesem Drop-Down-Menü können wir beeinflussen, was in der Navigation angezeigt werden soll:

  • Ordner mit Seiten
Es werden alle Ordner angezeigt. Beim Klick auf einen Ordner werden alle darunter liegenden Seiten ausgefahren. Beim Verlassen des Ordners werden die darunterliegenden Seiten wieder versteckt.
  • nur Ordner
Es werden in der Navigation nur die Ordner angezeigt. Beim Klick auf einen Ordner der auch Unterseiten enthält, bleiben diese versteckt.
  • nur Seiten
Es werden in der Navigation nur die Seiten angezeigt, alle Ordner werden ausgeblendet


Darstellungsform

Hier können wir die Darstellungsform der Ebene 2 einstellen. Das bedeutet wir legen hier fest, wie ein Ordner unterhalb eines Hauptmenüpunktes (Ordner in der ersten Ebene) angezeigt werden soll:

  • keine Unterordner anzeigen
Beim Klick auf einen Ordner der ersten Ebene, der auch einen Unterordner (Ordner der zweiten Ebene) enthält, wird dieser nicht angezeigt.
  • Unterordner automatisch anzeigen
Beim Klick auf einen Ordner der ersten Ebene der auch einen Unterordner (Ordner der zweiten Ebene) enthält, wird dieser angezeigt.
  • alle Unterordner anzeigen
Ordner der ersten Ebene und Unterordner (Ordner der zweiten Ebene) werden immer angezeigt


Startseiten anzeigen

Wir können festlegen wie die im Backend definierten Startseiten der einzelnen Ordner behandelt werden sollen. Grundsätzlich erscheint beim Klick auf einen Ordner als erstes die definierte Startseite. Diese Seite wird jedoch nicht einzeln im Menü aufgeführt. Da sie immer über den Ordner zu erreichen ist, ist es meistens nicht sinnvoll die Startseite im Menü normal anzeigen zu lassen. Wir können die Seite im Menü jedoch bei Bedarf sichtbar machen, in dem wir das Kontrollkästchen "ja" aktivieren.


Anzahl der darzustellenden Ebenen

Hier können wir die Ebenen unserer Navigation begrenzen. Jeder Ordner im Backend stellt einen Strukturpunkt in unserer Navigation dar. Die Hauptordner bezeichnen wir als Ebene 1, die Unterordner innerhalb eines Hauptordners als Ebene 2, die Unterordner eines Unterordners als Ebene 3 und so weiter.

| Ordner 1 Ebene 1
| |
| |  Unterordner 1.1 Ebene 2
| |
| | Unterordner 1.1.1 Ebene 3
|
|  Ordner 2 Ebene 1

Durch Angabe der Anzahl der darzustellenden Ebenen können wir unsere Navigation Begrenzen:

0 = Alle Ebenen werden dargestellt wie Sie im Backend angelegt werden
1 = Nur die Ordner in der erstem Ebene werden dargestellt 
2 = Die Ordner der ersten und zweiten Ebene werden dargestellt 
3 = Die Ordner der ersten, zweiten und dritten Ebene werden dargestellt 

und so weiter


Seiten ausschließen

So wie wir die Ebenen begrenzen können, können wir auch bestimmte Seiten aus der Navigation ausschließen, egal wo Sie sich im Backend befinden. Um eine Seite nicht in der Navigation anzuzeigen, tragen Sie einfach die Seiten ID hier ein. Mehrere Seiten trennen wir einfach durch ein Komma (kommasepariert). Die Seiten ID finden Sie im Backend unter Redaktion > Seiten im Infofenster der jeweiligen Seite oder beim Aufruf der Seite im Browser in der Adressleiste "idcatside=x"


Ordner ausschließen

So wie wir die Ebenen und Seiten begrenzen können, können wir auch ganze Ordner inklusive der darunter liegenden Seiten und Unterordner aus der Navigation ausschließen. Um einen Ordner nicht in der Navigation anzuzeigen, tragen Sie einfach die Ordner ID hier ein. Mehrere Ordner trennen wir einfach durch ein Komma (kommasepariert). Die Ordner ID finden Sie im Backend unter Redaktion > Seiten im Infofenster des jeweiligen Ordners oder beim Aufruf des Menüpunktes im Browser in der Adressleiste "idcat=x"


Template

Die optische Ausgabe der Navigation wird über das Template gesteuert. Das Template ist normaler HTML Code, bestückt mit DeDi-Variablen zur Ausgabe der Ordner- und Seitenlinks aus der Datenbank. Beim ersten Aufruf des Moduls wird das Standardtemplate geladen, welches wir beliebig verändern können. Wir nutzen hier das Standardtemplate zur Erklärung und Darstellung der einzelnen Funktionen.


Das Standardtemplate ist eine einfache, einspaltige Tabellennavigation. Innerhalb der Tabelle befindet sich ein "On-Mouse-Over" Effekt, um die einzelnen Seiten und Ordner farblich besser darstellen zu können. Diese Funktion ist nicht zwingend erforderlich, erleichtert aber den Einstieg für Anfänger ohne umfangreiche HTML Kenntnisse. Vorerst beschränken wir uns auf die reine Funktionsweise der Navigation, im Anschluss erklären wir die Einstellungsmöglichkeiten für den "On-Mouse-Over" Effekt.


Der Einfachheit halber wurde das Standardtemplate der Navigation in eine einspaltige Tabelle verpackt. Um uns das Template nun genauer anzuschauen empfehlen wir den Code aus den einzelnen Textbereichen zu kopieren und in einen HTML WYSIWYG Editor einzufügen und das Ergebnis zu betrachten. Die Ausgabe der Navigation mit z.B. 3 Ebenen kann zum Beispiel wie in unserer Grafik aussehen:


Grafik: Navigation mit 3 Ebenen


Der HTML-Code der Tabellennavigation wird in seine einzelnen Bestandteile aufgeteilt und in die Textbereiche des Moduls eingefügt.

Der HTML-Code im Ganzen: (Kursive Texte im sind nur zur besseren Übersicht und Erklärung)

  {space} <a href="{link}" onMouseOver="on(`{name}`);return true;" onMouseOut="off();return true;" class="{font1}">{name}</a>
  {space}<a href="{link}" onMouseOver="on(`{name}`);return true;" onMouseOut="off();return true;" class="{font1}">{name}</a>
  {space}<a href="{link}" onMouseOver="on(`{name}`);return true;" onMouseOut="off();return true;" class="{font2}">{name}</a>
  {space}{name}
  {space}<a href="{link}" onMouseOver="on(`{name}`);return true;" onMouseOut="off();return true;" class="{font1}">{name}</a>
  {space}<a href="{link}" onMouseOver="on(`{name}`);return true;" onMouseOut="off();return true;" class="{font1}">{name}</a>
  {space}<a href="{link}" onMouseOver="on(`{name}`);return true;" onMouseOut="off();return true;" class="{font2}">{name}</a>
  {space}{name}

Es können nur Bestimmte Variablen innerhalb der Templatekonfiguration verwendet werden, um die Seiten- und Ordnerinformationen abzurufen. DeDi-Variablen werden immer in { } geschrieben. Die Verwendeten DeDi-Variablen und deren Bedeutung:


  • {space}
Rückt den Menüpunkt um ein Leerzeichen ein (ähnlich wie ). Diese Variable empfiehlt sich für die optische Trennung von Ordner ab der zweiten Ebene. Mögliche HTML Kombination:

nbsp; {space}


  • {link}
Gibt den Link zur Seite bzw. Ordner aus. Mögliche HTML Kombination:
href="{link}"


  • {name}
Gibt den gespeicherten Ordner- bzw. Seitennamen aus. Mögliche HTML Kombination:
a href="{link}">{name}


  • {id}
Gibt die in der Datenbank gespeicherte ID der Seite bzw. des Ordners aus. Nur für Entwicklerzwecke notwendig.


  • {font1} {font2} {font3}
Ausgabe der CSS Variable wie in der Modulkonfiguration eingestellt. Mögliche HTML Kombination:
class="{font2}"


Alle Variablen können beliebig verwendet werden. So gibt folgender HTML Code zum Beispiel einen einfachen Seiten- bzw. Ordnerlink im Schriftformat "Font1" aus:

  • {name}


"On-Mouse-Over" Effekt im Standard Navigationstemplate

Innerhalb der Tabelle finden Sie in jeder Tabellenzeile folgenden Code:

Die "onMouseOver" Befehle bewirken, das die einzelnen Tabellenzeilen farblick dargestellt werden und beim überfahren mit der Mouse die Farbe wechseln. Die Farben sind in normalen RGB Farbwerten angegeben und HTML-konform. Im Einzelnen bewirken die Tags folgendes:


  • onMouseOver="this.style[`background`]=`#5A7BAD`;"
Farbe beim überfahren der Tabellenzeile mit der Maus


  • onMouseOut="this.style[`background`]=`#A8BADE`;"
Farbe nach dem Verlassen der Tabellenzeile mit der Maus


  • bgcolor="#A8BADE"
Standardhintergrundfarbe der Tabellenzeile


  • nowrap
Unterbindet einen Zeilenumbruch in der Tabellenzeile


Diese Tags können Sie natürlich überall wo Sie HTML-Tabellen benutzen verwenden. Probieren Sie es aus, sie erreichen sehr schöne Effekte mit einfachen Mitteln.

Persönliche Werkzeuge