Übung 1.6: Dynamische Navigation der Website realisieren

Zeigen

Sie müssen Übung 1.5: Eine Seitenschablone auf die Website anwenden abschliessen, bevor Sie mit der Realisierung der dynamischen Navigation der Website beginnen können.

Als Sie in Übung 1.2 die Struktur Ihrer Website entworfen haben, haben Sie einige Entscheidungen über die Beziehungen zwischen den Seiten getroffen. Sie werden sich erinnern, dass Sie die Seitensymbole arrangiert hatten, und dass diese durch Linien verbunden waren:

Site structure.

Es gibt verschiedene Arten, wie eine Seite mit einer anderen in Beziehung stehen kann. Diese Beziehungen werden benannt wie die Beziehungen in einer Familie. In diesem Beispiel ist "Alle Kleinanzeigen anzeigen" das übergeordnete Element (parent=Eltern), die anderen drei Seiten sind die untergeordneten Elemente (child=Kind). Diese drei Seiten sind einander gleichgeordnet (sibling=Geschwister).

Diese Seitenbeziehungen werden verwendet, um Navigationslinks wie z.B. Navigationsleisten und Registerkarten zu generieren. Jede Seite erstellt automatisch eigene Navigationslinks auf Basis der Seiten, mit denen sie in Beziehung steht. Dieser Prozess wird dynamische Navigation genannt.

Überprüfung der Site-Struktur

Sie wollen sicherstellen, dass die Site-Struktur so eingerichtet wurde, dass bestimmt werden kann, welche Seiten in die Navigation eingeschlossen werden sollen. Sie können in Web Site Designer bestimmen, welche Seiten als Links in der dynamischen Navigation enthalten sein sollen, welche Seiten in Website-Übersichten enthalten sein sollen, sowie weitere Navigationsoptionen, die auf der Struktur Ihrer Site und den Seitenbeziehungen basieren. Dies ist nützlich, wenn Sie Seiten haben, die in die Site eingefügt werden müssen, aber als Teil Ihrer Navigationskomponenten keinen Sinn ergeben. Sie könnten beispielsweise eine Fehlerseite haben, die erscheint, wenn die Site auf ein Problem stößt. Diese Fehlerseite wollen Sie allerdings nicht als Teil der Navigation anzeigen.
  1. Doppelklicken Sie in der Sicht 'Projekt-Explorer' auf Websitenavigation, um die Site-Struktur anzuzeigen.
  2. Sie sehen, dass für alle Ihrer Seiten standardmäßig die Option In Navigation anzeigen ausgewählt ist, da das Symbol In Navigation anzeigen () sichtbar ist. Für jede Seite, die in einer Navigationsleiste erscheinen soll, muss diese Option ausgewählt sein. Sie können eine Seite auch inaktivieren, damit sie nicht in der Navigation angezeigt wird. Sie müssen die Seite mit den Suchergebnissen ("Gefilterte Anzeigen") für die Navigation deaktivieren, da Benutzer über die Suchoption auf der Seite "Alle Kleinanzeigen anzeigen" dorthin geleitet werden.
    1. Klicken Sie mit der rechten Maustaste auf das Seitensymbol Gefilterte Anzeigen.
    2. Wählen Sie Navigation > In Navigation anzeigen aus, um die Markierung zu entfernen. Das Symbol In Navigation anzeigen müsste auf dem Seitensymbol Gefilterte Anzeigen nun abgeblendet sein.
  3. Sie müssen ausserdem Ihre Seite "Anzeige aktualisieren" deaktivieren, da der Benutzer von der Aktualisierungsoption auf der Seite "Alle Kleinanzeigen anzeigen" aus hierhin geleitet wird. Klicken Sie mit der rechten Maustaste auf das Seitensymbol Anzeige aktualisieren. Wählen Sie als nächstes Navigation > In Navigation anzeigen aus, um die Markierung zu entfernen. Das Symbol In Navigation anzeigen müsste auf dem Seitensymbol Anzeige aktualisieren nun abgeblendet sein.
  4. Sie müssen für Ihre Site ein Navigationsstammverzeichnis definieren. Die oberste Seite, normalerweise die erste erstellte Seite, wird oft als Navigationsstammverzeichnis definiert. Klicken Sie mit der rechten Maustaste auf das Seitensymbol Alle Kleinanzeigen anzeigen und klicken Sie auf Navigation > Navigationsstammverzeichnis definieren. Bei dem Symbol () am oberen Rand des Seitensymbols handelt es sich um das Symbol für das Stammverzeichnis. Das Navigationsstammverzeichnis ist wichtig, da es die Link-Ebenen bestimmt, die bei der Generierung der Websitenavigation (z.B. Navigationsleisten) verwendet werden.
    Hinweis: Die von der Site-Navigation für die Seiten 'Alle Kleinanzeigen anzeigen' und 'Anzeige aufgeben' definierten Standardoptionen dürfen nicht geändert werden.
  5. Drücken Sie Strg+S, um die Änderungen zu speichern.

Eine Navigationskomponente zu Ihrer Seitenschablone hinzufügen

  1. Kehren Sie zu Ihrer Seitenschablone zurück, indem Sie in der Sicht 'Projekt-Explorer' doppelt auf die Datei template.jtpl klicken.
  2. Klicken Sie in der Sicht "Palette" auf Websitenavigation, um den Drawer zu öffnen, der die Navigationskomponenten enthält. Es gibt viele verschiedene Arten von dynamischen Navigationskomponenten, die Sie zu Ihrer Website hinzufügen können, einschließlich einer Website-Übersicht. Die einfachste Komponente ist der horizontale Balken, der aus einer Reihe von Links auf Basis der Site-Struktur besteht.
  3. Obwohl Sie wissen, dass Sie am oberen Ende jeder Seite eine Reihe mit Links benötigen, über die Benutzer auf andere Seiten zugreifen können, möchten Sie Ihre Navigation auch grafisch interessanter gestalten. Ziehen Sie die Komponente Horizontaltabulatoren in die zweite Zeile der Seitenschablone; diese Komponente erstellt die dynamischen Links in einer tabulierten Zeile. Der Assistent Horizontaltabulatoren einfügen wird geöffnet.
  4. Akzeptieren Sie die Standardeinstellungen, um eine Navigationskomponente Sample zu verwenden.
  5. Akzeptieren Sie in den Piktogrammbildern (horizontal-tab01.jsp) die Standardwerte und beachten Sie, dass das Feld Dateiname automatisch ausgefüllt wird. Klicken Sie auf Weiter.
  6. Wählen Sie den Linktyp aus, der auf Basis der Seitenbeziehungen in der Navigationsleiste erscheinen soll. Um anzugeben, dass die Anfangsseite Ihrer Site sowie die gleichgeordneten und untergeordneten Elemente der jeweiligen Seiten in der Navigation angezeigt werden sollen, stellen Sie sicher, dass die folgenden Seiten ausgewählt sind: Beachten Sie, dass Sie bei Auswahl von vorherigen oder nächsten Links die Möglichkeit haben, eine Beschriftung (z.B. "Zurück" und "Vor") anzugeben.
  7. Klicken Sie auf Weiter. Akzeptieren Sie auf der Seite 'Optionale Einstellungen für Spezifikationsdatei' des Assistenten die Standardwerte. Wenn Sie die Links mit Hilfe von angepassten JSP-Tags zur Laufzeit generieren möchten, wählen Sie JSP-Navigation aus. Wenn Sie die Links mit Hilfe von angepassten HTML-Tags zur Entwurfszeit generieren möchten, wählen Sie HTML-Navigation aus. Wenn Sie einen angepassten HTML-Tag in einer Faces-JSP-Seite hinzufügen, klicken Sie auf das Kontrollkästchen Faces-Link verwenden, um einen outputLink-Tag für Faces zu erstellen.
  8. Klicken Sie auf Fertig stellen. Das Symbol Navigationskomponente () wird auf der Seitenschablone angezeigt.
  9. Speichern Sie Ihre Änderungen an der Seitenschablone. Bei Speicherung der Seitenschablone werden die Änderungen an der dynamischen Navigation auf alle Seiten Ihrer Site angewandt.
  10. Doppelklicken Sie in der Sicht 'Projekt-Explorer' auf Websitenavigation, um die Site-Struktur anzuzeigen. Da die Webseiten nun eine Navigationskomponente aufweisen, wird das Symbol () (das angibt, dass für die Seite keine Websitenavigation vorhanden ist) nicht auf dem Seitensymbol angezeigt.
    Websitenavigation mit Navigationskomponente.

Die Navigationskomponente fügt mehrere Dateien zu Ihrem Webprojekt hinzu. Beachten Sie, dass die Sicht 'Projekt-Explorer' nach dem Speichern der Schablone eine neue .jsp- und mehrere .gif-Dateien enthält. Diese Dateien zeigen die Registerkarten in Ihren Seiten an:

Projekt-Explorer mit Navigation

Vorschau Ihrer Navigation

Wenn Sie sehen möchten, wie die Navigation auf den tatsächlichen Seiten aussieht, klicken Sie doppelt auf die Datei all_records.jsp in der Sicht 'Projekt-Explorer', und klicken Sie anschließend auf die Registerkarte Vorschau in Page Designer. Sie sehen, dass die Namen, die auf den Registerkarten erscheinen, die Navigationsbeschriftungen der Seiten sind, nicht die Dateinamen. Beachten Sie ausserdem, dass die aktuelle Seite als die hervorgehobene Registerkarte dargestellt wird. Wenn Sie durch die Site navigieren, bleibt die aktuelle Seite stets die obere, hervorgehobene Registerkarte.

Tipp: Wenn Sie die Struktur Ihrer Site in der Sicht "Navigation" ändern, ändern sich auch die dynamischen Navigationslinks automatisch, so dass sie die neue Struktur widerspiegeln.

Navigationsregisterkarten

Nachdem Sie nun die dynamische Navigation eingerichtet haben, sind Sie bereit, mit Übung 1.7: Vorschau der Website aufrufen zu beginnen.

Nutzungsbedingungen | Feedback

(C) Copyright IBM Corporation 2000, 2004. Alle Rechte vorbehalten.