Come sfruttare le proprietà di Pagine e Livelli

Best Practice > Passo 3 - Mappa >

Come sfruttare le proprietà di Pagine e Livelli

Previous pageReturn to chapter overviewNext page
Mostra/Nascondi testo nascosto 

Gli elementi fondamentali per disegnare la Mappa del Sito sono i Livelli, le Pagine e i Separatori (vedere, Passo 3 - Mappa): semplificando, se il Sito fosse un libro, le Pagine sarebbero i fogli di cui si compone, i Livelli sarebbero i capitoli e i Separatori dei segnalibri inseriti per rendere ancora più chiara l'articolazione dei contenuti.

Pagine e Livelli hanno delle Proprietà su cui è possibile agire per ottenere risultati particolari, sia dal punto di vista grafico che dal punto di vista funzionale.

Clicca per espandere/ridurreHow To: Come inserire nel Menu principale un link a un Sito esterno

Sulla base della Mappa creata al Passo 3, WebSite X5 crea automaticamente il Menu di navigazione. Testando il funzionamento del Sito sul Browser in locale, si può verificare che tutte le voci del Menu sono collegamenti attivi: quelle corrispondenti ai Livelli portano alla visualizzazione di un sotto-menu, quelle relative a una Pagina portano all'apertura della Pagina stessa.

È comunque possibile inserire all'interno del Menu di navigazione delle voci a cui sono associati collegamenti diversi: per esempio, un link che apre un Sito esterno.

Per ottenere questo risultato i passi da seguire sono i seguenti:

Al Passo 3 - Mappa, inserire un Nuovo Livello e nominarlo opportunamente.
Selezionare il Livello inserito e cliccare sul pulsante Proprietà per richiamare la finestra Proprietà Livello.
Attivare l'opzione Non visualizzare il Menu a comparsa per questo Livello e cliccare sul pulsante relativo all'opzione Collegamento su click sulla voce di Livello per richiamare la finestra Collegamento e scegliere l'azione da associare al Livello.
Dato che si deve collegare un Sito esterno, selezionare l'azione File o URL e digitare la URL del Sito nel campo File su Internet.

Con questo sistema è possibile utilizzare tutti i tipi di azione previsti dalla finestra Collegamento per creare voci particolari del Menu di navigazione del Sito.

Clicca per espandere/ridurreHow To: Come impostare lo sfondo di una Pagina diverso da quello previsto dal Modello        

In linea generale, l'aspetto grafico di tutte le Pagine di un Sito è comune ed è definito dal Modello scelto (vedere, Impostazioni del Modello). È comunque possibile lavorare su alcuni elementi di singole Pagine in modo da distinguerle da tutte le altre. Uno di questi elementi è lo sfondo della Pagina, ovvero l'area esterna alla Pagina che viene visualizzata quando la finestra del Browser viene aperta con dimensioni superiori rispetto alla risoluzione del Sito.

Clicca per espandere/ridurre
Esempio

Per fare in modo che una particolare Pagina abbia uno sfondo diverso da quello previsto dal Modello occorre:

Al Passo 3 - Mappa, selezionare la Pagina su cui si vuole agire.
Cliccare sul pulsante Proprietà per richiamare la finestra Proprietà Pagina e aprire la sezione Grafica.
Selezionare dall'apposito menu l'elemento Sfondo della Pagina e attivare l'opzione Abilita impostazioni personalizzate.  
Utilizzare l'opzione File Immagine per importare l'immagine da utilizzare come sfondo. Se necessario utilizzare le opzioni Disposizione e Allineamento per posizionare correttamente l'immagine rispetto alla finestra del Browser.
Se l'immagine inserita come sfondo deve rimanere fissa, ovvero non deve scorre insieme alla Pagina nel caso in cui questa sia più lunga di quanto può essere immediatamente visualizzato, attivare l'opzione Immagine di sfondo fissa.
Se è necessario inserire sull'immagine di sfondo della Pagina un collegamento, utilizzare l'opzione Collegamento per richiamare la finestra Collegamento e scegliere l'azione da associare.

Inserire un collegamento sullo sfondo della Pagina può essere particolarmente utile se, per esempio, l'immagine propone un messaggio pubblicitario: in questi casi, infatti, il Visitatore può cliccare sullo sfondo e atterrare su una Pagina specifica con i dettagli di quanto pubblicizzato.

<%%EXTOGGLE>How To: Come impostare lo sfondo diverso per il contenuto di una specifica Pagina del Sito  

Un altro elemento che viene definito dal Modello scelto (vedere, Impostazioni del Modello) ma che può essere personalizzato per Pagine specifiche è lo sfondo del contenuto della Pagina, ovvero l'area destinata ad ospitare il contenuto vero e proprio delle Pagine.

Clicca per espandere/ridurre
Esempio

Perché una determinata Pagina abbia uno sfondo dell'area dei contenuti diverso da quello di tutte le altre Pagine del Sito è necessario:

Al Passo 3 - Mappa, selezionare la Pagina su cui si vuole agire.
Cliccare sul pulsante Proprietà per richiamare la finestra Proprietà Pagina e aprire la sezione Grafica.
Selezionare dall'apposito menu l'elemento Sfondo del Contenuto della Pagina e attivare l'opzione Abilita impostazioni personalizzate.
Utilizzare l'opzione File Immagine per importare l'immagine da utilizzare come sfondo. Se necessario utilizzare le opzioni Disposizione e Allineamento per posizionare correttamente l'immagine.
Clicca per espandere/ridurreHow To: Come creare una pagina di approfondimento in popup

A volte si ha l'esigenza di creare una pagina in cui presentare dei brevi contenuti di approfondimento o una form che, pur facendo parte del Sito, si apra in una finestra di popup di dimensioni definite e non abbia applicati gli elementi del Modello grafico scelto.

Clicca per espandere/ridurre
Esempio - Pagina visualizzata in popup

Per ottenere questo risultato è necessario:

Creare normalmente la Pagina di approfondimento inserendo i contenuti che deve presentare.
Al Passo 3 - Mappa, selezionare la Pagina di approfondimento, cliccare sul pulsante Proprietà per richiamare la finestra Proprietà Pagina e aprire la sezione Grafica.
Attivare l'opzione Crea la Pagina senza applicare il Modello e specificare la Larghezza Pagina in pixel.
Selezionare l'elemento (per esempio, il testo) su cui inserire il link che deve portare all'apertura della Pagina di approfondimento e cliccare sul pulsante per richiamare la finestra Collegamento.
Scegliere l'azione Pagina del Sito, selezionare la pagina di approfondimento preparata e spuntare l'opzione Apri in una finestra popup specificando le dimensioni in pixel della finestra (attenzione a riportare la stessa larghezza specificata per la creazione della Pagina).
Clicca per espandere/ridurreHow To: Come inserire delle icone a fianco delle voci del Menu di navigazione

Al pari di quanto avviene in un comune elenco puntato, le voci del Menu di navigazione possono essere affiancate da un'icona o da un'immagine di dimensioni adeguate.

Clicca per espandere/ridurre
Esempio - Icone voci Menu

Se si vuole associare un'icona particolare a una determinata voce del Menu di navigazione occorre sfruttare le Proprietà della Pagina o del Livello (a seconda dell'elemento a cui corrisponde la voce sulla Mappa):

Al Passo 3 - Mappa, selezionare la Pagina o il Livello su cui si vuole agire.
Se si lavora su una Pagina, cliccare sul pulsante Proprietà per richiamare la finestra Proprietà Pagina, aprire la sezione Grafica e selezionare l'immagine da utilizzare come Icona da visualizzare sul Menu.
Analogamente se si lavora su un Livello, cliccare sul pulsante Proprietà per richiamare la finestra Proprietà Livello e selezionare l'immagine da utilizzare come Icona da visualizzare sul Menu.