Creare un layout

In questa guida andremo a mostrare il funzionamento di TYPOlight per quanto riguarda il disegno delle pagine del sito web.

Per questo tutorial usiamo la versione 2.7.1 di TYPOlight, in particolare utilizzaremo la versione localizzata in italiano, ma i concetti di fondo possono essere applicati a qualsiasi versione del CMS.

E' possibile scaricare questa versione dalla sezione download di questo sito.

 

 

Creare un layout in TYPOlight

Come prerequisito occorre avere un'installazione di TYPOlight di base senza importare alcunsito web di esempio.

Il sito web che andremo a creare sarà molto semplice, avrà un'intestazione, un menu orizzontale, l'area principale e in piè di pagina.

 

Una volta che avremo appreso le nozioni di base sarà poi molto semplice creare layout più complessi.

 

Effettuiamo il login con l'utente amministratore e

 

 

Creare un modulo personalizzato

Come prima operazione, andiamo a creare un modulo personalizzato.

Per fare questo selezioniamo nella sezione Layout la voce di menu Moduli 

Ora aggiungiamo un nuovo modulo selezionando il pulsante Aggiungi modulo

Indichiamo come nome del modulo Testata e selezioniamo come tipologia modulo Codice HTML

Nello spazio riservato al codice HTML, scrivere il seguente codice:

<h1>Titolo del sito web</h1>

Ora possiamo chiudere il modulo con il pulsante Salva e chiudi

 

 

Creare un modulo di navigazione orizzontale

Ora andiamo a creare il menu di navigazione del nostro sito web. Sempre in questa funzione clicchiamo su Aggiungi modulo.

Scriviamo Menu di navigazione come nome del modulo e selezioniamo Menu navigazione come tipologia di modulo.

Salviamo con il pulsante Salva e chiudi

 

 

Creare un modulo piè di pagina

Creiamo un ultimo modulo cliccando sul pulsante Aggiungi modulo

Indichiamo come titolo Piè di pagina e selezioniamo Codice HTML

Aggiungiamo il seguente codice HTML

<hr>&copy 2009 Website Name. All rights reserved.

Salviamo con il pulsante Salva e chiudi

 

Importare un foglio di stile

Per rendere la realizzazione più facile, andremo a recuperare un foglio di stile vi metto a disposizione.

Effettuate ildownload del file menu-navigazione.css e posizionatelo nella cartella tl_files della vostra installazione.

 

 

Il foglio di stile che andremo ad importare contiene le formattazioni per il menu di navigazione orizzontale.

 

Selezioniamo la voce Fogli di stile , qui clicchiamo su Importa CSS

Sfogliamo la cartella dei file e selezioniamo il file menu-navigazione.css nella cartella principale dei files

In questo modo abbiamo importato un foglio di stile.

 

 

Creazione di un layout di pagina

Il passo successivo consite nella realizzazione di almeno un layout di pagina.

Per realizzarlo utilizziamo la funzione Layout pagina. Qui selezioniamo in alto Nuovo layout

Andiamo ad indicare come nome del layout Principale ed andiamo a selezionare l'opzione Layout standard che indicherà al sistema di utilizzare questo layout come schema predefinito.

 

Scendendo, tra le varie opzioni, selezioniamo:

Includi intestazione ed indichiamo un'altezza di 80px

Includi piè pagina ed indichiamo 30px come altezza

 

A seguire indichiamo quante colonne deve avere il nostro sito. Per questo esempio faremo un sito con una sola colonna, per cui selezioniamo l'icona che raffigura questa scelta

A seguire indichiamo quali fogli di stile includere nel layout. Nel nostro caso includiamo il css che abbiamo importato in precedenza, menu-navigazione.css.

 

Di seguito troviamo la sezione Moduli inclusi, dove possiamo indicare per ogni area del layout quali moduli devono essere inclusi.

Come primo passo andiamo ad aggiungere il modulo denominato Testata. Per fare questo selezioniamolo nel menu a tendina Modulo mentre nel menu a tendina Colonna selezioniamo dove vogliamo che il nostro modulo venga visualizzato, nel nostro caso nell'Intestazione.

Adesso andiamo ad aggiungere una nuova riga per avere un nuovo modulo.

Nella struttura che andremo a realizzare successivamente alla testata abbiamo previsto il menu di navigazione sempre all'interno dell'intestazione.

Clicchiamo sull'icona per aggiungere il modulo.

Selezioniamo Menu di navigazione nel primo menu a tendina ed Intestazione nel secondo menu.

 

Ora andremo ad indicare a TYPOlight che i vari contenuti che saranno inseriti nelle pagine, verranno visualizzati nell'area principale del layout.

Per fare questo, aggiungiamo una nuova riga cliccando sull'icona

Nel primo menu a tendina selezioniamo Articoli mentre nel secondo selezioniamo Spazio principale

 

Per terminare andiamo a definire quale modulo andrà visualizzato nel piè di pagina.

Aggiungiamo una nuova rica con il pulsante e similmente alle righe precedenti, selezioniamo il modulo Piè di pagina collegandolo alla colonna Piè pagina

 

Come ultima operazione indichiamo la larghezza che avrà il nostro layout. Clicchiamo sul check Layout statico. 

Verranno visualizzate ulteriori opzioni che ci permettono di indicare la larghezza delle pagine in assoluto o in percentuale e la posizione sullo schermo. Nel nostro caso andiamo ad indicare una Larghezza complessiva di 760 px, ricordandoci di selezionare l'unità pixel nel menu a tendina successivo. Nel menu a tendina Allineamento sito selezioniamo Centro, così da avere le nostre pagine al centro dello schermo.

 

Realizzare la struttura del sito

Ora che è stato definito almeno un layout andiamo a creare la struttura del nostro sito.

Selezioniamo la voce di menu Struttura sito.

Aggiungiamo una nuova pagina con l'apposito pulsante . Ora TYPOlight ci chiederà di selezionare a quale livello aggiungere la nuova pagina. Essendo la prima, la scelta è obbligata ed in corrispondenza di 'TYPOlight webCMS' vi sarà l'icona della cartelletta sulla quale cliccare.

 

Indichiamo come titolo della pagina 'Sito di prova'. Successivamente selezioniamo dal menu Tipo pagina, l'opzione Pagina "root" di un nuovo sito.

Tra le opzioni da selezionare andiamo a flaggare Assegna un layout in modo da impostare il layout che le pagine del sito utilizzeranno in modo predefinito.

Per terminare selezioniamo l'opzione Pubblicato per confermare la publicazione

 

Qui apriamo una parentesi.

All'interno della struttura delle pagine di TYPOlight vi sono diverse tipologie di pagine. Dalla pagina di errore 404 alle pagine di ridirezione ad altre pagine.

Esiste una tipologia di pagina che indica a TYPOlight che da questa si estenderà un nuovo sito web con determinate caratteristiche.

Questo è utile quando si ha la necessità di organizzare in modo logico e pulito siti web molto complessi e che magari hanno anche sezioni molto differenti tra loro.

Anche se il vostro sito web non è particolarmente complesso suggerisco di creare sempre come prima pagina una nuova Root. Questo anche solo per definire impostazioni che altrove non possono essere indicate, come ad esempio il nome del file sitemap oppure un titolo di default per le pagine.

 

Ora andiamo a creare la prima pagina del sito selezionando ancora il pulsante Nuova pagina

Quando ci verrà richiesto dove aggiungere la nuova pagina selezioniamo Sito di prova cliccando sull'icona della cartellina con la freccia che indica alla nostra destra

Qui indichiamo come titolo della pagina Home Page, come tipologia pagina Pagina standard e selezioniamo il check Pubblicato.

Facciamo la stessa operazione per le pagine successive, creando le pagine denominate Azienda, Servizi, Prodotti, Contatti

Una volta eseguite queste operazioni, vi ritroverete un situazione simile a quella mostrata nella seguente immagine

 

 

Aggiungere contenuti alle pagine

Arrivati a questo punto, occorre aggiungere i contenuti alle pagine. Per fare questo accediamo alla sezione Articoli.

Selezioniamo il pulsante Nuovo Articolo. Ora andiamo a selezionare a quale pagina aggiungere un articolo selezionado l'icona in corrispondenza della pagina voluta.

Aggiungiamo un titolo all'articolo, io per convenzione utilizzo spesso il nome della pagina che lo contiene.

Successivamente clicchiamo sul check box Pubblicato e terminiamo con il pulsante Salva e modifica.

In questo modo abbiamo creato un articolo ed ora stiamo aggiungendo contenuti a questo articolo.

Selezionando Nuovo elemento andremo ad aggiungere un nuovo contenuto all'articolo. Selezioniamo il pulsante incolla dopo.

 

Come tipologia di elemento lasciamo il tipo Testo in modo da poter scrivere quello che desideriamo. Indichiamo eventualmente una testata H1 ed un breve testo descrittivo.

Salviamo e chiudiamo.

 

Ripetiamo i passaggi per ogni pagina del sito fino ad avere una situazione come la seguente:

 

Fatto questo il nostro sito è terminato.

Potete accedere al vostro sito ed avere un risultato simile a questo:

 

 

 

Buon divertmento con il vostro CMS