All Articles Dreamweaver
اضافه کردن و ویرایش Accordions با هوش با استفاده از 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.

Accordions چالاک راه لذت بخش است که در آن به ارائه مقادیر زیادی از اطلاعات را در یک فضای محدود. آنها همچنین به


گام 1 -- ایجاد یک DIV AP

من می خواهم برای کنترل موقعیت با هوش با قرار دادن آن در داخل DIV AP. برای ایجاد یک DIV AP برو به پنل قرار دادن و چیدمان (layout) را انتخاب کنید

AP Div Draw

AP DIV قرعه کشی


با استفاده از مکان نما یک جعبه بر روی صفحه رسم کنید. جعبه آبی که به نظر می رسد DIV خود AP است.


مرحله 2 -- موقعیت و اندازه DIV AP

برای حرکت DIV AP (که فقط یک تگ DIV است که برخی از CSS در کنترل قالب بندی آن) گرفتن دسته های کوچک سفید در بالا سمت چپ خود و کشیدن میان چیزهای دیگر گذارند خود را به صفحه خود پست کنید.

Re-size AP DiV

تغییر اندازه AP DIV


برای تغییر اندازه DIV AP شما می توانید از یکی از نقاط لنگر آن آبی و گرفتن و کشیدن به اندازه مورد نظر.


گام 3 -- اضافه کردن ، گذاشتن آکوردئون با هوش

با کلیک در داخل DIV AP داخل مکان نما را فعال و سپس از پانل درج را انتخاب کنید چیدمان

Spry inserted

با هوش درج شده


آکوردئون با هوش به نظر می رسد در داخل DIV AP که شما رسم کرده اید.


گام 4 -- اضافه کردن پانل های بیشتر

آکوردئون با هوش با استفاده از پانل اجازه می دهد تا به کاربران برای آشکار و یا پنهان کردن محتوای آن در یک حرکت مشابه به آکوردئون ، از این رو به نام. من اضافه کردن برخی بیشتر.

با آکوردئون زرنگ انتخاب شده (که شما می توانید با کلیک کردن بر روی برچسب رنگ فیروزه ای آکوردئون با هوش). با استفاده از پنل Properties برای اضافه کردن برچسب های بیشتر.

Labels in properties

برچسب در ملک و املاک


استفاده از را کلیک کنید برای اضافه کردن 2 بیشتر پانل بنابراین این را مشاهده می کنید :

More labels added to spry

بیشتر برچسب به زرنگ ارسال


مرحله 5 -- ویرایش مطالب از با هوش

زمانی که شما شناور مکان نما بر روی نوار برچسب در هر آکوردئون با هوش ، نماد چشم کمی ظاهر خواهد شد. کلیک کردن بر روی این نماد ، محتویات آن تب خاص را قادر می سازد به شما را ویرایش را باز کنید.

Eye and contents

چشم و محتویات


برجسته کردن متن از برچسب به شما اجازه می دهد برای تغییر نام برچسب را. تاکید متن "مطالب" اجازه می دهد تا شما را به ویرایش متن موجود در داخل با هوش است.

نکته : کپی و رب مقدار زیادی از متن را در اینجا.

Filled Spry

پر شده با هوش


تکرار این تا زمانی که شما محتوا و نام برای هر برچسب.

برای دیدن چگونگی آکوردئون با هوش عمل ، در نمایش زنده آن را تغییر و به نوبه خود با کلیک بر روی هر یک از زبانه پانل. خوب ، درست است؟

Live View Button

زنده! دکمه نمایش ها


نمایش زنده فعال نگه دارید از اینجا به آن ، بنابراین شما می توانید تغییرات شما به ما قول میدهید که نظارت.


گام 6 -- سبک زبانهها پانل را ویرایش کنید

نگاهی به پنل سبک CSS ، شما یک شیوه نامه به نام SpryAccordion.css را ببینید :

Spry CSS

با هوش 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.

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: