Layout, finestra di dialogo Generatore di stile

Articolo
09/12/2008

Aggiornamento: novembre 2007

La pagina Layout della finestra di dialogo Generatore di stile consente di definire gli attributi del layout di pagina dei fogli di stile CSS. Gli attributi di layout di pagina determinano il modo in cui gli elementi saranno posizionati nel flusso HTML. È possibile applicare questi attributi direttamente agli elementi HTML oppure aggiungerli alle regole di stile CSS.

Per applicare gli attributi di layout direttamente agli elementi HTML della pagina

Aprire il documento HTML nella visualizzazione Progettazione della finestra di progettazione HTML e utilizzare la finestra Struttura documento per selezionare un elemento da formattare.
Scegliere Stile dal menu Formato per aprire la finestra di dialogo Generatore di stile.
Scegliere Layout nel riquadro sinistro della finestra di dialogo Generatore di stile.

Nel riquadro destro verrà visualizzata la finestra di dialogo Generatore di stile, Layout.

Quando si applicano stili a elementi selezionati nella visualizzazione Progettazione, gli attributi di stile CSS verranno inseriti inline nel markup HTML relativo a tali elementi. Passare alla visualizzazione HTML per verificare i nuovi attributi di stile inseriti.

Per aggiungere gli attributi di layout a una regola di stile CSS definita in un foglio di stile esterno

Aprire un foglio di stile esterno e posizionare il punto di inserimento all'interno delle parentesi graffe ({ }) che seguono il selettore della regola di stile desiderata.
Scegliere Compila stile dal menu Stili per aprire la finestra di dialogo Generatore di stile.
Scegliere Layout nel riquadro sinistro della finestra di dialogo Generatore di stile.

Nel riquadro destro verrà visualizzata la finestra di dialogo Generatore di stile, Layout.

Nota:
Il menu Stili viene visualizzato quando si apre un foglio di stile CSS esterno per la modifica. L'opzione Compila stile del menu Stili diviene disponibile quando si posiziona il punto di inserimento tra le parentesi graffe che seguono il selettore di una regola di stile.

Una classe di stile CSS definita in un foglio di stile esterno può essere applicata a un elemento interno all'elemento <BODY> di una pagina Web (in questo caso è incluso lo stesso elemento <BODY>) assegnando il selettore di stile CSS come proprietà CLASS per l'elemento.

Le opzioni disponibili nella pagina Layout della finestra di dialogo Generatore di stile comprendono:

Attività

Elementi di interfaccia

Controllo scorrimento

Questo set di attributi consente di controllare il flusso degli elementi all'interno del documento HTML. Quando si selezionano le opzioni, le aree di anteprima adiacenti ai selettori di Controllo scorrimento vengono aggiornate. Quando le pagine vengono visualizzate in un browser, gli attributi che seguono possono influire sia sull'aspetto che sulle prestazioni.

Visibilità
Consente di impostare il valore Nascosto (non visibile) o Visibile per la proprietà di Visibilità. Selezionare <Non impostato> (nessuna opzione scelta), Nascosto o Visibile. Se, ad esempio, si sceglie Nascosto, verrà inserito il seguente markup CSS:

VISIBILITY:hidden

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Nota:
Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Visualizzazione
Consente di impostare i valori dell'attributo DISPLAY per un elemento. È possibile specificare se un elemento deve essere visualizzato come blocco o all'interno del flusso lineare. Selezionare <Non impostato> (nessuna opzione scelta), Non visualizzare, Come blocco oppure Come testo nel flusso. In genere, un elemento a blocchi inizia una nuova riga e non può essere più largo del rispettivo contenitore padre. Un elemento con stile <H1> all'interno di un elemento <BODY> ad esempio non può essere più esteso dell'elemento <BODY> che lo contiene. In genere, un elemento inline non viene utilizzato per iniziare una nuova riga e presenta dimensioni che variano in base all'altezza e alla larghezza del contenuto. Se si sceglie Come blocco, verrà inserito il seguente markup CSS:

DISPLAY:block

Nota:
Quando il valore dell'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Nota:
Le proprietà Visibility e Display sono correlate, ma non uguali. Quando un elemento viene nascosto, la quantità di tempo richiesta per la visualizzazione di una pagina da parte del browser non risulta ridotta. Tuttavia, nel browser vengono ignorati gli elementi che non sono visualizzati, pertanto una pagina che contiene elementi non visualizzati viene caricata più velocemente di una pagina contenente gli stessi elementi nascosti. Inoltre, quando si adatta il testo intorno a un elemento nascosto, esso sembra disporsi attorno a uno spazio vuoto. Prendere in considerazione le caratteristiche illustrate quando si selezionano le proprietà di layout.

Le proprietà Visibility e Display sono correlate, ma non uguali. Quando un elemento viene nascosto, la quantità di tempo richiesta per la visualizzazione di una pagina da parte del browser non risulta ridotta. Tuttavia, nel browser vengono ignorati gli elementi che non sono visualizzati, pertanto una pagina che contiene elementi non visualizzati viene caricata più velocemente di una pagina contenente gli stessi elementi nascosti. Inoltre, quando si adatta il testo intorno a un elemento nascosto, esso sembra disporsi attorno a uno spazio vuoto. Prendere in considerazione le caratteristiche illustrate quando si selezionano le proprietà di layout.

Consenti scorrimento testo
Consente di impostare gli attributi che determinano le modalità di orientamento del testo intorno a un elemento. Selezionare <Non impostato> (nessuna opzione scelta), Non consentire testo sui lati, A destra o A sinistra. Se, ad esempio, si sceglie A destra verrà inserito il seguente markup CSS:

FLOAT:left

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.
Consenti oggetti mobili
Consente di impostare gli attributi con cui controllare l'area della pagina in cui è possibile spostare gli oggetti. Selezionare <Non impostato> (nessuna opzione scelta), Su entrambi i lati (gli oggetti possono scorrere sul lato sinistro o destro della pagina), Solo a destra (gli oggetti possono scorrere solo sul lato destro della pagina), Solo a sinistra (gli oggetti possono scorrere solo sul lato sinistro della pagina) oppure Non consentire (gli oggetti non possono spostarsi sulla pagina). Se, ad esempio, si sceglie Solo a destra, verrà inserito il seguente markup CSS:

CLEAR:left

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Nota:
Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Nota:
Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Contenuto

Overflow
Consente di impostare gli attributi per il controllo del comportamento di elementi con un contenuto superiore a quello consentito dai rispettivi valori di altezza e larghezza. Selezionare <Non impostato> (nessuna opzione scelta), Usa barre di scorrimento se necessario (le barre di scorrimento vengono visualizzate se il contenuto supera la dimensione dell'elemento definito), Usa sempre barre di scorrimento (le barre di scorrimento vengono sempre visualizzate), Il contenuto non è troncato (l'elemento si espande per contenere il contenuto) o Il contenuto è troncato (il contenuto che supera la dimensione dell'elemento non viene visualizzato). Se, ad esempio, si sceglie Il contenuto non è troncato, verrà inserito il seguente markup CSS:

OVERFLOW:visible

Nota:

Quando il valore dell'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Area di visualizzazione

Consente di impostare gli attributi per il controllo della porzione rettangolare di un elemento che dovrà essere visualizzata. È, ad esempio, possibile visualizzare solo l'angolo in alto a destra di un elemento. Immettere valori in uno o più campi (In alto, In basso, A sinistra o A destra) e selezionare un'opzione di unità tra px (predefinita), pt, pc, mm, cm, in, em, ex o %.

La visualizzazione può essere troncata solo per gli elementi posizionati in modo assoluto. I valori specificati sono relativi ai limiti di un elemento. Se, ad esempio, si imposta un valore dell'area di visualizzazione Top pari a 40px, la parte dell'elemento che è contenuta tra 0px (parte superiore dell'elemento) e 40px non sarà visibile. Analogamente, se si immette 50 nei campi In alto e In basso e si accetta l'opzione di unità predefinita, verrà inserito il seguente markup CSS:

CLIP: rect(50px auto 50px auto)

Nota:
Se si assegnano valori a un numero di campi dell'area di visualizzazione inferiore a quattro, ai restanti campi verrà assegnato il valore auto e i limiti non assegnati non verranno ridimensionati.

Stampa interruzioni di pagina

I seguenti attributi consentono di controllare l'occorrenza delle interruzioni di pagina all'interno degli elementi in cui è utilizzato lo stile:

Prima
Selezionare <Non impostato> (nessuna opzione scelta), Automatico o Imponi interruzione di pagina. Se, ad esempio, si sceglie Imponi interruzione di pagina, verrà inserito il seguente markup CSS:

PAGE-BREAK-BEFORE:always
Dopo
Selezionare <Non impostato> (nessuna opzione scelta), Automatico o Imponi interruzione di pagina. Se, ad esempio, si sceglie Imponi interruzione di pagina, verrà inserito il seguente markup CSS:

PAGE-BREAK-AFTER:always