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 Selezione 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. L'icona Mostra nella navigazione è la prima icona della riga di icone nelle icone delle pagine. Questa opzione deve essere selezionata per ciascuna pagina che si desidera visualizzare in una barra di navigazione. Per abilitare la navigazione dinamica, per aggiungere un collegamento a quella pagina. È anche possibile disabilitare la visualizzazione di una pagine nella nabvigazione. 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 essere visualizzata in grigio 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 essere visualizzata in grigio 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 page icon e fare clic su Navigazione > Imposta primo livello di navigazione. La terza icona () è l'icona Primo livello di navigazione. Il primo livello di navigazione è importante in quanto determina i livelli di collegamento utilizzati quando si genera la navigazione del sito Web, cme 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.

Aggiunta di un componente per la navigazione al modello pagina

  1. Ritornare al modello pagina facendo doppio clic su template.jtpl nella vista Selezione 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 e rilasciare 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 scheda orizzontale.
  4. Accettare l'impostazione predefinita per utilizzare un componente per la navigazione di esempio.
  5. Accettare l'impostazione predefinita nelle immagini Miniatura (horizontal-tab01.html) e controllare che il campo Nome file venga compilato automaticamente.
  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 opzioni 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. Fare clic su OK. L'icona Componente di navigazione icon () viene visualizzata nel modello pagina.
  8. 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.

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

Selezione progetti con navigazione

Visualizzazione dell'anteprima della navigazione

Se si desidera controllare come verrà visualizzata la navigazione nelle pagine vere e proprie piuttosto che nel modello, fare doppio clic su all_records.jsp nella vista Selezione 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

Si noti che accanto alle due schede vi sono icone di collegamenti Icona collegamento e i simboli abc. Questi simboli sono lì per ricordare che si tratta di collegamenti e che sono testo generato in maniera dinamica. Quando si verifica la pagina oppure si visualizza la pagina su un server reale, queste icone non vengono visualizzate.

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 1999, 2004. Tutti i diritti riservati.