All Articles Dreamweaver
إضافة وتحرير الأكورديونات شيق باستخدام CSS في 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.

الأكورديونات شيق هي وسيلة ممتعة لإلقاء كميات كبيرة من المعلومات في مساحة ضيقة. هم أيضا


الخطوة 1 -- إنشاء DIV AP

أود أن السيطرة على الموقف من شيق عن طريق وضعها داخل DIV AP. لإنشاء شعبة AP انتقل إلى لوحة إدراج واختيار تخطيط

AP Div Draw

AP الدرجة رسم


استخدم المؤشر لرسم مربع في الصفحة. المربع الأزرق الذي يظهر هو الخاص AP الدرجة.


الخطوة 2 -- موقف والحجم والدرجة AP

لنقل الدرجة AP (والذي هو مجرد علامة DIV أن لديه بعض السيطرة على تنسيقه CSS) مقبض بيضاء صغيرة في أعلى يسارها واسحب فاصلة لصفحتك.

Re-size AP DiV

تغيير حجم AP DIV


لتغيير حجم الدرجة AP هل يمكن انتزاع واحدة من نقاط ربط الزرقاء واسحب إلى الحجم المطلوب.


الخطوة 3 -- أقحم a الأكورديون شيق

انقر داخل الدرجة أب لتنشيط داخل المؤشر ، ثم من لوحة إدراج اختر تخطيط

Spry inserted

إدراج شيق


والأكورديون شيق يظهر داخل الدرجة AP الذي وجه.


الخطوة 4 -- إضافة المزيد من لوحات

والأكورديون شيق يستخدم لوحات للسماح للمستخدمين لتكشف أو تخفي مضمونها في حركة مشابهة لالأكورديون ، ومن هنا جاءت تسميته. ابن إضافة بعض أكثر من ذلك.

مع الأكورديون شيق المحدد (الذي يمكنك القيام به من خلال النقر على تسمية سماوي اللون شيق الأكورديون). استخدام لوحة خصائص لإضافة المزيد من التسميات.

Labels in properties

تسميات في خصائص


استخدم زر لإضافة المزيد من ألواح 2 حتى ترى هذا :

More labels added to spry

إضافة مزيد من التسميات لشيق


الخطوة 5 -- تحرير محتويات شيق

عندما كنت تحوم المؤشر فوق كل علامة تبويب تسمية على الأكورديون شيق ، سيكون رمزا العين قليلا تظهر. وبالضغط على هذا الرمز فتح محتويات هذا تبويب خاص مما يتيح لك تحريره.

Eye and contents

العين ومحتوياتها


تسليط الضوء على نص تسمية يسمح لك بتغيير اسم التسمية. تسليط الضوء على النص "المحتويات" يسمح لك بتحرير النص الوارد داخل شيق.

نصيحة : نسخ ولصق كميات كبيرة من النص هنا.

Filled Spry

ملأت شيق


كرر هذا حتى يكون لديك محتوى وأسماء لكل التسمية.

لنرى كيف تعمل الأكورديون شيق ، والتبديل على عرض لايف ، وفوق كل تبويب لوحات بدوره. لطيفة ، أليس كذلك؟

Live View Button

يعيش زر عرض


الحفاظ على عرض لايف نشطة من هنا حتى تتمكن من رصد التغيرات كنت القرار.


الخطوة 6 -- تحرير نمط لوحة الجدولة

إلقاء نظرة على لوحة أنماط CSS ، سترى ورقة نمط يدعى SpryAccordion.css :

Spry CSS

شيق المغلق


اضغط على السهم للكشف عن محتويات ورقة الأنماط ، وسوف ترى قائمة من أنماط فئة المركبة ، التي تتحكم في جميع الجوانب الفردية لكيفية الأكورديون شيق يبدو.

Panel Tab Style

لوحة تبويب نمط


سوف نرى من خصائص CSS أن لون الخلفية الافتراضي هو CCCCCC #. تغيير هذا النص ليصبح # 00CC66 (نصيحة : يمكن اختصار هذه إلى # 0C6)

Green tabs

علامات خضراء


سيتم تغيير لوحات الأخضر.

. AccordionPanelOpen وAccordionPanelTab. وتعيين لون الخلفية إلى # 0F9.


الخطوة 7 -- تحرير نمط من علامات المركزة

حاول النقر على لوحة الجدولة وسترى أن تتحول الزرقاء. ذلك لأن السيطرة على CSS يتم تعيين خصائص المركزة إلى اللون الأزرق :

Blue Spry

الزرقاء شيق


لتغييرها قم بما يلي في CSS :

لإنشاء لتسليط الضوء على علامة التبويب التي هي مفتوحة :

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


للتأكد من أن أي لوحات مغلقة بينما الأكورديون شيق نشطة هي نفس الخضراء لوحات مغلقة عندما الأكورديون شيق غير نشط :

  • 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: