Selezionate Inserisci > Spry > Pannello a soffietto.
Ultimo aggiornamento il
3 mag 2021
Nota:
I widget Spry sono stati sostituiti con i widget jQuery in Dreamweaver CC e versioni successive. Anche se è ancora possibile modificare i widget Spry esistenti in una pagina, non potete aggiungere nuovi widget Spry.
Informazioni sul widget Pannello a soffietto
Un widget Pannello a soffietto è un insieme di pannelli comprimibili in grado di memorizzare una grande quantità di contenuto in poco spazio. I visitatori del sito possono nascondere o visualizzare il contenuto del pannello a soffietto facendo clic sulla scheda del pannello. Le parti del pannello a soffietto si espandono o comprimono a seconda della scheda su cui il visitatore fa clic. In ogni pannello a soffietto può essere aperto solamente un pannello di contenuto alla volta. L'esempio che segue mostra un widget Pannello a soffietto con il primo pannello espanso:
A. Scheda Pannello a soffietto B. Contenuto Pannello a soffietto C. Pannello a soffietto (aperto)
Il codice HTML predefinito per il widget Pannello a soffietto comprende un tag div esterno contenente tutti i pannelli, un tag div per ciascun pannello, e un div header e un div content nel tag di ciascun pannello. Ogni widget Pannello a soffietto può contenere un numero qualsiasi di singolo pannelli. Il codice HTML del widget Pannello a soffietto include anche i tag script nella sezione head del documento e dopo i tag HTML del pannello a soffietto.
Per una descrizione più dettagliata del funzionamento del widget Pannello a soffietto, compresa la spiegazione completa del codice relativo, vedete www.adobe.com/go/learn_dw_spryaccordion_it.
Per consultare un'esercitazione sulle operazioni con il widget Pannello a soffietto, visitate il sito all'indirizzo www.adobe.com/go/vid0167_it.
Inserire e modificare il widget Pannello a soffietto
Inserire il widget Pannello a soffietto
Nota:
per inserire un widget Pannello a soffietto, potete anche utilizzare la categoria Spry del pannello Inserisci.
Aggiungere un pannello a un widget Pannello a soffietto
-
Selezionate un widget Pannello a soffietto nella finestra del documento.
-
Fate clic sul pulsante “più” (+) di Pannelli nella finestra di ispezione Proprietà (Finestra > Proprietà).
-
(Opzionale) Modificate il nome del pannello selezionandone il testo nella vista Progettazione e cambiandolo come necessario.
Eliminare un pannello da un widget Pannello a soffietto
-
Selezionate un widget Pannello a soffietto nella finestra del documento.
-
Nel menu Pannelli della finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il nome del pannello da eliminare, quindi fate clic sul pulsante meno (-).
Aprire un pannello per la modifica
-
Effettuate una delle operazioni seguenti:
Spostate il puntatore del mouse sopra la scheda del pannello da aprire nella vista Progettazione, quindi fate clic sull'icona dell'occhio che appare a destra della scheda.
Selezionate un widget Pannello a soffietto nella finestra del documento e fate clic sul nome del pannello da modificare nel menu Pannelli della finestra di ispezione Proprietà (Finestra > Proprietà).
Modificare l'ordine dei pannelli
-
Selezionate un widget Pannello a soffietto nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il nome del pannello a soffietto da spostare.
-
Fate clic sulle frecce verso l'alto o verso il basso per spostare il pannello come desiderato.
Personalizzare il widget Pannello a soffietto
Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche ai widget Pannello a soffietto, essa non supporta le attività relative agli stili personalizzati. Se necessario, potete cambiare le regole CSS del widget Pannello a soffietto e creare un pannello a soffietto con lo stile che preferite.
Per una rapida panoramica sulla modifica dei colori nel widget Pannello a soffietto, vedete la guida di David Powers Quick guide to styling Spry tabbed panels, accordions, and collapsible panels (Guida rapida alla personalizzazione di pannelli a schede, pannelli a soffietto e pannelli comprimibili Spry).
Per un elenco più dettagliato delle attività relative agli stili, vedete www.adobe.com/go/learn_dw_spryaccordion_custom_it.
Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryAccordion.css. Quando create un widget Pannello a soffietto Spry, Dreamweaver salva il file SpryAccordion.css nella cartella SpryAssets del sito. Questo file contiene anche informazioni di commento relative ai vari stili applicati al widget; pertanto può risultare utile consultare il file.
Nota:
Nonostante sia possibile modificare facilmente le regole del widget Pannello a soffietto direttamente nel file CSS, potete anche utilizzare il pannello Stili CSS per modificare il CSS del pannello a soffietto. Il pannello Stili CSS è utile per localizzare le classi CSS assegnate a parti differenti del widget, in particolar modo quando si utilizza la modalità Corrente del pannello.
Formattare il testo del widget Pannello a soffietto
Per definire lo stile del testo di un widget Pannello a soffietto, impostate le proprietà dell'intero contenitore del widget Pannello a soffietto, oppure le singole proprietà dei componenti del widget.
-
Per modificare lo stile del testo di un widget Pannello a soffietto, utilizzate la seguente tabella per localizzare la regola CSS appropriata, quindi aggiungete le proprietà e i valori dello stile di testo desiderato:
Testo da modificare
Regola CSS pertinente
Esempio di proprietà e valori da aggiungere
Testo nell'intero pannello a soffietto (inclusi schede e pannello contenuto)
.Accordion o .AccordionPanel font: Arial; font-size:medium;
Testo nelle sole schede del Pannello a soffietto
.AccordionPanelTab font: Arial; font-size:medium;
Testo nei soli pannelli del contenuto del Pannello a soffietto
.AccordionPanelContent font: Arial; font-size:medium;
Modificare i colori di sfondo del widget Pannello a soffietto
-
Per modificare i colori dello sfondo di parti differenti di un widget Pannello a soffietto, utilizzate la seguente tabella per localizzare la regola CSS appropriata, quindi aggiungete o modificate proprietà e valori del colore dello sfondo:
Parte del widget da modificare
Regola CSS pertinente
Esempio di proprietà e valori da aggiungere o modificare
Colore di sfondo delle schede del pannello a soffietto
.AccordionPanelTab background-color: #CCCCCC; (valore predefinito)
Colore di sfondo dei pannelli del contenuto del Pannello a soffietto
.AccordionPanelContent background-color: #CCCCCC;
Colore di sfondo del Pannello a soffietto aperto
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE; (valore predefinito)
Colore di sfondo delle schede del pannello quando il cursore vi si trova sopra
.AccordionPanelTab color: #555555; (valore predefinito)
Colore di sfondo della scheda del pannello aperta quando il cursore vi si trova sopra
.AccordionPanelOpen .AccordionPanelTab color: #555555; (valore predefinito)
Limitare la larghezza di un pannello a soffietto
Per impostazione predefinita, il widget Pannello a soffietto si espande fino a riempire lo spazio disponibile. Se necessario, potete limitare la larghezza di un widget Pannello a soffietto impostando la proprietà width per il contenitore del pannello a soffietto.
-
Localizzate la regola CSS .Accordion aprendo il file SpryAccordion.css. Questa è la regola che definisce le proprietà dell'elemento contenitore principale del widget Pannello a soffietto.Nota:
La regola può essere individuata anche selezionando il widget Pannello a soffietto e cercandola nel pannello Stili CSS (Finestra > Stili CSS). Assicuratevi che il pannello sia impostato in modalità Corrente.
-
Aggiungete una proprietà e un valore width alla regola, ad esempio width: 300px;.