Partendo dalla Griglia proposta di default, composta da 2 righe per 2 colonne, occorre aggiungere un numero di righe e di colonne sufficienti per ospitare tutti i contenuti della Pagina e, in secondo luogo, inserire nelle Celle gli Oggetti necessari.

Per aggiungere righe e colonne è sufficiente utilizzare i pulsanti presenti nella Barra Strumenti. Si possono creare griglie con un massimo di 64 righe e di 12 colonne.

In automatico, tutte le righe e le colonne della Griglia di impaginazione hanno la stessa larghezza e altezza.

Di default, la larghezza delle colonne della Griglia è ottenuta dividendo la larghezza della Pagina (determinata dal Modello) per il numero delle colonne inserite. È poi possibile impostare manualmente il valore della larghezza delle colonne agendo sui cursori presenti sul fondo della Griglia di impaginazione:

Per quanto riguarda, invece, l'altezza delle Righe, questa viene determinata dagli Oggetti in esse inseriti e non può essere modificata manualmente.

È possibile lavorare sull'aspetto grafico delle Righe attraverso le impostazioni raccolte nella finestra Stile delle Righe richiamata tramite il pulsante . Attraverso le opzioni disponibili in questa finestra è anche possibile fare in modo che le Righe assumano la stessa larghezza e/o la stessa altezza della viewport, ovvero della finestra del Browser del visitatore del Sito.

Definita la Griglia di impaginazione è possibile inserire un Oggetto selezionando l'icona che lo rappresenta dall'elenco degli Oggetti disponibili, trascinandola e rilasciandola in corrispondenza della Cella che deve occupare.

Ciascuna Cella della Griglia di impaginazione può contenere un unico Oggetto, ma un Oggetto può occupare più Celle adiacenti sia in senso orizzontale che verticale. L'icona dell'Oggetto selezionato può essere, infatti, trascinata in corrispondenza dei bordi delle Celle: in questi casi l'Oggetto occuperà lo spazio delle Celle interessate. In più, è possibile agire sulle ancore di selezione dell'Oggetto inserito per estenderlo su più Celle.

Una volta definito il numero di Celle che deve essere occupato da un Oggetto, questo viene mantenuto, compatibilmente con la presenza di altri Oggetti, anche se l'Oggetto viene spostato in altri punti della Griglia. Per maggior comodità, è possibile lavorare sulla Griglia utilizzando i tasti freccia:

Cliccando con il tasto destro del mouse sull'icona dell'Oggetto inserito in una Cella, viene richiamato un menu contestuale con i comandi che consentono di gestire l'Oggetto stesso: Taglia, Copia, Incolla, Rimuovi, Stile dell'Oggetto, Effetto.

Tramite questi comandi è possibile, per esempio, creare una copia di un Oggetto incollandolo in un'altra Cella o in un'altra Pagina, o eliminarlo. Un Oggetto inserito può essere rimosso dalla Pagina anche trascinandolo all'esterno della Griglia di impaginazione o attraverso il tasto CANC. In qualsiasi caso, inserendo un nuovo Oggetto in una Cella già occupata, si ottiene automaticamente la cancellazione del primo Oggetto e la sua sostituzione con il secondo. Se, però, si trascina un Oggetto già esistente su una Cella già occupata, i due Oggetti vengono scambiati di posizione.

I comandi Stile dell'Oggetto | Copia e Stile dell'Oggetto | Incolla, presenti nel sotto-menu richiamato dal comando Stile dell'Oggetto, permettono invece di fare in modo che le impostazioni definite nella finestra Stile dell'Oggetto per l'Oggetto contenuto in una Cella vengano automaticamente applicate anche all'Oggetto contenuto in una seconda Cella.

Analogamente, i comandi Effetto | Copia e Effetto | Incolla consentono di applicare ad un secondo Oggetto lo stesso effetto impostato per il primo Oggetto.

Infine, i comandi Stile dell'Oggetto | Modifica... e Effetto | Modifica... permettono, rispettivamente, di richiamare la finestra Stile dell'Oggetto e la finestra Effetto di visualizzazione.

Dopo aver inserito un Oggetto si può richiamare la finestra attraverso la quale procedere all'effettiva definizione del suo contenuto facendo doppio click sull'Oggetto stesso o selezionando l'Oggetto e cliccando sul pulsante Contenuto Oggetto.

Per comprendere come sfruttare al meglio le possibilità di impaginazione, occorre ricordare che il funzionamento del software si attiene alle seguenti regole:

-

Il Box Model in WebSite X5