X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Accès Premium gratuitement

Accédez à notre bibliothèque complète des articles Hub Premium, les fichiers projet et les premiers 10% de chaque Cours-vidéo de la Bibliothèque Didacticiel en ligne .

Créez votre compte gratuit!

Ajout et modification Accordéons Spry utilisant CSS dans Dreamweaver
Traduit par Google Translate

Accordéons Spry sont une façon délicieuse dans laquelle de livrer de grandes quantités d'informations dans un espace confiné. Ils sont aussi un


Étape 1 - Créer une DIV AP

Je tiens à contrôler la position d'un Spry en le plaçant au sein d'une div PA. Pour créer une div PA allez dans le panneau Insertion et choisissez Mise en page

AP Div Draw

Div PA Tirage


Utilisez le curseur pour dessiner une zone sur la page. La boîte bleue qui apparaît est votre div PA.


Étape 2 - Position et taille de la div PA

Pour déplacer la balise div PA (qui est juste une balise div qui a une certaine CSS contrôler sa mise en forme) saisir la poignée de petits blancs à sa partie supérieure gauche et faites glisser son interposition à votre page.

Re-size AP DiV

Redimensionner Div PA


Pour redimensionner la div PA que vous pourriez attraper un de ses points d'ancrage bleus et faites glisser jusqu'à la taille souhaitée.


Etape 3 - Insérez un accordéon Spry

Cliquez à l'intérieur du div PA pour activer le curseur à l'intérieur, puis à partir du panneau Insertion choisissez Mise en page

Spry inserted

Spry insérées


Un Accordéon Spry apparaît à l'intérieur de la div PA que vous avez dessiné.


Étape 4 - Ajouter plusieurs panneaux

L'Accordéon Spry utilise des panneaux pour permettre aux utilisateurs de révéler ou de dissimuler son contenu dans un mouvement semblable à un accordéon, d'où le nom. Je suis en ajoutant un peu plus.

Avec l'Accordéon Spry sélectionnés (que vous pouvez faire en cliquant sur l'étiquette de couleur cyan Accordéon Spry). Utilisez le panneau Propriétés pour ajouter plus d'étiquettes.

Labels in properties

Les étiquettes dans les propriétés


Utilisez le bouton pour ajouter deux panneaux d'autant plus que vous voyez ceci:

More labels added to spry

Plus étiquettes ajouté à Spry


Étape 5 - Modifier le contenu de l'Spry

Lorsque vous placez le curseur sur chaque onglet Label sur la Accordéon Spry, un symbole apparaîtra petit oeil. En cliquant sur ce symbole va ouvrir le contenu de cet onglet en particulier vous permettant de le modifier.

Eye and contents

Eye et le contenu


Soulignant le texte de l'étiquette vous permet de changer le nom du label. Soulignant le texte "Contenu" vous permet d'éditer le texte contenu à l'intérieur du Spry.

Astuce: copiez et collez de grandes quantités de texte ici.

Filled Spry

Rempli Spry


Répétez jusqu'à ce que vous avez du contenu et des noms pour chaque étiquette.

Pour voir comment fonctionne l'Accordéon Spry, activez Live View et cliquez sur chaque onglet Panneaux à son tour. Nice, non?

Live View Button

En direct le bouton Afficher


Gardez le Live View actifs à partir d'ici vous pouvez donc suivre les changements que vous apportez.


Étape 6 - Modifier le style de la onglets du panneau

Jetez un oeil sur le panneau Styles CSS, vous verrez une feuille de style nommée SpryAccordion.css:

Spry CSS

Spry CSS


Cliquez sur la flèche pour révéler le contenu de la feuille de style et vous verrez une liste de styles classe de composés, qui contrôle les aspects individuels de la façon dont l'Accordéon Spry ressemble.

Panel Tab Style

Style de l'onglet de panneau


Vous verrez dans les propriétés CSS que la couleur de fond par défaut est # CCCCCC. Modifiez ce texte à lire # 00CC66 (Astuce: il peut être raccourci à # 0C6)

Green tabs

Onglets verts


Les panneaux se changera en vert.

. AccordionPanelOpen et. AccordionPanelTab et mettre la couleur de fond # 0F9.


Étape 7 - Modifier le style des onglets ciblés

Essayez de cliquer sur les onglets panneau et vous verrez qu'ils deviennent bleus. C'est parce que le CSS de contrôler les propriétés ciblées sont mis au bleu:

Blue Spry

Bleu Spry


Pour changer les effectuez les opérations suivantes dans le CSS:

Pour créer un moment fort pour l'onglet qui est ouvert:

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


Pour s'assurer que les panneaux fermés tandis que les Accordéon Spry est actif sont du même vert que les panneaux fermés lorsque l'Accordéon Spry n'est pas actif:

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

Finished Spry

Fini Spry


Vous pouvez continuer à ajouter ou modifier des paramètres sur n'importe quel et tous les styles de classe sur la feuille de style SpryAccordion.css toutefois vous souhaitez, car les principes sont les mêmes. Allez-y et essayez d'ajouter la couleur au texte, ou changer la police, etc jusqu'à ce que vous créer un style qui vous convient.


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