Per definire l'aspetto grafico di un Sito, WebSite X5 consente di utilizzare un Template Predefinito o un Template Vuoto. Indipendentemente dalla scelta fatta, è possibile utilizzare le opzioni messe a disposizione dalla finestra Struttura del Modello per personalizzare completamente il Template scelto o, nel caso di un Template Vuoto, per procedere alla sua creazione da zero. Non solo è possibile definire la struttura del Template grafico per la visualizzazione Desktop ma, nel caso in cui si stia realizzando un Sito responsive, è possibile definire anche come il Template deve presentarsi nelle visualizzazioni corrispondenti ai diversi breakpoint impostati.
|
L'Header e il Footer del Modello realizzato possono essere completati con l'inserimento di contenuti come: testi, immagini, animazioni, gallerie, campi di ricerca e collegamenti. Le opzioni necessarie sono presentate nella finestra Contenuto del Modello a cui si accede cliccando sul pulsante Avanti.
|
Per facilitare il lavoro, la finestra Struttura del Modello offre un'Anteprima in cui viene visualizzata una rappresentazione schematica della Pagina.
Oltre a questo, nel caso si stia lavorando alla creazione di un Sito responsive, la finestra presenta anche una Responsive Bar che riprende quella già proposta nella finestra Risoluzioni e Responsive Design.
La Responsive Bar ripropone tutti i breakpoint impostati e, in base a questi, indentifica degli Intervalli: è sufficiente cliccare su un Intervallo per selezionarlo e procedere alla definizione del Modello per la Visualizzazione corrispondente.
Una volta selezionata la Visualizzazione a cui si vuole lavorare, è poi possibile scegliere la sezione di pagina da modificare utilizzando l'apposita lista oppure cliccando direttamente sulle diverse aree della struttura nell'Anteprima della Pagina.
È consigliabile, dunque, procedere con ordine definendo prima il Modello per la Visualizzazione Desktop e poi, a scendere, come il Modello deve cambiare in tutti gli altri casi, fino ad arrivare alla Visualizzazione Mobile.
Innanzi tutto, per procedere alla creazione di un Modello personalizzato è necessario specificare il Tipo di Struttura, ovvero se è necessario prevedere solo un Header e un Footer o anche una Barra laterale. Nello specifico, le possibili alternative sono:
|
Header e Footer
|
|
Header, Footer e Barra laterale a sinistra
|
|
Header, Footer e Barra laterale a destra
|
|
Scelto il tipo di Struttura, occorre selezionare la Sezione della Pagina sulla quale si vuole lavorare. Le sezioni in cui è suddivisa la Pagina sono:
|
Sfondo della Pagina: è l'area esterna alla Pagina e viene visualizzata quando la finestra del Browser viene aperta con dimensioni superiori rispetto alla risoluzione del Sito.
|
|
Sfondo dell'Header: è la parte dello Sfondo della Pagina che sta dietro all'Header.
|
|
Header: è l'intestazione, una sezione prevalentemente grafica ideale per ospitare elementi come titolo e sottotitolo del Sito, logo aziendale, campi di ricerca, Menu di navigazione principale e menu di servizio con i link, per esempio, per la visualizzazione della mappa o per la scelta della lingua di consultazione.
|
|
Contenuto della Pagina: è l'area destinata ad ospitare il contenuto vero e proprio delle Pagine ed, eventualmente, i Menu e i sotto-menu di navigazione.
|
|
Footer: è il piè di pagina, altra sezione prevalentemente grafica che ha lo scopo di chiudere visivamente la Pagina. In genere, in quest'area trovano collocazione elementi come note, disclaimer, copyright, partita IVA, indirizzi e-mail.
|
|
Sfondo del Footer: è la parte dello Sfondo della Pagina che sta dietro al Footer.
|
|
Barra laterale: disponibile solo se è stato selezionato un tipo di struttura che la prevede, è una colonna, affiancata a destra o a sinistra dei contenuti della Pagina, che può essere utilizzata per creare un Menu di navigazione verticale.
|
|
Se si imposta lo Sfondo dell'Header o lo Sfondo del Footer come Trasparente, questi vengono trattati come parte integrante dello Sfondo della Pagina e ne assumono lo stesso aspetto. In caso contrario, si ottengono delle bande per l'Header e/o il Footer che occupano tutta la larghezza della finestra del Browser.
|
|
Per tutte le sezioni della Pagina è possibile agire sulle seguenti Proprietà grafiche:
| ▪ | Colore: specifica il colore da utilizzare come riempimento dello sfondo. |
| ▪ | File Immagine: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo. L'immagine può essere ricercata o all'interno della Libreria online richiamabile attraverso il pulsante  o nelle cartelle locali attraverso il pulsante  Selezione file. |
| ▪ | Disposizione: specifica se l'immagine inserita come sfondo deve essere ripetuta o meno. L'immagine può essere ripetuta solo in senso orizzontale, solo in senso verticale o in entrambe i sensi, in modo da giungere ad occupare l'intero spazio a disposizione. In più, solo per la sezione Sfondo della Pagina, è possibile fare in modo che l'immagine venga adattata, ovvero ridimensionata in modo da coprire tutto lo sfondo: in questo caso, possono non venir rispettate le proporzioni originali. |
| ▪ | Allineamento: definisce come deve essere allineata l'immagine inserita rispetto all'area della Pagina selezionata. |
Solo per l'area Sfondo della Pagina è disponibile l'opzione:
| ▪ | Immagine di sfondo fissa: attivando questa opzione, l'immagine inserita come sfondo della Pagina viene mantenuta fissa anche quando il contenuto della Pagina viene fatto scorrere mediante la barra di scroll. |
|
Per alcune sezioni della Pagina è possibile specificare anche le Dimensioni.
A seconda della sezione di Pagina selezionata possono essere proposte le seguenti opzioni:
| ▪ | Larghezza: permette di impostare o riporta il valore espresso in pixel della larghezza dell'area della Pagina selezionata. Nel caso specifico del Contenuto della Pagina non è possibile impostare manualmente questo valore: viene ripreso in automatico quello impostato nella finestra Risoluzioni e Responsive Design attraverso l'opzione Risoluzione del Sito, nel caso di Sito Desktop, o come Visualizzazione Desktop, nel caso di Sito responsive. |
| ▪ | Altezza: permette di impostare o riporta il valore espresso in pixel dell'altezza dell'area della Pagina selezionata. |
| ▪ | Altezza minima: disponibile solo per l'area Contenuto della Pagina, imposta il valore espresso in pixel dell'altezza minima che l'area della Pagina destinata ad ospitare i contenuti deve avere, a prescindere dall'altezza dei contenuti effettivamente inseriti. |
| ▪ | Estendi alla larghezza della finestra del Browser: disponibile solo per le sezioni Header e Footer, fa in modo che l'aspetto definito non venga applicato solo per la larghezza corrispondente al contenuto della Pagina ma si estenda per tutta la larghezza della finestra del Browser. |
|
Grazie alla opzioni disponibili, non c'è praticamente alcun vincolo nel definire le dimensioni e la posizione del Menu Orizzontale inserito all'interno dell'Intestazione e diventa così possibile ottenere risultati inediti.
|
|
Infine, sempre solo per alcune aree della Pagina è possibile impostare delle Proprietà Contenuti.
Per le sezioni Sfondo della Pagina e Contenuto della Pagina è disponibile l'opzione:
| ▪ | Margini: specifica il valore in pixel da impostare per i margini. Il margine è lo spazio vuoto tra il bordo della sezione e il suo contenuto. |
Solo per la sezione Sfondo della Pagina è disponibile anche l'opzione:
| ▪ | Allineamento: specifica come deve essere allineata la Pagina rispetto alla finestra del Browser. |
Solo per la sezione Barra laterale, invece, è disponibile l'opzione:
| ▪ | Su scroll della pagina, mantieni gli oggetti sempre visibili: fa in modo che, durante lo scroll della pagina, tutti i contenuti inseriti nella Barra laterale (attraverso la finestra Contenuto del Modello) si spostino in modo da rimanere sempre in primo piano. |
|
Best practice:
