Definizione del layout dei moduli web

Creazione di contenitori

I contenitori consentono di combinare i campi di una pagina e configurarne il layout; per organizzare gli elementi nella pagina.

Per ciascuna pagina del modulo, i contenitori vengono creati mediante il pulsante Containers della barra degli strumenti.

Utilizzate un contenitore per raggruppare gli elementi della pagina senza aggiungere un'etichetta al rendering finale. Gli elementi sono raggruppati nella sottostruttura ad albero contenitore. I contenitori standard consentono di gestire il layout.

Ad esempio:

La posizione delle etichette viene applicata agli elementi posizionati sotto il contenitore nella gerarchia. Può essere sovraccaricato per ogni elemento, se necessario. Aggiungete o rimuovete colonne per modificare il layout. Vedere Posizionamento dei campi sulla pagina.

Nell'esempio precedente, il rendering sarà il seguente:

Posizionamento dei campi sulla pagina

Il layout del modulo Web è definito pagina per pagina in ciascun contenitore e può essere sovraccaricato, se necessario.

Le pagine sono suddivise in colonne: ogni pagina contiene un certo numero di colonne. Ogni campo della pagina occupa le celle n. I contenitori occupano anche un certo numero di colonne e i campi che contengono occupano un certo numero di celle.

Per impostazione predefinita, le pagine sono create su una singola colonna e ogni elemento occupa una cella. Ciò significa che i campi sono visualizzati uno sotto l'altro, ciascuno dei quali occupa un'intera linea, come mostrato di seguito:

Nell'esempio seguente è stata mantenuta la configurazione predefinita. La pagina occupa una singola colonna che include quattro contenitori.

Ogni contenitore occupa una colonna e ogni elemento occupa una cella:

Il rendering è il seguente:

Potete adattare i parametri di visualizzazione per ottenere il seguente rendering:

Nell'esempio di rendering precedente, ciascun campo di input, titolo e immagine occupa una cella nelle colonne dei contenitori.

Potete modificare la formattazione in ciascun contenitore. Nel nostro esempio, potete distribuire il contenuto del contenitore 4 su due colonne e distribuire gli elementi.

Il titolo e l’elenco occupano una cella ciascuna (e quindi un’intera riga del contenitore) e la casella di controllo si estende su due celle. Il numero di celle attribuito al campo di input è definito nella scheda General o nella scheda Advanced, in base al tipo di campo:

Definizione della posizione delle etichette

È possibile definire l'allineamento dei campi e delle etichette nel modulo.

Per impostazione predefinita, i parametri di visualizzazione per i campi e altro contenuto della pagina sono ereditati dalla configurazione generale del modulo, dalla configurazione della pagina o dalla configurazione del contenitore principale, se esistente.

I parametri di visualizzazione globali per l'intero modulo sono specificati nella casella delle proprietà del modulo. La scheda Rendering consente di selezionare la posizione delle etichette.

Questa posizione può essere sovraccaricata per ogni pagina, contenitore e campo, tramite la scheda Advanced.

Sono supportati i seguenti allineamenti:

  • Ereditato: l'allineamento viene ereditato dall'elemento padre (valore predefinito), ovvero dal contenitore principale, se presente, oppure dalla pagina.
  • Sinistra/Destra: l'etichetta è posizionata a destra o a sinistra del campo,
  • Sopra/sotto: l'etichetta è posizionata sopra o sotto il campo,
  • Nascosto: l'etichetta non viene visualizzata.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free