All Articles Dreamweaver
जोड़ना और संपादित चंचल Dreamweaver में सीएसएस का उपयोग accordions
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.

चंचल accordions एक रमणीय तरीका है जिसमें एक सीमित स्थान में जानकारी की एक बड़ी मात्रा में वितरित करने के लिए कर रहे हैं. वे भी कर रहे हैं


चरण 1 - एपी DIV बनाएँ

मैं यह एक एपी DIV अंदर रखकर एक चंचल की स्थिति को नियंत्रित करने के लिए पसंद है. सम्मिलित पैनल एपी डिव बनाने के लिए जाना और लेआउट का चयन करें

AP Div Draw

एपी डिव ड्रा


कर्सर का प्रयोग करें पृष्ठ पर एक बॉक्स आकर्षित. नीले बॉक्स प्रकट होता है कि अपने एपी डिव है.


चरण 2 - स्थिति और आकार एपी डिव

एपी डिव हटो अपने ऊपर छोड़ दिया पर छोटे सफेद संभाल हड़पने और अपने पृष्ठ के लिए अपने क्षेपक खींचें (जो सिर्फ एक DIV टैग है कि कुछ अपने स्वरूपण नियंत्रित सीएसएस) के लिए.

Re-size AP DiV

एपी DIV का आकार बदलना


एपी डिव का आकार बदलने के आप अपने नीले लंगर अंक में से एक हड़पने के लिए और इच्छित आकार करने के लिए खींचें.


चरण 3 - इनसेट एक चंचल Accordion

एपी डिव के अंदर क्लिक करें कर्सर अंदर सक्रिय है, तब सम्मिलित कक्ष से लेआउट का चयन करें

Spry inserted

चंचल सम्मिलित


एक चंचल Accordion एपी डिव है कि आप आकर्षित अंदर प्रकट होता है.


चरण 4 - और पैनलों जोड़ें

चंचल Accordion पैनल का उपयोग करता है उपयोगकर्ताओं को प्रकट करने के लिए या एक एक accordion के समान आंदोलन में अपनी सामग्री छिपाना, इसलिए नाम की अनुमति है. मैं कुछ और जोड़ रहा हूँ.

चंचल Accordion चयनित के साथ (जो आप सियान रंग चंचल Accordion लेबल पर क्लिक करके कर सकते हैं). गुण पैनल का उपयोग करने के लिए अधिक लेबल को जोड़ने के लिए.

Labels in properties

गुण में लेबल


उपयोग बटन 2 अधिक पैनलों को जोड़ सकते हैं ताकि आप यह देख:

More labels added to spry

और लेबल फुर्तीला


चरण 5 - चंचल की सामग्री संपादित करें

जब आप चंचल Accordion पर प्रत्येक लेबल टैब पर कर्सर हॉवर, एक छोटे से आँख प्रतीक दिखाई देगा. इस प्रतीक पर क्लिक कि विशेष रूप से आप इसे संपादित करने के लिए सक्षम करने टैब की सामग्री खुल जाएगा.

Eye and contents

नेत्र और सामग्री


लेबल के पाठ हाइलाइटिंग आप लेबल का नाम बदलने के लिए अनुमति देता है. हाइलाइटिंग पाठ "सामग्री" आप चंचल अंदर निहित पाठ संपादित करने के लिए अनुमति देता है.

युक्ति: कॉपी और पेस्ट यहाँ बड़े पाठ की मात्रा.

Filled Spry

भरा चंचल


इस दोहराएँ जब तक आप सामग्री और प्रत्येक लेबल के लिए नाम है.

देखने के लिए कैसे चंचल Accordion संचालित, लाइव देखें पर स्विच और बदले में प्रत्येक पैनलों टैब पर क्लिक करें. अच्छा, ठीक है?

Live View Button

दृश्य बटन लाइव


यहाँ से लाइव देखें सक्रिय रखें ताकि आप परिवर्तन आप कर रहे हैं की निगरानी कर सकते हैं.


चरण 6 - पैनल टैब के शैली संपादित करें

सीएसएस शैलियाँ पैनल पर एक नज़र, आप एक शैली SpryAccordion.css नाम शीट देखेंगे:

Spry CSS

चंचल सीएसएस


स्टाइल शीट की सामग्री प्रकट करने के लिए तीर पर क्लिक करें और आप यौगिक कक्षा शैलियों की एक सूची है, जो सभी के कैसे चंचल Accordion लग रहा है की अलग - अलग पहलुओं को नियंत्रित देखेंगे.

Panel Tab Style

पैनल टैब स्टाइल


आप सीएसएस गुण से देख सकते हैं कि डिफ़ॉल्ट पृष्ठभूमि रंग # cccccc है. # 00CC66 (टिप: इस 0C6 # छोटा किया जा सकता है है) पढ़ने के लिए इस पाठ बदलें

Green tabs

ग्रीन टैब्स


पैनलों ग्रीन के बदल जाएगा.

AccordionPanelOpen और AccordionPanelTab. 0F9 # पृष्ठभूमि रंग सेट.


चरण 7 - केंद्रित टैब्स की शैली को संपादित करें

कक्ष टैब पर क्लिक करने की कोशिश करो और आप देखेंगे कि वे नीले बारी. यह है क्योंकि सीएसएस नियंत्रित केंद्रित गुणों नीले रंग के लिए सेट कर रहे हैं:

Blue Spry

ब्लू चंचल


बदल उन्हें सीएसएस में निम्न कार्य करें:

टैब के लिए एक आकर्षण है कि खुला है बनाने के लिए:

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


सुनिश्चित करें कि किसी भी बंद पैनल जबकि चंचल Accordion सक्रिय है बंद पैनल जब चंचल Accordion सक्रिय नहीं है के रूप में एक ही हरा कर रहे हैं बनाने के लिए:

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

Finished Spry

समाप्त चंचल


आप को जोड़ने के लिए या किसी भी और SpryAccordion.css शैली पत्रक लेकिन आप चाहते हैं पर सभी कक्षा शैलियाँ पर पैरामीटर संशोधित करने के लिए जारी है, के रूप में सिद्धांतों वही कर रहे हैं सकता है. आगे बढ़ो और पाठ के लिए रंग जोड़ने या बदलने फ़ॉन्ट, आदि जब तक आप एक शैली है कि आप सूट बनाने का प्रयास करें.


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: