X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Aggiungere e modificare Fisarmoniche Spry Usando i CSS in Dreamweaver
Tradotto da Google Translate

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.


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link