Breadcrumbnavigation

Modul Pfadnavigation Seiten

Öffnen Sie das Menü des Sitemanagers und wählen unter dem Bereich 'Redakteuer' das Menü 'Module' (Bild 1). Hier finden Sie auf der linken Seite alle Module, die Ihnen zur Verfügung stehen. Suchen Sie den Punkt "Pfadnavigation Seiten". Sollten Sie bereits Module angelegt haben, können Sie diese auch jederzeit hier editieren.

Anlegen eines neuen Moduls "Pfadnavigation Seiten"

Klicken Sie zum Neuanlegen auf den Modulnamen "Navigation Seiten" (Bild 3). Vergeben Sie einen sprechenden Namen z.B. Breadcrumbnavigaton und Klicken rechts oben auf den Aktionsbutton 'Erstellen'.

 



Die wichtigsten Einstellungen siehen Sie hier im Bild 4. Auch hier wird Ihnen die Funktionsweise bekannt vorkommen, denn das Modul 'Pfadnavigation Seiten' verhält sich im Prinzip ähnlich dem der 'Navigation Seiten'. Es hat logischerweise nur keine 10 Navigationsebenen.

  • Der Modultitel extern/intern (haben wir bereits beim Erstellen des Moduls angegeben)
  • Modultitel nicht anzeigen ja/nein (wenn Sie beispielsweise den Modultitel als Überschrift verwenden möchten, können Sie beim Templaten einfach den Platzhalter hierfür verwenden und über CSS formatieren).
  • Modultitel-Template: Hier bestimmen Sie das Ausehen des Modultitels
  • Modultemplate: Damit überhaupt etwas aus dem Modul sichtbar wird müssen mindestens folgende Platzhalter enthalten in diesem Template sein:
     
    • Klicken Sie auf den kleinen Stift recht, legen ein kleines neues Template an, vergeben unter 'Basisdaten' einen Namen (z.B. default) und setzten im Bereich 'Layout' die Platzhalter [moduletitle][content]
    • Damit haben Sie übrigens Ihr erstes kleines Template in contentXXL geschrieben
       
  • Speichern Sie Ihre Veränderungen regelmäßig zwischen!

 



In dieser Karteikarte werden die Haupteinstellung vorgenommen. Auch hier die wichtigsten in Kürze (Bild 5):
 

Zur Erinnerung:

  • Startseite-ID (tabid): Hier geben Sie die tabid an, an welcher Stelle, die Navigationspunkte ausgelesen werden sollen. Beispielsweise könnte Ihre interne Navigationsstruktur wie folgt aussehen:
     
    • Home (1)
    • Das Unternehmen (2)
      • Über uns (3)
      • Unternehmenszahlen (4)
      • Geschäftsberichte (5)
    • Presse (6)
    • Kontakt (7)

Soll Ihre Pfad-Navigation im Web erst ab dem Punkt 'Das Unternehmen' sichtbar beginnen, tragen Sie in der Tabid einfach die 2 ein. Alles andere übernimmt das System automatisch. Die Nummer finden Sie leicht entweder in der angelegten Seite in der Seiteneinstellung ganz oben, oder in der Webansicht des Sitemangagers (Bild 6).
 

  • Kopf-Bereich: Hier fängt der erste Codesnipe der Pfad-Naviation an:
    • Klicken Sie wie gewohnt auf den kleinen rechten Stift, erzeugen ein neues Template für den Kopf-Bereich, vergeben einen Templatenamen z.B. "Header" und tragen im Bereicht 'Layout' den Code <UL>[template_end]</UL> ein und speichern das Template ab.
    • Hinweis! Sollten Sie im Seitentemplate keine CSS-Klasse vor dem Navigationsmodul geschrieben haben, tragen Sie bitte hier die CSS-Klasse für das UL-Tag ein (<UL Class="ULPfadNavigation">[template_end]</UL>
       
  • Fußbereich: Hier werden wir die äußere Schleife des UL-Tags schließen:
     
    • Klicken Sie wie gewohnt auf den kleinen rechten Stift, erzeugen ein neues Template für den Fußbereich, vergeben einen Templatenamen z.B. "Footer" und tragen im Bereicht 'Layout' den Code <UL>[template_start]</UL> ein und speichern das Template ab.
    • Damit haben wir die äußere UL-Schleife ordentlich geschlossen
       
  • Normale Seite:
     
    • Klicken Sie wie gewohnt auf den kleinen rechten Stift, erzeugen ein neues Template für die Ebene 1, vergeben einen Templatenamen z.B. "Navigationseintrag Ebene 1" und tragen im Bereicht 'Layout' den Code <li><A  href="[url]">[title]</A></li> ein und speichern das Template ab.
    • [url] und [title] sind die Platzhalter, die das System automatisch mit korrekten Link und Navigationnamen versieht
    • die li-Tags können Sie wie gewohnt über CSS designen und die Klasse hier im 1. Ebene-Template hinzufügen: <li class="LINavigation"><A  href="[url]">[title]</A></li>
    • Die LIs werden automatisch durchlaufen bis die Strukturebene für die sichtbaren Navigationsnamen beendet ist.
    • Vorteil: Sie brauchen sich ab jetzt keine großen Gedanken mehr um Ihre Navigation machen. Sobald Sie neue Seiten in der Struktur anlegen, wird die Navigation automatisch vom System her on the fly neu berechnet.
       
  • Seite ausgewählt: Gehen Sie gewohnt vor und erstellen ein kleines Template für diese Besonderheit. Dieses Template wird aufgerufen, wenn ein Navigationspunkt geklickt wird und aktiv ist. Es macht beispielsweise daher Sinn eine CSS-Klasse 'active' hinzuzufügen, um diese Besonderheit darzustellen:
     
    • <li><a class="active">[title]</a></li>
    • In diesem Beispiel haben wir im Gegensatz zum Template 1. Ebene auf den Platzhalter [url] verzichtet, da es selten Sinn macht auf einen bereits aktivierten Navigationspunkt zu klicken, und eine CSS-Klasse 'active' hinzugefügt, die zum Beispiel den angeklickten Navigationspunkt 'fett' darstellt.
       
  • Trennsymbol: Benötigen Sie noch einen Pfad-Navigationstrenner z.B. | dann erzeugen Sie wie gewohnt ein kleines Template, das nichts anderes bewirkt, als nach dem Durchlauf der LI-Tags und vor dem /UL dieses Template noch auszuführen.

 



Ergänzen und Ändern Sie Ihr Seitentemplate mit den in fett markierten Stellen wie folgt:

<%@ Control %>
< %@ Import Namespace="AspNetPortal" %>
< script runat="server">
  Sub Page_Init(Byval sender As Object,ByVal e as EventArgs)
         'Module plazieren
         contentxxlhelper.addmoduletopane(4, topnavigation.Controls)   ' Seitenhauptnavigation
         contentxxlhelper.addmoduletopane(7, breadcrumbNavigation_Modul.Controls)   ' Breadcrumbnavigation
         contentxxlhelper.insertcontrol("~/portaldata/1/modules/headertop.ascx", page.findcontrol("headcontrols").controls) ' Scripts für den Headbereich
  End Sub
< /script>

Kurze Erklärung zum Codesnipe:

  • contentxxlhelper.addmoduletopane: Aufruf um ein Modul zu platzieren
  • 7: Modulnummer
  • Breadcrumb: ID-Name für das HTML, damit das System weiß, wo das Pfadnavigations-Modul eingeladen werden soll

Mit diesen ergänzenden Einstellungen weiß das System nun, dass Sie ein Modul mit der Modul-ID 7 laden wollen. Jetzt müssen wir noch die Stelle im HTML vorbereiten, wo das Modul platziert werden soll. Ändern Sie dazu Ihren Code wie folgt ab:

    <div class="breadcrumbNavigation">
      <div  id="breadcrumbNavigation_Modul" class="bcNav" runat="server"></div>
    </div>
  1. Löschen Sie alles was zwischen den beiden divs steht. In der Regel sind das die ULs und LIs für die Pfad-Navagition   
  2. Ergänzen Sie im DIV  id="Seitennavigation" (das ist der selbe Name, den wir für das Laden des Moduls mitgegeben haben)
  3. Ergänzen Sie den DIV um die Funktion runat="server"

 

Service Links