All Articles Dreamweaver
Hinzufügen und Bearbeiten von Spry Akkordeon mit 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.

Spry Akkordeon sind eine reizvolle Möglichkeit, in der große Mengen an Informationen auf engstem Raum zu liefern. Sie sind auch eine


Schritt 1 - Erstellen eines AP DIV

Ich mag die Position eines Spry, indem es innerhalb eines AP DIV zu kontrollieren. So erstellen Sie ein AP-Div auf die Insert Systemsteuerung und wählen Sie Layout

AP Div Draw

AP Div zeichnen


Verwenden Sie den Cursor auf ein Feld auf der Seite zu ziehen. Die blaue Box, die erscheint, ist Ihr AP Div.


Schritt 2 - Position und Größe der AP Div

So verschieben Sie den AP-Div (das ist nur ein DIV-Tag, dass einige CSS steuern die Formatierung hat) greifen die kleinen weißen Griff an der Oberseite links und ziehen Sie deren Zwischenschaltung auf Ihre Seite.

Re-size AP DiV

Resize AP-Div-


Um die Größe des AP Div Sie greifen konnte eine seiner blauen Ankerpunkte und ziehen Sie auf die gewünschte Größe.


Schritt 3 - Legen Sie eine Spry Accordion

Klicken Sie in das AP-Div, um den Cursor innerhalb aktivieren, dann aus dem Insert-Systemsteuerung wählen Sie Layout

Spry inserted

Spry eingesetzt


Ein Spry Accordion erscheint im AP-Div, dass Sie zog.


Schritt 4 - Hinzufügen Mehr Panels

Das Spry Accordion verwendet Panels, um Benutzern zu enthüllen oder verbergen ihren Inhalt in eine Bewegung ähnlich einer Ziehharmonika, daher der Name. Ich füge einige mehr.

Mit dem Spry Accordion ausgewählt (die Sie durch Klicken auf die Cyan-farbigen Spry Akkordeon-Label zu tun). Verwenden Sie die Properties Panel um weitere Labels hinzufügen.

Labels in properties

Labels in Immobilien


Verwenden Sie die Taste, um 2 weitere Panels hinzufügen, damit Sie das hier sehen:

More labels added to spry

Weitere Bezeichnungen hinzugefügt spry


Schritt 5 - Bearbeiten Sie den Inhalt des Spry

Wenn Sie den Mauszeiger über jedes Label-Tab auf der Spry Accordion, wird ein wenig Augen-Symbol erscheinen. Klick auf dieses Symbol öffnet sich der Inhalt des jeweiligen Tab ermöglicht Ihnen, es zu bearbeiten.

Eye and contents

Eye und Inhalte


Hervorhebung im Text des Label können Sie auf dem Etikett den Namen zu ändern. Hervorhebung im Text "Inhalt" können Sie den Text innerhalb des Spry enthaltenen bearbeiten.

Tipp: Kopieren und Einfügen von großen Textmengen in hier.

Filled Spry

Gefüllte Spry


Wiederholen Sie diesen Vorgang, bis Sie zufrieden und Namen für jedes Label haben.

Um zu sehen, wie die Spry Accordion betreibt, auf Live-Ansicht wechseln und klicken Sie auf jedes Panels Tab wiederum. Nizza, nicht wahr?

Live View Button

Live View-Taste


Halten Sie die Live View aktiv von hier aus so können Sie Monitor die Änderungen, du machst.


Schritt 6 - Bearbeiten Sie den Stil der Systemsteuerung Tabs

Werfen Sie einen Blick auf die CSS Styles Panel, sehen Sie ein Style Sheet namens SpryAccordion.css:

Spry CSS

Spry CSS


Klicken Sie auf den Pfeil, um den Inhalt der Style Sheet zeigen und Sie erhalten eine Liste der Compound-Klasse Stile, die alle einzelnen Aspekte wie die Spry Accordion aussieht Kontrolle zu sehen.

Panel Tab Style

Panel-Tab-Stil


Sie werden von der CSS-Eigenschaften sehen, dass die Standard-Hintergrundfarbe # CCCCCC ist. Ändern Sie diesen Text # 00CC66 (Tipp: Dies kann zu # 0C6 verkürzt werden) lesen

Green tabs

Grüne Tabs


Die Panels ändert sich auf grün.

. AccordionPanelOpen und. AccordionPanelTab und stellen Sie die Hintergrundfarbe auf # 0F9.


Schritt 7 - Bearbeiten Sie den Stil des Focused Tabs

Versuchen Sie, auf dem Panel Tabs und du wirst sehen, dass sie blau. Dies liegt daran, die CSS Steuerung der Focused Eigenschaften blau dargestellt:

Blue Spry

Blau Spry


Um sie zu ändern gehen Sie wie folgt in die CSS:

So erstellen Sie ein Highlight für die Reiter, die offen ist:

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


Um sicherzustellen, dass keine geschlossene Paneele, während die Spry Accordion aktiv ist, werden die gleichen grün wie die geschlossene Paneele, wenn die Spry Accordion nicht aktiv ist:

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

Finished Spry

Fertige Spry


Sie könnten weiterhin zum Hinzufügen oder Ändern von Parametern über sämtliche Class Styles auf der SpryAccordion.css Stylesheet wie Sie wollen, wie die Prinzipien die gleichen sind. Gehen Sie voran und versuchen Sie Farbe auf den Text oder das Ändern der Schriftart, etc., bis Sie einen Stil, der zu Ihnen passt zu schaffen.


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: