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

Kostenlose Premium-Zugang

Rufen Sie unsere gesamte Bibliothek von Premium-Hub Artikel, Projekt-Dateien und die ersten 10% des jeweiligen Tutorial-Video aus dem Online-Tutorial-Bibliothek .

Erstellen Sie jetzt Ihren kostenlosen Zugang!

Hinzufügen und Bearbeiten von Spry Akkordeon mit CSS in Dreamweaver
Übersetzt von Google Translate

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.


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