Impariamo ad usare i livelli

Come possiamo leggere dalla guida presente nel programma, un livello è un contenitore di elementi HTML inserito in una pagina web. I livelli possono essere nascosti, sovrapposti, applicati alla linea temporale (che vedremo in seguito) ecc ecc...

CREARE UN LIVELLO - Per creare un livello conviene utilizzare il terzo pulsante della colonna di sinistra della categoria 'comuni' del pannello 'oggetti' (quello con il rettangolo con gli otto punti di ridimensionamento). Lo stesso si potrà fare cliccando sulla voce 'livello' del menù 'inserisci'. Dopo aver cliccato sul tasto, mediante il mouse potremo disegnare un livello sulla nostra pagina. E' possibile creare livelli nidificati, cioè livelli nei livelli sempre con lo stesso sistema. Il livello definito potrà contenere ogni elemento html e sarà quindi possibile inserire testo, immagini, tabelle ecc... Per posizionarlo in una parte specifica dello schermo possiamo trascinarlo con il mouse puntando quest'ultimo sulla piccola maniglia in alto a sinistra.

La finestra 'proprietà' riferita ad un livello

ID LIVELLO - In questo campo possiamo inserire un nome identificativo per il livello creato.

A SINISTRA - Qui dovremo digitare la distanza del livello, in pixel, dal margine sinistro della pagina. 

IN ALTO - Qui dovremo digitare la distanza del livello, in pixel, dal margine superiore della pagina.

LARGHEZZA - In questo campo digiteremo la larghezza, in pixel, del livello creato. 

ALTEZZA - In questo campo digiteremo l'altezza, in pixel, del livello creato.

ORDINE - Qui andrà il valore che definisce l'ordine di sovrapposizione del livello. E' utile quando lavoriamo con più livelli sovrapposti.

VISIBILITA' - Da questo campo potremo definire la visibilità del livello scegliendo tra le opzioni 'inherit', 'visible', 'hidden'.

IMMAGINE DI SFONDO - Da questo campo possiamo definire un'immagine di sfondo per il nostro livello. Attraverso la cartella gialla potremo ripescare il file dal nostro hard disk.

COLORE DI SFONDO - Qui digiteremo il codice dell'eventuale colore di sfondo del livello, o determineremo una tonalità dalla palette dei colori.

TAG - Dal campo 'tag' possiamo definire il tag che deve essere utilizzato per determinare un livello. Il consiglio è quello di lasciare il tag di default 'div' che garantisce una maggiore compatibilità con il browser di navigazione.

RIVERSAMENTO - Da questo campo potremo settare le opzioni di visibilità del contenuto del livello scegliendo tra le opzioni 'visible', 'hidden', 'scroll', 'auto'. Attenzione alla compatibilità con i browser!

RITAGLIA RETTANGOLO - Qui inseriremo i valori che delineano l'area che intendiamo ritagliare.

GESTIRE I LIVELLI - Per gestire al meglio i livelli possiamo utilizzare il pannello 'livelli' visualizzabile tramite il menù 'finestra', cliccando sulla voce 'livelli':

Dal pannello potremo decidere di impedire le sovrapposizioni dei livelli spuntando o meno la relativa casella. Inoltre sarà possibile controllare e modificare con un click la visibilità del livello (visible-hidden) il nome del livello e l'ordine di sovrapposizione.

CONVERTIRE I LIVELLI IN TABELLE - Se utilizziamo i livelli per impostare il layout del documento web che stiamo realizzando conviene convertirli in tabelle per garantire una maggiore compatibilità con i diversi browser web. Per fare questo basta andare nel menù 'elabora' e, dalla voce 'converti', selezionare 'converti livelli in tabelle' (da notare che è possibile effettuare con lo stesso sistema l'operazione contraria). Si aprirà la seguente finestra dalla quale potremo settare con facilità le opzioni disponibili:

LIVELLI DINAMICI E LINEA TEMPORALE - Per creare dei livelli dinamici e delle animazioni da inserire nelle nostre creazioni per il web possiamo utilizzare le cosiddette 'linee temporali' (timelines). Possiamo aprire il relativo pannello dal menù 'finestra', cliccando sulla voce 'linee temporali':

Creiamo un livello contenente un'immagine (o qualsiasi altro elemento html visibile) di nostra scelta. Ora apriamo il menù contestuale del livello creato (cliccando sulla piccola maniglia in alto a destra del riquadro del livello) e da esso selezioniamo la voce 'registra percorso'. Trascinando il livello sulla pagina ci renderemo conto che viene disegnato (con un tratto nero) il percorso compiuto. 

Da notare che sulla linea temporale alcuni frame (le piccole caselle in cui è suddivisa la timeline) sono stati 'riempiti' dai fotogrammi dell'animazione. In pratica il percorso che abbiamo realizzato con il trascinamento è stato ottimizzato per la riproduzione di quest'ultima.

Spuntiamo le opzioni 'esecuzione automatica' (per far partire l'animazione in modo automatico) e 'ciclo' (per creare un loop di ripetizione dell'animazione) dal pannello 'linee temporali' e digitiamo il tasto funzione F12 per vedere l'anteprima nel browser. Potremo ammirare la semplice animazione creata.

Abbiamo visto come realizzare una semplice animazione ma attraverso l'interazione dei livelli e delle linee temporali è possibile realizzarne di più complesse.

Lezione successiva ->