Come creare pannelli a schede con jQuery in Dreamweaver - dummies

L'opzione della scheda dell'interfaccia utente jQuery in Dreamweaver semplifica l'aggiunta di una serie di pannelli che visualizzano o nascondono il contenuto corrispondente a una serie di schede. Simile ai pannelli comprimibili, questa funzione dell'interfaccia utente di jQuery consente di visualizzare più informazioni in meno spazio all'interno di una finestra del browser.

Simile ai pannelli a fisarmonica, i pannelli a schede possono essere utilizzati per visualizzare testo, immagini e contenuti multimediali.

Quando crei pannelli a schede con il widget dell'interfaccia utente jQuery in Dreamweaver, puoi specificare l'ordine delle schede, controllando in modo efficace il contenuto visualizzato quando la pagina viene caricata per la prima volta.

Attenersi alla seguente procedura per creare un gruppo di pannelli a schede:

1. Posizionare il cursore su una pagina in cui si desidera visualizzare il pannello a schede.

2. Scegli Inserisci → Interfaccia utente jQuery → Schede, oppure fai clic sull'elemento Schede nel pannello Inserisci dell'interfaccia utente jQuery.

   Un pannello a schede viene inserito nella pagina e i corrispondenti file CSS vengono visualizzati nel pannello Origine designer CSS.

   

3. Nell'area di lavoro principale selezionare a turno il testo Tab1, Tab2, e Tab 3 , quindi sostituire ogni intestazione di tabulazione con il testo che si desidera visualizzare nella scheda del pannello la zona.

   È possibile modificare il contenuto delle schede solo nell'area di lavoro, non nella finestra di ispezione Proprietà. Per impostazione predefinita, il testo nell'area Tab è in grassetto e nero, ma è possibile modificarlo modificando la regola CSS corrispondente.

4. Per regolare le dimensioni di ciascuna scheda, selezionare la scheda e quindi utilizzare le impostazioni Altezza e Larghezza nella finestra di ispezione Proprietà.

   Con una singola scheda selezionata, la finestra di ispezione Proprietà visualizza le impostazioni specifiche per quella scheda.

   

5. Per aggiungere contenuto, selezionare la parola Contenuto nell'area principale di qualsiasi pannello di selezione selezionato, quindi immettere testo, immagini o multimedia.

   Puoi copiare il testo in un pannello incollandolo come se avessi incollato del testo in qualsiasi altro punto della pagina. Allo stesso modo, inserisci le immagini nei pannelli come faresti in qualsiasi altro punto della pagina: scegli Inserisci → Immagine → Immagine e poi seleziona il file GIF, JPEG o PNG che desideri visualizzare. È inoltre possibile aggiungere file multimediali o Photoshop se si desidera utilizzare Dreamweaver per ottimizzare le immagini.

6. Per modificare l'aspetto di una scheda o di un pannello, ad esempio la faccia o il colore del carattere, modificare la regola CSS corrispondente.

   Ad esempio, per modificare il colore del testo o il carattere nelle schede, selezionare il riquadro attorno alla scheda e il riquadro attorno allo stile viene selezionato automaticamente nel pannello di selezione CSS Designer.

7. Per modificare il numero o l'ordine dei pannelli a schede, fare clic sulla scheda blu jQuery Tabs nella parte superiore del gruppo di pannelli nell'area di disegno.

   Quando si fa clic sulla scheda blu, le impostazioni del pannello vengono visualizzate nella finestra di ispezione Proprietà. Fare clic all'esterno dell'area blu e la finestra di ispezione Proprietà torna alle impostazioni predefinite.

   

8. Per aggiungere schede, fare clic sull'icona del segno più (+) nella finestra di ispezione Proprietà.

   Nuove schede vengono visualizzate nell'area di lavoro.

9. Per modificare l'ordine delle schede, selezionare il nome della scheda nella finestra di ispezione Proprietà e quindi utilizzare le frecce nel campo Pannelli per spostare il pannello.

   I nomi dei riquadri si spostano su e giù nel menu man mano che l'ordine viene modificato. I pannelli e le relative schede appaiono nella pagina Web nell'ordine in cui compaiono nella finestra di ispezione Proprietà.

10. Selezionare il pannello nell'elenco a discesa Panels che si desidera visualizzare quando la pagina viene caricata in un browser web.

    L'elenco a discesa corrisponde ai nomi assegnati a ciascuna scheda nell'area di lavoro.

11. Scegli File → Salva per salvare la pagina; quando viene visualizzata la finestra di dialogo Copia file dipendenti, fare clic su OK per generare automaticamente tutti i file correlati.

    Affinché le funzioni dell'interfaccia utente jQuery funzionino, è necessario caricare questi file sul server Web quando si carica la pagina Web.

12. Fare clic sull'icona del globo nella parte superiore dell'area di lavoro e selezionare un browser per visualizzare l'anteprima del lavoro in un browser.

    A seconda del browser Web, potrebbe essere necessario consentire ai controlli ActiveX di visualizzare l'anteprima della pagina sul computer.