Esercizio 1.6: Navigazione dinamica del sito Web

Mostra

Prima di iniziare, è necessario completare l'Esercizio 1.5: Applicazione di un modello pagina al sito Web.

Quando è stata progettata la struttura del sito Web nell'Esercizio 1.2, è stato necessario operare alcune decisioni sulle relazioni tra le pagine. Prima di iniziare, esaminare i vari passi eseguiti per il layout delle icone delle pagine, collegate tra loro da linee:

Struttura del sito

Esistono vari modi per collegare le pagine tra loro. Queste relazioni sono simili a quella di una famiglia. In questo, esempio, View All Classifieds e la pagina principale, mentre le altre pagine sono le relative pagine secondarie. Inoltre, queste tre pagine sono tra loro elementi di pari livello.

Queste relazioni tra pagine vengono utilizzate per generare collegamenti di navigazione come le barre e le schede di navigazione. Ciascuna pagina crea automaticamente i propri collegamenti di navigazione sulla base delle pagine alle quali è collegata. Questo processo è noto come navigazione dinamica.

Verifica della struttura del sito

Si desidera assicurarsi che la struttura del sito sia stata impostata per specificare quali pagine includere nella navigazione. È possibile specificare in Web Site Designer quali pagine includere come collegamenti nella navigazione dinamica, quali pagine includere nelle mappe del sito così come in altre opzioni di navigazione che si basano sulla struttura del sito e sulle relazioni delle pagine. Ciò è molto utile quando vi sono pagine da includere nel sito, ma che non sarebbe logico includere come parte delle funzioni di navigazione. Ad esempio, è possibile avere una pagina di errore che viene visualizzata quando si verifica un problema sul sito; tuttavia, non si desidera visualizzare questa pagina di errore come parte della navigazione.
  1. Fare doppio clic su Navigazione del sito Web nella vista Esplora progetti per visualizzare la struttura del sito.
  2. È possibile notare che tutte le pagine presentano l'opzione Mostra nella navigazione selezionata per impostazione predefinita, in quanto l'icona Mostra nella navigazione () è visibile. Questa opzione deve essere selezionata per ciascuna pagina che si desidera visualizzare in una barra di navigazione. È anche possibile disabilitare una pagina, in modo che non venga visualizzata nella navigazione. Occorre disabilitare la pagina dei risultati di ricerca, Filtered Listings, dalla navigazione in quanto l'utente verrà indirizzato in questa pagina dall'opzione di ricerca che si trova nella pagina View All Classifieds.
    1. Fare clic con il tasto destro del mouse sull'icona della pagina Filtered Listings.
    2. Selezionare Navigazione > Mostra nella navigazione per deselezionarla. L'icona Mostra nella navigazione dovrebbe non disponibile sull'icona della pagina Filtered Listings.
  3. Occorre disabilitare la pagina dei risultati di ricerca, Update Listings, dalla navigazione in quanto l'utente verrà indirizzato in questa pagina dall'opzione di aggiornamento che si trova nella pagina View All Classifieds. Fare clic con il tasto destro del mouse sull'icona della pagina Update Listing. Successivamente, selezionare Navigazione > Mostra nella navigazione per deselezionarla. L'icona Mostra nella navigazione dovrebbe non essere visualizzata sull'icona della pagina Update Listing.
  4. Occorre impostare un primo livello di navigazione per il sito. La pagina iniziale, di solito la prima pagina del sito che viene creata, viene spesso impostata come primo livello di navigazione. Fare clic con il tasto destro del mouse sull'icona della pagina View All Classifieds e fare clic su Navigazione > Imposta primo livello di navigazione. L'icona ()  nella parte superiore dell'icona della pagina, è l'icona principale. Il primo livello di navigazione è importante in quanto determina i livelli di collegamento utilizzati quando si genera la navigazione del sito Web, come le barre di navigazione.
    Nota: le opzioni predefinite impostate per la navigazione del sito per la pagina View all Classifieds e la pagina Post a Listing non dovrebbero essere deselezionate.
  5. Premere Ctrl+S per salvare le modifiche.

Aggiunta di un componente per la navigazione al modello pagina

  1. Ritornare al modello pagina facendo doppio clic su template.jtpl nella vista Esplora progetti.
  2. Nella vista Tavolozza, fare clic su Navigazione del sito Web per aprire il cassetto che contiene i componenti per la navigazione. Ci sono molti tipi di componenti per la navigazione dinamica che è possibile aggiungere al sito Web, compresa una mappa del sito. Il componente base è la Barra orizzontale che è costituita da una serie di collegamenti sulla base della struttura del sito.
  3. Anche se occorre aggiungere una riga di collegamenti all'inizio di ciascuna pagina per consentire agli utenti di accedere ad altre pagine del sito, è tuttavia possibile rendere più interessante la navigazione a un punto di vista visivo. Trascinare il componente Schede orizzontali nella seconda riga del modello pagina; questo componente che i collegamenti dinamici disponendoli in orizzontale sotto forma di schede. Si apre la procedura guidata Inserimento schede orizzontali.
  4. Accettare l'impostazione predefinita per utilizzare un componente per la navigazione di esempio.
  5. Accettare l'impostazione predefinita nelle immagini Miniatura (horizontal-tab01.jsp) e controllare che il campo Nome file venga compilato automaticamente. Scegliere Avanti.
  6. Selezionare il tipo di collegamenti che si desidera visualizzare nella barra di navigazione, sulla base delle relazioni tra le pagine. Per specificare che la pagina iniziale del sito e tutte le pagine di pari livello e secondarie di ciascuna pagina verranno visualizzate nella navigazione, assicurarsi che le seguenti pagine siano selezionate: Si noti che se si seleziona il collegamento precedente o successivo, è possibile fornire un'etichetta per questi collegamenti come, ad esempio, Indietro e Avanti.
  7. Scegliere Avanti. Accettare le impostazioni predefinite nella pagina Impostazioni facoltative per il file di specifica della procedura guidata. Se si desidera generare i collegamenti al runtime utilizzando le tag di personalizzazione JSP, selezionare Navigazione JSP. Se si desidera generare i collegamenti in fase di progettazione utilizzando i tag di personalizzazione HTML, selezionare Navigazione HTML. Se si desidera aggiungere un tag di personalizzazione HTML in una pagina Faces JSP, selezionare la casella di controllo Utilizza collegamento Faces per creare il tag outputLink per Faces.
  8. Fare clic su Fine. L'icona Componente di navigazione () viene visualizzata nel modello pagina.
  9. Salvare le modifiche apportate al modello pagina. Quando si salva il modello pagina, le modifiche apportate alla navigazione dinamica vengono applicate a tutte le pagine del sito.
  10. Fare doppio clic su Navigazione del sito Web nella vista Esplora progetti per visualizzare la struttura del sito. Poiché le pagine Web a questo punto dispongono di un componente di navigazione, l'icona () che indica che la pagina non dispone di navigazione, non viene visualizzata.
    Navigazione del sito Web con componente di navigazione

Il componente di navigazione aggiunge numerosi file al progetto Web. Dopo aver salvato il modello, controllare che la vista Esplora progetti contenga un nuovo file .jsp e diversi file .gif. Questi file visualizzano le schede presenti nelle pagine:

Esplora progetti con navigazione

Visualizzazione dell'anteprima della navigazione

Se si desidera controllare come verrà visualizzata la navigazione nelle pagine piuttosto che nel modello, fare doppio clic su all_records.jsp nella vista Esplora progetti, quindi fare clic sulla scheda Anteprima in Page Designer. È possibile notare che i nomi visualizzati nelle schede sono le etichette di navigazione per le pagine, anziché i nomi dei file. Si noti, inoltre, che la pagina corrente venga visualizzata come scheda evidenziata; durante la navigazione all'interno del sito, la pagina corrente sarà sempre la scheda evidenziata in alto.

Suggerimento: se si modifica la struttura del sito nella vista Navigazione, i collegamenti della navigazione dinamica verranno aggiornati automaticamente per riflettere la nuova struttura.

Schede di navigazione

Ora che è stata impostata la navigazione dinamica, è possibile passare all'Esercizio 1.7: Visualizzazione dell'anteprima del sito Web.

Termini di utilizzo | Feedback

(C) Copyright IBM Corporation 2000, 2004. Tutti i diritti riservati.