Übung 1.6: Dynamische Navigation der Website realisieren
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:

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.
- Doppelklicken Sie in der Sicht "Projektnavigator" auf Websitenavigation, um Ihre Site-Struktur anzuzeigen.
- 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. Das Symbol In Navigation anzeigen ist das erste Symbol in der Zeile von Symbolen auf dem Seitensymbol. Für jede Seite, die in einer Navigationsleiste erscheinen soll, muss diese Option ausgewählt sein. Um die dynamische Navigation zu aktivieren, fügen Sie einen Link auf diese Seite hinzu. Sie können auch die Anzeige einer Seite in der Navigation deaktivieren. 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.
- Klicken Sie mit der rechten Maustaste auf das Seitensymbol Gefilterte Anzeigen.
- Wählen Sie Navigation > In Navigation anzeigen aus, um die Markierung zu entfernen. Das Symbol In Navigation anzeigen sollte nun auf dem Seitensymbol Gefilterte Anzeigen abgeblendet sein.
- 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 sollte nun auf dem Seitensymbol Anzeige aktualisieren abgeblendet sein.
- 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. Das dritte Symbol (
) in der Zeile ist das Symbol 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 Sitenavigation für die Seiten "Alle Kleinanzeigen anzeigen" und "Anzeige aufgeben" definierten Standardoptionen sollten nicht geändert werden.
- Drücken Sie Strg+S.
Eine Navigationskomponente zu Ihrer Seitenschablone hinzufügen
- Kehren sie zu Ihrer Seitenschablone zurück, indem Sie in der Sicht "Projektnavigator" doppelt auf template.jtpl klicken.
- 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 sich aus einer Reihe von Links auf Basis der Site-Struktur zusammensetzt.
- 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 und übergeben Sie die Komponente Horizontaltabulator in die zweite Zeile Ihrer Seitenschablone; diese Komponente erstellt die dynamischen Verbindungen in einer Reihe von Registerkarten. Der Assistent Horizontaltabulatoren einfügen wird geöffnet.
- Akzeptieren Sie die Standardeinstellungen, um eine Navigationskomponente Sample zu verwenden.
- Akzeptieren Sie die Standardeinstellung in den Miniaturabbildungen
(horizontal-tab01.html) und beachten Sie, dass das Feld Dateiname automatisch ausgefüllt wird.
- Wählen Sie den Linktyp aus, der auf Basis der Seitenbeziehungen in der Navigationsleiste erscheinen soll. Um zu bestimmen, dass die oberste Seite Ihrer Site, sowie die gleichgeordneten und untergeordneten Elemente der jeweiligen Seiten in der Navigation erscheinen, stellen Sie sicher, dass Folgendes ausgewählt ist:
- Anfangsseite
- Aktuelle Seite
- Gleichgeordnete Seiten
- Untergeordnete Elemente der Anfangsseite
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.
- Klicken Sie auf OK.Das Symbol Navigationskomponente (
)
wird auf der Seitenschablone angezeigt.
- Speichern Sie Ihre Änderungen an der Seitenschablone. Bei Speicherung der Seitenschablone werden die Änderungen an der dynamischen Navigation auf alle Seiten Ihrer Site angewandt.
Die Navigationskomponente fügt mehrere Dateien zu Ihrem Webprojekt hinzu. Beachten Sie, dass Ihre Sicht "Projektnavigator" nach Speicherung eine neue .html- und mehrere .gif-Dateien enthält. Diese Dateien zeigen die Registerkarten in Ihren Seiten an:
Vorschau Ihrer Navigation
Wenn Sie sehen möchten, wie die Navigation in den tatsächlichen Seiten und nicht nur in der Schablone aussieht, doppelklicken Sie in der Sicht "Projektnavigator" auf all_records.jsp und klicken sie dann in Page
Designer auf die Registerkarte Vorschau. 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.
Beachten Sie, dass sich neben zwei Registerkarten Linksymbole
und abc-Symbole befinden. Diese Symbol sollen Sie daran erinnern, dass es sich hierbei um Links und um dynamisch generierten Text handelt. Wenn Sie die Seite testen oder die Seite auf einem echten Server anzeigen, erscheinen diese Symbole nicht.
Nachdem Sie nun die dynamische Navigation eingerichtet haben, sind Sie bereit, mit
Übung 1.7: Vorschau der Website aufrufen zu beginnen.