All Articles Dreamweaver
Ajout et modification Accordéons Spry utilisant CSS dans 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.

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.


Comments (0)

You must be logged in to comment. Login Now

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: