Selezionate Inserisci > Spry > Pannelli a schede Spry.
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 Pannelli a schede
Un widget Pannelli a schede è un insieme di pannelli in grado di memorizzare il contenuto in uno spazio limitato. I visitatori del sito possono nascondere o visualizzare il contenuto dei pannelli a schede facendo clic sulla scheda del pannello cui desiderano accedere. I pannelli del widget si aprono a seconda della scheda su cui il visitatore fa clic. Nel widget Pannelli a schede può essere aperto un solo pannello alla volta. L'esempio che segue mostra un widget Pannelli a schede con il terzo pannello aperto:
A. Scheda B. Contenuto C. widget Pannelli a schede D. Pannello a schede
Il codice HTML per il widget Pannelli a schede comprende un tag div esterno contenente tutti i pannelli, un elenco delle schede, un tag div destinato a contenere i pannelli di contenuto e un div per ciascun pannello di contenuto. Il codice HTML del widget Pannelli a schede include anche i tag script nella sezione head del documento e dopo i tag HTML del widget stesso.
Per una descrizione più dettagliata del funzionamento del widget Pannelli a schede, compresa la spiegazione completa del codice relativo, vedete www.adobe.com/go/learn_dw_sprytabbedpanels_it.
Inserire e modificare il widget Pannelli a schede
Inserire il widget Pannelli a schede
Nota:
per inserire un widget Pannelli a schede, potete anche utilizzare la categoria Spry nel pannello Inserisci.
Aggiungere un pannello a un widget Pannelli a schede
-
Selezionate un widget Pannelli a schede nella finestra del documento.
-
Fate clic sul pulsante “più” (+) di Pannelli nella finestra di ispezione Proprietà (Finestra > Proprietà).
-
(Opzionale) Modificate il nome della scheda selezionandone il testo nella vista Progettazione e cambiandolo come necessario.
Eliminare un pannello da un widget Pannelli a schede
-
Selezionate un widget Pannelli a schede 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 che desiderate aprire nella vista Progettazione, quindi fate clic sull'icona dell'occhio che appare a destra della scheda.
Selezionate un widget Pannelli a schede nella finestra del documento, quindi 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 Pannelli a schede nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il nome del pannello che desiderate spostare.
-
Fate clic sulle frecce verso l'alto o verso il basso per spostare il pannello come desiderato.
Impostare il pannello aperto predefinito
Potete impostare il pannello del widget Pannelli a schede aperto per impostazione predefinita quando la pagina viene aperta in un browser.
-
Selezionate un widget Pannelli a schede nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il pannello da aprire per impostazione predefinita dal menu a comparsa Pannello predefinito.
Personalizzare il widget Pannelli a schede
Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche a un widget Pannelli a schede, essa non supporta le attività relative agli stili personalizzati. Se necessario, potete cambiare le regole CSS del widget Pannelli a schede e creare un widget con lo stile che preferite.
Per una rapida panoramica sulla modifica dei colori nel widget Pannello a schede, 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_sprytabbedpanels_custom_it.
Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryTabbedPanels.css. Quando create un widget Pannelli a schede Spry, Dreamweaver salva il file SpryTabbedPanels.css nella cartella SpryAssets del sito. Questo file contiene anche utili commenti relativi ai vari stili che possono essere applicati ai widget.
Nota:
Nonostante sia possibile modificare facilmente le regole del widget Pannelli a schede direttamente nel file CSS associato, per modificare il CSS del widget potete anche utilizzare il pannello Stili CSS. 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 Pannelli a schede
Per definire lo stile del testo di un widget Pannelli a schede, impostate le proprietà dell'intero contenitore del widget, oppure le singole proprietà dei componenti del widget.
-
Per modificare lo stile del testo di un widget Pannelli a schede, utilizzate la seguente tabella per localizzare la regola CSS appropriata, quindi aggiungete le proprietà e i valori dello stile di testo che desiderate utilizzare:
Testo da modificare
Regola CSS pertinente
Esempio di proprietà e valori da aggiungere
Testo nell'intero widget
.Pannelli a schede font: Arial; font-size:medium;
Testo nelle sole schede del pannello
.TabbedPanelsTabGroup o .TabbedPanelsTab font: Arial; font-size:medium;
Testo nei soli pannelli di contenuto
.TabbedPanelsContentGroup o .TabbedPanelsContent font: Arial; font-size:medium;
Modificare i colori di sfondo del widget Pannelli a schede
-
Per modificare i colori dello sfondo di parti differenti di un widget Pannelli a schede, utilizzate la seguente tabella per localizzare la regola CSS appropriata, quindi aggiungete o modificate come desiderato proprietà e valori del colore dello sfondo:
Colore da modificare
Regola CSS pertinente
Esempio di proprietà e valori da aggiungere o modificare
Colore di sfondo delle schede del pannello
.TabbedPanelsTabGroup o .TabbedPanelsTab background-color: #DDD; (valore predefinito)
Colore di sfondo dei pannelli di contenuto
.Tabbed PanelsContentGroup o .TabbedPanelsContent background-color: #EEE; (valore predefinito)
Colore di sfondo della scheda selezionata
.TabbedPanelsTabSelected background-color: #EEE; (valore predefinito)
Colore di sfondo delle schede del pannello quando il cursore del mouse si trova su di esse
.TabbedPanelsTabHover background-color: #CCC; (valore predefinito)
Limitare la larghezza dei pannelli a schede
Per impostazione predefinita, il widget Pannelli a schede si espande fino a riempire lo spazio disponibile. Se necessario, potete limitare la larghezza di un widget Pannelli a schede impostando la proprietà width per il contenitore del pannello.
-
Localizzate la regola CSS .TabbedPanels aprendo il file SpryTabbedPanels.css. Questa regola definisce le proprietà dell'elemento contenitore principale del widget Pannelli a schede.Nota:
La regola può essere individuata anche selezionando il widget Pannelli a schede 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;.
