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

الوصول الحر بريميوم

وصول إلى مكتبة والمواد برمتها محور بريميوم ، ملفات المشاريع ، وأول 10 ٪ من كل فيديو تعليمي من دروس المكتبة على الانترنت .

إنشاء حسابك المجاني الآن!

إضافة وتحرير الأكورديونات شيق باستخدام CSS في Dreamweaver
ترجم من قبل مترجم جوجل

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


الخطوة 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 لكن هل ترغب في ذلك ، والمبادئ هي نفسها. والمضي قدما في محاولة لإضافة لون النص ، أو تغيير الخط ، وما إلى ذلك حتى تقوم بإنشاء النمط الذي يناسبك.


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