Layout di una pagina o di una vista utilizzando il layout di griglia
Informazioni su questa attività
Il layout della griglia è dove è possibile disporre il contenuto utilizzando griglie, contenitori e celle.
Una griglia è un contenitore di 12 unità di larghezza. La larghezza effettiva di ogni unità è variabile e dipende dalla dimensione dello schermo. All'interno di una griglia, è possibile avere contenitori e celle. Un contenitore raggruppa le celle correlate. Le celle sono segnaposto per il contenuto. I contenitori e le celle possono essere da 1 a 12 unità di larghezza. Se il contenitore non dispone di almeno una cella, il designer la rimuove.
Se la larghezza totale delle celle in una griglia è 12, la griglia forma una riga completa. Quando si modifica una cella in una riga completa, il designer tenta di conservare la riga completa ridimensionando automaticamente altre celle. Cioè, se si elimina una cella, un'altra cella si espande per occupare lo spazio. Allo stesso modo, se si aggiunge una cella a sinistra o a destra di un'altra cella, una cella si restringe per adattarsi alla nuova cella. Tuttavia, esiste una dimensione minima di 3 per le celle nuove o ridimensionate automaticamente. In questo caso, il designer sposta la cella finale per formare una nuova riga. Quando si modifica una griglia che ha meno o più di 12 unità, il designer non ridimensiona automaticamente le celle. Il limite di 12 unità si applica indipendentemente dal numero di contenitori all'interno di una griglia.
Una griglia non ha un limite verticale. Tuttavia, avere troppe celle sovrapposte verticalmente risulta in un'interfaccia utente che richiede agli utenti di fare un sacco di scorrimento.
In , è possibile impostare le proprietà del layout di griglia descritte nella seguente tabella.
| Proprietà | Descrizione |
|---|---|
| Estensione orizzontale | Specifica il numero di unità orizzontali che un contenitore o una cella della griglia selezionata occupa in una griglia. Una griglia ha una larghezza massima di 12 unità orizzontali. È possibile specificare un numero compreso tra 1 e 12. Se si aumenta o si diminuisce l'estensione orizzontale, la larghezza della cella o del contenitore della griglia selezionato aumenterà o diminuirà sul lato destro della posizione corrente. |
| Visibilità | Specifica se una cella o un contenitore della griglia viene visualizzato o nascosto in una griglia. Questa proprietà ha le seguenti opzioni:
|
| Orientamento | Specifica se gli elementi di layout in una cella della griglia selezionata sono disposti orizzontalmente o verticalmente. Questa proprietà ha le seguenti opzioni:
|
| Allineamento orizzontale | Controlla l'allineamento orizzontale degli elementi di layout in una cella della griglia selezionata. Questa proprietà ha le seguenti opzioni:
Nota: l'allineamento orizzontale non Š disponibile per gli elementi di layout in una cella della griglia selezionata a meno che l'orientamento non sia orizzontale.
|
| Allineamento verticale | Controlla l'allineamento verticale del contenuto in un contenitore selezionato o in una cella della griglia, ad esempio le celle della griglia in un contenitore o gli elementi di layout in una cella della griglia. Questa proprietà ha le seguenti opzioni:
Nota: l'allineamento verticale non è disponibile per gli elementi di layout in una cella della griglia selezionata a meno che l'orientamento non sia orizzontale.
|
| ID controllo | Specifica un identificatore alfanumerico che identifica in modo univoco un elemento di layout selezionato. Questo ID può essere utilizzato per individuare elementi in JavaScript e risorse di anteprima avanzate. |
Per strutturare una pagina o una vista utilizzando il layout della griglia, utilizzare le istruzioni riportate di seguito.
Procedura
- Utilizzare i punti di inserimento del modello di griglia predefinito per aggiungere più celle o contenitori all'area.
- Aggiungere una griglia sopra o sotto le griglie esistenti.
- Aggiungere una cella a una griglia o a un contenitore. Se sono presenti più di 12 unità di celle nella griglia, la nuova cella viene riavvolta nella riga successiva.
- Eliminare una cella da una griglia. Se la griglia è una riga completa, la cella o il contenitore a destra si espande per occupare lo spazio della cella eliminata. Il contenuto della cella eliminata viene rimosso.
- Modificare l'allineamento verticale delle celle della griglia in un contenitore selezionato.
- Modificare l'orientamento di una cella della griglia.
- Se l'orientamento di una cella della griglia è orizzontale, modificare l'allineamento degli elementi di layout in una cella della griglia selezionata:
- Allineamento orizzontale
- Allineamento verticale
- Ridimensionare una cella o un contenitore trascinandone il bordo destro. La cella o il contenitore a destra si espande o si contrae di conseguenza. Tuttavia, il minimo che si contrarrà automaticamente è di 3 unità. Se la cella o il contenitore raggiunge questo valore minimo, passa invece alla riga successiva.
- Nascondere una cella o un contenitore modificandone la proprietà Visibilità . Il layout non lo visualizza più, ma il menu a comparsa Elementi invisibili
lo elenca come un elemento invisibile che è possibile selezionare. - Eliminare una griglia o un contenitore. Il contenuto della griglia o del contenitore eliminati, incluso il contenuto delle celle e delle celle, viene rimosso.