All Articles Dreamweaver
Aggiungere e modificare Fisarmoniche Spry Usando i CSS in Dreamweaver
David Smith on Sun, November 13th 0 comments
Spry Accordions are a delightful way in which to deliver large amounts of information in a confined space. They are also a lot of fun for users if you use them in a clever way. David Smith shows how.

Fisarmoniche Spry sono un modo piacevole in cui per fornire grandi quantità di informazioni in uno spazio confinato. Sono anche un


Fase 1 - Creazione di un DIV AP

Mi piace controllare la posizione di un Spry ponendolo all'interno di un DIV AP. Per creare un Div PA andare sul pannello Inserisci e scegliere layout

AP Div Draw

AP Disegna div


Utilizzare il cursore per disegnare una casella nella pagina. La scatola blu che appare è il vostro Div PA.


Fase 2 - Posizione e dimensione del Div PA

Spostare il Div PA (che è solo un tag div che ha alcuni CSS controllare la formattazione) afferrare la maniglia bianca al suo alto a sinistra e trascina la sua interposizione alla pagina.

Re-size AP DiV

Ridimensiona AP Div.


Per ridimensionare la Div PA si potrebbe prendere uno dei suoi punti di ancoraggio azzurri e trascinare fino alla dimensione desiderata.


Passo 3 - Inserite un Accordion Spry

Fare clic all'interno del Div PA per attivare il cursore all'interno, poi dal pannello Inserisci scegliere Layout

Spry inserted

Spry inserito


Una fisarmonica Spry appare all'interno del Div PA che avete disegnato.


Fase 4 - Aggiunta Altri pannelli

Accordion Spry utilizza pannelli per consentire agli utenti di rivelare o nascondere il suo contenuto in un movimento simile a una fisarmonica, da cui il nome. Sto aggiungendo un po '.

Con la fisarmonica Spry selezionati (che si può fare cliccando sul Cyan color etichetta Accordion Spry). Utilizzare il Pannello di Proprietà per aggiungere ulteriori etichette.

Labels in properties

Etichette in proprietà


Utilizzare il pulsante per aggiungere 2 Pannelli di più si vede questo:

More labels added to spry

Più etichette aggiunto a spry


Fase 5 - Modificare il contenuto del Spry

Quando si passa il cursore su ogni scheda Etichetta sulla fisarmonica Spry, un simbolo piccolo occhio apparirà. Cliccando su questo simbolo si aprirà il contenuto di quella scheda particolare che consente di modificarlo.

Eye and contents

Occhio e contenuti


Evidenziando il testo della Label consente di cambiare il nome dell'etichetta. Evidenziando i "Contenuti" testo permette di modificare il testo contenuto all'interno del Spry.

Suggerimento: copiare e incollare grandi quantità di testo qui dentro.

Filled Spry

Riempito Spry


Ripetere questa operazione fino a quando non hanno un contenuto e nomi per ogni etichetta.

Per vedere come la fisarmonica Spry opera, accendere il Live View e cliccare sulla scheda Pannelli a sua volta. Bello, giusto?

Live View Button

Vivere Pulsante View


Tenere il Live View attivo da qui in modo da poter monitorare i cambiamenti che stai facendo.


Fase 6 - Modificare lo stile delle schede del Pannello

Date un'occhiata al pannello Stili CSS, vedrete un foglio di stile chiamato SpryAccordion.css:

Spry CSS

Spry CSS


Cliccate sulla freccia per rivelare il contenuto del foglio di stile e vedrete un elenco di stili di classe Compound, che il controllo singoli aspetti di come la fisarmonica Spry sguardi.

Panel Tab Style

Tab Panel Style


Vedrete dalla proprietà CSS che il colore di sfondo di default è # CCCCCC. Modificare il testo da leggere # 00CC66 (Suggerimento: questo può essere abbreviato a # 0C6)

Green tabs

Linguette verdi


I pannelli cambierà in verde.

. AccordionPanelOpen e. AccordionPanelTab e impostare il colore di sfondo # 0F9.


Fase 7 - Modificare lo stile delle schede Focused

Prova a cliccare sulle schede del Pannello e vedrete che diventerà blu. Questo perché il controllo delle proprietà CSS Focused sono impostate su blu:

Blue Spry

Blu Spry


Per modificarli eseguire le seguenti operazioni nel CSS:

Per creare un punto culminante per la scheda che è aperto:

  • Select .AccordionFocused, .AccordionPanelOpen and .AccordionPanelTab and set their background color to #9FC


Per assicurarsi che qualsiasi pannelli chiusi, mentre la fisarmonica Spry è attivo sono il verde come i pannelli chiusi quando la Accordion Spry non è attivo:

  • Select .AccordionFocused and .AccordionPanelTab and set their background color to #0C6

Finished Spry

Finito Spry


Si potrebbe continuare ad aggiungere o modificare i parametri su qualsiasi e tutti gli stili di classe nel foglio di stile SpryAccordion.css tuttavia si desidera, come i principi sono gli stessi. Andare avanti e provare ad aggiungere colore al testo, o cambiare il carattere, ecc finché non si crea uno stile che più vi si addice.


Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: